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);
}
}