fix: ui (#6642)

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

@@ -89,70 +89,93 @@ const DateRangePicker = ({
         <Card
           position={'absolute'}
           zIndex={1}
-          css={{
-            '--rdp-background-color': '#d6e8ff',
-            '--rdp-accent-color': '#0000ff'
-          }}
+          p={3}
           {...(popPosition === 'top'
             ? {
                 bottom: '40px'
               }
             : {})}
         >
-          <DayPicker
-            locale={zhCN}
-            id="test"
-            mode="range"
-            defaultMonth={defaultDate.to}
-            selected={range}
-            disabled={[
-              { from: new Date(2022, 3, 1), to: addDays(new Date(), -180) },
-              { from: addDays(new Date(), 1), to: new Date(2099, 1, 1) }
-            ]}
-            onSelect={(date) => {
-              let typeDate = date as DateRangeType;
-              if (!typeDate || typeDate?.from === undefined) {
-                typeDate = {
-                  from: range?.from,
-                  to: range?.from
-                };
+          <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'
               }
-              if (typeDate?.to === undefined) {
-                typeDate.to = typeDate.from;
+            }}
+          >
+            <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={[
+                { from: new Date(2022, 3, 1), to: addDays(new Date(), -180) },
+                { from: addDays(new Date(), 1), to: new Date(2099, 1, 1) }
+              ]}
+              onSelect={(date) => {
+                let typeDate = date as DateRangeType;
+                if (!typeDate || typeDate?.from === undefined) {
+                  typeDate = {
+                    from: range?.from,
+                    to: range?.from
+                  };
+                }
+                if (typeDate?.to === undefined) {
+                  typeDate.to = typeDate.from;
+                }
 
-              if (typeDate?.from) {
-                typeDate.from = new Date(typeDate.from.setHours(0, 0, 0, 0));
-              }
-              if (typeDate?.to) {
-                typeDate.to = new Date(typeDate.to.setHours(23, 59, 59, 999));
-              }
+                if (typeDate?.from) {
+                  typeDate.from = new Date(typeDate.from.setHours(0, 0, 0, 0));
+                }
+                if (typeDate?.to) {
+                  typeDate.to = new Date(typeDate.to.setHours(23, 59, 59, 999));
+                }
 
-              setRange(typeDate);
-              onChange?.(typeDate);
-            }}
-            footer={
-              <Flex justifyContent={'flex-end'}>
-                <Button
-                  variant={'outline'}
-                  size={'sm'}
-                  mr={2}
-                  onClick={() => setShowSelected(false)}
-                >
-                  {t('common:Close')}
-                </Button>
-                <Button
-                  size={'sm'}
-                  onClick={() => {
-                    onSuccess?.(range || defaultDate);
-                    setShowSelected(false);
-                  }}
-                >
-                  {t('common:Confirm')}
-                </Button>
-              </Flex>
-            }
-          />
+                setRange(typeDate);
+                onChange?.(typeDate);
+              }}
+              footer={
+                <Flex justifyContent={'flex-end'}>
+                  <Button
+                    variant={'outline'}
+                    size={'sm'}
+                    mr={2}
+                    onClick={() => setShowSelected(false)}
+                  >
+                    {t('common:Close')}
+                  </Button>
+                  <Button
+                    size={'sm'}
+                    onClick={() => {
+                      onSuccess?.(range || defaultDate);
+                      setShowSelected(false);
+                    }}
+                  >
+                    {t('common:Confirm')}
+                  </Button>
+                </Flex>
+              }
+            />
+          </Box>
         </Card>
       )}
     </Box>

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

@@ -136,23 +136,45 @@ const DateTimePicker = ({
             top={`${position.top}px`}
             left={`${position.left}px`}
             zIndex={1500}
-            css={{
-              '--rdp-background-color': '#d6e8ff',
-              '--rdp-accent-color': '#0000ff'
-            }}
+            p={3}
           >
-            <DayPicker
-              locale={zhCN}
-              mode="single"
-              defaultMonth={selectedDate}
-              selected={selectedDate}
-              disabled={disabled}
-              onSelect={(date) => {
-                setSelectedDate(date);
-                onChange?.(date);
-                setShowSelected(false);
+            <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}
+                onSelect={(date) => {
+                  setSelectedDate(date);
+                  onChange?.(date);
+                  setShowSelected(false);
+                }}
+              />
+            </Box>
           </Card>
         </Portal>
       )}