From d3486b4bc1eb8962ff8ae3fe2e42ba6c0a127f90 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Wed, 11 Dec 2024 11:41:21 +0800
Subject: [PATCH] fix: use s-box style for time input

---
 apps/ui/src/components/Modal/DateTime.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/ui/src/components/Modal/DateTime.vue b/apps/ui/src/components/Modal/DateTime.vue
index 3602f3903..972d129f5 100644
--- a/apps/ui/src/components/Modal/DateTime.vue
+++ b/apps/ui/src/components/Modal/DateTime.vue
@@ -106,25 +106,28 @@ watch(
     <template #header>
       <h3 v-text="current.title" />
     </template>
-    <div :class="['!m-4 text-center', { 's-error': formError }]">
+    <div :class="['s-box !m-4 text-center', { 's-error': formError }]">
       <UiCalendar
         v-if="isCurrent('date')"
         :min="min"
         :selected="date"
         @pick="handleDateUpdate"
       />
-      <template v-else-if="isCurrent('time')">
-        <input
-          v-model="time"
-          type="time"
-          class="s-input mx-auto max-w-[140px] text-center text-lg"
-        />
+      <div v-else-if="isCurrent('time')" class="s-base">
+        <div class="relative mx-auto max-w-[140px]">
+          <label class="s-label w-full">Time</label>
+          <input
+            v-model="time"
+            type="time"
+            class="s-input text-center text-lg"
+          />
+        </div>
         <span
           v-if="formError"
           class="s-input-error-message"
           v-text="formError"
         />
-      </template>
+      </div>
     </div>
     <template #footer>
       <div class="flex space-x-3">