feat: lots updates

src/common/component/styled/Button.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+const StyledButton = styled.button`
+  cursor: pointer;
+  padding: 8px 16px;
+  background: none;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+  border-radius: 4px;
+  font-weight: 500;
+  color: #374151;
+  &.main {
+    border: none;
+    background: #1fe1f9;
+    color: #fff;
+  }
+  &.danger {
+    border: none;
+    background: #ef4444;
+    color: #fff;
+  }
+`;
+
+export default StyledButton;

src/common/component/styled/Checkbox.js

@@ -0,0 +1,36 @@
+// import React from 'react'
+import styled from "styled-components";
+const Styled = styled.input`
+  -webkit-appearance: none;
+  /* Remove most all native input styles */
+  appearance: none;
+  /* Not removed via appearance */
+  margin: 0;
+  /* color: #1fe1f9; */
+  width: 20px;
+  height: 20px;
+  border: 1px solid #d0d5dd;
+  border-radius: 6px;
+  place-content: center;
+  &::before {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+    margin: 4px;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    transform: scale(0);
+    transform-origin: bottom left;
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 10px 10px #1fe1f9;
+  }
+  &:checked {
+    border-color: #1fe1f9;
+    &:before {
+      transform: scale(1);
+    }
+  }
+`;
+export default function StyledCheckbox(props) {
+  return <Styled {...props} type="checkbox" />;
+}

src/common/component/styled/Input.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+const StyledInput = styled.input`
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+  border-radius: 4px;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  color: #333;
+  padding: 8px;
+  &:disabled {
+    color: #78787c;
+    background-color: #f9fafb;
+  }
+  &::placeholder {
+    color: #78787c;
+  }
+`;
+
+export default StyledInput;

src/common/component/styled/Label.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+const StyledLabel = styled.label`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #6b7280;
+`;
+
+export default StyledLabel;

src/common/component/styled/Textarea.js

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+const StyledTextarea = styled.textarea`
+  font-family: inherit;
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0px 1px 2px rgba(31, 41, 55, 0.08);
+  border-radius: 4px;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 8px;
+  color: #333;
+  resize: unset;
+  &:disabled {
+    color: #78787c;
+    background-color: #f9fafb;
+  }
+  &::placeholder {
+    color: #78787c;
+  }
+`;
+
+export default StyledTextarea;

src/common/component/styled/Toggle.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+const StyledToggle = styled.div`
+  cursor: pointer;
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background-color: #1fe1f9;
+  border-radius: 12px;
+  transition: all 0.2s ease-in;
+  &:after {
+    border-radius: 50%;
+    background-color: #fff;
+    content: "";
+    display: block;
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    transition: all 0.4s ease;
+  }
+  &[data-checked="false"] {
+    background-color: #f2f4f7;
+    &:after {
+      transform: translateX(-100%);
+    }
+  }
+  &[data-disabled="true"] {
+    pointer-events: none;
+  }
+`;
+
+export default StyledToggle;