fix: ui (#6642)

packages/web/components/common/DateRangePicker/index.tsx

@@ -89,20 +89,42 @@ const DateRangePicker = ({
         <Card
           position={'absolute'}
           zIndex={1}
-          css={{
-            '--rdp-background-color': '#d6e8ff',
-            '--rdp-accent-color': '#0000ff'
-          }}
+          p={3}
           {...(popPosition === 'top'
             ? {
                 bottom: '40px'
               }
             : {})}
         >
+          <Box
+            sx={{
+              '.rdp-day_button:hover:not(:disabled)': {
+                backgroundColor: '#E1EAFF'
+              },
+              '.rdp-range_start .rdp-day_button, .rdp-range_end .rdp-day_button': {
+                backgroundColor: '#3370FF',
+                color: 'white',
+                border: 'none'
+              },
+              '.rdp-range_start .rdp-day_button:hover, .rdp-range_end .rdp-day_button:hover': {
+                backgroundColor: '#2860E0'
+              },
+              '.rdp-button_previous:hover, .rdp-button_next:hover': {
+                backgroundColor: '#F0F4FF',
+                borderRadius: '6px'
+              }
+            }}
+          >
             <DayPicker
               locale={zhCN}
               id="test"
               mode="range"
+              style={
+                {
+                  '--rdp-accent-color': '#3370FF',
+                  '--rdp-accent-background-color': '#E1EAFF'
+                } as React.CSSProperties
+              }
               defaultMonth={defaultDate.to}
               selected={range}
               disabled={[
@@ -153,6 +175,7 @@ const DateRangePicker = ({
                 </Flex>
               }
             />
+          </Box>
         </Card>
       )}
     </Box>

packages/web/components/common/DateTimePicker/index.tsx

@@ -136,14 +136,35 @@ const DateTimePicker = ({
             top={`${position.top}px`}
             left={`${position.left}px`}
             zIndex={1500}
-            css={{
-              '--rdp-background-color': '#d6e8ff',
-              '--rdp-accent-color': '#0000ff'
+            p={3}
+          >
+            <Box
+              sx={{
+                '.rdp-day_button:hover:not(:disabled)': {
+                  backgroundColor: '#E1EAFF'
+                },
+                '.rdp-selected .rdp-day_button': {
+                  backgroundColor: '#3370FF',
+                  color: 'white',
+                  border: 'none'
+                },
+                '.rdp-selected .rdp-day_button:hover': {
+                  backgroundColor: '#2860E0'
+                },
+                '.rdp-button_previous:hover, .rdp-button_next:hover': {
+                  backgroundColor: '#F0F4FF',
+                  borderRadius: '6px'
+                }
               }}
             >
               <DayPicker
                 locale={zhCN}
                 mode="single"
+                style={
+                  {
+                    '--rdp-accent-color': '#3370FF'
+                  } as React.CSSProperties
+                }
                 defaultMonth={selectedDate}
                 selected={selectedDate}
                 disabled={disabled}
@@ -153,6 +174,7 @@ const DateTimePicker = ({
                   setShowSelected(false);
                 }}
               />
+            </Box>
           </Card>
         </Portal>
       )}