Re-style meeting setup page (#83)

* style: 🎨 tweak position and spacing of zotmeet logo * fix: 🐛 change header type for creation to improve seo * style: 🎨 tweak background gradient to match figma * style: 🎨 re-arrange creation input fields to match figma * style: 🎨 change colors to improve contrast of input fields * style: 🎨 change "anytime" to "any time" to be more gramatically safe * style: 🎨 improve spacing of sidebar and navbar
icssc · Apr 3, 2024 · d663e8d · d663e8d
1 parent 7ac7bac
commit d663e8d
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 56 deletions.
diff --git a/src/lib/components/creation/CalendarV2/Calendar.svelte b/src/lib/components/creation/CalendarV2/Calendar.svelte
@@ -49,10 +49,10 @@
 
   <div class="md:px-4">
     <div class="flex flex-col pb-5 md:pb-6">
-      <p class="h3 text-left font-montserrat text-2xl font-semibold md:text-3xl">
+      <h3 class="text-left font-montserrat text-2xl font-semibold text-gray-dark md:text-3xl">
         {monthName}
         {currentYear}
-      </p>
+      </h3>
       <div class="divider m-0 h-[2px] w-12 bg-accent md:w-16" />
     </div>
 

diff --git a/src/lib/components/creation/Creation.svelte b/src/lib/components/creation/Creation.svelte
@@ -8,28 +8,24 @@
   import { cn } from "$lib/utils/utils";
 </script>
 
-<div class="px-2 pt-8 md:px-4 md:pt-10 lg:pl-[60px]">
-  <h1 class="font-montserrat text-xl font-semibold md:text-2xl">Let's plan your next meeting.</h1>
-  <h2 class="text-sm font-light text-gray-medium md:text-base">
-    Select potential dates and times for you and your team.
+<div class="px-4 pt-8 md:pl-[60px] md:pt-10">
+  <h2 class="font-montserrat text-xl font-medium text-gray-dark md:text-2xl">
+    Let's plan your next meeting.
   </h2>
+  <h3 class="text-sm font-light text-gray-medium md:text-base">
+    Select potential dates and times for you and your team.
+  </h3>
 </div>
 
-<Calendar />
-
-<div class="card w-full rounded-xl border p-8 md:px-10">
-  <div class="card-body gap-0 p-0 md:p-5">
-    <h2 class="card-title pb-5 font-montserrat text-xl font-semibold text-gray-600 md:text-2xl">
-      Meeting Details
-    </h2>
-
-    <div class="flex flex-col gap-8">
-      <MeetingTimeField />
-      <MeetingNameField />
-    </div>
+<div class="w-full rounded-xl border bg-white px-8 py-6 md:px-14">
+  <div class="flex flex-col gap-6">
+    <MeetingNameField />
+    <MeetingTimeField />
   </div>
 </div>
 
+<Calendar />
+
 <div
   class="sticky bottom-0 -ml-2 flex w-[100vw] flex-row items-center justify-end gap-x-4 border-t-[1px] bg-white p-3 md:relative md:w-full md:border-t-0 md:bg-transparent md:py-0"
 >

diff --git a/src/lib/components/creation/MeetingV2/MeetingNameField.svelte b/src/lib/components/creation/MeetingV2/MeetingNameField.svelte
@@ -2,35 +2,22 @@
   import { onMount } from "svelte";
 
   import { DEFAULT_MEETING_NAME, meetingName } from "$lib/stores/meetingSetupStores";
-  import EditNoteIcon from "~icons/material-symbols/edit-note";
+
+  let inputRef: HTMLInputElement;
 
   /* Reset to the default meeting name*/
   onMount(() => {
     $meetingName = DEFAULT_MEETING_NAME;
+    inputRef.focus();
   });
-
-  const onFocus = (e: Event) => {
-    (e.target as HTMLInputElement).select();
-  };
-  const onSelect = (e: Event) => {
-    (e.target as HTMLInputElement).select();
-  };
 </script>
 
-<div>
-  <div class="flex flex-row items-center gap-x-1 pb-1 text-slate-medium">
-    <EditNoteIcon />
-    <p class="text-sm font-bold uppercase tracking-wide">Meeting Name</p>
-  </div>
-
-  <div class="flex w-[80%] flex-row items-center gap-x-4 text-lg text-gray-500">
-    <input
-      type="text"
-      class="flex-center w-full appearance-none rounded-none border-x-0 border-t-0 border-gray-base p-1 placeholder:text-gray-base focus:outline-none focus:ring-0"
-      placeholder="ex: Science Library LAN Party"
-      on:focus={onFocus}
-      on:select={onSelect}
-      bind:value={$meetingName}
-    />
-  </div>
+<div class="flex flex-row items-center gap-x-4 text-lg text-gray-500">
+  <input
+    type="text"
+    class="flex-center w-full appearance-none rounded-none border-x-0 border-t-0 border-gray-base p-1 text-2xl font-light placeholder:text-gray-base focus:outline-none focus:ring-0 md:text-3xl"
+    placeholder="Meeting Name"
+    bind:value={$meetingName}
+    bind:this={inputRef}
+  />
 </div>
diff --git a/src/lib/components/creation/MeetingV2/MeetingTimeField.svelte b/src/lib/components/creation/MeetingV2/MeetingTimeField.svelte
@@ -16,7 +16,7 @@
 <div>
   <div class="flex flex-row items-center gap-x-1 pb-1 text-slate-medium">
     <ClockIcon />
-    <p class="text-sm font-bold uppercase tracking-wide">Meet no earlier / No later than</p>
+    <p class="text-sm font-semibold uppercase tracking-wide">ANY TIME BETWEEN</p>
   </div>
 
   <!--TODO: make custom step -->
@@ -26,7 +26,7 @@
   >
     <SveltyPicker
       inputId="meeting-start-time-input"
-      inputClasses="w-24 flex-center p-1 appearance-none placeholder:text-gray-base border-t-0 border-x-0 rounded-none border-gray-base focus:outline-none focus:ring-0"
+      inputClasses="w-24 flex-center p-1 appearance-none placeholder:text-gray-base border-t-0 border-x-0 rounded-none border-gray-base focus:outline-none focus:ring-0 text-center"
       mode="time"
       format="hh:ii"
       displayFormat="HH:ii P"
@@ -35,10 +35,10 @@
       autocommit={true}
       bind:value={$startTime}
     />
-    and
+    <span> and </span>
     <SveltyPicker
       inputId="meeting-end-time-input"
-      inputClasses="w-24 flex-center p-1 appearance-none placeholder:text-gray-base border-t-0 border-x-0 rounded-none border-gray-base focus:outline-none focus:ring-0"
+      inputClasses="w-24 flex-center p-1 appearance-none placeholder:text-gray-base border-t-0 border-x-0 rounded-none border-gray-base focus:outline-none focus:ring-0 text-center"
       mode="time"
       format="hh:ii"
       displayFormat="HH:ii P"
@@ -47,6 +47,6 @@
       bind:value={$endTime}
       autocommit={true}
     />
-    <p class="hidden sm:flex">PST</p>
+    <span>PST</span>
   </div>
 </div>
diff --git a/src/lib/components/navigation/Navbar.svelte b/src/lib/components/navigation/Navbar.svelte
@@ -15,7 +15,7 @@
   <input id="nav-drawer" type="checkbox" class="drawer-toggle" />
 
   <div class="drawer-content flex flex-col">
-    <div class="flex-between navbar bg-gray-light px-5 py-4 md:hidden">
+    <div class="flex-between navbar bg-gray-light px-5 pb-3 pt-4 md:hidden">
       <LogoArea />
 
       <label class="btn btn-square btn-ghost" for="nav-drawer">

diff --git a/src/lib/components/navigation/Sidebar.svelte b/src/lib/components/navigation/Sidebar.svelte
@@ -8,10 +8,10 @@
   export let data: PageData;
 </script>
 
-<div class="hidden min-h-full min-w-[250px] flex-col pr-3 md:flex xl:min-w-[300px]">
+<div class="hidden min-h-full min-w-[280px] flex-col pr-3 md:flex md:pt-4">
   <LogoArea />
 
-  <div class="divider my-2" />
+  <div class="divider my-1" />
 
   <NavButtons />
   <ProfileCard {data} />

diff --git a/src/lib/components/navigation/shared/LogoArea.svelte b/src/lib/components/navigation/shared/LogoArea.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 </script>
 
-<a href="/" class="flex items-center space-x-4">
-  <div class="h-8 w-8 rounded-lg border-2 border-black bg-primary md:h-10 md:w-10 md:border-4" />
-  <h1 class="font-montserrat text-3xl font-semibold text-gray-dark md:text-4xl">ZotMeet</h1>
+<a href="/" class="flex items-center space-x-4 md:pb-1 md:pl-3">
+  <div
+    class="h-8 w-8 rounded-lg border-2 border-gray-800 bg-gradient-to-tr from-primary to-accent md:h-10 md:w-10"
+  />
+  <h1 class="font-montserrat text-3xl font-medium text-gray-dark md:text-4xl">ZotMeet</h1>
 </a>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -9,13 +9,13 @@
 </script>
 
 <div
-  class="relative flex h-full min-h-screen w-full flex-col bg-gradient-to-l from-[#EEEEEE] to-[#EAEFF2] md:flex-row md:pl-6 md:pt-6"
+  class="relative flex h-full min-h-screen w-full flex-col bg-gradient-to-tl from-[#EEEEEE] to-[#EAEFF2] md:flex-row md:pl-3 md:pt-6"
 >
   <SideBar {data} />
   <Navbar {data} />
 
   <main
-    class="flex h-[calc(100vh-1.5rem)] w-full flex-col gap-y-5 overflow-x-clip border-t-2 bg-white px-2 pb-6 md:gap-y-6 md:overflow-y-auto md:rounded-tl-xl md:px-4"
+    class="flex h-[calc(100vh-1.5rem)] w-full flex-col gap-y-5 overflow-x-clip border-t-2 bg-gray-50 px-2 pb-6 md:gap-y-6 md:overflow-y-auto md:rounded-tl-xl md:px-4"
   >
     <slot />
   </main>
@@ -24,7 +24,7 @@
 <!-- Global styles -->
 <style lang="postcss">
   @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
-  @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;600;700&display=swap");
 
   :global(html) {
     font-family: