chore: small code cleanups

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/DatePickerPopup.tsx

@@ -8,10 +8,8 @@ import Calendar from 'react-calendar';
 import dayjs from 'dayjs';
 import { ClockSvg } from '$app/components/_shared/svg/ClockSvg';
 import { MoreSvg } from '$app/components/_shared/svg/MoreSvg';
-import { CheckboxSvg } from '$app/components/_shared/svg/CheckboxSvg';
 import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg';
 import { useCell } from '$app/components/_shared/database-hooks/useCell';
-import { DateCellDataPB } from '@/services/backend';
 
 export const DatePickerPopup = ({
   left,

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx

@@ -1,16 +1,11 @@
-import Picker from 'react-tailwindcss-datepicker';
-import { DateValueType } from 'react-tailwindcss-datepicker/dist/types';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { DateCellDataPB } from '@/services/backend';
-import { CellController } from '$app/stores/effects/database/cell/cell_controller';
 
 export const EditCellDate = ({
   data,
-  cellController,
   onEditClick,
 }: {
   data?: DateCellDataPB;
-  cellController: CellController<any, any>;
   onEditClick: (left: number, top: number) => void;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
@@ -23,7 +18,7 @@ export const EditCellDate = ({
 
   return (
     <div ref={ref} onClick={() => onClick()} className={'px-4 py-2'}>
-      {data?.date || ''}
+      {data?.date || <>&nbsp;</>}
     </div>
   );
 };

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx

@@ -67,12 +67,8 @@ export const EditCellWrapper = ({
           <EditCheckboxCell data={data as boolean | undefined} cellController={cellController}></EditCheckboxCell>
         )}
 
-        {cellIdentifier.fieldType === FieldType.DateTime && cellController && (
-          <EditCellDate
-            data={data as DateCellDataPB | undefined}
-            onEditClick={onEditDateClick}
-            cellController={cellController}
-          ></EditCellDate>
+        {cellIdentifier.fieldType === FieldType.DateTime && (
+          <EditCellDate data={data as DateCellDataPB | undefined} onEditClick={onEditDateClick}></EditCellDate>
         )}
 
         {cellIdentifier.fieldType === FieldType.Number && cellController && (

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx

@@ -12,7 +12,6 @@ import { ChangeFieldTypePopup } from '$app/components/_shared/EditRow/ChangeFiel
 import { TypeOptionController } from '$app/stores/effects/database/field/type_option/type_option_controller';
 import { Some } from 'ts-results';
 import { FieldType } from '@/services/backend';
-import { CellOptions } from '$app/components/_shared/EditRow/CellOptions';
 import { CellOptionsPopup } from '$app/components/_shared/EditRow/CellOptionsPopup';
 import { DatePickerPopup } from '$app/components/_shared/EditRow/DatePickerPopup';
 

frontend/appflowy_tauri/src/styles/Calendar.css

@@ -83,7 +83,6 @@
 }
 
 .react-calendar__month-view__days__day--neighboringMonth {
-  /*color: #757575;*/
   @apply text-shade-4;
 }
 
@@ -95,11 +94,10 @@
 
 .react-calendar__tile {
   max-width: 100%;
-  /*padding: 10px 6.6667px;*/
   background: none;
   text-align: center;
   line-height: 16px;
-  @apply p-1;
+  @apply rounded py-2;
 }
 
 .react-calendar__tile:disabled {
@@ -112,12 +110,12 @@
 }
 
 .react-calendar__tile--now {
-  @apply rounded bg-shade-6;
+  @apply bg-shade-6;
 }
 
 .react-calendar__tile--now:enabled:hover,
 .react-calendar__tile--now:enabled:focus {
-  @apply rounded bg-shade-6;
+  @apply bg-shade-6;
 }
 
 .react-calendar__tile--hasActive {
@@ -130,14 +128,14 @@
 }
 
 .react-calendar__tile--active {
-  @apply rounded bg-main-accent text-white;
+  @apply bg-main-accent text-white;
 }
 
 .react-calendar__tile--active:enabled:hover,
 .react-calendar__tile--active:enabled:focus {
-  background: #1087ff;
+  @apply bg-main-hovered;
 }
 
 .react-calendar--selectRange .react-calendar__tile--hover {
-  background-color: #e6e6e6;
+  @apply bg-shade-4;
 }