From aac9ff893193b26df97c82c76efae7fd87608313 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 12 Dec 2024 10:09:55 +0100
Subject: [PATCH] Menu secondary button consistency

---
 client/src/app/menu/menu.component.html |  2 +-
 client/src/app/menu/menu.component.scss | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 0f3c3c511..cd59c6abb 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -1,7 +1,7 @@
 <ng-template #moreInfoButton>
   <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 }"
+      class="more-info-btn peertube-button-link 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>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 49ca41e98..abc73b274 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -160,21 +160,34 @@
   }
 }
 
+.more-info-btn {
+  @include secondary-button(
+    $fg: pvar(--menu-fg),
+    $active-bg: pvar(--menu-bg-600),
+    $hover-bg: pvar(--menu-bg-550),
+    $border-color: pvar(--menu-bg-600)
+  )
+}
+
 .more-info-btn,
 .menu-link {
-  color: pvar(--menu-fg);
-
   my-global-icon {
     color: pvar(--secondary-icon-color);
   }
 
   &.active {
-    &,
+    font-weight: $font-bold;
+
     my-global-icon {
       color: pvar(--menu-fg-600);
     }
+  }
+}
 
-    font-weight: $font-bold;
+.menu-link {
+  color: pvar(--menu-fg);
+
+  &.active {
     background-color: pvar(--menu-bg-600);
   }
 }