refactor: lots updates

src/common/component/styled/Button.js

@@ -5,7 +5,7 @@ const StyledButton = styled.button`
   background: none;
   border: 1px solid #e5e7eb;
   box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
-  border-radius: 4px;
+  border-radius: var(--br, 4px);
   font-weight: 500;
   color: #374151;
   &.main {
@@ -18,6 +18,11 @@ const StyledButton = styled.button`
     background: #ef4444;
     color: #fff;
   }
+  &.ghost {
+    border-color: #1fe1f9;
+    background: none;
+    color: #1fe1f9;
+  }
 `;
 
 export default StyledButton;

src/common/component/styled/Checkbox.js

@@ -6,7 +6,6 @@ const Styled = styled.input`
   appearance: none;
   /* Not removed via appearance */
   margin: 0;
-  /* color: #1fe1f9; */
   width: 20px;
   height: 20px;
   border: 1px solid #d0d5dd;
@@ -30,6 +29,12 @@ const Styled = styled.input`
       transform: scale(1);
     }
   }
+  &:disabled {
+    border-color: #ccc;
+    &::before {
+      box-shadow: inset 10px 10px #ccc;
+    }
+  }
 `;
 export default function StyledCheckbox(props) {
   return <Styled {...props} type="checkbox" />;