feat: ✨ update time picker

icssc · May 31, 2024 · 01b2d15 · 01b2d15
1 parent fb1c5eb
commit 01b2d15
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 8 deletions.
diff --git a/src/lib/components/creation/MeetingV2/MeetingTimeField.svelte b/src/lib/components/creation/MeetingV2/MeetingTimeField.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import SveltyPicker from "svelty-picker";
+  // import SveltyPicker from "svelty-picker";
 
-  import { BLOCK_LENGTH } from "$lib/stores/availabilityStores";
+  // import { BLOCK_LENGTH } from "$lib/stores/availabilityStores";
   import { DEFAULT_MEETING_TIMES, startTime, endTime } from "$lib/stores/meetingSetupStores";
   import ClockIcon from "~icons/material-symbols/nest-clock-farsight-analog-outline";
 
@@ -14,17 +14,17 @@
 </script>
 
 <div>
-  <div class="flex flex-row items-center gap-x-1 pb-1 text-slate-medium">
+  <div class="flex flex-row items-center gap-x-1 pb-2 text-slate-medium">
     <ClockIcon />
-    <p class="text-sm font-semibold uppercase tracking-wide">ANY TIME BETWEEN</p>
+    <p class="text-sm font-semibold uppercase tracking-wide">ANY TIME BETWEEN (PST)</p>
   </div>
 
   <!--TODO: make custom step -->
   <div
     id="meeting-time-input-container"
-    class="flex flex-row items-center gap-x-2 text-sm text-gray-500 md:gap-x-4"
+    class="flex flex-col flex-wrap gap-x-2 space-y-2 pt-2 text-sm text-gray-500 xs:flex-row xs:items-center xs:space-y-0 xs:pt-0 md:gap-x-4"
   >
-    <SveltyPicker
+    <!-- <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 text-center"
       mode="time"
@@ -46,7 +46,50 @@
       minuteIncrement={BLOCK_LENGTH}
       bind:value={$endTime}
       autocommit={true}
-    />
-    <span>PST</span>
+    /> -->
+
+    <div class="flex gap-[6px]">
+      <select class="select select-bordered h-8 min-h-0 py-0 pl-3 pr-8">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option>5</option>
+        <option>6</option>
+        <option>7</option>
+        <option>8</option>
+        <option selected>9</option>
+        <option>10</option>
+        <option>11</option>
+        <option>12</option>
+      </select>
+      <select class="select select-bordered h-8 min-h-0 py-0 pl-3 pr-8">
+        <option selected>AM</option>
+        <option>PM</option>
+      </select>
+    </div>
+
+    <span class="pl-2 xs:pl-0"> and </span>
+
+    <div class="flex gap-[6px]">
+      <select class="select select-bordered h-8 min-h-0 py-0 pl-3 pr-8">
+        <option>1</option>
+        <option>2</option>
+        <option>3</option>
+        <option>4</option>
+        <option selected>5</option>
+        <option>6</option>
+        <option>7</option>
+        <option>8</option>
+        <option>9</option>
+        <option>10</option>
+        <option>11</option>
+        <option>12</option>
+      </select>
+      <select class="select select-bordered h-8 min-h-0 py-0 pl-3 pr-8">
+        <option>AM</option>
+        <option selected>PM</option>
+      </select>
+    </div>
   </div>
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,6 +5,7 @@ import { join } from "path";
 import forms from "@tailwindcss/forms";
 import daisyui from "daisyui";
 import emerald from "daisyui/src/theming/themes";
+import defaultTheme from "tailwindcss/defaultTheme";
 
 // import { zotmeetTheme } from "./theme";
 
@@ -37,6 +38,11 @@ export default {
         default: ["'DM Sans'", "sans-serif"],
       },
     },
+    screens: {
+      xs: "400px",
+      ...defaultTheme.screens,
+      "3xl": "1920px",
+    },
     default: "daisy",
   },
   daisyui: {