refactor: more tailwind components

src/common/component/SaveTip.tsx

@@ -1,53 +1,8 @@
+// import clsx from "clsx";
 import { FC, MouseEvent } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
+import Button from '../component/styled/Button';
 
-const StyledWrapper = styled.div`
-  width: 100%;
-  position: absolute;
-  bottom: 64px;
-  left: 0;
-  padding: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #333;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
-  border-radius: 25px;
-  .txt {
-    padding: 8px;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-  }
-  .btns {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    .btn {
-      color: #fff;
-      font-style: normal;
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 20px;
-      padding: 8px 14px;
-      background: #1fe1f9;
-      border: 1px solid #1fe1f9;
-      box-sizing: border-box;
-      box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
-      border-radius: 25px;
-      &.reset {
-        background: none;
-        color: #667085;
-        border: none;
-        box-shadow: none;
-      }
-    }
-  }
-`;
 
 interface Props {
   saveHandler: (e: MouseEvent) => void;
@@ -56,18 +11,19 @@ interface Props {
 
 const SaveTip: FC<Props> = ({ saveHandler, resetHandler }) => {
   const { t } = useTranslation("setting");
+  // const btnClass=clsx("")
   return (
-    <StyledWrapper className="animate__animated animate__flipInX animate__faster">
-      <span className="txt">{t('save_tip')}</span>
-      <div className="btns">
-        <button className="btn reset" onClick={resetHandler}>
+    <div className="w-full p-2 absolute bottom-16 left-0 flex items-center justify-between text-gray-500 border border-solid border-gray-200 shadow-md rounded-full">
+      <span className="p-2 text-sm">{t('save_tip')}</span>
+      <div className="flex items-center gap-3">
+        <Button className="small ghost !border-none !text-gray-500 !shadow-none" onClick={resetHandler}>
           {t('reset')}
-        </button>
-        <button className="btn" onClick={saveHandler}>
+        </Button>
+        <Button className="small !rounded-full" onClick={saveHandler}>
           {t('save_change')}
-        </button>
+        </Button>
       </div>
-    </StyledWrapper>
+    </div>
   );
 };