Restyle homepage

app/Domain/Icon/FontAwesomeFree.php

@@ -29,9 +29,6 @@ public function icons(): array
             'loginGithub'                               => 'fab fa-github',
 
             // homepage
-            'microblogsPopular'                         => 'far fa-comments',
-            'reputationRanking'                         => 'fas fa-star',
-            'forumNews'                                 => 'fas fa-star',
             'viewersOnlineLocal'                        => 'fas fa-eye',
             'viewersOnlineGlobal'                       => 'fas fa-users',
             'homepageActivityMicroblog'                 => 'far fa-person',

app/Domain/InitialsSvg.php

@@ -10,7 +10,7 @@ public function __construct(private string $initials)
     public function imageSvg(): string
     {
         return <<<svg
-          <div class="default-avatar">
+          <div class="user-avatar default-avatar">
             <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
               <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" fill="currentColor">
                 $this->initials

app/Http/Controllers/HomeController.php

@@ -59,6 +59,7 @@ public function index(): View
             ),
 
             'globalViewers' => $this->globalViewers(),
+            'lookAndFeel'   => 'lookAndFeelModern',
         ])
             ->with('settings', $this->getSettings());
     }

app/Services/Session/Renderer.php

@@ -1,7 +1,7 @@
 <?php
 namespace Coyote\Services\Session;
 
-use Coyote\Domain\Online\SessionRepository;
+use Coyote\Domain\Online\FakeSessionRepository;
 use Coyote\Domain\Online\Viewers;
 use Coyote\Domain\Online\ViewersStore;
 use Coyote\Domain\Spacer;
@@ -13,9 +13,9 @@ class Renderer
     private Spacer $spacer;
 
     public function __construct(
-        private SessionRepository $session,
-        private ViewersStore      $store,
-        private Request           $request,
+        private FakeSessionRepository $session,
+        private ViewersStore          $store,
+        private Request               $request,
     )
     {
         $this->spacer = new Spacer(8);

app/Services/TwigBridge/Extensions/Media.php

@@ -30,7 +30,7 @@ public function userAvatar(?string $photo, string $name): Html
         }
         $photoUrl = $this->photo($photo);
         $htmlUsername = \htmlSpecialChars($name);
-        return new StringHtml('<img class="mw-100" src="' . $photoUrl . '" alt="' . $htmlUsername . '">');
+        return new StringHtml('<img class="user-avatar mw-100" src="' . $photoUrl . '" alt="' . $htmlUsername . '">');
     }
 
     public function logo($filename, $secure = null): string

resources/feature/theme/theme.scss

@@ -21,3 +21,18 @@
     }
   }
 }
+
+@mixin theme {
+  /**
+   * The dark() and light() mixins increase selector specificity.
+   * In some cases, it's necessary to apply a common style to both
+   * themes, overriding a previously defined style. 
+   * Thus, we need to artificially elevate the specificity 
+   * of the style, without actually changing any style.
+   */
+  html.theme-light &,
+  html.theme-dark &,
+  {
+    @content;
+  }
+}

resources/js/components/microblog/comment.vue

@@ -28,26 +28,25 @@
             </a>
           </li>
           <li class="list-inline-item">
-            <a
+            <span
               @click="checkAuth(vote, comment)"
               @mouseenter.once="loadVoters(comment)"
               :aria-label="commentVoters"
               :class="{'vote-active': comment.is_voted}"
-              href="javascript:"
               data-balloon-pos="up"
               data-balloon-break>
               {{ commentLabel }}
-            </a>
+            </span>
           </li>
           <li class="list-inline-item">
-            <a @click="checkAuth(reply)" href="javascript:">
+            <span @click="checkAuth(reply)">
               Odpowiedz
-            </a>
+            </span>
           </li>
           <li v-if="isAuthorized" class="list-inline-item">
-            <a href="javascript:" :data-metadata="comment.metadata" :data-url="comment.url">
+            <span :data-metadata="comment.metadata" :data-url="comment.url">
               Zgłoś
-            </a>
+            </span>
           </li>
         </ul>
 

resources/sass/core.scss

@@ -47,7 +47,6 @@
 @import "core/dark_flash";
 @import "core/dark_footer";
 @import "core/dark_header";
-@import "core/dark_homepage";
 @import "core/dark_input";
 @import "core/dark_job";
 @import "core/dark_job_offers";

resources/sass/core/_dark_topic.scss

@@ -15,7 +15,7 @@ body.theme-dark {
       border-bottom-color: #2f2f2f;
       border-bottom-width: 2px;
 
-      .nav-search {
+      .nav-search { // TODO remove this after new homepage
         .search-bar {
           background-color: #2a2a2a;
 

resources/sass/core/_panels.scss

@@ -6,10 +6,6 @@
   margin-bottom: 18px; // backward compatibility. in bootstrap 3 panel have margin-bottom
 }
 
-.card-default {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
-}
-
 .box {
   > h4 {
     position: relative;

resources/sass/icons/_icons.scss

@@ -90,6 +90,12 @@ $icon-admin-table-sort: $fa-var-sort;
 $icon-admin-table-sort-asc: $fa-var-sort-down;
 $icon-admin-table-sort-desc: $fa-var-sort-up;
 
+@mixin icon {
+  i.fa-fw {
+    @content;
+  }
+}
+
 .fa-square-question:before {
   content: "\f2fd";
 }