From f3b09edcbb95342d56406e5584361605f5cf7fa6 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 6 Jan 2025 14:10:29 +0100
Subject: [PATCH] fix(ui) pre-fix-regressions

---
 front/src/components/common/ContentForm.vue   |  4 +--
 .../components/common/RenderedDescription.vue |  1 +
 front/src/components/ui/Button.vue            | 12 +++++--
 front/src/components/ui/Layout.vue            |  6 +---
 front/src/components/ui/Link.vue              |  4 ---
 front/src/components/ui/Tabs.vue              |  7 ++---
 front/src/components/ui/input.scss            | 12 ++++---
 front/src/components/ui/layout/Section.vue    |  4 +--
 front/src/style/colors.scss                   |  6 ++--
 front/src/ui/components/Sidebar.vue           | 31 +++----------------
 front/src/ui/modals/Languages.vue             |  2 +-
 11 files changed, 33 insertions(+), 56 deletions(-)

diff --git a/front/src/components/common/ContentForm.vue b/front/src/components/common/ContentForm.vue
index a863fdb43..c48219582 100644
--- a/front/src/components/common/ContentForm.vue
+++ b/front/src/components/common/ContentForm.vue
@@ -88,14 +88,14 @@ onMounted(async () => {
 <template>
         <Button
           @click.prevent="isPreviewing = false"
-          :class="[{active: !isPreviewing}, 'item']"
+          :aria-pressed="!isPreviewing"
           title="write"
         >
           {{ t('components.common.ContentForm.button.write') }}
         </Button>
         <Button
           @click.prevent="isPreviewing = true"
-          :class="[{active: isPreviewing}, 'item']"
+          :aria-pressed="!isPreviewing"
           title="preview"
         >
           {{ t('components.common.ContentForm.button.preview') }}
diff --git a/front/src/components/common/RenderedDescription.vue b/front/src/components/common/RenderedDescription.vue
index ba839f52f..0f3505b90 100644
--- a/front/src/components/common/RenderedDescription.vue
+++ b/front/src/components/common/RenderedDescription.vue
@@ -10,6 +10,7 @@ import clip from 'text-clipper'
 
 import Button from '~/components/ui/Button.vue'
 import Alert from '~/components/ui/Alert.vue'
+import Link from '~/components/ui/Link.vue'
 
 interface Events {
   (e: 'updated', data: unknown): void
diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index e318336b9..b95c65bfc 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -8,7 +8,8 @@ import { type AlignmentProps, align } from '~/composables/alignment'
 import Loader from '~/components/ui/Loader.vue'
 
 const props = defineProps<{
-  thin?: true
+  thinFont?: true
+  lowHeight? : true
 
   isActive?: boolean
   isLoading?: boolean
@@ -33,7 +34,7 @@ const isIconOnly = computed(() => !!props.icon && !slots.default)
 const internalLoader = ref(false)
 const isLoading = computed(() => props.isLoading || internalLoader.value)
 
-const fontWeight = props.thin ? 400 : 900
+const fontWeight = props.thinFont ? 400 : 900
 
 const button = ref()
 
@@ -68,7 +69,8 @@ onMounted(() => {
         'is-icon-only': isIconOnly,
         'has-icon': !!icon,
         'is-round': round,
-        'is-shadow': shadow
+        'is-shadow': shadow,
+        'is-low-height': lowHeight
     }"
     @click="click"
   >
@@ -101,6 +103,10 @@ onMounted(() => {
       padding: var(--padding);
     }
 
+    .is-low-height {
+      --padding: 12px;
+    }
+
     // Font
 
     font-family: $font-main;
diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index d799b4ee2..0b2a49514 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   noWrap?: true,
 } & { [P in "stack" | "grid" | "flex" | "columns" | "row" | "page"]?: true | string }
   & { [C in "nav" | "aside" | "header" | "footer" | "main" | "label" | "form" | "h1" | "h2" | "h3" | "h4" | "h5"]?: true }
-  & { [G in 'no-gap' | 'gap-16' | 'gap-12' | 'gap-8' | 'gap-auto' ]?: true }
+  & { [G in 'no-gap' | 'gap-4' | 'gap-8' | 'gap-16' | 'gap-12' | 'gap-auto' ]?: true }
   & (PastelProps | ColorProps | DefaultProps)
   & RaisedProps
   & VariantProps
@@ -100,9 +100,5 @@ const attributes = computed(() => ({
     flex-direction: row;
     flex-wrap: v-bind('props.noWrap ? "nowrap" : "wrap"');
   }
-
-  > h1, > h2, > h3, > h4, > h5 {
-    margin-top: 0px;
-  }
 }
 </style>
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index f1ee1d4b9..9bcd2a9c6 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -65,10 +65,6 @@ onMounted(() => {
 
 <style module lang="scss">
 
-  .force-underline {
-    text-decoration: underline;
-  }
-
   .link {
 
     // Layout
diff --git a/front/src/components/ui/Tabs.vue b/front/src/components/ui/Tabs.vue
index 360238a4d..4dc0aa310 100644
--- a/front/src/components/ui/Tabs.vue
+++ b/front/src/components/ui/Tabs.vue
@@ -2,8 +2,6 @@
 import { TABS_INJECTION_KEY } from '~/injection-keys'
 import { provide, reactive, ref, watch } from 'vue'
 
-import Button from '~/components/ui/Button.vue'
-
 const currentTab = ref()
 const tabs = reactive([] as string[])
 const icons = reactive([] as string[])
@@ -24,16 +22,15 @@ watch(() => tabs.length, (to, from) => {
 <template>
   <div class="funkwhale tabs">
     <div class="tabs-header">
-      <Button
+      <button
         v-for="(tab, index) in tabs" :key="tab" :class="{ 'is-active': currentTab === tab }"
-        ghost
         @click="currentTab = tab"
         @keydown.left="currentTab = tabs[(tabs.findIndex(t => t === currentTab) - 1 + tabs.length) % tabs.length]"
         @keydown.right="currentTab = tabs[(tabs.findIndex(t => t === currentTab) + 1) % tabs.length]" class="tabs-item">
         <div class="is-spacing">{{ tab }}</div>
         <label v-if="icons[index]" class="is-icon">{{ icons[index] }}</label>
         <label>{{ tab }}</label>
-      </Button>
+      </button>
 
       <div class="tabs-right">
         <slot name="tabs-right" />
diff --git a/front/src/components/ui/input.scss b/front/src/components/ui/input.scss
index 9717206d9..1c0f9ff58 100644
--- a/front/src/components/ui/input.scss
+++ b/front/src/components/ui/input.scss
@@ -21,14 +21,16 @@
     border-radius: var(--fw-border-radius);
     cursor: text;
 
-    &:focus-visible {
-      outline: none !important;
-    }
     &:hover {
-      box-shadow: inset 0 0 0 4px var(--border-color)
+      box-shadow: inset 0 0 0 4px var(--border-color);
     }
+
     &:focus {
-      box-shadow: inset 0 0 0 4px var(--focus-ring-color)
+      box-shadow: inset 0 0 0 4px var(--focus-ring-color);
+
+      &:focus-visible {
+        outline: none;
+      }
     }
 
     &::placeholder {
diff --git a/front/src/components/ui/layout/Section.vue b/front/src/components/ui/layout/Section.vue
index 95813413a..053174a31 100644
--- a/front/src/components/ui/layout/Section.vue
+++ b/front/src/components/ui/layout/Section.vue
@@ -47,7 +47,7 @@ const headerGrid =
         <Spacer grow />
         <!-- Action! You can either specify `to` or `onClick`. -->
         <Button v-if="props.action && 'onClick' in props.action"
-          ghost thin auto align-self="baseline"
+          ghost thinFont auto align-self="baseline"
           style="grid-column:-1;"
           :onClick="props.action.onClick"
           v-bind="$attrs"
@@ -55,7 +55,7 @@ const headerGrid =
           {{ props.action.text }}
         </Button>
         <Link v-if="props.action && 'to' in props.action"
-          ghost force-underline thin align-self="baseline"
+          ghost force-underline thinFont align-self="baseline"
           :to="props.action.to"
           v-bind="$attrs"
         >
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 9e30b95ab..ec1eeabb1 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -324,7 +324,7 @@
     --disabled-border-color:var(--fw-gray-950);
 
     &.raised{
-      --background-color:var(--fw-gray-850);
+      --background-color:var(--fw-gray-950);
       --border-color:var(--fw-gray-600);
       --link-color:var(--fw-gray-400);
       --link-hover-color:var(--fw-gray-200);
@@ -583,9 +583,9 @@
         background-color:var(--disabled-background-color);
       }
       // Link
-      &.active {
+      /* &.active {
         border-color: var(--link-active-border-color);
-      }
+      } */
       &.router-link-exact-active {
         background-color: var(--link-exact-active-background-color, var(--active-background-color));
         border-color: var(--link-exact-active-border-color);
diff --git a/front/src/ui/components/Sidebar.vue b/front/src/ui/components/Sidebar.vue
index b1d08025f..f4d63860c 100644
--- a/front/src/ui/components/Sidebar.vue
+++ b/front/src/ui/components/Sidebar.vue
@@ -35,8 +35,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
 </script>
 
 <template>
-  <Layout aside default solid gap-12 :class="[$style.sidebar, $style['sticky-content']]" style="background-color: var(--fw-gray-950);">
-  <!-- TODO: Fit working sidebar background color  -->
+  <Layout aside default raised solid gap-12 :class="[$style.sidebar, $style['sticky-content']]">
     <Layout header flex no-gap style="justify-content:space-between; padding-right:8px;">
       <Link
         :to="{name: logoUrl}"
@@ -48,7 +47,7 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
         </i>
       </Link>
 
-      <Layout nav no-gap flex style="align-items: center;">
+      <Layout nav gap-4 flex style="align-items: center;">
         <Link
           v-if="store.state.auth.availablePermissions['settings'] || store.state.auth.availablePermissions['moderation']"
           to="/manage/settings"
@@ -186,15 +185,15 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
     <h3>{{ t('components.Sidebar.link.channels') }}</h3>
     <Spacer grow />
     <Layout nav flex no-gap style="justify-content: center">
-      <Link thin to="/about">
+      <Link thinFont to="/about">
         {{ t('components.Sidebar.link.about') }}
       </Link>
       <Spacer shrink />
-      <Link thin to="/privacy">
+      <Link thinFont to="/privacy">
         Privacy
       </Link>
       <Spacer shrink />
-      <Link thin to="/legal">
+      <Link thinFont to="/legal">
         Legal
       </Link>
     </Layout>
@@ -216,10 +215,8 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
       a,
       button.button {
         height: 40px;
-        width: 40px;
         padding: 10px;
         margin-left: 4px;
-
       }
 
       .menu {
@@ -305,15 +302,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
     .search {
       padding: 0 4px;
       margin-bottom: 28px;
-
-      input {
-        height: 48px;
-
-        &:focus {
-          border-color: var(--fw-gray-100);
-        }
-
-      }
     }
 
     > h3 {
@@ -325,15 +313,6 @@ const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index'
     .menu-links {
       padding: 0 16px 32px;
       flex-grow: 1;
-
-      nav > a {
-
-        &:global(.active) {
-          border: none;
-        }
-
-      }
-
     }
   }
 
diff --git a/front/src/ui/modals/Languages.vue b/front/src/ui/modals/Languages.vue
index 5391bda15..0f5fea27e 100644
--- a/front/src/ui/modals/Languages.vue
+++ b/front/src/ui/modals/Languages.vue
@@ -30,7 +30,7 @@ const isOpen = computed({
     v-model="isOpen"
   >
     <Layout columns :column-width="200">
-      <Button ghost thin small
+      <Button ghost thinFont small
         v-for="(language, key) in SUPPORTED_LOCALES"
         align-text="left"
         :aria-pressed="key===locale || undefined"