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

feat: darkmode draft version

Browse Source
This commit is contained in:
Tristan Yang
2023-02-06 07:35:31 +08:00
parent b4c5d5cb86
commit 07ddfbf12b
111 changed files with 885 additions and 2102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/reg/EmailNextStepTip.tsx
+3 -3
View File
@@ -2,9 +2,9 @@
export default function EmailNextTip() {
return (
<div className="flex flex-col items-center">
<div className="font-bold text-3xl text-gray-800 mt-3">Magic link Sent</div>
<p className="text-center text-gray-400 mb-6">Login to your email client, and continue next step</p>
<p className="text-center text-gray-400">You can close this window now.</p>
<div className="font-bold text-3xl text-gray-800 dark:text-white mt-3">Magic link Sent</div>
<p className="text-center text-gray-400 dark:text-gray-300 mb-6">Login to your email client, and continue next step</p>
<p className="text-center text-gray-400 dark:text-gray-300">You can close this window now.</p>
</div>
);
}
src/routes/reg/ExpiredTip.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
export default function ExpiredTip() {
return (
<div className="flex flex-col items-center">
<div className="font-bold text-3xl text-gray-800 mt-3">Magic link expired</div>
<div className="font-bold text-3xl text-gray-800 dark:text-white mt-3">Magic link expired</div>
<p className="text-center text-gray-400 mb-6">Go back to your original VoceChat tab and request a new magic link.</p>
<p className="text-center text-gray-400">You can close this window now.</p>
</div>
src/routes/reg/RegWithUsername.tsx
+4 -4
View File
@@ -98,14 +98,14 @@ const RegWithUsername: FC = () => {
const isSuccess = loginSuccess || regSuccess;
return (
<>
<div className="tips">
<h2 className="title">What’s your name</h2>
<span className="desc">
<div className="flex-center flex-col pb-6">
<h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">What’s your name</h2>
<span className="text-gray-400 dark:text-gray-100">
Enter a name or handle so people know how you’d like to be called. Your name will only be
visible to others in spaces you joined.
</span>
</div>
<form onSubmit={handleAuth}>
<form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleAuth}>
<Input
className="large"
name="username"
src/routes/reg/Register.tsx
+7 -6
View File
@@ -6,6 +6,7 @@ import Button from "../../common/component/styled/Button";
import { useLazyCheckEmailQuery, useSendRegMagicLinkMutation } from "../../app/services/auth";
import EmailNextTip from "./EmailNextStepTip";
import SignInLink from "./SignInLink";
import Divider from "../../common/component/Divider";
import { useTranslation } from "react-i18next";
import { useGetLoginConfigQuery } from "../../app/services/server";
@@ -101,13 +102,13 @@ export default function Reg() {
return (
<>
<div className="tips">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
<h2 className="title">{t("reg.title")}</h2>
<span className="desc">{t("reg.desc")}</span>
<div className="flex-center flex-col pb-6">
<img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="w-14 h-14 mb-7 rounded-full" />
<h2 className="font-semibold text-2xl text-gray-800 dark:text-white mb-2">{t("reg.title")}</h2>
<span className="text-gray-400 dark:text-gray-100">{t("reg.desc")}</span>
</div>
<form onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
<form className="flex flex-col gap-5 min-w-[360px]" onSubmit={handleReg} autoSave={"false"} autoComplete={"true"}>
<Input
className="large"
name="email"
@@ -145,7 +146,7 @@ export default function Reg() {
{isLoading ? t('signing_up') : t("sign_up")}
</Button>
</form>
<hr className="or" />
<Divider content="OR" />
<div className="flex flex-col gap-3 py-3">
<SocialLoginButtons type="register" />
</div>
src/routes/reg/SignInLink.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export default function SignInLink({ token }: { token?: string }) {
}, [token]);
return (
<div className="flex gap-1 mt-7 text-sm text-[#667085] justify-center">
<div className="flex gap-1 mt-7 text-sm text-[#667085] dark:text-gray-100 justify-center">
<span>{t("reg.have_account")}</span>
<a onClick={handleSignIn} className="text-[#22d3ee] cursor-pointer">{t("sign_in")}</a>
</div>
src/routes/reg/index.tsx
+3 -4
View File
@@ -1,12 +1,11 @@
import { Outlet } from "react-router-dom";
import StyledWrapper from "./styled";
export default function RegContainer() {
return (
<StyledWrapper>
<div className="form">
<div className="flex-center h-screen dark:bg-[#384250]">
<div className="py-8 px-10 shadow-md rounded-xl">
<Outlet />
</div>
</StyledWrapper>
</div>
);
}
src/routes/reg/styled.tsx
-71
View File
@@ -1,71 +0,0 @@
import styled from "styled-components";
const StyledWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.form {
max-width: 440px;
padding: 36px 40px 32px 40px;
box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
border-radius: 12px;
.tips {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 24px;
.logo {
width: 56px;
height: 56px;
margin-bottom: 28px;
border-radius: 50%;
}
.title {
font-weight: 600;
font-size: 24px;
line-height: 32px;
color: #101828;
margin-bottom: 8px;
&.error {
color: red;
}
}
.desc {
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #667085;
}
}
form {
display: flex;
flex-direction: column;
gap: 20px;
width: 360px;
}
}
.or {
border: none;
position: relative;
height: 1px;
background-color: #e4e7ec;
margin: 26px 0;
overflow: visible;
&:after {
padding: 4px;
background-color: #fff;
content: "OR";
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
font-size: 14px;
line-height: 20px;
color: #667085;
}
}
`;
export default StyledWrapper;