feat(ui): datepicker #2

NJUPT-SAST · Feb 8, 2024 · 7d1b7d8 · 7d1b7d8
1 parent cc0e2be
commit 7d1b7d8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/packages/ui/lib/DatePicker/DatePicker.module.scss b/packages/ui/lib/DatePicker/DatePicker.module.scss
@@ -12,18 +12,31 @@
   transition: all 0.2s ease-in-out;
   padding: 10px 15px !important;
   width: 280px;
-  &.select {
+  height: 50px;
+  border-radius: 10px;
+  border: 2px solid var(--shadow-color) !important;
+  &.is-select-date {
+    border: 2px solid var(--primary-color) !important;
     color: var(--primary-color) !important;
+    .select-date {
+      color: var(--black-color) !important;
+    }
     svg {
       fill: var(--primary-color) !important;
     }
   }
+  &.have-select-date {
+    .select-date {
+      color: var(--black-color) !important;
+    }
+  }
   svg {
     fill: var(--shadow-color);
     transition: all 0.2s ease-in-out;
   }
   &:hover {
     color: var(--primary-color) !important;
+    border: 2px solid var(--primary-color) !important;
     svg {
       fill: var(--primary-color);
     }

diff --git a/packages/ui/lib/DatePicker/DatePicker.tsx b/packages/ui/lib/DatePicker/DatePicker.tsx
@@ -83,11 +83,10 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
           {...rest}
         >
           <Button
-            color="ghost"
-            className={`${styles['date-picker-button']} ${
-              styles[selectDateString ? 'select' : '']
-            }`}
-            shadow="regular"
+            color="border"
+            className={`${styles['date-picker-button']} 
+            ${styles[calendarVisible ? 'is-select-date' : '']}
+             ${styles[selectDateString ? 'have-select-date' : '']}`}
             onClick={handleCalendarVisible}
           >
             <svg
@@ -106,7 +105,7 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
             {!selectDateString ? (
               <span>Pick a date</span>
             ) : (
-              <span>{selectDate?.toDateString()}</span>
+              <span className={styles['select-date']}>{selectDate?.toDateString()}</span>
             )}
           </Button>
           {calendarVisible && (

diff --git a/packages/ui/lib/Input/Input.module.scss b/packages/ui/lib/Input/Input.module.scss
@@ -38,7 +38,7 @@
 
   .input {
     all: unset;
-    padding: 23px 12px 13px 12px;
+    padding: 21px 12px 11px 12px;
     width: -webkit-fill-available;
     position: relative;
     top: 0;

diff --git a/packages/ui/lib/Select/Select.stories.tsx b/packages/ui/lib/Select/Select.stories.tsx
@@ -34,13 +34,13 @@ const defaultProps: SelectProps = {
   selectKey: 2,
 };
 
-export const DefaultButton: Story = {
+export const DefaultSelect: Story = {
   args: {
     ...defaultProps,
   },
 };
 
-export const DisabledButton: Story = {
+export const DisabledSelect: Story = {
   args: {
     ...defaultProps,
   },