Fix menu active/hover colors

Chocobozzz · Nov 29, 2024 · 21d4de3 · 21d4de3
1 parent e560ec0
commit 21d4de3
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 61 deletions.
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
@@ -1,9 +1,16 @@
 <ng-template #moreInfoButton>
-  <my-button i18n class="mt-2 d-block" theme="secondary" icon="help" i18n-title title="More info" i18n ptRouterLink="/about" ptRouterLinkActive="active">
-    @if (!collapsed) {
-      More info
-    }
-  </my-button>
+  <div class="more-info-btn-container">
+    <a
+      class="more-info-btn peertube-button-link secondary-button peertube-button-icon mt-2 d-block" [ngClass]="{ 'icon-only': collapsed }"
+      routerLink="/about" i18n-title title="More info" routerLinkActive="active"
+    >
+      <my-global-icon iconName="help"></my-global-icon>
+
+      @if (!collapsed) {
+        More info
+      }
+    </a>
+  </div>
 </ng-template>
 
 <div class="menu-container" [ngClass]="{ collapsed: collapsed, 'logged-in': loggedIn }">

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
@@ -89,7 +89,7 @@
 .menu-button,
 .block-title,
 .about .description,
-.about my-button {
+.about .more-info-btn-container {
   @include padding-left(var(--co-menu-x-padding));
   @include padding-right(var(--co-menu-x-padding));
 }
@@ -107,41 +107,6 @@
   }
 }
 
-.collapsed {
-  .menu-block,
-  .toggle-menu-container,
-  .about {
-    &::after {
-      width: 28px;
-      margin: 1rem auto;
-    }
-  }
-
-  .main-menu-wrapper {
-    max-height: 100%;
-  }
-
-  .main-menu {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-
-  .toggle-menu-container {
-    text-align: center;
-  }
-
-  .menu-link {
-    justify-content: center;
-
-    my-global-icon {
-      color: pvar-fallback(--menu-fg, --fg-400);
-    }
-  }
-}
-
 .block-title {
   font-weight: $font-bold;
   color: pvar-fallback(--menu-fg, --fg-350);
@@ -156,7 +121,6 @@
   display: flex;
   align-items: center;
 
-  color: pvar-fallback(--menu-fg, --fg-400);
   white-space: normal;
   word-break: break-word;
   transition: background-color .1s ease-in-out;
@@ -172,16 +136,6 @@
     background-color: pvar-fallback(--menu-bg, --bg-secondary-450);
   }
 
-  &.active {
-    &,
-    my-global-icon {
-      color: pvar(--fg) !important;
-    }
-
-    font-weight: $font-bold;
-    background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
-  }
-
   my-global-icon {
     width: 22px;
     height: 22px;
@@ -206,19 +160,61 @@
   }
 }
 
-my-button[theme=secondary]  {
+.more-info-btn,
+.menu-link {
   color: pvar-fallback(--menu-fg, --fg-400);
-}
 
-my-button[theme=secondary] ::ng-deep my-global-icon,
-.menu-link my-global-icon {
-  color: pvar(--secondary-icon-color) !important;
+  my-global-icon {
+    color: pvar(--secondary-icon-color);
+  }
+
+  &.active {
+    &,
+    my-global-icon {
+      color: pvar(--fg);
+    }
+
+    font-weight: $font-bold;
+    background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
+  }
 }
 
 .collapsed {
-  my-button[theme=secondary] ::ng-deep my-global-icon,
-  .menu-link my-global-icon {
-    color: pvar-fallback(--menu-fg, --fg-200) !important;
+  .menu-block,
+  .toggle-menu-container,
+  .about {
+    &::after {
+      width: 28px;
+      margin: 1rem auto;
+    }
+  }
+
+  .main-menu-wrapper {
+    max-height: 100%;
+  }
+
+  .main-menu {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .toggle-menu-container {
+    text-align: center;
+  }
+
+  .menu-link,
+  .more-info-btn {
+    border: 0 !important;
+    justify-content: center;
+
+    &:not(.active) {
+      my-global-icon {
+        color: pvar-fallback(--menu-fg, --fg-300);
+      }
+    }
   }
 }
 

diff --git a/client/src/sass/include/_button-mixins.scss b/client/src/sass/include/_button-mixins.scss
@@ -211,8 +211,12 @@
     line-height: $width;
     top: $top;
     right: $right;
+  }
 
-    @include margin-right($margin-right);
+  &:not(.icon-only) {
+    my-global-icon {
+      @include margin-right($margin-right);
+    }
   }
 }