feat: ✨ update time picker

package.json

@@ -37,7 +37,6 @@
     "lucia": "^3.1.1",
     "pg": "^8.11.3",
     "postgres": "3.4.3",
-    "svelty-picker": "^5.2.7",
     "tailwind-merge": "^2.2.1",
     "tsx": "^4.7.2",
     "unplugin-icons": "^0.18.5"

src/lib/components/creation/Creation.svelte

@@ -40,6 +40,16 @@
 
     goto(`/availability/${meetingId}`);
   };
+
+  const hasValidParams = () => {
+    return $selectedDays.length > 0 &&
+      $startTime &&
+      $endTime &&
+      $startTime < $endTime &&
+      $meetingName
+      ? true
+      : false;
+  };
 </script>
 
 <div class="px-4 pt-8 md:pl-[60px] md:pt-10">
@@ -70,7 +80,7 @@
     class={cn(
       "btn w-48 border-none bg-success font-montserrat text-xl font-medium text-gray-light sm:btn-wide",
     )}
-    disabled={$selectedDays.length > 0 && $startTime && $endTime && $meetingName ? false : true}
+    disabled={!hasValidParams()}
     on:click={handleCreation}
   >
     Continue →

src/lib/components/creation/MeetingV2/MeetingTimeField.svelte

@@ -1,52 +1,74 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import SveltyPicker from "svelty-picker";
-
-  import { BLOCK_LENGTH } from "$lib/stores/availabilityStores";
-  import { DEFAULT_MEETING_TIMES, startTime, endTime } from "$lib/stores/meetingSetupStores";
+  import { startTime, endTime } from "$lib/stores/meetingSetupStores";
+  import type { HourMinuteString } from "$lib/types/chrono";
+  import { cn } from "$lib/utils/utils";
   import ClockIcon from "~icons/material-symbols/nest-clock-farsight-analog-outline";
 
-  /* Reset to the default meeting name*/
-  onMount(() => {
-    $startTime = DEFAULT_MEETING_TIMES.startTime;
-    $endTime = DEFAULT_MEETING_TIMES.endTime;
-  });
+  let startHour: number = 9;
+  let endHour: number = 4;
+  let startPeriod: "AM" | "PM" = "AM";
+  let endPeriod: "AM" | "PM" = "PM";
+
+  const convertTo24Hour = (hour: number, period: "AM" | "PM"): string => {
+    if (period === "PM" && hour !== 12) {
+      hour += 12;
+    } else if (period === "AM" && hour === 12) {
+      hour = 0;
+    }
+
+    return hour.toString().padStart(2, "0");
+  };
+
+  $: $startTime = `${convertTo24Hour(startHour, startPeriod)}:00` as HourMinuteString;
+  $: $endTime = `${convertTo24Hour(endHour, endPeriod)}:00` as HourMinuteString;
 </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
-      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"
-      format="hh:ii"
-      displayFormat="HH:ii P"
-      minuteIncrement={BLOCK_LENGTH}
-      manualInput={true}
-      autocommit={true}
-      bind:value={$startTime}
-    />
-    <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 text-center"
-      mode="time"
-      format="hh:ii"
-      displayFormat="HH:ii P"
-      manualInput={true}
-      minuteIncrement={BLOCK_LENGTH}
-      bind:value={$endTime}
-      autocommit={true}
-    />
-    <span>PST</span>
+    <div class="flex gap-[6px]">
+      <select bind:value={startHour} class="select select-bordered h-8 min-h-0 py-0 pl-3 pr-8">
+        {#each Array.from({ length: 12 }, (_, i) => i + 1) as hour}
+          <option value={hour} selected={startHour === hour}>{hour}</option>
+        {/each}
+      </select>
+      <select bind:value={startPeriod} class="select select-bordered h-8 min-h-0 py-0 pl-3 pr-8">
+        <option selected={startPeriod === "AM"}>AM</option>
+        <option selected={startPeriod === "PM"}>PM</option>
+      </select>
+    </div>
+
+    <span class="pl-2 xs:pl-0"> and </span>
+
+    <div class="flex gap-[6px]">
+      <select
+        bind:value={endHour}
+        class={cn(
+          "select select-bordered h-8 min-h-0 py-0 pl-3 pr-8",
+          $startTime >= $endTime && "border-red-500 focus:border-red-500 focus:outline-red-500",
+        )}
+      >
+        {#each Array.from({ length: 12 }, (_, i) => i + 1) as hour}
+          <option value={hour} selected={endHour === hour}>{hour}</option>
+        {/each}
+      </select>
+      <select
+        bind:value={endPeriod}
+        class={cn(
+          "select select-bordered h-8 min-h-0 py-0 pl-3 pr-8",
+          $startTime >= $endTime && "border-red-500 focus:border-red-500 focus:outline-red-500",
+        )}
+      >
+        <option selected={endPeriod === "AM"}>AM</option>
+        <option selected={endPeriod === "PM"}>PM</option>
+      </select>
+    </div>
   </div>
 </div>

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: {