From ac7d1aac79a0cc700149e2c6d59a0671cc969739 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Sat, 8 Feb 2025 10:03:00 -0500
Subject: [PATCH] Improve sidebar buttons

---
 frontend/src/views/main/SideBar.vue | 35 +++++++++++++++++++----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/main/SideBar.vue b/frontend/src/views/main/SideBar.vue
index fa7bd9a..01507c7 100644
--- a/frontend/src/views/main/SideBar.vue
+++ b/frontend/src/views/main/SideBar.vue
@@ -45,21 +45,27 @@ function toggleLanguage() {
 
     <div class="px-4">
       <div class="flex items-center justify-start p-2 mb-4">
-        <img :src="userProfileStore.portraitUrl" alt="Profile Image" referrerpolicy="no-referrer" class="rounded-full"
-             width="42" height="42" style="max-height: 42px;">
+        <img :src="userProfileStore.portraitUrl"
+             alt="Profile Image"
+             referrerpolicy="no-referrer"
+             class="rounded-full"
+             width="42" height="42">
         <span class="ml-2 text-lg font-sans capitalize text-hOnBackground">{{ userProfileStore.alias }}</span>
       </div>
 
       <div class="flex flex-col gap-4 mb-4">
+
         <div v-if="authStore.isAuthenticated">
           <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
             <button class="action">
-              <i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
+              <i class="mdi mdi-file-account-outline"></i>
+              {{ t.myPage }}
             </button>
           </router-link>
           <router-link v-else to="/create-creator">
             <button class="action">
-              <i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
+              <i class="mdi mdi-file-account-outline"></i>
+              {{ t.myPage }}
             </button>
           </router-link>
         </div>
@@ -67,38 +73,43 @@ function toggleLanguage() {
         <div v-if="authStore.isAuthenticated">
           <router-link to="/profile">
             <button class="action">
-              <i class="mdi mdi-account"></i> {{ t.myProfile }}
+              <i class="mdi mdi-account"></i>
+              {{ t.myProfile }}
             </button>
           </router-link>
         </div>
 
         <button class="action"
                 @click="toggleLanguage">
-          <i class="mdi mdi-translate-variant"></i> {{ locale }}
+          <i class="mdi mdi-translate-variant"></i>
+          {{ locale }}
         </button>
 
         <div v-if="!authStore.isAuthenticated">
           <router-link to="/login">
             <button class="action">
-              <i class="mdi mdi-login"></i> {{ t.signIn }}
+              <i class="mdi mdi-login"></i>
+              {{ t.signIn }}
             </button>
           </router-link>
         </div>
         <div v-else>
           <button @click="authStore.logout"
                   class="action">
-            <i class="mdi mdi-logout"></i> {{ t.signOut }}
+            <i class="mdi mdi-logout"></i>
+            {{ t.signOut }}
           </button>
         </div>
+
       </div>
     </div>
   </nav>
 </template>
 
 <style scoped>
- .action
- {
-   @apply capitalize w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded;
- }
+.action {
+  @apply capitalize w-full flex items-center gap-2 px-4 py-2 text-sm bg-hSecondary text-hOnSecondary rounded;
+  @apply hover:bg-hTertiary hover:text-hOnTertiary;
+}
 
 </style>
\ No newline at end of file