fix: simplify copyright component styles and structure (#612)

Author: manuelodelain

app/components/VCopyright.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { ThemeProps } from '~~/types/theme'
 
-const props = defineProps<{
+defineProps<{
     content?: string
 } & ThemeProps>()
 
-const { themeClass } = useTheme({ props })
-
 const id = useId()
 
 const isExpanded = ref(false)
@@ -34,7 +32,7 @@ function onTouchEnd() {
 
 <template>
     <div
-        :class="[$style.root, themeClass]"
+        :class="$style.root"
         :aria-label="$t('copyright.aria_label')"
         aria-live="polite"
         @mouseleave="onMouseLeave"
@@ -65,55 +63,43 @@ function onTouchEnd() {
 </template>
 
 <style lang="scss" module>
-@use 'assets/scss/mixins/theme' as *;
-
-$leave-delay: 0.1s;
-
 .root {
-    position: absolute;
-    right: var(--v-copyright-right, 16px);
-    bottom: var(--v-copyright-bottom, 16px);
-    display: flex;
-    max-width: 276px;
-    flex-direction: column-reverse;
-    border: 1px solid var(--v-copyright-border-color, transparent);
-    border-radius: 4px;
-    transition-delay: $leave-delay;
-    transition-duration: 0.2s;
-    transition-property: border-color, background-color;
-
-    @include theme-variants('copyright' 'colors-surface-primary');
-
-    &:has(.button[aria-expanded="false"]) {
-        pointer-events: none;
-    }
-
-    &:has(.button[aria-expanded="true"]) {
-        --v-copyright-border-color: var(--colors-copyright-border-dialog, rgb(1, 1, 1, 15%));
-
-        background-color: var(--colors-surface-primary, #FFF);
-        transition-delay: initial;
-    }
+    display: grid;
+    justify-content: end;
+    row-gap: 6px;
 }
 
 .button {
-    align-self: flex-end;
-    pointer-events: all;
-
-    &:focus {
-        outline-offset: 0;
-    }
+    grid-column: 1;
+    grid-row: 2;
+    justify-self: end;
 }
 
 .content {
+    max-width: 276px;
+    padding: var(--spacing-2xs);
+    border: 1PX solid #ccc;
+    border-radius: 4PX;
+    background: #fff;
+    color: #000;
+    grid-column: 1;
+    grid-row: 1;
     opacity: 0;
-    transition-delay: $leave-delay;
-    transition-duration: 0.2s;
-    transition-property: opacity;
+    transition-delay: 0s, 0.2s;
+    transition-duration: 0.2s, 0s;
+    transition-property: opacity, visibility;
+    visibility: hidden;
+
+    p {
+        &:first-child {
+            margin: 0;
+        }
+    }
 
     .button[aria-expanded="true"] + & {
         opacity: 1;
-        transition-delay: initial;
+        transition-delay: 0s, 0s;
+        visibility: inherit;
     }
 }
 </style>

app/components/VCopyrightButton.vue

@@ -16,19 +16,22 @@ defineProps<{
 .root {
     position: relative;
     display: flex;
-    min-width: var(--v-copyright-button-min-width, 24px);
-    min-height: var(--v-copyright-button-min-height, 24px);
     align-items: center;
     justify-content: center;
     border: none;
-    border-radius: 50vmax;
+    border: 1px solid #ccc;
+    border-radius: 4PX;
+    background: #fff;
     text-decoration: initial;
 
-    &::after {
-        position: absolute;
-        width: max(100%, 52px); // Taller clickable zone on mobile
-        height: max(100%, 52px); // Taller clickable zone on mobile
-        content: '';
+    // Taller clickable zone on mobile
+    @media (hover: none) {
+        &::after {
+            position: absolute;
+            width: max(100%, 52px);
+            height: max(100%, 52px);
+            content: '';
+        }
     }
 }
 </style>

stories/app/components/VCopyright/Default.stories.vue

@@ -2,12 +2,18 @@
     <NuxtStory>
         <NuxtStoryVariant title="Content - prop">
             <div :class="$style.container">
-                <VCopyright content="Lorem ipsum" />
+                <VCopyright
+                    content="Lorem ipsum"
+                    :class="$style.copyright"
+                />
             </div>
         </NuxtStoryVariant>
         <NuxtStoryVariant title="Content - default slot">
             <div :class="$style.container">
-                <VCopyright v-slot="{ id, itemClass, isExpanded }">
+                <VCopyright
+                    v-slot="{ id, itemClass, isExpanded }"
+                    :class="$style.copyright"
+                >
                     <span
                         :id="id"
                         :class="itemClass"
@@ -28,4 +34,10 @@
     height: 100px;
     background-color: lightgrey;
 }
+
+.copyright {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+}
 </style>