Add more color cards in the Community pages

app/Widgets/AdminMain/adminmain.tpl

@@ -4,7 +4,8 @@
     <div>
         <br />
         <ul class="list middle card shadow">
-            <li class="block">
+            <li class="block color cyan">
+                <i class="material-symbols main">hub</i>
                 <span class="primary icon">
                     <i class="material-symbols blue">linked_services</i>
                 </span>

app/Widgets/CommunitiesServer/_communitiesserver.tpl

@@ -4,20 +4,23 @@
             <span class="primary icon active" onclick="history.back()">
                 <i class="material-symbols">arrow_back</i>
             </span>
+            <span class="primary icon bubble color {$server|stringToColor}">
+                <i class="material-symbols">workspaces</i>
+            </span>
             {if="is_array($nodes) && count($nodes) > 0"}
                 <span class="control icon gray">
                     {$nodes|count}
                 </span>
             {/if}
             <div>
-                <p>
+                <p class="line">{$server}</p>
+                <p class="line">
                     {if="isset($item->name)"}
                         {$item->name}
                     {else}
                         {$c->__('page.communities')}
                     {/if}
                 </p>
-                <p class="line">{$server}</p>
             </div>
         </li>
     </ul>

app/Widgets/CommunitiesServers/_communitiesservers.tpl

@@ -7,7 +7,7 @@
         </li>
     </ul>
 {else}
-    <ul class="list flex third middle active">
+    <ul class="list flex third card shadow middle active">
         <li class="subheader">
             <div>
                 <p>{$c->__('communities.servers')}</p>
@@ -15,18 +15,17 @@
         </li>
         {loop="$servers"}
             {if="!filter_var($value->server, FILTER_VALIDATE_EMAIL)"}
-                <li class="block
+                <li class="block color {$value->server|stringToColor}
                     {if="$value->occupants == 0"}faded{/if}"
                     onclick="MovimUtils.reload('{$c->route('community', $value->server)}')">
-                    <span class="primary icon bubble">
-                        <img loading="lazy" src="{$value->server|avatarPlaceholder}">
+                    <span class="primary icon bubble color transparent">
+                        <i class="material-symbols">workspaces</i>
                     </span>
                     <div>
                         <p class="line" title="{$value->server} - {$value->name}">
                             {$value->server}
-                            <span class="second">{$value->name}</span>
                         </p>
-                        <p>{$c->__('communities.counter', $value->occupants)}</p>
+                        <p class="line">{$c->__('communities.counter', $value->occupants)}<span class="second">• {$value->name}</span></p>
                     </div>
                 </li>
             {/if}

app/Widgets/CommunityHeader/_communityheader.tpl

@@ -1,3 +1,9 @@
+<header class="big top color {$contact->color}"
+    style="
+            background-image:
+            linear-gradient(to top, rgba(23,23,23,0.9) 0, rgba(23,23,23,0.6) 5rem, rgba(23,23,23,0) 12rem), url('{$info->getPicture(\Movim\ImageSize::XXL)}');
+    ">
+
 {if="$info != null && $info->pubsubpublishmodel != null && $info->pubsubpublishmodel != 'publishers'"}
     {if="$info->pubsubpublishmodel == 'open' || ($info->pubsubpublishmodel == 'subscribers' && $subscription != null)"}
         <a class="button action color" title="{$c->__('menu.add_post')}" href="{$c->route('publish', [$server, $node])}">
@@ -11,9 +17,6 @@
 {/if}
 <ul class="list thick">
     <li>
-        <span class="primary icon active gray" onclick="history.back()">
-            <i class="material-symbols">arrow_back</i>
-        </span>
         {if="$info != null"}
             <span class="primary icon bubble active"
                     onclick="MovimUtils.reload('{$c->route('community', [$server, $info->node])}')">
@@ -45,7 +48,16 @@
                     {$node}
                 {/if}
             </p>
-            <p class="line on_mobile" {if="$info != null && $info->description"}title="{$info->description|strip_tags}"{/if}>
+            <p class="line on_desktop" {if="$info != null && $info->description"}title="{$info->description|strip_tags}"{/if}>
+                <a href="#" onclick="MovimUtils.reload('{$c->route('community', $server)}')">
+                    {$server}
+                </a>
+            </p>
+            <p class="line on_mobile">
+                <a href="#" onclick="MovimUtils.reload('{$c->route('community', $server)}')">
+                    {$server}
+                </a>
+                •
                 {if="$num > 0"}
                     <i class="material-symbols">article</i> {$num}
                 {/if}
@@ -58,11 +70,8 @@
                     {$server}
                 {/if}
             </p>
-            <p class="line on_desktop">
-                <a href="{$c->route('community', [$server])}">
-                    {$server}
-                </a>
-            </p>
         </div>
     </li>
 </ul>
+
+</header>

app/Widgets/CommunityHeader/communityheader.tpl

@@ -1,5 +1,5 @@
-<header id="community_header">
+<div id="community_header">
     {autoescape="off"}
         {$c->prepareHeader($server, $node)}
     {/autoescape}
-</header>
+</div>