Feat/add token page

src/components/Button.vue

@@ -21,6 +21,11 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
+@media (min-width: 764px) {
+  .default:hover {
+    opacity: 0.7;
+  }
+}
 .default {
   @include text(s-regular);
   display: flex;
@@ -29,9 +34,6 @@ defineProps({
   background-color: transparent;
   padding: 1rem;
 }
-.default:hover {
-  opacity: 0.7;
-}
 .button--black {
   height: 4.5rem;
   border-radius: 0.5rem;
@@ -51,4 +53,18 @@ defineProps({
   font-size: 2rem;
   color: var(--white);
 }
+.button--rounded {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  padding: 0;
+  height: 2.5rem;
+  width: 2.5rem;
+  .icon {
+    color: var(---black);
+    font-size: 1.8rem;
+    margin-right: 0;
+  }
+}
 </style>

src/components/Header.vue

@@ -48,8 +48,14 @@
             <div v-if="isLogged" class="sub-nav-block">
               <div v-if="userProfileUrl" class="logged-link">
                 <Link
-                  path="mon-compte"
-                  :text="$t('general.header.account_text')"
+                  path="mes-informations"
+                  :text="$t('general.header.my_information_text')"
+                />
+              </div>
+              <div class="logged-link">
+                <Link
+                  path="mes-parametres"
+                  :text="$t('general.header.my_settings_text')"
                 />
               </div>
               <div class="logged-link">
@@ -61,7 +67,11 @@
               </div>
             </div>
           </div>
-          <button class="menu-burger" @click="toggleMenu">
+          <button
+            class="menu-burger"
+            :aria-label="ariaLabel"
+            @click="toggleMenu"
+          >
             <i v-if="!menuIsClosed" class="cross bi bi-x-lg"></i>
             <i v-else class="bi bi-list"></i>
           </button>
@@ -93,6 +103,11 @@ function toggleMenu(): void {
   menuIsClosed.value = !menuIsClosed.value
 }
 const isLogged = computed((): boolean => !!cookies.get('user_id'))
+const ariaLabel = computed((): string =>
+  menuIsClosed.value
+    ? t('general.header.burger_menu_aria_label_open')
+    : t('general.header.burger_menu_aria_label_closed')
+)
 const logoutUrl = computed(
   (): string =>
     `${import.meta.env.VITE_API_URL}api/auth/logout?next_url=${route.path}`
@@ -169,9 +184,12 @@ const userName = computed((): string =>
   right: 0;
   top: 3.5rem;
   z-index: 1;
+  width: 15rem;
 }
 .logged-link {
-  padding: 1rem 2rem 1rem 1rem;
+  display: flex;
+  justify-content: center;
+  padding: 1rem 1rem 1.5rem;
 }
 .logged-link:first-child {
   padding-top: 1.5rem;

src/components/Link.vue

@@ -16,7 +16,7 @@
     v-else
     :to="path"
     :class="['default', look, { disabled }]"
-    :title="titleImg"
+    :title="text"
   >
     <i v-if="icon" :class="[icon, 'icon']"></i>
     <img v-if="image" :src="img(image.url)" :alt="image.alt" class="logo" />

src/components/Terminal.vue

@@ -41,8 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import Button from '@/components/Button.vue'
 import { computed, ref } from 'vue'
+import { updateClipboard } from '@/utils/copyToClipboard'
+import Button from '@/components/Button.vue'
 let uploadIsCopied = ref<boolean>(false)
 
 defineProps({
@@ -52,12 +53,11 @@ defineProps({
 const clipboardIcon = computed((): string =>
   uploadIsCopied.value ? 'bi bi-clipboard-check-fill' : 'bi bi-clipboard-plus'
 )
-function copyText(text: string): void {
-  navigator.clipboard.writeText(text)
-  uploadIsCopied.value = true
+async function copyText(text: string): Promise<void> {
+  uploadIsCopied.value = await updateClipboard(text)
   setTimeout(function () {
     uploadIsCopied.value = false
-  }, 1200)
+  }, 1000)
 }
 </script>