feat(nc-gui): border color & adjust height

packages/nc-gui/components/smartsheet/calendar/MonthView.vue

@@ -629,7 +629,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
       <div
         v-for="(day, index) in days"
         :key="index"
-        class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-200 font-semibold text-gray-500"
+        class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-100 font-semibold text-gray-500"
       >
         {{ day }}
       </div>
@@ -653,7 +653,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
               isDateSelected(day) || (focusedDate && dayjs(day).isSame(focusedDate, 'day')),
             '!text-gray-400': !isDayInPagedMonth(day),
           }"
-          class="text-right relative group last:border-r-0 text-sm h-full border-r-1 border-b-1 border-gray-200 font-medium hover:bg-gray-50 text-gray-800 bg-white"
+          class="text-right relative group last:border-r-0 text-sm h-full border-r-1 border-b-1 border-gray-100 font-medium hover:bg-gray-50 text-gray-800 bg-white"
           data-testid="nc-calendar-month-day"
           @click="selectDate(day)"
         >

packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue

@@ -51,7 +51,7 @@ const emit = defineEmits(['resize-start'])
       'group-hover:(border-brand-500)': resize,
       '!border-brand-500 border-1': selected || hover,
     }"
-    class="relative flex items-center h-full ml-0.25 border-1 border-gray-50"
+    class="relative flex items-center h-full ml-0.25 border-1 border-transparent"
   >
     <div class="h-full py-1">
       <div

packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

@@ -189,7 +189,11 @@ const recordsAcrossAllRange = computed<{
           startDate = startDate.add(1, 'minute')
         }
 
-        const dayIndex = ogStartDate.day() - 1
+        let dayIndex = ogStartDate.day() - 1
+
+        if (dayIndex === -1) {
+          dayIndex = 6
+        }
 
         const hourKey = ogStartDate.format('HH:mm')
 
@@ -208,7 +212,7 @@ const recordsAcrossAllRange = computed<{
 
         style = {
           ...style,
-          top: `${topPx - hourIndex - hourIndex * 0.15}px`,
+          top: `${topPx - hourIndex - hourIndex * 0.15 + 0.7}px`,
           height: `${perHeight - 4}px`,
         }
 
@@ -371,14 +375,14 @@ const recordsAcrossAllRange = computed<{
           overlapIndex = Math.max(overlapIndex, overlaps[dateKey][hours].id.indexOf(record.rowMeta.id!))
         }
       }
-      const spacing = 1
+      const spacing = 0.1
       const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7
       const leftPerRecord = widthPerRecord * overlapIndex
 
       record.rowMeta.style = {
         ...record.rowMeta.style,
-        left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}%)`,
+        left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}% )`,
-        width: `calc(${widthPerRecord}%)`,
+        width: `calc(${widthPerRecord - 0.1}%)`,
       }
       return record
     })
@@ -744,7 +748,7 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
         :class="{
           'text-brand-500': date[0].isSame(dayjs(), 'date'),
         }"
-        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
+        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-100 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
       >
         {{ dayjs(date[0]).format('DD ddd') }}
       </div>
@@ -766,7 +770,7 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
           :class="{
             'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
           }"
-          class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-200 border-t-gray-200"
+          class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100"
           data-testid="nc-calendar-week-hour"
           @click="
             () => {