ui: date range control style

undb-io · Nov 21, 2024 · 8e7c41e · 8e7c41e
1 parent b733aa2
commit 8e7c41e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/apps/frontend/src/lib/components/blocks/field-control/date-range-control.svelte b/apps/frontend/src/lib/components/blocks/field-control/date-range-control.svelte
@@ -58,12 +58,24 @@
       >
         {#if internalValue && internalValue.start}
           {#if internalValue.end}
-            {formatter(internalValue.start.toDate())} - {formatter(internalValue.end.toDate())}
+            <span class="flex items-center gap-1">
+              <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+                {formatter(internalValue.start.toDate())}
+              </span>
+              <span class="mx-1 text-xs text-gray-500"> - </span>
+              <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+                {formatter(internalValue.end.toDate())}
+              </span>
+            </span>
           {:else}
-            {formatter(internalValue.start.toDate())}
+            <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+              {formatter(internalValue.start.toDate())}
+            </span>
           {/if}
         {:else if value?.[0]}
-          {formatter(new Date(value[0]))}
+          <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+            {formatter(new Date(value[0]))}
+          </span>
         {/if}
       </Button>
     </Popover.Trigger>

diff --git a/apps/frontend/src/lib/components/blocks/field-value/date-range-field.svelte b/apps/frontend/src/lib/components/blocks/field-value/date-range-field.svelte
@@ -13,8 +13,18 @@
   {#if !value?.[0] && !value?.[1]}
     {placeholder}
   {:else if value?.[0] && value?.[1]}
-    {formatter(value[0])} - {formatter(value[1])}
+    <span class="flex items-center gap-1">
+      <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+        {formatter(value[0])}
+      </span>
+      <span class="mx-1 text-xs text-gray-500"> - </span>
+      <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+        {formatter(value[1])}
+      </span>
+    </span>
   {:else if value?.[0]}
-    {formatter(value[0])}
+    <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+      {formatter(value[0])}
+    </span>
   {/if}
 </div>
diff --git a/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte b/apps/frontend/src/lib/components/blocks/grid-view/editable-cell/date-range-cell.svelte
@@ -180,12 +180,24 @@
     <span class="flex w-full items-center truncate">
       {#if internalValue && internalValue.start}
         {#if internalValue.end}
-          {formatter(internalValue.start.toDate())} - {formatter(internalValue.end.toDate())}
+          <span class="flex items-center gap-1">
+            <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+              {formatter(internalValue.start.toDate())}
+            </span>
+            <span class="mx-1 text-xs text-gray-500"> - </span>
+            <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+              {formatter(internalValue.end.toDate())}
+            </span>
+          </span>
         {:else}
-          {formatter(internalValue.start.toDate())}
+          <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+            {formatter(internalValue.start.toDate())}
+          </span>
         {/if}
       {:else if value?.[0]}
-        {formatter(new Date(value[0]))}
+        <span class="rounded-sm border bg-gray-50 px-1 py-0.5">
+          {formatter(new Date(value[0]))}
+        </span>
       {/if}
     </span>
   {/if}