From 7d1b7d88c08a7794a7512634395afc8161aa6f65 Mon Sep 17 00:00:00 2001
From: BQX <b22050106@njupt.edu.cn>
Date: Thu, 8 Feb 2024 22:13:23 +0800
Subject: [PATCH] feat(ui): datepicker #2

---
 packages/ui/lib/DatePicker/DatePicker.module.scss | 15 ++++++++++++++-
 packages/ui/lib/DatePicker/DatePicker.tsx         | 11 +++++------
 packages/ui/lib/Input/Input.module.scss           |  2 +-
 packages/ui/lib/Select/Select.stories.tsx         |  4 ++--
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/ui/lib/DatePicker/DatePicker.module.scss b/packages/ui/lib/DatePicker/DatePicker.module.scss
index 2517945..1477a02 100644
--- 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
index b992acd..2a36137 100644
--- 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
index c4d0fcd..5616922 100644
--- 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
index 0307286..1baba49 100644
--- 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,
   },