From 81c63fba8345e55cff08d7a0b37dd452104e788f Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Wed, 26 Jun 2024 19:48:00 +0200
Subject: [PATCH 1/7] Turn ellipsis when dropdown is open

---
 frontend/src/components/menu/UserInfo.vue | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/menu/UserInfo.vue b/frontend/src/components/menu/UserInfo.vue
index 6047afb18e..97a7fc8803 100644
--- a/frontend/src/components/menu/UserInfo.vue
+++ b/frontend/src/components/menu/UserInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-menu>
+  <v-menu v-model="isOpen">
     <template #activator="{ props }">
       <button
         v-bind="props"
@@ -11,7 +11,12 @@
           <span v-else>{{ initals?.toUpperCase() }}</span>
         </v-avatar>
         <div class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100">
-          <v-icon icon="$ellipsis" data-test="user-dropdown"></v-icon>
+          <v-icon
+            icon="$ellipsis"
+            data-test="user-dropdown"
+            class="ellipsis-icon"
+            :class="isOpen && 'rotated'"
+          ></v-icon>
         </div>
       </button>
     </template>
@@ -20,6 +25,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 import { useAuthStore } from '#stores/authStore'
 
 import UserDropdown from './UserDropdown.vue'
@@ -32,6 +39,8 @@ const initals = name
   .map((n) => n.charAt(0))
   .join('')
 const userImage = authStore.user?.profile.picture
+
+const isOpen = ref(false)
 </script>
 
 <style scoped lang="scss">
@@ -52,5 +61,13 @@ const userImage = authStore.user?.profile.picture
 .avatar {
   border-color: rgb(var(--v-theme-border) 0.8);
 }
+
+.ellipsis-icon {
+  transition: transform 0.3s;
+}
+
+.rotated {
+  transform: rotate(90deg);
+}
 </style>
 m

From 734387e137290a510925c170d92a5527eb692a39 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Wed, 26 Jun 2024 20:12:47 +0200
Subject: [PATCH 2/7] Add logout item

---
 frontend/src/assets/icons/index.ts   | 2 ++
 frontend/src/assets/icons/logout.svg | 3 +++
 2 files changed, 5 insertions(+)
 create mode 100644 frontend/src/assets/icons/logout.svg

diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts
index 6ce054e21d..ad2dcfd3b5 100644
--- a/frontend/src/assets/icons/index.ts
+++ b/frontend/src/assets/icons/index.ts
@@ -2,6 +2,7 @@ import Bell from './bell.svg?component'
 import Camera from './camera.svg?component'
 import Cockpit from './cockpit.svg?component'
 import Ellipsis from './ellipsis.svg?component'
+import Logout from './logout.svg?component'
 import Mall from './mall.svg?component'
 import Message from './message.svg?component'
 import WorldCafe from './worldCafe.svg?component'
@@ -13,6 +14,7 @@ const aliases: Partial<IconAliases> = {
   camera: Camera,
   cockpit: Cockpit,
   ellipsis: Ellipsis,
+  logout: Logout,
   mall: Mall,
   message: Message,
   'world-cafe': WorldCafe,
diff --git a/frontend/src/assets/icons/logout.svg b/frontend/src/assets/icons/logout.svg
new file mode 100644
index 0000000000..c6e2b6d625
--- /dev/null
+++ b/frontend/src/assets/icons/logout.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+<path id="Logout" d="M1.55556 14C1.12778 14 0.761574 13.8477 0.456944 13.5431C0.152315 13.2384 0 12.8722 0 12.4444V1.55556C0 1.12778 0.152315 0.761574 0.456944 0.456944C0.761574 0.152315 1.12778 0 1.55556 0H7V1.55556H1.55556V12.4444H7V14H1.55556ZM10.1111 10.8889L9.04167 9.76111L11.025 7.77778H4.66667V6.22222H11.025L9.04167 4.23889L10.1111 3.11111L14 7L10.1111 10.8889Z" fill="currentColor"/>
+</svg>

From 19938e7df33579d6969805022ac9f3e1bd473d10 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Wed, 26 Jun 2024 20:13:14 +0200
Subject: [PATCH 3/7] Adapt UserDropdown to Figma (WIP)

---
 frontend/src/components/menu/UserDropdown.vue | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/menu/UserDropdown.vue b/frontend/src/components/menu/UserDropdown.vue
index 916d61533e..8e1f1e673a 100644
--- a/frontend/src/components/menu/UserDropdown.vue
+++ b/frontend/src/components/menu/UserDropdown.vue
@@ -1,23 +1,19 @@
 <template>
-  <MainButton class="sign-out mr-4" variant="third" label="Sign Out" size="auto" @click="signOut"
-    >{{ $t('buttons.signout') }}
-  </MainButton>
-  <MainButton
-    v-if="auth.isAdmin"
-    class="admin-button mr-4"
-    variant="third"
-    label="To Admin"
-    size="auto"
-    @click="enterAdmin"
-  >
-    {{ $t('buttons.toAdmin') }}
-  </MainButton>
+  <ul class="dropdown border-sm pa-2 my-2">
+    <li class="dropdown-element">
+      <button @click="signOut"><v-icon icon="$logout"></v-icon> {{ $t('buttons.signout') }}</button>
+    </li>
+    <li v-if="auth.isAdmin">
+      <button @click="enterAdmin">
+        <v-icon icon="$admin"></v-icon>{{ $t('buttons.toAdmin') }}
+      </button>
+    </li>
+  </ul>
 </template>
 
 <script lang="ts" setup>
 import { inject } from 'vue'
 
-import MainButton from '#components/buttons/MainButton.vue'
 import GlobalErrorHandler from '#plugins/globalErrorHandler'
 import { AUTH } from '#src/env'
 import AuthService from '#src/services/AuthService'
@@ -39,3 +35,17 @@ const enterAdmin = async () => {
   window.location.href = AUTH.ADMIN_REDIRECT_URI
 }
 </script>
+
+<style scoped lang="scss">
+.dropdown {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-radius: 20px;
+  background: #3d4753;
+  font-size: 14px;
+}
+.dropdown-element {
+  padding: 5px;
+}
+</style>

From f882101ea63b17f90f3bbd41f0e9a7b52771ea51 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Thu, 27 Jun 2024 18:41:31 +0200
Subject: [PATCH 4/7] Add theme colors for dropdown, adjust spacing and wording

---
 frontend/renderer/plugins/vuetify.ts          |  1 +
 frontend/src/assets/scss/dark.module.scss     |  2 ++
 frontend/src/assets/scss/light.module.scss    |  2 ++
 frontend/src/components/menu/UserDropdown.vue | 27 ++++++++++++-------
 frontend/src/locales/de.json                  |  2 +-
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts
index d248b1e7f9..3e40499981 100644
--- a/frontend/renderer/plugins/vuetify.ts
+++ b/frontend/renderer/plugins/vuetify.ts
@@ -25,6 +25,7 @@ function makeThemeFromCssModule(theme: CSSModuleClasses, isDark: boolean): Theme
       error: theme.errorColor,
       font: theme.fontColor,
       icon: theme.iconColor,
+      'dropdown-background': theme.dropdownBackgroundColor,
     },
     variables: {
       'border-color': theme.borderColor,
diff --git a/frontend/src/assets/scss/dark.module.scss b/frontend/src/assets/scss/dark.module.scss
index 599cb3c90a..88eef30776 100644
--- a/frontend/src/assets/scss/dark.module.scss
+++ b/frontend/src/assets/scss/dark.module.scss
@@ -13,6 +13,7 @@ $icon-color: #F5F5F5;
 $icon-background: rgb(61 71 83 / 85%);
 $bottom-menu-background: rgb(78 91 107 / 60%);
 $sidebar-background: rgb(61 71 83 / 60%);
+$dropdown-background-color: #3D4753;
 
 :export {
     backgroundColor: $background-color;
@@ -30,4 +31,5 @@ $sidebar-background: rgb(61 71 83 / 60%);
     iconBackground: $icon-background;
     bottomMenuBackground: $bottom-menu-background;
     sidebarBackground: $sidebar-background;
+    dropdownBackgroundColor: $dropdown-background-color;
 }
diff --git a/frontend/src/assets/scss/light.module.scss b/frontend/src/assets/scss/light.module.scss
index f936a033b3..9097074397 100644
--- a/frontend/src/assets/scss/light.module.scss
+++ b/frontend/src/assets/scss/light.module.scss
@@ -13,6 +13,7 @@ $icon-color: #3D4753;
 $icon-background: rgb(255 255 255);
 $bottom-menu-background: rgb(225 230 237 / 60%);
 $sidebar-background: rgb(225 230 237);
+$dropdown-background-color: #fff;
 
 :export {
     backgroundColor: $background-color;
@@ -30,5 +31,6 @@ $sidebar-background: rgb(225 230 237);
     iconBackground: $icon-background;
     bottomMenuBackground: $bottom-menu-background;
     sidebarBackground: $sidebar-background;
+    dropdownBackgroundColor: $dropdown-background-color;
 }
 
diff --git a/frontend/src/components/menu/UserDropdown.vue b/frontend/src/components/menu/UserDropdown.vue
index 8e1f1e673a..be96173561 100644
--- a/frontend/src/components/menu/UserDropdown.vue
+++ b/frontend/src/components/menu/UserDropdown.vue
@@ -1,11 +1,11 @@
 <template>
-  <ul class="dropdown border-sm pa-2 my-2">
-    <li class="dropdown-element">
-      <button @click="signOut"><v-icon icon="$logout"></v-icon> {{ $t('buttons.signout') }}</button>
+  <ul class="dropdown border-sm pa-3 pb-2 my-2 bg-dropdown-background">
+    <li>
+      <button @click="signOut"><v-icon icon="$logout"></v-icon>{{ $t('buttons.signout') }}</button>
     </li>
     <li v-if="auth.isAdmin">
       <button @click="enterAdmin">
-        <v-icon icon="$admin"></v-icon>{{ $t('buttons.toAdmin') }}
+        <v-icon icon="$logout"></v-icon>{{ $t('buttons.toAdmin') }}
       </button>
     </li>
   </ul>
@@ -38,14 +38,23 @@ const enterAdmin = async () => {
 
 <style scoped lang="scss">
 .dropdown {
+  font-size: 14px;
   list-style: none;
-  padding: 0;
-  margin: 0;
   border-radius: 20px;
-  background: #3d4753;
-  font-size: 14px;
 }
-.dropdown-element {
+
+.dropdown li {
   padding: 5px;
 }
+
+.dropdown button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.dropdown button i {
+  margin-top: -2px;
+  margin-right: 8px;
+}
 </style>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 3ce3751c57..e5ecec40a8 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -7,7 +7,7 @@
   "buttons": {
     "newProject": "Neues Projekt",
     "newTable": "Neuer Tisch",
-    "signout": "Sign Out",
+    "signout": "Logout",
     "toAdmin": "Zum Admin",
     "toAssistant": "Assistent",
     "toRoom": "Zum Treffen"

From 9665d008ddb8fe64550ed1ec326728a4f8ce7c35 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Thu, 27 Jun 2024 18:44:45 +0200
Subject: [PATCH 5/7] Update snapshots

---
 .../src/components/menu/__snapshots__/BottomMenu.test.ts.snap | 2 +-
 .../src/components/menu/__snapshots__/TopMenu.test.ts.snap    | 2 +-
 .../src/components/menu/__snapshots__/UserInfo.test.ts.snap   | 2 +-
 frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap | 4 ++--
 frontend/src/pages/auth/__snapshots__/Page.test.ts.snap       | 4 ++--
 frontend/src/pages/index/__snapshots__/Page.test.ts.snap      | 4 ++--
 frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap  | 4 ++--
 frontend/src/pages/room/__snapshots__/Page.test.ts.snap       | 4 ++--
 .../src/pages/silent-refresh/__snapshots__/Page.test.ts.snap  | 4 ++--
 9 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
index 861a22836c..62c7bc18ee 100644
--- a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
@@ -645,7 +645,7 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
         >
           <i
             aria-hidden="true"
-            class="v-icon notranslate v-theme--light v-icon--size-default"
+            class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
             data-test="user-dropdown"
             data-v-607bdd70=""
           >
diff --git a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
index 67ff668846..9fbb28b1fa 100644
--- a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
@@ -732,7 +732,7 @@ exports[`TopMenu > renders 1`] = `
                     >
                       <i
                         aria-hidden="true"
-                        class="v-icon notranslate v-theme--light v-icon--size-default"
+                        class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                         data-test="user-dropdown"
                         data-v-607bdd70=""
                       >
diff --git a/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap b/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap
index 21e05de3db..f5664feef7 100644
--- a/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap
@@ -43,7 +43,7 @@ exports[`UserInfo > renders 1`] = `
       >
         <i
           aria-hidden="true"
-          class="v-icon notranslate v-theme--light v-icon--size-default"
+          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
           data-test="user-dropdown"
           data-v-607bdd70=""
         >
diff --git a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
index ce0fc9a0dc..136499da53 100644
--- a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
+++ b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
@@ -782,7 +782,7 @@ exports[`DefaultLayout > renders 1`] = `
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -1482,7 +1482,7 @@ exports[`DefaultLayout > renders 1`] = `
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >
diff --git a/frontend/src/pages/auth/__snapshots__/Page.test.ts.snap b/frontend/src/pages/auth/__snapshots__/Page.test.ts.snap
index 4547a6b723..40e19d9d21 100644
--- a/frontend/src/pages/auth/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/auth/__snapshots__/Page.test.ts.snap
@@ -783,7 +783,7 @@ exports[`AuthPage > signin callback without error > renders 1`] = `
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -1489,7 +1489,7 @@ exports[`AuthPage > signin callback without error > renders 1`] = `
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >
diff --git a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
index 00206dd3fc..8bd5cf271d 100644
--- a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
@@ -782,7 +782,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -2114,7 +2114,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >
diff --git a/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap b/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap
index 118ef6dae7..82983dc834 100644
--- a/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap
@@ -782,7 +782,7 @@ exports[`JoinRoomPage > renders 1`] = `
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -1686,7 +1686,7 @@ exports[`JoinRoomPage > renders 1`] = `
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >
diff --git a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
index d5f9903bf1..6c5f805608 100644
--- a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
@@ -783,7 +783,7 @@ exports[`Room Page > renders 1`] = `
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -1489,7 +1489,7 @@ exports[`Room Page > renders 1`] = `
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >
diff --git a/frontend/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap b/frontend/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap
index 5a9ab0575a..d89ee824cd 100644
--- a/frontend/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap
@@ -783,7 +783,7 @@ exports[`SilentRefreshPage > auth service with succes > renders 1`] = `
                       >
                         <i
                           aria-hidden="true"
-                          class="v-icon notranslate v-theme--light v-icon--size-default"
+                          class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
                           data-test="user-dropdown"
                           data-v-607bdd70=""
                         >
@@ -1489,7 +1489,7 @@ exports[`SilentRefreshPage > auth service with succes > renders 1`] = `
           >
             <i
               aria-hidden="true"
-              class="v-icon notranslate v-theme--light v-icon--size-default"
+              class="v-icon notranslate v-theme--light v-icon--size-default ellipsis-icon"
               data-test="user-dropdown"
               data-v-607bdd70=""
             >

From 6be756036cc7c876b4071ad1632b426bfe433b61 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Thu, 27 Jun 2024 18:52:19 +0200
Subject: [PATCH 6/7] Restore button classes for tests

---
 frontend/src/components/menu/UserDropdown.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/menu/UserDropdown.vue b/frontend/src/components/menu/UserDropdown.vue
index be96173561..31f136e122 100644
--- a/frontend/src/components/menu/UserDropdown.vue
+++ b/frontend/src/components/menu/UserDropdown.vue
@@ -1,10 +1,12 @@
 <template>
   <ul class="dropdown border-sm pa-3 pb-2 my-2 bg-dropdown-background">
     <li>
-      <button @click="signOut"><v-icon icon="$logout"></v-icon>{{ $t('buttons.signout') }}</button>
+      <button class="sign-out" @click="signOut">
+        <v-icon icon="$logout"></v-icon>{{ $t('buttons.signout') }}
+      </button>
     </li>
     <li v-if="auth.isAdmin">
-      <button @click="enterAdmin">
+      <button class="admin-button" @click="enterAdmin">
         <v-icon icon="$logout"></v-icon>{{ $t('buttons.toAdmin') }}
       </button>
     </li>

From 375d61cfd9091849e390109809ad7e2d6df96fa2 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Fri, 28 Jun 2024 08:07:12 +0200
Subject: [PATCH 7/7] Update snapshots.

---
 .../src/components/menu/__snapshots__/BottomMenu.test.ts.snap | 2 +-
 .../src/components/menu/__snapshots__/TopMenu.test.ts.snap    | 2 +-
 .../src/components/menu/__snapshots__/UserInfo.test.ts.snap   | 2 +-
 frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap | 4 ++--
 frontend/src/pages/auth/__snapshots__/Page.test.ts.snap       | 4 ++--
 frontend/src/pages/index/__snapshots__/Page.test.ts.snap      | 4 ++--
 frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap  | 4 ++--
 frontend/src/pages/room/__snapshots__/Page.test.ts.snap       | 4 ++--
 .../src/pages/silent-refresh/__snapshots__/Page.test.ts.snap  | 4 ++--
 9 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
index d692dfed55..9a3f34941b 100644
--- a/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/BottomMenu.test.ts.snap
@@ -564,7 +564,7 @@ exports[`BottomMenu > renders BottomMenu 1`] = `
           
         </div>
         <div
-          class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+          class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
           data-v-607bdd70=""
         >
           <i
diff --git a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
index b2c716daf9..fd3067d195 100644
--- a/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/TopMenu.test.ts.snap
@@ -694,7 +694,7 @@ exports[`TopMenu > renders 1`] = `
                       
                     </div>
                     <div
-                      class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                      class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                       data-v-607bdd70=""
                     >
                       <i
diff --git a/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap b/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap
index 22475be8f7..f5664feef7 100644
--- a/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap
+++ b/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap
@@ -38,7 +38,7 @@ exports[`UserInfo > renders 1`] = `
         
       </div>
       <div
-        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
         data-v-607bdd70=""
       >
         <i
diff --git a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
index 6be31afb10..dded014614 100644
--- a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
+++ b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
@@ -701,7 +701,7 @@ exports[`DefaultLayout > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
@@ -1325,7 +1325,7 @@ exports[`DefaultLayout > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
diff --git a/frontend/src/pages/auth/__snapshots__/Page.test.ts.snap b/frontend/src/pages/auth/__snapshots__/Page.test.ts.snap
index 864a1d03d9..7d05171dd8 100644
--- a/frontend/src/pages/auth/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/auth/__snapshots__/Page.test.ts.snap
@@ -702,7 +702,7 @@ exports[`AuthPage > signin callback without error > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
@@ -1332,7 +1332,7 @@ exports[`AuthPage > signin callback without error > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
diff --git a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
index 0a59cb50b6..feb39309c4 100644
--- a/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/index/__snapshots__/Page.test.ts.snap
@@ -701,7 +701,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
@@ -1957,7 +1957,7 @@ exports[`IndexPage > without apollo error > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
diff --git a/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap b/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap
index 7665ac9cf0..f189f6dab9 100644
--- a/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/join-room/__snapshots__/Page.test.ts.snap
@@ -701,7 +701,7 @@ exports[`JoinRoomPage > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
@@ -1529,7 +1529,7 @@ exports[`JoinRoomPage > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
diff --git a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
index 0c8bc12a0a..9de3d4c6a8 100644
--- a/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/room/__snapshots__/Page.test.ts.snap
@@ -702,7 +702,7 @@ exports[`Room Page > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
@@ -1332,7 +1332,7 @@ exports[`Room Page > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i
diff --git a/frontend/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap b/frontend/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap
index 00037fb688..e03af3aa40 100644
--- a/frontend/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap
+++ b/frontend/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap
@@ -702,7 +702,7 @@ exports[`SilentRefreshPage > auth service with succes > renders 1`] = `
                         
                       </div>
                       <div
-                        class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+                        class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
                         data-v-607bdd70=""
                       >
                         <i
@@ -1332,7 +1332,7 @@ exports[`SilentRefreshPage > auth service with succes > renders 1`] = `
             
           </div>
           <div
-            class="d-flex flex-column justify-center text-right pa-3 pl-4 w-100"
+            class="d-flex flex-column justify-center text-right pa-1 pl-3 w-100"
             data-v-607bdd70=""
           >
             <i