Merge pull request #21 from icssc/meeting-setup-page

Meeting setup page

package.json

@@ -24,6 +24,7 @@
     "@lucia-auth/adapter-prisma": "3.0.2",
     "@prisma/client": "5.6.0",
     "lucia": "2.7.4",
+    "svelty-picker": "^5.2.1",
     "unplugin-icons": "^0.18.1"
   },
   "devDependencies": {

src/lib/components/Header/Header.svelte

@@ -15,23 +15,23 @@
 <!-- Header for the app -->
 
 <header class="h-16 bg-primary-600">
-  <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="flex-between h-full md:mx-4">
+    <img src="/icon.png" class="h-10 w-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="w-12 h-12" />
+        <HamburgerMenu class="h-12 w-12" />
       </button>
     {:else}
-      <div id="user-info-container" class="flex items-center justify-end flex-1 gap-2">
+      <div id="user-info-container" class="flex flex-1 items-center justify-end gap-2">
         <div id="user-name-container">
           <span class="text-lg">Peter Anteater</span>
         </div>
-        <img src="user-icon.png" alt="User Icon" class="w-12 h-12 rounded-full user-icon" />
+        <img src="user-icon.png" alt="User Icon" class="user-icon h-12 w-12 rounded-full" />
       </div>
     {/if}
   </div>

src/lib/components/SideBar/SideBar.svelte

@@ -17,12 +17,12 @@
 
 <div
   id="sidebar"
-  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"
+  class="rounded-left-lg outline-5 card flex h-full w-full flex-col rounded-r-none bg-secondary-400 outline-secondary-800 md:rounded-l-none md:rounded-r-lg"
 >
   <div id="sidebar-links" class="flex flex-col">
     {#if displayCloseButton}
-      <div class="w-full flex flex-row justify-end">
-        <button class="p-2 ml-auto" on:click={closeDrawer}>
+      <div class="flex w-full flex-row justify-end">
+        <button class="ml-auto p-2" on:click={closeDrawer}>
           <CloseIcon class="h-12 w-12" />
         </button>
       </div>
@@ -31,7 +31,7 @@
     <SideBarLink Icon={SettingsIcon} label="Settings" href="/settings" />
   </div>
 
-  <div id="sidebar-footer-container" class="mt-auto m-2">
+  <div id="sidebar-footer-container" class="m-2 mt-auto">
     <SideBarFooter />
   </div>
 </div>

src/lib/components/SideBar/SideBarLink.svelte

@@ -14,9 +14,9 @@
 
 <a id="sidebar-link-{label}" {href} on:click={closeDrawer}>
   <div
-    class="flex flex-row items-center whitespace-nowrap hover:bg-secondary-500 w-full gap-4 p-5 md:p-3 rounded-lg"
+    class="flex w-full flex-row items-center gap-4 whitespace-nowrap rounded-lg p-5 hover:bg-secondary-500 md:p-3"
   >
-    <Icon class="w-14 h-14 md:w-10 md:h-10 ml-3" />
+    <Icon class="ml-3 h-14 w-14 md:h-10 md:w-10" />
     <span class="text-2xl md:text-xl">{label}</span>
   </div>
 </a>