Add checkbox component and improve styling of checkbox

components/chain-list/all-chains-item.tsx

@@ -4,7 +4,6 @@ import { Dispatch, FunctionComponent, SetStateAction } from "react";
 import { ChainImage } from "./chain-image";
 import { Flex1 } from "../../styles/flex-1";
 import {
-  ChainCheckBox,
   ChainImageContainer,
   ChainInfoContainer,
   ChainItemContainer,
@@ -13,6 +12,7 @@ import {
 } from "./chain-item";
 import color from "../../styles/color";
 import styled from "styled-components";
+import { Checkbox } from "../checkbox";
 
 interface Props {
   allChecked: boolean;
@@ -49,7 +49,7 @@ export const AllChainsItem: FunctionComponent<Props> = (props) => {
 
         <Flex1 />
 
-        <ChainCheckBox checked={allChecked} readOnly />
+        <Checkbox checked={allChecked} />
       </ChainItemContainer>
     </AllChainsContainer>
   );

components/chain-list/chain-item.tsx

@@ -5,6 +5,7 @@ import color from "../../styles/color";
 import { Flex1 } from "../../styles/flex-1";
 import styled from "styled-components";
 import { ChainImage } from "./chain-image";
+import { Checkbox } from "../checkbox";
 
 interface Props {
   chainItem: ChainItemType;
@@ -52,7 +53,7 @@ export const ChainItem: FunctionComponent<Props> = (props) => {
 
       <Flex1 />
 
-      <ChainCheckBox checked={checked} readOnly />
+      <Checkbox checked={checked} />
     </ChainItemContainer>
   );
 };
@@ -125,10 +126,3 @@ export const WalletAddress = styled.div`
 
   color: ${color.grey["400"]};
 `;
-
-export const ChainCheckBox = styled.input.attrs({ type: "checkbox" })`
-  width: 1.5rem;
-  height: 1.5rem;
-
-  accent-color: ${color.orange["200"]};
-`;

components/checkbox/index.tsx

@@ -0,0 +1,70 @@
+import { FunctionComponent } from "react";
+import color from "../../styles/color";
+import styled from "styled-components";
+
+export const Checkbox: FunctionComponent<{ checked: boolean }> = ({
+  checked,
+}) => {
+  return (
+    <ChainCheckBoxContainer>
+      <ChainCheckBoxHidden checked={checked} readOnly={true} />
+      <ChainCheckBoxStyled checked={checked}>
+        <Center>
+          <Icon width="18" height="14" viewBox="0 0 15 12">
+            <path
+              strokeLinecap="square"
+              strokeWidth="2"
+              d="M2.25 4.426l4.083 5.011 6.417-7.874"
+            />
+          </Icon>
+        </Center>
+      </ChainCheckBoxStyled>
+    </ChainCheckBoxContainer>
+  );
+};
+
+const Center = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Icon = styled.svg`
+  fill: none;
+  stroke: ${color.orange["50"]};
+`;
+
+const ChainCheckBoxContainer = styled.div`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+`;
+
+const ChainCheckBoxStyled = styled.div<{ checked: boolean }>`
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: ${(props) => (props.checked ? "none" : "2px solid #868686")};
+  background: ${(props) =>
+    props.checked ? color.orange["200"] : color.grey["400"]};
+
+  ${Icon} {
+    visibility: ${(props) => (props.checked ? "visible" : "hidden")};
+  }
+`;
+
+const ChainCheckBoxHidden = styled.input.attrs({ type: "checkbox" })`
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;