ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: more tailwind

Browse Source
This commit is contained in:
Tristan Yang
2023-02-07 09:25:05 +08:00
parent 07ddfbf12b
commit c5669f8bc4
48 changed files with 447 additions and 1314 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/setting/APIConfig.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export default function APIConfig() {
<div className="max-w-[500px] flex flex-col gap-4 items-start">
<Toggle
onClick={handleToggle.bind(null, { third_party: !thirdParty })}
data-checked={thirdParty}
checked={thirdParty}
/>
<div className="w-full flex flex-col items-start gap-2">
<label htmlFor="secret" className="text-sm text-gray-500 dark:text-gray-100"> {t("third_app.key")}:</label>
src/routes/setting/LogoutConfirmModal.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
description={t("logout.desc")}
buttons={
<>
<Button onClick={closeModal}>{ct("action.cancel")}</Button>
<Button className="cancel" onClick={closeModal}>{ct("action.cancel")}</Button>
<Button onClick={handleLogout} className="danger">
{exiting ? "Logging out" : ct("action.logout")}
</Button>
src/routes/setting/Overview/index.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import useConfig from "../../../common/hook/useConfig";
import Server from './server';
import Language from './Language';
import FrontendURL from "./FrontendURL";
// import DarkMode from "./DarkMode";
import DarkMode from "./DarkMode";
import ServerVersionChecker from "../../../common/component/ServerVersionChecker";
export default function Overview() {
@@ -67,7 +67,7 @@ export default function Overview() {
</>
)}
<Language />
{/* <DarkMode /> */}
<DarkMode />
</div>
);
}
src/routes/setting/ProfileBasicEditModal.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ const ProfileBasicEditModal: FC<Props> = ({
}
>
<form ref={formRef} className="flex flex-col gap-2 w-full" action="/">
<label htmlFor={valueKey} className="text-sm text-[#6b7280]">{label}</label>
<label htmlFor={valueKey} className="text-sm text-left text-gray-500">{label}</label>
<Input name={valueKey} value={input} onChange={handleChange} type={type} required></Input>
</form>
</StyledModal>
src/routes/setting/config/Agora.tsx
+3 -4
View File
@@ -1,4 +1,3 @@
import StyledContainer from "./StyledContainer";
import Input from "../../../common/component/styled/Input";
import Textarea from "../../../common/component/styled/Textarea";
import Label from "../../../common/component/styled/Label";
@@ -35,11 +34,11 @@ export default function ConfigAgora() {
} = values as AgoraConfig;
return (
<StyledContainer>
<div className="setting-container">
<div className="inputs">
<div className="input row">
<Label>Enable</Label>
<Toggle onClick={toggleEnable} data-checked={enabled}></Toggle>
<Toggle onClick={toggleEnable} checked={enabled}></Toggle>
</div>
<div className="input">
<Label htmlFor="url">Agora Url</Label>
@@ -111,6 +110,6 @@ export default function ConfigAgora() {
</div>
{changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
{/* <button onClick={handleUpdate} className="btn">update</button> */}
</StyledContainer>
</div>
);
}
src/routes/setting/config/Firebase.tsx
+2 -3
View File
@@ -1,5 +1,4 @@
import { ChangeEvent } from "react";
import StyledContainer from "./StyledContainer";
import Input from "../../../common/component/styled/Input";
import Textarea from "../../../common/component/styled/Textarea";
import Label from "../../../common/component/styled/Label";
@@ -78,7 +77,7 @@ export default function ConfigFirebase() {
client_email,
} = values as FirebaseConfig;
return (
<StyledContainer>
<div className="setting-container">
<StyledRadio
options={Object.values(Options)}
values={Object.keys(Options)}
@@ -131,6 +130,6 @@ export default function ConfigFirebase() {
</fieldset>
}
{changed && <SaveTip saveHandler={handleUpdate} resetHandler={handleReset} />}
</StyledContainer>
</div>
);
}
src/routes/setting/config/IssuerList/index.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
</div>
<div className="w-14 flex justify-end">
<Toggle
data-checked={enable}
checked={enable}
onClick={() => {
onChange(
issuers.map((issuer) => ({
src/routes/setting/config/Logins.tsx
+7 -8
View File
@@ -1,6 +1,5 @@
import { ChangeEvent } from "react";
import toast from "react-hot-toast";
import StyledContainer from "./StyledContainer";
import Toggle from "../../../common/component/styled/Toggle";
import Label from "../../../common/component/styled/Label";
import Input from "../../../common/component/styled/Input";
@@ -71,7 +70,7 @@ export default function Logins() {
const valuesChanged = clientIdChanged || changed || githubChanged;
return (
<StyledContainer>
<div className="setting-container">
<div className="inputs">
<div className="input">
<div className="row">
@@ -83,7 +82,7 @@ export default function Logins() {
</div>
<Toggle
onClick={handleToggle.bind(null, { password: !password })}
data-checked={password}
checked={password}
></Toggle>
</div>
</div>
@@ -97,7 +96,7 @@ export default function Logins() {
</div>
<Toggle
onClick={handleToggle.bind(null, { magic_link: !magic_link })}
data-checked={magic_link}
checked={magic_link}
></Toggle>
</div>
</div>
@@ -112,7 +111,7 @@ export default function Logins() {
</div>
<Toggle
onClick={handleToggle.bind(null, { google: !google })}
data-checked={google}
checked={google}
></Toggle>
</div>
<div className="row">
@@ -135,7 +134,7 @@ export default function Logins() {
</div>
<Toggle
onClick={handleToggle.bind(null, { github: !github })}
data-checked={github}
checked={github}
></Toggle>
</div>
<div className="row inputs">
@@ -166,7 +165,7 @@ export default function Logins() {
</div>
<Toggle
onClick={handleToggle.bind(null, { metamask: !metamask })}
data-checked={metamask}
checked={metamask}
></Toggle>
</div>
</div>
@@ -194,6 +193,6 @@ export default function Logins() {
</div>
</div>
{valuesChanged && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
</StyledContainer>
</div>
);
}
src/routes/setting/config/SMTP.tsx
+5 -6
View File
@@ -1,17 +1,16 @@
import { useState, useEffect, ChangeEvent } from "react";
import toast from "react-hot-toast";
import { useTranslation } from "react-i18next";
import { useSendTestEmailMutation } from "../../../app/services/server";
import iconQuestion from "../../../assets/icons/question.svg?url";
import useConfig from "../../../common/hook/useConfig";
import StyledContainer from "./StyledContainer";
import Input from "../../../common/component/styled/Input";
import Button from "../../../common/component/styled/Button";
import Toggle from "../../../common/component/styled/Toggle";
import Label from "../../../common/component/styled/Label";
import SaveTip from "../../../common/component/SaveTip";
import toast from "react-hot-toast";
import { SMTPConfig } from "../../../types/server";
import { useTranslation } from "react-i18next";
export default function ConfigSMTP() {
const { t } = useTranslation("setting", { keyPrefix: "smtp" });
@@ -54,11 +53,11 @@ export default function ConfigSMTP() {
if (!values) return null;
const { host, port, from, username, password, enabled = false } = values as SMTPConfig;
return (
<StyledContainer>
<div className="setting-container">
<div className="inputs">
<div className="input row">
<Label className="dark:text-gray-200">{t("enable")}</Label>
<Toggle onClick={toggleEnable} data-checked={enabled}></Toggle>
<Toggle onClick={toggleEnable} checked={enabled}></Toggle>
</div>
<div className="input">
<Label className="dark:text-gray-200" htmlFor="name">{t("host")}</Label>
@@ -144,6 +143,6 @@ export default function ConfigSMTP() {
</div>
{changed && <SaveTip saveHandler={handleUpdate} resetHandler={reset} />}
{/* <button onClick={handleUpdate} className="btn">update</button> */}
</StyledContainer>
</div>
);
}
src/routes/setting/config/StyledContainer.tsx
-67
View File
@@ -1,67 +0,0 @@
import styled from "styled-components";
const StyledContainer = styled.div`
position: relative;
width: 512px;
height: 100%;
display: flex;
flex-direction: column;
gap: 24px;
.inputs {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
.input {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
.row {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
&.inputs {
flex-direction: column;
gap: 8px;
}
.title {
display: flex;
flex-direction: column;
align-items: flex-start;
.txt {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
.icon {
cursor: pointer;
}
}
.desc {
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #667085;
}
}
}
}
}
.tip {
display: flex;
gap: 8px;
align-items: center;
.link {
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #06b6d4;
}
}
`;
export default StyledContainer;