Update the sidebar

frontend/src/views/main/SideBar.vue

@@ -34,30 +34,29 @@ function toggleLanguage() {
 </script>
 
 <template>
-  <nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-4">
+  <nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-1">
     <div class="mt-4 px-4">
       <router-link to="/@hutopy">
-        <img src="/medias/hutopy.png"
-             alt="hutopy logo"
-             width="300"
-             height="64">
+        <img src="/images/hutopy-logo.png"
+             alt="hutopy logo">
       </router-link>
     </div>
 
     <div class="flex-grow"></div>
 
-    <div class="px-4">
-      <div class="flex items-center justify-start p-2 mb-4">
+
+    <div class="flex flex-col gap-4 p-4">
+
+      <div class="flex items-center justify-start">
         <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>
+             width="42"
+             height="42">
+        <span class="profile">{{ 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">
@@ -105,14 +104,22 @@ function toggleLanguage() {
       </div>
 
     </div>
-    </div>
+
   </nav>
 </template>
 
 <style scoped>
+
+.profile {
+  @apply ml-4 text-lg font-sans capitalize text-hOnBackground;
+  @apply font-sans font-semibold;
+}
+
 .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;
+  @apply w-full flex items-center gap-4 px-4 py-2 rounded;
+  @apply capitalize text-base font-sans font-medium;
+  @apply bg-hSecondary text-hOnSecondary;
+  @apply hover:brightness-90;
 }
 
 </style>