chore: update prettier setting
This commit is contained in:
zerosoul
@@ -10,26 +10,26 @@ import CompletedStep from "./steps/6-completed";
|
||||
import StyledOnboardingPage from "./styled";
|
||||
|
||||
export default function OnboardingPage() {
|
||||
const [step, setStep] = useState(0);
|
||||
const [data, setData] = useState({
|
||||
serverName: ""
|
||||
});
|
||||
const props = { setStep, data, setData };
|
||||
const [step, setStep] = useState(0);
|
||||
const [data, setData] = useState({
|
||||
serverName: ""
|
||||
});
|
||||
const props = { setStep, data, setData };
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Rustchat Setup</title>
|
||||
</Helmet>
|
||||
<StyledOnboardingPage>
|
||||
{step === 0 && <WelcomeStep {...props} />}
|
||||
{step === 1 && <ServerNameStep {...props} />}
|
||||
{step === 2 && <AdminCredentialsStep {...props} />}
|
||||
{step === 3 && <InviteRuleStep {...props} />}
|
||||
{step === 4 && <InviteLinkStep {...props} />}
|
||||
{step === 5 && <CompletedStep {...props} />}
|
||||
{step === 6 && <Navigate replace to="/" />}
|
||||
</StyledOnboardingPage>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Rustchat Setup</title>
|
||||
</Helmet>
|
||||
<StyledOnboardingPage>
|
||||
{step === 0 && <WelcomeStep {...props} />}
|
||||
{step === 1 && <ServerNameStep {...props} />}
|
||||
{step === 2 && <AdminCredentialsStep {...props} />}
|
||||
{step === 3 && <InviteRuleStep {...props} />}
|
||||
{step === 4 && <InviteLinkStep {...props} />}
|
||||
{step === 5 && <CompletedStep {...props} />}
|
||||
{step === 6 && <Navigate replace to="/" />}
|
||||
</StyledOnboardingPage>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,24 +3,24 @@ import StyledButton from "../../../common/component/styled/Button";
|
||||
import PlayIcon from "../../../assets/icons/play.svg?url";
|
||||
|
||||
const StyledFirstStep = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export default function WelcomeStep({ setStep }) {
|
||||
return (
|
||||
<StyledFirstStep>
|
||||
<span className="primaryText">Welcome to your Rustchat!</span>
|
||||
<span className="secondaryText">
|
||||
Everything in this space is owned by you. Let’s set up your space!
|
||||
</span>
|
||||
<StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
|
||||
<img src={PlayIcon} alt="play icon" />
|
||||
<span>Start</span>
|
||||
</StyledButton>
|
||||
</StyledFirstStep>
|
||||
);
|
||||
return (
|
||||
<StyledFirstStep>
|
||||
<span className="primaryText">Welcome to your Rustchat!</span>
|
||||
<span className="secondaryText">
|
||||
Everything in this space is owned by you. Let’s set up your space!
|
||||
</span>
|
||||
<StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
|
||||
<img src={PlayIcon} alt="play icon" />
|
||||
<span>Start</span>
|
||||
</StyledButton>
|
||||
</StyledFirstStep>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,52 +4,52 @@ import StyledInput from "../../../common/component/styled/Input";
|
||||
import StyledButton from "../../../common/component/styled/Button";
|
||||
|
||||
const StyledSpaceNameStep = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .secondaryText {
|
||||
color: #667085;
|
||||
}
|
||||
> .secondaryText {
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
> .button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
> .button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function ServerNameStep({ setStep, data, setData }) {
|
||||
return (
|
||||
<StyledSpaceNameStep>
|
||||
<span className="primaryText">Create a new server</span>
|
||||
<span className="secondaryText">
|
||||
Servers are shared environments where teams can work on projects and chat.
|
||||
</span>
|
||||
<StyledInput
|
||||
className="input"
|
||||
placeholder="Enter server name"
|
||||
value={data.serverName}
|
||||
onChange={(e) =>
|
||||
setData({
|
||||
...data,
|
||||
serverName: e.target.value
|
||||
})
|
||||
}
|
||||
/>
|
||||
<StyledButton
|
||||
className="button"
|
||||
onClick={() => {
|
||||
// Verification for space name
|
||||
if (data.serverName === "") {
|
||||
toast.error("Please enter server name!");
|
||||
return;
|
||||
}
|
||||
setStep((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
Create Server
|
||||
</StyledButton>
|
||||
</StyledSpaceNameStep>
|
||||
);
|
||||
return (
|
||||
<StyledSpaceNameStep>
|
||||
<span className="primaryText">Create a new server</span>
|
||||
<span className="secondaryText">
|
||||
Servers are shared environments where teams can work on projects and chat.
|
||||
</span>
|
||||
<StyledInput
|
||||
className="input"
|
||||
placeholder="Enter server name"
|
||||
value={data.serverName}
|
||||
onChange={(e) =>
|
||||
setData({
|
||||
...data,
|
||||
serverName: e.target.value
|
||||
})
|
||||
}
|
||||
/>
|
||||
<StyledButton
|
||||
className="button"
|
||||
onClick={() => {
|
||||
// Verification for space name
|
||||
if (data.serverName === "") {
|
||||
toast.error("Please enter server name!");
|
||||
return;
|
||||
}
|
||||
setStep((prev) => prev + 1);
|
||||
}}
|
||||
>
|
||||
Create Server
|
||||
</StyledButton>
|
||||
</StyledSpaceNameStep>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,127 +5,127 @@ import { useDispatch } from "react-redux";
|
||||
import StyledInput from "../../../common/component/styled/Input";
|
||||
import StyledButton from "../../../common/component/styled/Button";
|
||||
import {
|
||||
useCreateAdminMutation,
|
||||
useGetServerQuery,
|
||||
useUpdateServerMutation
|
||||
useCreateAdminMutation,
|
||||
useGetServerQuery,
|
||||
useUpdateServerMutation
|
||||
} from "../../../app/services/server";
|
||||
import { useLoginMutation } from "../../../app/services/auth";
|
||||
import { updateInitialized } from "../../../app/slices/auth.data";
|
||||
|
||||
const StyledAdminCredentialsStep = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .input:not(:nth-last-child(2)) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
> .input:not(:nth-last-child(2)) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
> .button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
> .button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function AdminCredentialsStep({ data, setStep }) {
|
||||
const dispatch = useDispatch();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [createAdmin, { isLoading: isSigningUp, error: signUpError }] = useCreateAdminMutation();
|
||||
const [login, { isLoading: isLoggingIn, isSuccess: isLoggedIn, error: loginError }] =
|
||||
useLoginMutation();
|
||||
const { data: serverData } = useGetServerQuery();
|
||||
const [updateServer, { isLoading: isUpdatingServer, isSuccess: isUpdatedServer }] =
|
||||
useUpdateServerMutation();
|
||||
const [createAdmin, { isLoading: isSigningUp, error: signUpError }] = useCreateAdminMutation();
|
||||
const [login, { isLoading: isLoggingIn, isSuccess: isLoggedIn, error: loginError }] =
|
||||
useLoginMutation();
|
||||
const { data: serverData } = useGetServerQuery();
|
||||
const [updateServer, { isLoading: isUpdatingServer, isSuccess: isUpdatedServer }] =
|
||||
useUpdateServerMutation();
|
||||
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirm, setConfirm] = useState("");
|
||||
|
||||
// Display error
|
||||
useEffect(() => {
|
||||
if (signUpError === undefined) return;
|
||||
toast.error(`Failed to sign up: ${signUpError.data}`);
|
||||
}, [signUpError]);
|
||||
useEffect(() => {
|
||||
if (loginError === undefined) return;
|
||||
toast.error(`Login failed: ${loginError.data}`);
|
||||
}, [loginError]);
|
||||
// Display error
|
||||
useEffect(() => {
|
||||
if (signUpError === undefined) return;
|
||||
toast.error(`Failed to sign up: ${signUpError.data}`);
|
||||
}, [signUpError]);
|
||||
useEffect(() => {
|
||||
if (loginError === undefined) return;
|
||||
toast.error(`Login failed: ${loginError.data}`);
|
||||
}, [loginError]);
|
||||
|
||||
// After logged in
|
||||
useEffect(() => {
|
||||
if (isLoggedIn) {
|
||||
dispatch(updateInitialized(true));
|
||||
setTimeout(() => {
|
||||
// Set server name
|
||||
updateServer({
|
||||
...serverData,
|
||||
name: data.serverName
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
}, [isLoggedIn]);
|
||||
// After logged in
|
||||
useEffect(() => {
|
||||
if (isLoggedIn) {
|
||||
dispatch(updateInitialized(true));
|
||||
setTimeout(() => {
|
||||
// Set server name
|
||||
updateServer({
|
||||
...serverData,
|
||||
name: data.serverName
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
}, [isLoggedIn]);
|
||||
|
||||
// After updated server
|
||||
useEffect(() => {
|
||||
if (isUpdatedServer) {
|
||||
setStep((prev) => prev + 1);
|
||||
}
|
||||
}, [isUpdatedServer]);
|
||||
// After updated server
|
||||
useEffect(() => {
|
||||
if (isUpdatedServer) {
|
||||
setStep((prev) => prev + 1);
|
||||
}
|
||||
}, [isUpdatedServer]);
|
||||
|
||||
return (
|
||||
<StyledAdminCredentialsStep>
|
||||
<span className="primaryText">Now let’s set up your admin account</span>
|
||||
<span className="secondaryText">You are the 1st user and admin of your space!</span>
|
||||
<StyledInput
|
||||
className="input"
|
||||
placeholder="Enter your email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<StyledInput
|
||||
className="input"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<StyledInput
|
||||
className="input"
|
||||
type="password"
|
||||
placeholder="Confirm your password"
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
/>
|
||||
<StyledButton
|
||||
className="button"
|
||||
onClick={async () => {
|
||||
// Verification for admin credentials
|
||||
if (email === "") {
|
||||
toast.error("Please enter admin email!");
|
||||
return;
|
||||
} else if (password === "") {
|
||||
toast.error("Please enter admin password!");
|
||||
return;
|
||||
} else if (password !== confirm) {
|
||||
toast.error("Two passwords do not match!");
|
||||
return;
|
||||
}
|
||||
await createAdmin({
|
||||
email,
|
||||
name: "Admin",
|
||||
password,
|
||||
gender: 0
|
||||
});
|
||||
await login({
|
||||
email,
|
||||
password,
|
||||
type: "password"
|
||||
});
|
||||
}}
|
||||
>
|
||||
{!(isSigningUp || isLoggingIn || isUpdatingServer) ? "Sign Up" : "..."}
|
||||
</StyledButton>
|
||||
</StyledAdminCredentialsStep>
|
||||
);
|
||||
return (
|
||||
<StyledAdminCredentialsStep>
|
||||
<span className="primaryText">Now let’s set up your admin account</span>
|
||||
<span className="secondaryText">You are the 1st user and admin of your space!</span>
|
||||
<StyledInput
|
||||
className="input"
|
||||
placeholder="Enter your email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
/>
|
||||
<StyledInput
|
||||
className="input"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
<StyledInput
|
||||
className="input"
|
||||
type="password"
|
||||
placeholder="Confirm your password"
|
||||
value={confirm}
|
||||
onChange={(e) => setConfirm(e.target.value)}
|
||||
/>
|
||||
<StyledButton
|
||||
className="button"
|
||||
onClick={async () => {
|
||||
// Verification for admin credentials
|
||||
if (email === "") {
|
||||
toast.error("Please enter admin email!");
|
||||
return;
|
||||
} else if (password === "") {
|
||||
toast.error("Please enter admin password!");
|
||||
return;
|
||||
} else if (password !== confirm) {
|
||||
toast.error("Two passwords do not match!");
|
||||
return;
|
||||
}
|
||||
await createAdmin({
|
||||
email,
|
||||
name: "Admin",
|
||||
password,
|
||||
gender: 0
|
||||
});
|
||||
await login({
|
||||
email,
|
||||
password,
|
||||
type: "password"
|
||||
});
|
||||
}}
|
||||
>
|
||||
{!(isSigningUp || isLoggingIn || isUpdatingServer) ? "Sign Up" : "..."}
|
||||
</StyledButton>
|
||||
</StyledAdminCredentialsStep>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,55 +6,58 @@ import StyledButton from "../../../common/component/styled/Button";
|
||||
import { useGetLoginConfigQuery, useUpdateLoginConfigMutation } from "../../../app/services/server";
|
||||
|
||||
const StyledInviteRuleStep = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .input:not(:nth-last-child(2)) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
> .input:not(:nth-last-child(2)) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function InviteRuleStep({ setStep }) {
|
||||
const { data: loginConfig } = useGetLoginConfigQuery();
|
||||
const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
|
||||
const { data: loginConfig } = useGetLoginConfigQuery();
|
||||
const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation();
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const [value, setValue] = useState(0);
|
||||
|
||||
// Display error
|
||||
useEffect(() => {
|
||||
if (error === undefined) return;
|
||||
toast.error(`Failed to update invitation rule: ${error.data}`);
|
||||
}, [error]);
|
||||
// Display error
|
||||
useEffect(() => {
|
||||
if (error === undefined) return;
|
||||
toast.error(`Failed to update invitation rule: ${error.data}`);
|
||||
}, [error]);
|
||||
|
||||
// Increment `step` when updating has completed
|
||||
useEffect(() => {
|
||||
if (isSuccess) setStep((prev) => prev + 1);
|
||||
}, [isSuccess]);
|
||||
// Increment `step` when updating has completed
|
||||
useEffect(() => {
|
||||
if (isSuccess) setStep((prev) => prev + 1);
|
||||
}, [isSuccess]);
|
||||
|
||||
return (
|
||||
<StyledInviteRuleStep>
|
||||
<span className="primaryText">Last step: invite others!</span>
|
||||
<span className="secondaryText">Firstly, who can sign up to this server?</span>
|
||||
<StyledRadio
|
||||
options={["Everyone", "Invitation link only"]}
|
||||
value={value}
|
||||
onChange={async (v) => {
|
||||
setValue(v);
|
||||
if (loginConfig !== undefined) {
|
||||
const whoCanSignUp = ["EveryOne", "InvitationOnly"][v];
|
||||
await updateLoginConfig({
|
||||
...loginConfig,
|
||||
who_can_sign_up: whoCanSignUp
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<StyledButton className="button border_less ghost" onClick={() => setStep((prev) => prev + 1)}>
|
||||
Skip
|
||||
</StyledButton>
|
||||
</StyledInviteRuleStep>
|
||||
);
|
||||
return (
|
||||
<StyledInviteRuleStep>
|
||||
<span className="primaryText">Last step: invite others!</span>
|
||||
<span className="secondaryText">Firstly, who can sign up to this server?</span>
|
||||
<StyledRadio
|
||||
options={["Everyone", "Invitation link only"]}
|
||||
value={value}
|
||||
onChange={async (v) => {
|
||||
setValue(v);
|
||||
if (loginConfig !== undefined) {
|
||||
const whoCanSignUp = ["EveryOne", "InvitationOnly"][v];
|
||||
await updateLoginConfig({
|
||||
...loginConfig,
|
||||
who_can_sign_up: whoCanSignUp
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<StyledButton
|
||||
className="button border_less ghost"
|
||||
onClick={() => setStep((prev) => prev + 1)}
|
||||
>
|
||||
Skip
|
||||
</StyledButton>
|
||||
</StyledInviteRuleStep>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,70 +4,73 @@ import StyledButton from "../../../common/component/styled/Button";
|
||||
import useInviteLink from "../../../common/hook/useInviteLink";
|
||||
|
||||
const StyledInviteLinkStep = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .secondaryText {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
> .tip {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #475467;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .link {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border: 1px solid #f4f4f5;
|
||||
box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
|
||||
border-radius: 4px;
|
||||
width: 374px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> input {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 11px 0 11px 8px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #78787c;
|
||||
> .secondaryText {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
> button {
|
||||
padding: 0 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #22ccee;
|
||||
> .tip {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #475467;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
> .link {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border: 1px solid #f4f4f5;
|
||||
box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
|
||||
border-radius: 4px;
|
||||
width: 374px;
|
||||
display: flex;
|
||||
|
||||
> input {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 11px 0 11px 8px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #78787c;
|
||||
}
|
||||
|
||||
> button {
|
||||
padding: 0 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #22ccee;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function InviteLinkStep({ setStep }) {
|
||||
const { link, linkCopied, copyLink } = useInviteLink();
|
||||
const { link, linkCopied, copyLink } = useInviteLink();
|
||||
|
||||
return (
|
||||
<StyledInviteLinkStep>
|
||||
<span className="primaryText">Last step: invite others!</span>
|
||||
<span className="secondaryText">Now let’s invite others!</span>
|
||||
<span className="tip">Send invitation link to your future community members:</span>
|
||||
<div className="link">
|
||||
<StyledInput className="large" readOnly placeholder="Generating" value={link} />
|
||||
<StyledButton onClick={copyLink} className="ghost small border_less">
|
||||
{linkCopied ? "Copied" : `Copy`}
|
||||
</StyledButton>
|
||||
</div>
|
||||
<StyledButton className="button border_less ghost" onClick={() => setStep((prev) => prev + 1)}>
|
||||
Skip
|
||||
</StyledButton>
|
||||
</StyledInviteLinkStep>
|
||||
);
|
||||
return (
|
||||
<StyledInviteLinkStep>
|
||||
<span className="primaryText">Last step: invite others!</span>
|
||||
<span className="secondaryText">Now let’s invite others!</span>
|
||||
<span className="tip">Send invitation link to your future community members:</span>
|
||||
<div className="link">
|
||||
<StyledInput className="large" readOnly placeholder="Generating" value={link} />
|
||||
<StyledButton onClick={copyLink} className="ghost small border_less">
|
||||
{linkCopied ? "Copied" : `Copy`}
|
||||
</StyledButton>
|
||||
</div>
|
||||
<StyledButton
|
||||
className="button border_less ghost"
|
||||
onClick={() => setStep((prev) => prev + 1)}
|
||||
>
|
||||
Skip
|
||||
</StyledButton>
|
||||
</StyledInviteLinkStep>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,42 +3,42 @@ import StyledButton from "../../../common/component/styled/Button";
|
||||
import PlayIcon from "../../../assets/icons/play.svg?url";
|
||||
|
||||
const StyledLastStep = styled.div`
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
> .secondaryText {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
> .tip {
|
||||
width: 560px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 96px;
|
||||
|
||||
> .strong {
|
||||
font-weight: 700;
|
||||
> .secondaryText {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
> .tip {
|
||||
width: 560px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 96px;
|
||||
|
||||
> .strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function CompletedStep({ data, setStep }) {
|
||||
return (
|
||||
<StyledLastStep>
|
||||
<span className="primaryText">Welcome to {data.serverName}</span>
|
||||
<span className="secondaryText">Proudly presented by Rustchat</span>
|
||||
<span className="tip">
|
||||
More settings, including domain resolution, privileges, securities, and invites are available in{" "}
|
||||
<span className="strong">Settings</span>
|
||||
</span>
|
||||
<StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
|
||||
<img src={PlayIcon} alt="play icon" />
|
||||
<span>Enter</span>
|
||||
</StyledButton>
|
||||
</StyledLastStep>
|
||||
);
|
||||
return (
|
||||
<StyledLastStep>
|
||||
<span className="primaryText">Welcome to {data.serverName}</span>
|
||||
<span className="secondaryText">Proudly presented by Rustchat</span>
|
||||
<span className="tip">
|
||||
More settings, including domain resolution, privileges, securities, and invites are
|
||||
available in <span className="strong">Settings</span>
|
||||
</span>
|
||||
<StyledButton className="startButton" onClick={() => setStep((prev) => prev + 1)}>
|
||||
<img src={PlayIcon} alt="play icon" />
|
||||
<span>Enter</span>
|
||||
</StyledButton>
|
||||
</StyledLastStep>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,75 +1,75 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledOnboardingPage = styled.div`
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
// shared with child components
|
||||
.primaryText,
|
||||
.secondaryText {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.primaryText {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.secondaryText {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.startButton {
|
||||
width: 128px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px 0 12px;
|
||||
|
||||
> img {
|
||||
margin-bottom: 7px;
|
||||
// shared with child components
|
||||
.primaryText,
|
||||
.secondaryText {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
.primaryText {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 360px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input.input {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 360px;
|
||||
|
||||
&.ghost.border_less {
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #98a2b3;
|
||||
margin-top: 14px;
|
||||
.secondaryText {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.startButton {
|
||||
width: 128px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px 0 12px;
|
||||
|
||||
> img {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 360px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input.input {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d0d5dd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 360px;
|
||||
|
||||
&.ghost.border_less {
|
||||
width: fit-content;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #98a2b3;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default StyledOnboardingPage;
|
||||
|
||||
Reference in New Issue
Block a user