From 94f02e2d02c3643473c4bd1c769aec21260e84e9 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sat, 14 Dec 2024 13:41:54 +0100
Subject: [PATCH] feat(ui): colors for active links

---
 front/src/components/ui/Link.vue | 132 +------------------------------
 front/src/style/colors.scss      |  41 +++++++---
 2 files changed, 33 insertions(+), 140 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index c89888e50..e4eb7e253 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -15,10 +15,10 @@ const isExternalLink = computed(() => {
 </script>
 
 <template>
-  <a v-if="isExternalLink" :class="[$style.external, $style[colorClass]]" :href="to?.toString()" target="_blank">
+  <a v-if="isExternalLink" :class="[$style.external, colorClass, 'is-colored']" :href="to?.toString()" target="_blank">
       <slot />
   </a>
-  <RouterLink v-if="to && !isExternalLink" :to="to" :class="$style[colorClass]">
+  <RouterLink v-if="to && !isExternalLink" :to="to" :class="[colorClass, 'is-colored']">
     <i v-if="icon" :class="['bi', icon]" />
     <slot />
   </RouterLink>
@@ -56,7 +56,7 @@ const isExternalLink = computed(() => {
       font-size:1.4em;
     }
 
-    &:not(:hover) {
+    &:not(:hover):not(:global(.active)) {
       text-decoration:none;
       background-color:transparent;
       border-color:transparent;
@@ -64,132 +64,6 @@ const isExternalLink = computed(() => {
 
     transition:background-color .3s, border-color .2s;
 
-    @include light-theme {
-      &.is-secondary.is-outline {
-        --fw-bg-color: var(--fw-gray-600);
-        --fw-text-color: var(--fw-gray-700);
-
-        &[disabled] {
-          --fw-bg-color: var(--fw-gray-600) !important;
-          --fw-text-color: var(--fw-gray-600) !important;
-        }
-
-        &.is-hovered,
-        &:hover {
-          --fw-bg-color: var(--fw-gray-700) !important;
-          --fw-text-color: var(--fw-gray-800) !important;
-        }
-
-        &.is-active,
-        &:active {
-          --fw-text-color: var(--fw-red-010) !important;
-          border: 1px solid var(--fw-gray-600) !important;
-        }
-      }
-
-      &.is-outline {
-        &:not(:active):not(.is-active) {
-          background-color: transparent !important;
-          --fw-text-color:--fw-gray-400;
-        }
-      }
-
-      &.is-ghost {
-        &:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
-          background-color: transparent !important;
-          border-color: transparent !important;
-          --fw-text-color:--fw-gray-400;
-        }
-      }
-    }
-
-    @include dark-theme {
-      &.is-secondary.is-outline {
-        --fw-bg-color: var(--fw-gray-500);
-        --fw-text-color: var(--fw-gray-400);
-
-        &[disabled] {
-          --fw-bg-color: var(--fw-gray-600) !important;
-          --fw-text-color: var(--fw-gray-700) !important;
-        }
-
-        &.is-hovered,
-        &:hover {
-          --fw-bg-color: var(--fw-gray-600) !important;
-          --fw-text-color: var(--fw-gray-500) !important;
-        }
-
-        &.is-active,
-        &:active {
-          --fw-text-color: var(--fw-red-010) !important;
-          --fw-bg-color: var(--fw-gray-700) !important;
-          border: 1px solid var(--fw-gray-600) !important;
-        }
-      }
-
-      &.is-outline {
-        &:not(:active):not(.is-active) {
-          background-color: transparent !important;
-        }
-      }
-
-      &.is-ghost {
-        &:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
-          background-color: transparent !important;
-          border-color: transparent !important;
-        }
-      }
-
-
-    &.is-aligned-center {
-      justify-content: center;
-    }
-
-    &.is-aligned-left {
-      justify-content: flex-start;
-    }
-
-    &.is-aligned-right {
-      justify-content: flex-end;
-    }
-
-    &.is-shadow {
-      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
-    }
-
-    &:not(.icon-only):not(.is-auto) {
-      min-width: 8.5rem;
-    }
-
-    &.is-full {
-      display: block;
-    }
-
-    &.is-round {
-      border-radius: 100vh;
-    }
-
-    &[disabled] {
-      font-weight: normal;
-      pointer-events: none;
-    }
-
-    &.is-loading {
-      @extend .is-active;
-
-      > span {
-        opacity: 0;
-      }
-    }
-
-    i.bi {
-      font-size: 1.2rem;
-    }
-
-    i.bi + span:not(:empty) {
-      margin-left: 1ch;
-    }
-    }
   }
 
 
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index b6c2a945f..7460d07c6 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -98,7 +98,7 @@
 
 .funkwhale {
   @include light-theme {
-    &.is-primary {
+    .is-primary {
       --fw-bg-color: var(--fw-blue-400);
       --fw-text-color: var(--fw-blue-010);
 
@@ -116,11 +116,14 @@
         &.is-active,
         &:active {
           --fw-bg-color: var(--fw-blue-600);
+          &.router-link-exact-active {
+            --fw-bg-color: var(--fw-blue-700);
+          }
         }
       }
     }
 
-    &.is-secondary {
+    .is-secondary {
       --fw-bg-color: var(--fw-gray-200);
       --fw-text-color: var(--fw-gray-900);
 
@@ -135,13 +138,17 @@
         }
 
         &.is-active,
+        &.active,
         &:active {
           --fw-bg-color: var(--fw-gray-400);
+          &.router-link-exact-active {
+            --fw-bg-color: var(--fw-gray-500);
+          }
         }
       }
     }
 
-    &.is-destructive {
+    .is-destructive {
       --fw-bg-color: var(--fw-red-400);
       --fw-text-color: var(--fw-red-010);
 
@@ -157,15 +164,19 @@
         }
 
         &.is-active,
+        &.active,
         &:active {
           --fw-bg-color: var(--fw-red-700);
+          &.router-link-exact-active {
+            --fw-bg-color: var(--fw-red-800);
+          }
         }
       }
     }
   }
 
   @include dark-theme {
-    &.is-primary {
+    .is-primary {
       --fw-bg-color: var(--fw-blue-600);
       --fw-text-color: var(--fw-blue-010);
 
@@ -181,35 +192,42 @@
         }
 
         &.is-active,
+        &.active,
         &:active {
           --fw-bg-color: var(--fw-blue-800);
+          &.router-link-exact-active {
+            --fw-bg-color: var(--fw-blue-900);
+          }
         }
       }
     }
 
-    &.is-secondary {
+    .is-secondary {
       --fw-bg-color: var(--fw-gray-700);
       --fw-text-color: var(--fw-red-010);
 
       &.is-colored {
-        &[disabled] {
-          --fw-bg-color: var(--fw-gray-600) !important;
-          --fw-text-color: var(--fw-gray-950) !important;
-        }
-
         &.is-hovered,
         &:hover {
           --fw-bg-color: var(--fw-gray-800);
         }
 
         &.is-active,
+        &.active,
         &:active {
           --fw-bg-color: var(--fw-gray-900);
+          &.router-link-exact-active {
+            --fw-bg-color: var(--fw-gray-950);
+          }
         }
       }
+      &[disabled] {
+        --fw-bg-color: var(--fw-gray-600)
+        --fw-text-color: var(--fw-gray-950)
+      }
     }
 
-    &.is-destructive {
+    .is-destructive {
       --fw-bg-color: var(--fw-red-600);
       --fw-text-color: var(--fw-red-010);
 
@@ -225,6 +243,7 @@
         }
 
         &.is-active,
+        &.active,
         &:active {
           --fw-bg-color: var(--fw-red-800);
         }