Merge pull request #45 from NJUPT-SAST/dev-refactor

Dev refactor

packages/ui-react/lib/Accordion/Accordion.module.scss

@@ -10,6 +10,7 @@ $animation-duration: $duration-300;
  }
  .accordionTrigger {
  all: unset;
+ font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
@@ -39,10 +40,11 @@ $animation-duration: $duration-300;
  min-height: 0px;
  display: flex;
  height: fit-content;
+ font-size: 0.9rem;
  // align-items: center;
  // justify-content: center;
  .inner {
- padding: 10px 20px;
+ padding: 12px 20px;
  opacity: 0;
  transition: all $animation-duration ease-in;
  &.show {

packages/ui-react/lib/Accordion/Accordion.tsx

@@ -28,7 +28,7 @@ export interface AccordionProps extends React.HtmlHTMLAttributes<HTMLDivElement>
 
 export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
  (
- { disabled = false, accordionTrigger, accordionContent, className, width = 280, ...rest },
+ { disabled = false, accordionTrigger, accordionContent, className, width = 240, ...rest },
  ref,
  ) => {
  const accordionClass = classnames(styles['base']);

packages/ui-react/lib/Calendar/Calendar.module.scss

@@ -1,30 +1,25 @@
 @use '../variables' as *;
 $animation-duration: $duration-300;
 .base {
- height: fit-content;
- width: fit-content;
- padding: 10px;
- border-radius: $radius-10;
- background-color: var(--white-color);
- color: var(--black-color);
- box-shadow: $shadow;
- min-width: 18rem;
+ padding: 10px !important;
+ width: fit-content !important;
+
+ @include shadow;
  .calendarTitle {
- font-size: 18px;
+ font-size: 1rem;
  font-weight: 1000;
- color: var(--shadow-color);
+ // color: var(--shadow-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
- padding: 8px 10px;
+ padding: 8px 20px 8px 10px;
  .buttonContainer {
  display: flex;
  gap: 3px;
  .button {
- height: 24px;
- width: 24px;
  position: relative;
+ border: none;
  svg {
  @include absolute-center;
  }
@@ -34,46 +29,46 @@ $animation-duration: $duration-300;
  .calendarItems {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
- column-gap: 5px;
- row-gap: 3px;
- padding: 5px 10px;
+ margin: 5px 10px;
  box-sizing: border-box;
  justify-items: center;
+ box-sizing: border-box;
+ overflow: hidden;
  .calendarItem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  cursor: pointer;
+ border-radius: 0px;
  &.otherMonth {
  opacity: 0.4;
  }
  &:hover:not(&.today):not(&.select) {
- background-color: var(--background-blue);
- color: var(--primary-color);
- border-radius: $radius-5;
+ background-color: $violet-color;
+ color: $black-color;
  transition: all $animation-duration $cubic-bezier;
+ border: none;
  }
  &.today {
- background-color: var(--background-blue);
- color: var(--primary-color);
- border-radius: $radius-5;
+ background-color: $violet-color;
+ color: $black-color;
+ border: 1px solid $default-color;
  }
  &.select {
- background-color: var(--primary-color);
- border-radius: 5px;
- color: var(--white-color);
+ background-color: $violet-color;
+ color: $black-color;
  transition: all $animation-duration $cubic-bezier;
+ border: 1px solid $default-color;
  }
  }
  }
  .weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
- background-color: var(--title-shadow);
  box-sizing: border-box;
- gap: 5px;
+ // gap: 5px;
  padding: 10px;
  border-radius: 5px;
  font-weight: 600;

packages/ui-react/lib/Calendar/Calendar.stories.tsx

@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultProps: CalendarProps = {
- onChange: function () {},
+ onChange: test,
  defaultSelected: undefined,
 };