From e087c7477f429e301000b524666f7d1aebe5abf5 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:13 +0000
Subject: [PATCH] fix: adjust box shadows

---
 .../calendar/DateTimeSpanningContainer.vue    |  4 ++--
 .../smartsheet/calendar/SideMenu.vue          |  1 -
 .../smartsheet/calendar/SideRecordCard.vue    |  3 ++-
 .../calendar/WeekView/DateField.vue           | 24 +++++++++++++++++--
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
index a038dfd4a5..2adac36db6 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DateTimeSpanningContainer.vue
@@ -138,7 +138,7 @@ const calendarData = computed(() => {
       const style: Partial<CSSStyleDeclaration> = {
         top: `${row * 28 + row * 8}px`,
         left: `${startDayIndex * perDayWidth}px`,
-        width: `${spanDays * perDayWidth + 8}px`,
+        width: `${spanDays * perDayWidth}px`,
       }
 
       recordsInRange.push({
@@ -244,7 +244,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
       ref="container"
       :style="{
         height: `min(64px)`,
-        width: 'calc(100% - 67px)',
+        width: `calc(100% - ${activeCalendarView === 'week' ? '64px' : '66px'})`,
       }"
       :class="{
         'border-gray-100': activeCalendarView === 'day',
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 53adce2ccf..b5f4efcc7d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -546,7 +546,6 @@ onClickOutside(searchRef, toggleSearch)
                     : dayjs(record.row[record.rowMeta.range!.fk_to_col.title!]).format('DD MMM • HH:mm A')
                   : null
               "
-                color="blue"
                 data-testid="nc-sidebar-record-card"
                 @click="emit('expandRecord', record)"
                 @dragstart="dragStart($event, record)"
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
index bb901643f0..924045b7af 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
@@ -9,7 +9,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   fromDate: '',
-  color: 'blue',
+  color: 'gray',
   showDate: true,
   invalid: false,
 })
@@ -26,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
           'bg-yellow-500': props.color === 'yellow',
           'bg-pink-500': props.color === 'pink',
           'bg-purple-500': props.color === 'purple',
+          'bg-gray-900': color === 'gray',
         }"
         class="block h-10 w-1 rounded"
       ></span>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index b60824d138..761dd9b3fd 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -510,7 +510,7 @@ const addRecord = (date: dayjs.Dayjs) => {
         v-for="(date, weekIndex) in weekDates"
         :key="weekIndex"
         :class="{
-          '!border-brand-500 !border-b-gray-200': dayjs(date).isSame(selectedDate, 'day'),
+          'selected-date-header': dayjs(date).isSame(selectedDate, 'day'),
           'w-1/5': maxVisibleDays === 5,
           'w-1/7': maxVisibleDays === 7,
         }"
@@ -526,7 +526,7 @@ const addRecord = (date: dayjs.Dayjs) => {
         v-for="(date, dateIndex) in weekDates"
         :key="dateIndex"
         :class="{
-          '!border-1 !border-t-0 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
+          'selected-date': dayjs(date).isSame(selectedDate, 'day'),
           '!bg-gray-50': date.get('day') === 0 || date.get('day') === 6,
           'w-1/5': maxVisibleDays === 5,
           'w-1/7': maxVisibleDays === 7,
@@ -588,4 +588,24 @@ const addRecord = (date: dayjs.Dayjs) => {
   -ms-user-select: none;
   user-select: none;
 }
+
+.selected-date {
+  @apply relative;
+  &:after {
+    @apply rounded-b-sm pointer-events-none absolute inset-0 w-full h-full;
+    content: '';
+    z-index: 3;
+    box-shadow: 2px 0 0 #3366ff, -2px 0 0 #3366ff, 0 2px 0 #3366ff !important;
+  }
+}
+
+.selected-date-header {
+  @apply relative;
+  &:after {
+    @apply rounded-t-sm pointer-events-none absolute inset-0 -left-0.25 w-[calc(100% + 2px)] h-full;
+    content: '';
+    z-index: 10;
+    box-shadow: 2px 0 0 #3366ff, -2px 0 0 #3366ff, 0 -2px 0 #3366ff !important;
+  }
+}
 </style>