refactor: more tailwind components

2023-01-30 18:56:37 +08:00
parent 5a2ac0f4ed
commit f5aabee719
46 changed files with 185 additions and 796 deletions
@@ -32,14 +32,12 @@ const Index = () => {
    }, [getUrlSuccess, data]);
    // if(!fetch)
    return (
-        <div className="setting">
-            <p className="label">{t("overview.url.title")}</p>
-            <p className="tip">
-                <span className="txt">
-                    {t("overview.url.desc")}
-                </span>
+        <div className="text-sm">
+            <p className="font-semibold">{t("overview.url.title")}</p>
+            <p className="flex justify-between w-full text-gray-400">
+                {t("overview.url.desc")}
            </p>
-            <div className="flex items-center gap-4 mt-4">
+            <div className="flex items-center gap-4 mt-2">

                <StyledInput placeholder='frontend url' value={url} onChange={handleChange} />
                <StyledButton disabled={!url || isLoading} className='' onClick={handleUpdate}> {ct("action.update")}</StyledButton>
@@ -1,5 +1,4 @@
 // import { useState, useEffect, ChangeEvent } from "react";
-import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import StyledRadio from "../../../common/component/styled/Radio";
 import { useAppSelector } from "../../../app/store";
@@ -10,77 +9,12 @@ import Language from './Language';
 import FrontendURL from "./FrontendURL";
 import ServerVersionChecker from "../../../common/component/ServerVersionChecker";

-const StyledWrapper = styled.div`
-  position: relative;
-  width: 512px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  .logo {
-    display: flex;
-    gap: 16px;
-    .preview {
-      width: 96px;
-      height: 96px;
-    }
-    .upload {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: flex-start;
-      .tip {
-        font-weight: normal;
-        font-size: 14px;
-        line-height: 20px;
-        color: #374151;
-      }
-    }
-  }
-  .inputs {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 24px;
-    margin-bottom: 64px;
-    .input {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 8px;
-    }
-  }
-  > .setting {
-    font-size: 14px;
-    line-height: 20px;
-    > .label {
-      font-weight: 500;
-    }
-    > .tip {
-      font-weight: 400;
-      color: #667085;
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-    }
-    > form {
-      margin-top: 16px;
-      width: 512px;
-    }
-  }
-`;
-
 export default function Overview() {
  const { t } = useTranslation("setting");
  const { loginUser } = useAppSelector((store) => {
    return { loginUser: store.authData.user };
  });
-
-
  const { values: loginConfig, updateConfig: updateLoginConfig } = useConfig("login");
-
-
  const handleUpdateWhoCanSignUp = (value: WhoCanSignUp) => {
    updateLoginConfig({ ...loginConfig, who_can_sign_up: value });
  };
@@ -92,14 +26,15 @@ export default function Overview() {
  if (!loginConfig) return null;
  const { who_can_sign_up: whoCanSignUp, guest = false } = loginConfig as LoginConfig;
  const isAdmin = loginUser?.is_admin;
+
  return (
-    <StyledWrapper>
+    <div className="relative w-[512px] h-full flex flex-col gap-6">
      <Server />
      {isAdmin && (
        <>
-          <div className="setting">
-            <p className="label">{t("overview.sign_up.title")}</p>
-            <p className="tip">{t("overview.sign_up.desc")}</p>
+          <div className="text-sm">
+            <p className="font-semibold">{t("overview.sign_up.title")}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2">{t("overview.sign_up.desc")}</p>
            <StyledRadio
              options={[t("overview.sign_up.everyone"), t("overview.sign_up.invite")]}
              values={["EveryOne", "InvitationOnly"]}
@@ -109,9 +44,9 @@ export default function Overview() {
              }}
            />
          </div>
-          <div className="setting">
-            <p className="label">{t("overview.guest_mode.title")}</p>
-            <p className="tip">
+          <div className="text-sm">
+            <p className="font-semibold">{t("overview.guest_mode.title")}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2">
              <span className="txt">
                {t("overview.guest_mode.desc")}
              </span>
@@ -131,6 +66,6 @@ export default function Overview() {
        </>
      )}
      <Language />
-    </StyledWrapper>
+    </div>
  );
 }
@@ -10,12 +10,10 @@ const Index = () => {
        i18n.changeLanguage(v);
    };
    return (
-        <div className="setting">
-            <p className="label">{t("overview.lang.title")}</p>
-            <p className="tip">
-                <span className="txt">
-                    {t("overview.lang.desc")}
-                </span>
+        <div className="text-sm">
+            <p className="font-semibold">{t("overview.lang.title")}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2">
+                {t("overview.lang.desc")}
            </p>
            <StyledRadio
                options={[t("overview.lang.en"), t("overview.lang.zh"), t("overview.lang.jp")]}
@@ -9,7 +9,6 @@ import Textarea from "../../../common/component/styled/Textarea";
 import SaveTip from '../../../common/component/SaveTip';
 import { useAppSelector } from '../../../app/store';

-
 const Index = () => {
    const { t } = useTranslation("setting");
    const { t: ct } = useTranslation();
@@ -62,8 +61,8 @@ const Index = () => {
    if (!loginUser || !serverValues) return null;
    return (
        <>
-            <div className="logo">
-                <div className="preview">
+            <div className="flex gap-4">
+                <div className="w-24 h-24">
                    <LogoUploader
                        disabled={!isAdmin}
                        url={uploadSuccess ? `${logo}?t=${+new Date()}` : logo}
@@ -72,15 +71,15 @@ const Index = () => {
                    />
                </div>
                {isAdmin && (
-                    <div className="upload">
-                        <div className="tip">
+                    <div className="flex flex-col justify-between items-start">
+                        <div className="text-sm text-gray-600">
                            {t("overview.upload_desc")}
                        </div>
                    </div>
                )}
            </div>
-            <div className="inputs">
-                <div className="input">
+            <div className="flex flex-col items-start gap-6 mb-16">
+                <div className="w-full flex flex-col items-start gap-2">
                    <Label htmlFor="name">{t("overview.name")}</Label>
                    <Input
                        disabled={!isAdmin}
@@ -92,7 +91,7 @@ const Index = () => {
                        placeholder="Server Name"
                    />
                </div>
-                <div className="input">
+                <div className="w-full flex flex-col items-start gap-2">
                    <Label htmlFor="desc">{t("overview.desc")}</Label>
                    <Textarea
                        disabled={!isAdmin}
@@ -107,7 +106,6 @@ const Index = () => {
                </div>
            </div>
            {changed && <SaveTip saveHandler={handleUpdateServer} resetHandler={handleReset} />}
-
        </>
    );
 };
@@ -1,11 +1,5 @@
 import { useState, useEffect, ChangeEvent } from "react";
-import styled from "styled-components";
-const StyledTest = styled.div`
-  display: flex;
-  gap: 16px;
-  white-space: nowrap;
-  margin-top: 24px;
-`;
+
 import { useSendTestEmailMutation } from "../../../app/services/server";
 import iconQuestion from "../../../assets/icons/question.svg?url";
 import useConfig from "../../../common/hook/useConfig";
@@ -135,7 +129,7 @@ export default function ConfigSMTP() {
          {t("how_to")}
        </a>
      </div>
-      <StyledTest>
+      <div className="flex gap-4 whitespace-nowrap mt-6">
        <Input
          type={"email"}
          disabled={!enabled}
@@ -147,9 +141,9 @@ export default function ConfigSMTP() {
        <Button disabled={!enabled || !testEmail} onClick={handleTestClick}>
          {t("send_test_email")}
        </Button>
-      </StyledTest>
+      </div>
      {changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
      {/* <button onClick={handleUpdate} className="btn">update</button> */}
    </StyledContainer>
  );
-}
+}