Merge pull request #118 from subquery/feat/chekcbox

feat: new design of checkbox, header, color.
subquery · Aug 28, 2024 · 1dd14d8 · 1dd14d8
2 parents 6abd735 + 5170c05
commit 1dd14d8
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 24 deletions.
diff --git a/components/app/header/Header.less b/components/app/header/Header.less
@@ -59,7 +59,6 @@
 .@{middle} {
   margin-left: 24px;
   &__menu {
-
     &--dark.@{middle}__menu--dark.@{middle}__menu--dark {
       background-color: var(--dark-mode-card);
       padding: 0;
@@ -106,6 +105,14 @@
 
 .@{mobileHeader} {
   color: var(--sq-gray800);
+
+  &__menu {
+    &--dark {
+      .ant-drawer-content {
+        background: var(--dark-mode-background);
+      }
+    }
+  }
 }
 
 .subql-header-navlink {
@@ -248,6 +255,10 @@
       }
 
       &--dark {
+        .@{left} {
+          border-bottom: 1px solid rgba(52, 65, 75, 0.6);
+        }
+
         .@{middle} {
           &__item {
             border-bottom: 1px solid var(--dark-mode-border);

diff --git a/components/common/checkbox/checkbox.less b/components/common/checkbox/checkbox.less
@@ -42,4 +42,17 @@
       }
     }
   }
+
+  &--button&--round {
+    .ant-checkbox-wrapper {
+      border-radius: 100px;
+    }
+  }
+
+
+  &--button&--square {
+    .ant-checkbox-wrapper {
+      border-radius: 8px;
+    }
+  }
 }
diff --git a/components/common/checkbox/checkbox.tsx b/components/common/checkbox/checkbox.tsx
@@ -21,10 +21,11 @@ const innerCheckBox: FC<SubqlCheckboxProps> = ({ className, ...rest }) => {
 const innerCheckboxGroup: FC<
   {
     optionType?: 'plain' | 'button';
+    shape?: 'round' | 'square';
   } & CheckboxGroupProps
-> = ({ className, optionType = 'plain', ...rest }) => {
+> = ({ className, optionType = 'plain', shape = 'round', ...rest }) => {
   const bem = useBem('subql-checkbox-group');
-  return <Checkbox.Group className={clsx(bem([optionType]), className)} {...rest}></Checkbox.Group>;
+  return <Checkbox.Group className={clsx(bem([optionType, shape]), className)} {...rest}></Checkbox.Group>;
 };
 
 export const SubqlCheckbox = attachPropertiesToComponent(innerCheckBox, {

diff --git a/components/common/typography/Typography.less b/components/common/typography/Typography.less
@@ -158,7 +158,7 @@
       color: var(--sq-gray600);
 
       &__info {
-        color: var(--sq-blue600);
+        color: var(--sq-primary);
       }
 
       &__danger {
@@ -172,10 +172,10 @@
 
     &:hover {
       .subql-typography {
-        color: var(--sq-blue400);
+        color: var(--sq-primary-link-hover);
 
         &__info {
-          color: var(--sq-blue400);
+          color: var(--sq-primary-link-hover);
         }
 
         &__danger {

diff --git a/components/common/typography/Typography.tsx b/components/common/typography/Typography.tsx
@@ -97,10 +97,10 @@ const TypographyInner: React.FC<TypographProps> = ({
 };
 
 const Link: React.FC<LinkProps & React.HTMLProps<HTMLParagraphElement>> = (props) => {
-  const { href, children, active = false, ...rest } = props;
+  const { href, children, active = false, target, ...rest } = props;
 
   return (
-    <a href={href} className={clsx(linkBem({ active }))}>
+    <a href={href} target={target} className={clsx(linkBem({ active }))}>
       <Typography {...rest}>{children}</Typography>
     </a>
   );

diff --git a/components/styles.css b/components/styles.css
@@ -50,26 +50,16 @@
   --sq-pink700: #e968dd;
 
   /* Gray */
-  --sq-gray100: #f9fafb;
-  --sq-gray200: #f4f6f8;
-  --sq-gray300: #dfe3e8;
-  --sq-gray400: #c4cdd5;
-  --sq-gray500: #919eab;
-  --sq-gray600: #637381;
-  --sq-gray700: #454f58;
-  --sq-gray800: #212b36;
-  --sq-gray900: #1a202c;
-  --sq-graylight: #c2c9d1;
-
-  /* --sq-gray100: #E6E6E6;
-  --sq-gray200: #CCCCCC;
-  --sq-gray300: #B3B3B3;
+  --sq-gray100: #e6e6e6;
+  --sq-gray200: #cccccc;
+  --sq-gray300: #b3b3b3;
   --sq-gray400: #808080;
   --sq-gray500: #666666;
-  --sq-gray600: #4D4D4D;
+  --sq-gray600: #4d4d4d;
   --sq-gray700: #333333;
   --sq-gray800: #1a1a1a;
-  --sq-gray900: #000000; */
+  --sq-gray900: #000000;
+  --sq-graylight: #c2c9d1;
 
   --sq-white: #ffffff;