fix: 🐛 apply review suggestions

icssc · Jan 15, 2024 · f42d10b · f42d10b
1 parent 170289c
commit f42d10b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 22 deletions.
diff --git a/src/lib/components/Header/Header.svelte b/src/lib/components/Header/Header.svelte
@@ -15,26 +15,23 @@
 <!-- Header for the app -->
 
 <header class="h-16 bg-primary-600">
-  <div class="flex flex-row justify-between h-full">
-    <img src="/icon.png" class="h-10 w-10 rounded-full" alt="ZotMeet icon" />
-    <div class="text-4xl font-bold ml-10 mt-auto mb-auto">ZotMeet</div>
+  <div class="h-full flex-between md:mx-4">
+    <img src="/icon.png" class="w-10 h-10 rounded-full" alt="ZotMeet icon" />
+    <div class="text-4xl font-bold md:ml-10">
+      <a href="/">ZotMeet</a>
+    </div>
+
     <!-- Hamburger -->
     {#if hamburger}
       <button on:click={openDrawer}>
-        <HamburgerMenu class="h-12 w-12" />
+        <HamburgerMenu class="w-12 h-12" />
       </button>
     {:else}
-      <div
-        id="user-info-container"
-        class="flex flex-row justify-end gap-2 mr-4 mt-auto mb-auto ml-auto w-64"
-      >
-        <div
-          id="user-name-container"
-          class="align-text-bottom flex-col content-center justify-center inline-grid"
-        >
-          <span class="text-lg align-text-bottom h-full">Peter Anteater</span>
+      <div id="user-info-container" class="flex items-center justify-end flex-1 gap-2">
+        <div id="user-name-container">
+          <span class="text-lg">Peter Anteater</span>
         </div>
-        <img src="user-icon.png" alt="User Icon" class="user-icon rounded-full w-12 h-12" />
+        <img src="user-icon.png" alt="User Icon" class="w-12 h-12 rounded-full user-icon" />
       </div>
     {/if}
   </div>

diff --git a/src/lib/components/SideBar/SideBar.svelte b/src/lib/components/SideBar/SideBar.svelte
@@ -17,7 +17,7 @@
 
 <div
   id="sidebar"
-  class="flex flex-col bg-secondary-400 outline-secondary-800 rounded-l-lg rounded-r-none card outline-5 h-full w-full"
+  class="flex flex-col w-full h-full rounded-r-none rounded-left-lg md:rounded-r-lg md:rounded-l-none bg-secondary-400 outline-secondary-800 card outline-5"
 >
   <div id="sidebar-links" class="flex flex-col">
     {#if displayCloseButton}

diff --git a/src/lib/components/SideBar/SideBarFooter.svelte b/src/lib/components/SideBar/SideBarFooter.svelte
@@ -2,8 +2,8 @@
   import { LightSwitch } from "@skeletonlabs/skeleton";
 </script>
 
-<div id="sidebar-footer" class="flex flex-row justify-between">
-  <LightSwitch class="mt-auto mb-auto" />
-  <a href="https://google.com" class="mt-auto mb-auto">Feedback</a>
-  <a href="https://google.com" class="mt-auto mb-auto">About</a>
+<div id="sidebar-footer" class="flex-between">
+  <LightSwitch />
+  <a href="https://google.com">Feedback</a>
+  <a href="https://google.com">About</a>
 </div>
diff --git a/src/lib/components/SideBar/SideBarLink.svelte b/src/lib/components/SideBar/SideBarLink.svelte
@@ -14,9 +14,9 @@
 
 <a id="sidebar-link-{label}" {href} on:click={closeDrawer}>
   <div
-    class="flex flex-row whitespace-nowrap hover:bg-secondary-500 w-full gap-4 p-5 lg:p-3 rounded-lg"
+    class="flex flex-row items-center whitespace-nowrap hover:bg-secondary-500 w-full gap-4 p-5 md:p-3 rounded-lg"
   >
-    <Icon class="w-14 h-14 lg:w-10 lg:h-10 ml-3" />
-    <span class="text-2xl lg:text-xl mt-auto mb-auto">{label}</span>
+    <Icon class="w-14 h-14 md:w-10 md:h-10 ml-3" />
+    <span class="text-2xl md:text-xl">{label}</span>
   </div>
 </a>