chore: Update date range picker with new theme colors (#11267)

2025-10-29 18:22:53 +00:00 · 2025-04-09 16:03:53 +05:30
parent 70a65e2c34
commit 2d14f27d5b
11 changed files with 97 additions and 54 deletions
--- a/app/javascript/dashboard/assets/scss/_next-colors.scss
+++ b/app/javascript/dashboard/assets/scss/_next-colors.scss
@@ -29,6 +29,19 @@
    --iris-11: 87 83 198;
    --iris-12: 39 41 98;

+    --blue-1: 251 253 255;
+    --blue-2: 245 249 255;
+    --blue-3: 233 243 255;
+    --blue-4: 218 236 255;
+    --blue-5: 201 226 255;
+    --blue-6: 181 213 255;
+    --blue-7: 155 195 252;
+    --blue-8: 117 171 247;
+    --blue-9: 39 129 246;
+    --blue-10: 16 115 233;
+    --blue-11: 8 109 224;
+    --blue-12: 11 50 101;
+
    --ruby-1: 255 252 253;
    --ruby-2: 255 247 248;
    --ruby-3: 254 234 237;
@@ -131,6 +144,19 @@
    --iris-11: 158 177 255;
    --iris-12: 224 223 254;

+    --blue-1: 10 17 28;
+    --blue-2: 15 24 38;
+    --blue-3: 15 39 72;
+    --blue-4: 10 49 99;
+    --blue-5: 18 61 117;
+    --blue-6: 29 84 134;
+    --blue-7: 40 89 156;
+    --blue-8: 48 106 186;
+    --blue-9: 39 129 246;
+    --blue-10: 21 116 231;
+    --blue-11: 126 182 255;
+    --blue-12: 205 227 255;
+
    --ruby-1: 25 17 19;
    --ruby-2: 30 21 23;
    --ruby-3: 58 20 30;
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -218,14 +218,14 @@ const emitDateRange = () => {
    />
    <div
      v-if="showDatePicker"
-      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl border border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-800"
+      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container"
    >
      <CalendarDateRange
        :selected-range="selectedRange"
        @set-range="setDateRange"
      />
      <div
-        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
+        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-n-strong"
      >
        <div class="flex justify-around h-fit">
          <!-- Calendars for Start and End Dates -->
@@ -251,12 +251,12 @@ const emitDateRange = () => {
              @validate="updateManualInput($event, calendar)"
              @error="handleManualInputError($event)"
            />
-            <div class="py-5 border-b border-slate-50 dark:border-slate-700/50">
+            <div class="py-5 border-b border-n-strong">
              <div
                class="flex flex-col items-center gap-2 px-5 min-w-[340px] max-h-[352px]"
                :class="
                  calendar === START_CALENDAR &&
-                  'ltr:border-r rtl:border-l border-slate-50 dark:border-slate-700/50'
+                  'ltr:border-r rtl:border-l border-n-strong'
                "
              >
                <CalendarYear
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';

+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 defineProps({
  calendarType: {
    type: String,
@@ -38,42 +40,38 @@ const onClickSetView = (type, mode) => {

 <template>
  <div class="flex items-start justify-between w-full h-9">
-    <button
-      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
+    <NextButton
+      slate
+      ghost
+      xs
+      icon="i-lucide-chevron-left"
+      class="rtl:rotate-180"
      @click="onClickPrev(calendarType)"
-    >
-      <fluent-icon
-        icon="chevron-left"
-        size="14"
-        class="text-slate-900 dark:text-slate-50"
-      />
-    </button>
+    />
    <div class="flex items-center gap-1">
      <button
        v-if="firstButtonLabel"
-        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50 hover:text-woot-600 dark:hover:text-woot-600"
+        class="p-0 text-sm font-medium text-center text-n-slate-12 hover:text-n-brand"
        @click="onClickSetView(calendarType, viewMode)"
      >
        {{ firstButtonLabel }}
      </button>
      <button
        v-if="buttonLabel"
-        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50"
-        :class="{ 'hover:text-woot-600 dark:hover:text-woot-600': viewMode }"
+        class="p-0 text-sm font-medium text-center text-n-slate-12"
+        :class="{ 'hover:text-n-brand': viewMode }"
        @click="onClickSetView(calendarType, YEAR)"
      >
        {{ buttonLabel }}
      </button>
    </div>
-    <button
-      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
+    <NextButton
+      slate
+      ghost
+      xs
+      icon="i-lucide-chevron-right"
+      class="rtl:rotate-180"
      @click="onClickNext(calendarType)"
-    >
-      <fluent-icon
-        icon="chevron-right"
-        size="14"
-        class="text-slate-900 dark:text-slate-50"
-      />
-    </button>
+    />
  </div>
 </template>
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue
@@ -65,7 +65,7 @@ const validateDate = () => {
    <input
      v-model="localDateValue"
      type="text"
-      class="reset-base border bg-slate-25 dark:bg-slate-900 ring-offset-ash-900 border-slate-50 dark:border-slate-700/50 w-full disabled:text-slate-200 dark:disabled:text-slate-700 disabled:cursor-not-allowed text-slate-800 dark:text-slate-50 px-1.5 py-1 text-sm rounded-xl h-10"
+      class="!text-sm !mb-0 disabled:!outline-n-strong"
      :placeholder="dateFormat"
      :disabled="isDisabled"
      @keypress.enter="validateDate"
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue
@@ -18,7 +18,7 @@ const setDateRange = range => {
 <template>
  <div class="w-[200px] flex flex-col items-start">
    <h4
-      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-slate-600 dark:text-slate-200"
+      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-n-slate-12"
    >
      {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
    </h4>
@@ -26,11 +26,11 @@ const setDateRange = range => {
      <button
        v-for="range in dateRanges"
        :key="range.label"
-        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-slate-50 dark:hover:bg-slate-700"
+        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-n-alpha-2 dark:hover:bg-n-solid-3"
        :class="
          range.value === selectedRange
-            ? 'text-slate-800 dark:text-slate-50 bg-slate-50 dark:bg-slate-700'
-            : 'text-slate-600 dark:text-slate-200'
+            ? 'text-n-slate-12 bg-n-alpha-1 dark:bg-n-solid-active'
+            : 'text-n-slate-12'
        "
        @click="setDateRange(range)"
      >
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
@@ -1,4 +1,6 @@
 <script setup>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 const emit = defineEmits(['clear', 'change']);

 const onClickClear = () => {
@@ -11,18 +13,19 @@ const onClickApply = () => {
 </script>

 <template>
-  <div class="h-[56px] flex justify-between px-5 py-3 items-center">
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-slate-600 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-100"
+  <div class="h-[56px] flex justify-between gap-2 px-2 py-3 items-center">
+    <NextButton
+      slate
+      ghost
+      sm
+      :label="$t('DATE_PICKER.CLEAR_BUTTON')"
      @click="onClickClear"
-    >
-      {{ $t('DATE_PICKER.CLEAR_BUTTON') }}
-    </button>
-    <button
-      class="p-1.5 rounded-lg w-fit text-sm font-medium text-woot-500 dark:text-woot-300 hover:text-woot-700 dark:hover:text-woot-500"
+    />
+    <NextButton
+      sm
+      ghost
+      :label="$t('DATE_PICKER.APPLY_BUTTON')"
      @click="onClickApply"
-    >
-      {{ $t('DATE_PICKER.APPLY_BUTTON') }}
-    </button>
+    />
  </div>
 </template>
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
@@ -71,10 +71,12 @@ const selectMonth = index => {
      <button
        v-for="(month, index) in months"
        :key="index"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[92px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        class="p-2 text-sm font-medium text-center text-n-slate-12 w-[92px] h-10 rounded-lg py-2.5 px-2"
        :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:bg-woot-700':
+          'bg-n-brand text-white hover:bg-n-blue-10':
            index === activeMonthIndex,
+          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3':
+            index !== activeMonthIndex,
        }"
        @click="selectMonth(index)"
      >
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
@@ -107,17 +107,16 @@ const isNextDayInRange = day => {
 };

 const dayClasses = day => ({
-  'text-slate-500 dark:text-slate-400 pointer-events-none':
-    !isInCurrentMonth(day),
-  'text-slate-800 dark:text-slate-50 hover:text-slate-800 dark:hover:text-white hover:bg-woot-100 dark:hover:bg-woot-700':
+  'text-n-slate-10 pointer-events-none': !isInCurrentMonth(day),
+  'text-n-slate-12 hover:text-n-slate-12 hover:bg-n-blue-6 dark:hover:bg-n-blue-7':
    isInCurrentMonth(day),
-  'bg-woot-600 dark:bg-woot-600 text-white dark:text-white':
+  'bg-n-brand text-white':
    isSelectedStartOrEndDate(day) && isInCurrentMonth(day),
-  'bg-woot-50 dark:bg-woot-800':
+  'bg-n-blue-4 dark:bg-n-blue-5':
    (isInRange(day) || isHoveringInRange(day)) &&
    !isSelectedStartOrEndDate(day) &&
    isInCurrentMonth(day),
-  'outline outline-1 outline-woot-200 -outline-offset-1 dark:outline-woot-700 text-woot-600 dark:text-woot-400':
+  'outline outline-1 outline-n-blue-8 -outline-offset-1 !text-n-blue-text':
    isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
 });
 </script>
@@ -164,7 +163,7 @@ const dayClasses = day => ({
            !isLastDayOfMonth(day) &&
            isInCurrentMonth(day)
          "
-          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-woot-50 dark:bg-woot-800 -z-10"
+          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-n-blue-4 dark:bg-n-blue-5 -z-10"
        />
      </div>
    </div>
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue
@@ -72,10 +72,10 @@ const selectYear = year => {
      <button
        v-for="year in years"
        :key="year"
-        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[144px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        class="p-2 text-sm font-medium text-center text-n-slate-12 w-[144px] h-10 rounded-lg py-2.5 px-2"
        :class="{
-          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:hover:bg-woot-700':
-            year === activeYear,
+          'bg-n-brand text-white hover:bg-n-blue-10': year === activeYear,
+          'hover:bg-n-alpha-2 dark:hover:bg-n-solid-3': year !== activeYear,
        }"
        @click="selectYear(year)"
      >
--- a/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
@@ -48,7 +48,7 @@ const openDatePicker = () => {

 <template>
  <button
-    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-slate-50 dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1"
    @click="openDatePicker"
  >
    <fluent-icon
--- a/theme/colors.js
+++ b/theme/colors.js
@@ -315,6 +315,21 @@ export const colors = {
      12: 'rgb(var(--iris-12) / <alpha-value>)',
    },

+    blue: {
+      1: 'rgb(var(--blue-1) / <alpha-value>)',
+      2: 'rgb(var(--blue-2) / <alpha-value>)',
+      3: 'rgb(var(--blue-3) / <alpha-value>)',
+      4: 'rgb(var(--blue-4) / <alpha-value>)',
+      5: 'rgb(var(--blue-5) / <alpha-value>)',
+      6: 'rgb(var(--blue-6) / <alpha-value>)',
+      7: 'rgb(var(--blue-7) / <alpha-value>)',
+      8: 'rgb(var(--blue-8) / <alpha-value>)',
+      9: 'rgb(var(--blue-9) / <alpha-value>)',
+      10: 'rgb(var(--blue-10) / <alpha-value>)',
+      11: 'rgb(var(--blue-11) / <alpha-value>)',
+      12: 'rgb(var(--blue-12) / <alpha-value>)',
+    },
+
    ruby: {
      1: 'rgb(var(--ruby-1) / <alpha-value>)',
      2: 'rgb(var(--ruby-2) / <alpha-value>)',