refactor: more tailwind components

src/common/component/styled/Checkbox.tsx

@@ -1,40 +1,11 @@
 import { InputHTMLAttributes } 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;
-  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);
-    }
-  }
-  &:disabled {
-    opacity: 0.4;
-  }
-`;
 
 export default function StyledCheckbox(props: InputHTMLAttributes<HTMLInputElement>) {
-  return <Styled readOnly {...props} type="checkbox" />;
+  const { className: cbClasses } = props;
+  return <input
+    readOnly
+    {...props}
+    type="checkbox"
+    className={`checkbox w-5 h-5 rounded-md border border-solid border-slate-300 checked:border-[#1fe1f9] disabled:opacity-40 ${cbClasses}`}
+  />;
 }

src/common/component/styled/Select.tsx

@@ -1,31 +1,10 @@
 import { FC, useState } from "react";
-import styled from "styled-components";
 import Tippy from "@tippyjs/react";
 import IconSelect from "../../../assets/icons/check.sign.svg";
 import IconArrow from "../../../assets/icons/arrow.down.svg";
 import Menu from "./Menu";
 import { useTranslation } from "react-i18next";
 
-const Styled = styled.div`
-  user-select: none;
-  border: 1px solid #e5e7eb;
-  border-radius: 4px;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  .txt {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
-    color: #475467;
-    min-width: 76px;
-  }
-  > .icon {
-    width: 20px !important;
-    height: 20px !important;
-  }
-`;
 
 export interface Option {
   icon?: string;
@@ -80,10 +59,10 @@ const Select: FC<Props> = ({ options = [], updateSelect = null, current = null }
         </Menu>
       }
     >
-      <Styled onClick={toggleVisible}>
-        <span className="txt">{(current !== null ? current : curr)?.title || t("action.select")}</span>
-        <IconArrow className="icon" />
-      </Styled>
+      <div className="select-none border border-solid border-slate-200 p-2 flex items-center gap-2" onClick={toggleVisible}>
+        <span className="text-sm text-gray-500 min-w-[76px]">{(current !== null ? current : curr)?.title || t("action.select")}</span>
+        <IconArrow className="!w-5 !h-5" />
+      </div>
     </Tippy>
   );
 };