fix styles

NilFoundation · Oct 27, 2023 · f2800d9 · f2800d9
1 parent 52b91d3
commit f2800d9
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 34 deletions.
diff --git a/site/src/components/common/WebButton/WebButton.module.scss b/site/src/components/common/WebButton/WebButton.module.scss
@@ -5,10 +5,10 @@
 
 .root {
   position: relative;
-  width: 100%;
   display: flex;
-  font-family: Inter, sans-serif;
+  width: 100%;
   justify-content: space-between;
+  font-family: Inter, sans-serif;
   color: $gray-50;
   font-weight: 500;
   transition: color 0.15s ease;
@@ -62,33 +62,8 @@
       background-color: $gray-300;
     }
   }
-}
-
-.icon {
-  transition: transform 0.15s ease;
-  transform: rotate(45deg);
-}
 
-.size {
-  &-s {
-    font-size: size(14);
-    .icon {
-      width: size(14);
-      height: size(14);
-    }
-  }
-
-  &-l {
-    font-size: size(18);
-    .icon {
-      width: size(18);
-      height: size(18);
-    }
-  }
-}
-
-.disable {
-  &-disabled {
+  &:disabled {
     color: $gray-500;
     cursor: not-allowed;
 
@@ -121,3 +96,28 @@
     }
   }
 }
+
+.icon {
+  transition: transform 0.15s ease;
+  transform: rotate(45deg);
+}
+
+.size {
+  &-s {
+    font-size: size(14);
+
+    .icon {
+      width: size(14);
+      height: size(14);
+    }
+  }
+
+  &-l {
+    font-size: size(18);
+
+    .icon {
+      width: size(18);
+      height: size(18);
+    }
+  }
+}
diff --git a/site/src/components/common/WebButton/WebButton.tsx b/site/src/components/common/WebButton/WebButton.tsx
@@ -10,26 +10,25 @@ import Icon from 'components/Icon'
 type WebButtonProps = {
   children?: string,
   href?: string,
-  onClick?:((event: MouseEvent) => void) | undefined,
+  onClick?:((event: MouseEvent) => void),
   size?: 's' | 'l',
   disabled?: boolean,
   className?: string,
 }
 
-const WebButton: FC<WebButtonProps> = ({ children, href, onClick, size='l', disabled, className}) => {
+const WebButton: FC<WebButtonProps> = ({ children, href, onClick, size='s', disabled, className}) => {
 
-    const disable = disabled ? "disabled" : "none";
 
     const classNames = useMemo(() => {
       const classes = modsClasses(s, {
-        size, disable,
+        size,
       })
 
       return cx(className, s.root, classes, {})
-    }, [className, size, disable])
+    }, [className, size])
 
   return (
-    <Button href={href} onClick={onClick} className={classNames}>
+    <Button href={href} onClick={onClick} className={classNames} disabled={disabled}>
         {children}
         <Icon name="arrow-up" className={s.icon} />
     </Button>