Update icon for channels button on side nav (#5273)

* * Update icon for channels button on side nav * * Reduce size of new icon * * Align new icon manually * * Update mobile menu item icon
FreeTubeApp · Jul 25, 2024 · 0ac277a · 0ac277a
1 parent 0e72be4
commit 0ac277a
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.css b/src/renderer/components/side-nav-more-options/side-nav-more-options.css
@@ -69,6 +69,11 @@
     margin-block-start: 0.5em;
   }
 
+  .navIcon.fa-user-check {
+    /* Align icon according to torso */
+    transform: translateX(0.2em);
+  }
+
   .moreOption {
     display: block;
   }

diff --git a/src/renderer/components/side-nav-more-options/side-nav-more-options.vue b/src/renderer/components/side-nav-more-options/side-nav-more-options.vue
@@ -37,7 +37,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            :icon="['fas', 'list']"
+            :icon="['fas', 'user-check']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width

diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
@@ -78,9 +78,19 @@
 }
 
 .navIcon {
+  block-size: 1em;
+  inline-size: 1.25em;
   margin-inline-start: 10px;
 }
 
+.navIcon.fa-user-check {
+  /* This icon is too big by default */
+  inline-size: 1em;
+
+  /* Align icon according to torso */
+  transform: translateX(0.2em);
+}
+
 .navChannel .navLabel {
   overflow: hidden;
   margin-inline-start: 40px;
@@ -94,6 +104,7 @@
   position: absolute;
   inset-block-start: 50%;
   transform: translateY(-50%);
+  text-align: center;
 }
 
 .channelThumbnail {
@@ -139,6 +150,11 @@
   block-size: 1.3em;
 }
 
+.closed .navIconExpand.fa-user-check {
+  /* This icon is too big by default */
+  block-size: 1.15em;
+}
+
 .closed .navLabel {
   margin-inline-start: 0;
   inline-size: 100%;

diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
@@ -42,7 +42,7 @@
           class="thumbnailContainer"
         >
           <font-awesome-icon
-            :icon="['fas', 'list']"
+            :icon="['fas', 'user-check']"
             class="navIcon"
             :class="applyNavIconExpand"
             fixed-width

diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -89,6 +89,7 @@ import {
   faTimes,
   faTimesCircle,
   faTrash,
+  faUserCheck,
   faUsers,
   faUsersSlash,
 } from '@fortawesome/free-solid-svg-icons'
@@ -187,6 +188,7 @@ library.add(
   faTimes,
   faTimesCircle,
   faTrash,
+  faUserCheck,
   faUsers,
   faUsersSlash,