add icons to trending tab (FreeTubeApp#6239)

jlvivero · Dec 7, 2024 · b30efce · b30efce
1 parent 24137ec
commit b30efce
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -52,10 +52,12 @@ import {
   faFileDownload,
   faFileImage,
   faFileVideo,
+  faFilm,
   faFilter,
   faFlask,
   faFire,
   faForward,
+  faGamepad,
   faGauge,
   faGlobe,
   faGrip,
@@ -72,6 +74,7 @@ import {
   faLocationDot,
   faLock,
   faMoneyCheckDollar,
+  faMusic,
   faNetworkWired,
   faNewspaper,
   faPalette,
@@ -166,10 +169,12 @@ library.add(
   faFileDownload,
   faFileImage,
   faFileVideo,
+  faFilm,
   faFilter,
   faFlask,
   faFire,
   faForward,
+  faGamepad,
   faGauge,
   faGlobe,
   faGrip,
@@ -186,6 +191,7 @@ library.add(
   faLocationDot,
   faLock,
   faMoneyCheckDollar,
+  faMusic,
   faNetworkWired,
   faNewspaper,
   faPalette,

diff --git a/src/renderer/views/Trending/Trending.css b/src/renderer/views/Trending/Trending.css
@@ -23,7 +23,7 @@
 .tab {
   text-align: center;
   padding: 15px;
-  font-size: 15px;
+  font-size: 1.1em;
   cursor: pointer;
   align-self: flex-end;
 }
@@ -32,6 +32,10 @@
   font-weight: bold;
 }
 
+.trendingIcon {
+  color: var(--primary-color);
+}
+
 @media only screen and (width <= 680px) {
   .card {
     inline-size: 90%;

diff --git a/src/renderer/views/Trending/Trending.vue b/src/renderer/views/Trending/Trending.vue
@@ -8,7 +8,14 @@
       v-else
       class="card"
     >
-      <h2>{{ $t("Trending.Trending") }}</h2>
+      <h2>
+        <font-awesome-icon
+          :icon="['fas', 'fire']"
+          class="trendingIcon"
+          fixed-width
+        />
+        {{ $t("Trending.Trending") }}
+      </h2>
       <ft-flex-box
         class="trendingInfoTabs"
         role="tablist"
@@ -28,6 +35,11 @@
           @keydown.left="focusTab($event, 'movies')"
           @keydown.right="focusTab($event, 'music')"
         >
+          <font-awesome-icon
+            :icon="['fas', 'fire']"
+            class="trendingIcon"
+            fixed-width
+          />
           {{ $t("Trending.Default").toUpperCase() }}
         </div>
         <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
@@ -44,6 +56,11 @@
           @keydown.left="focusTab($event, 'default')"
           @keydown.right="focusTab($event, 'gaming')"
         >
+          <font-awesome-icon
+            :icon="['fas', 'music']"
+            class="trendingIcon"
+            fixed-width
+          />
           {{ $t("Trending.Music").toUpperCase() }}
         </div>
         <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
@@ -60,6 +77,11 @@
           @keydown.left="focusTab($event, 'music')"
           @keydown.right="focusTab($event, 'movies')"
         >
+          <font-awesome-icon
+            :icon="['fas', 'gamepad']"
+            class="trendingIcon"
+            fixed-width
+          />
           {{ $t("Trending.Gaming").toUpperCase() }}
         </div>
         <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
@@ -76,6 +98,11 @@
           @keydown.left="focusTab($event, 'gaming')"
           @keydown.right="focusTab($event, 'default')"
         >
+          <font-awesome-icon
+            :icon="['fas', 'film']"
+            class="trendingIcon"
+            fixed-width
+          />
           {{ $t("Trending.Movies").toUpperCase() }}
         </div>
       </ft-flex-box>