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

refactor: onboarding pages in mobile and dark mode

Browse Source
This commit is contained in:
Tristan Yang
2023-02-17 22:13:47 +08:00
parent e4fd125684
commit 7d169bade5
9 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/home/index.tsx
+2 -2
View File
@@ -53,9 +53,9 @@ function HomePage() {
<>
<Manifest />
{!guest && <Notification />}
<div className={`vocechat-container flex w-screen h-screen bg-[#e5e7eb] dark:bg-[#121926]`}>
<div className={`vocechat-container flex w-screen h-screen bg-gray-200 dark:bg-gray-900`}>
{!guest && (
<div className={`hidden md:flex h-full flex-col items-center relative w-16 bg-[#e5e7eb] dark:bg-[#121926] transition-all`}>
<div className={`hidden md:flex h-full flex-col items-center relative w-16 bg-gray-200 dark:bg-gray-900 transition-all`}>
{loginUid && <User uid={loginUid} />}
<nav className="flex flex-col gap-1 px-3 py-6">
<NavLink
src/routes/onboarding/index.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ const Navigator = () => {
console.log("active step", activeStep);
return (
<div className="absolute top-5 w-full flex justify-center gap-2 z-10">
<div className="hidden md:flex absolute top-5 w-full justify-center gap-2 z-10">
{steps.map((stepToRender, indexToRender) => {
const clickable = canJumpTo.includes(stepToRender.name);
const itemClass = clsx(`text-sm text-gray-600`, clickable && "cursor-pointer hover:text-gray-500", indexToRender === activeStep && "font-bold text-black", indexToRender >= activeStep && "text-gray-400");
@@ -52,7 +52,7 @@ export default function OnboardingPage() {
<Helmet>
<title>{t("onboarding.title")}</title>
</Helmet>
<div className="h-screen overflow-y-auto">
<div className="h-screen bg-gray-200 dark:bg-gray-900 overflow-y-auto">
<Wizard header={<Navigator />}>
<WelcomePage />
<ServerName serverName={serverName} setServerName={setServerName} />
src/routes/onboarding/steps/UpdateFrontendURL.tsx
+4 -4
View File
@@ -35,12 +35,12 @@ const UpdateFrontendURL = ({ refreshInviteLink }: Props) => {
}
}, [isSuccess]);
return (
<div className="absolute left-1/2 -translate-x-1/2 bottom-8 border-2 border-solid border-primary-300 bg-primary-25 rounded-lg px-2 py-3 flex justify-start gap-4">
<div className="absolute left-1/2 -translate-x-1/2 bottom-8 border-2 border-solid border-primary-300 dark:border-primary-700 bg-primary-25 dark:bg-primary-900 rounded-lg px-2 py-3 flex justify-start gap-4">
<InfoIcon />
<div className="flex flex-col items-start gap-2">
<span className="text-sm text-primary-700 mb-1">{t("update_domain_tip")}</span>
<div className="w-[400px] rounded flex gap-2">
<StyledInput type={"url"} className="!shadow-none !bg-transparent" placeholder="Frontend URL" value={frontUrl} onChange={handleUpdateUrl} />
<span className="text-sm text-primary-700 dark:text-primary-300 mb-1">{t("update_domain_tip")}</span>
<div className="w-[300px] md:w-[400px] rounded flex gap-2">
<StyledInput type={"url"} className="!shadow-none md:!bg-transparent" placeholder="Frontend URL" value={frontUrl} onChange={handleUpdateUrl} />
<StyledButton disabled={!frontUrl || isLoading} onClick={updateFrontUrl} className="small ">
{ct("action.update")}
</StyledButton>
src/routes/onboarding/steps/admin-account.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
}, [isUpdatedServer]);
return (
<div className="h-full flex-center flex-col text-center w-[360px] m-auto">
<div className="h-full flex-center flex-col text-center w-[360px] m-auto dark:text-gray-100">
<span className="text-2xl mb-2 font-bold">{t("admin_title")}</span>
<span className="text-sm mb-6">{t("admin_desc")}</span>
<form ref={formRef} action="/" className="flex flex-col gap-2 w-full">
src/routes/onboarding/steps/done-page.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export default function DonePage({ serverName }: { serverName: string }) {
const navigate = useNavigate();
return (
<div className="h-full flex-center flex-col text-center w-[588px] m-auto">
<div className="h-full px-2 flex-center flex-col text-center md:w-[588px] m-auto dark:text-gray-100">
<span className="text-2xl font-bold mb-2">{t("done_welcome", { serverName })}</span>
<span className="text-sm mb-12">{t("done_title")}</span>
<span className="text-xl mb-12">
src/routes/onboarding/steps/invite-link.tsx
+3 -3
View File
@@ -14,11 +14,11 @@ export default function InviteLink() {
const { link, linkCopied, copyLink, generateNewLink } = useInviteLink();
return (
<div className="h-full flex-center flex-col relative">
<div className="px-2 h-full flex-center flex-col relative dark:text-gray-100">
<span className="text-2xl mb-2 font-bold">{t("invite_title")}</span>
<span className="text-sm mb-10 text-gray-400">{t("last_tip")}</span>
<span className="text-sm mb-10 text-gray-400 dark:text-gray-600">{t("last_tip")}</span>
<span className="text-sm text-gray-500 mb-2 font-semibold">{t("last_desc")}</span>
<div className="w-[400px] rounded shadow-md flex border border-solid border-gray-100">
<div className="w-full md:w-[400px] rounded shadow-md flex border border-solid border-gray-100">
<StyledInput className="large !border-none !shadow-none" readOnly placeholder="Generating" value={link} />
<StyledButton onClick={copyLink} className="ghost small border_less !px-2 hover:!text-[#088ab2]">
{linkCopied ? "Copied" : ct("action.copy")}
src/routes/onboarding/steps/server-name.tsx
+2 -2
View File
@@ -14,9 +14,9 @@ const ServerName: FC<Props> = ({ serverName, setServerName }) => {
const { nextStep } = useWizard();
return (
<div className="h-full flex-center flex-col text-center w-[360px] m-auto">
<div className="h-full flex-center flex-col text-center w-[360px] m-auto dark:text-gray-200">
<span className="text-2xl mb-2 font-bold">{t("new_server")}</span>
<span className="text-sm mb-6 text-gray-400 ">
<span className="text-sm mb-6 text-gray-400 dark:text-gray-600">
{t("server_desc")}
</span>
<StyledInput
src/routes/onboarding/steps/welcome-page.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export default function WelcomePage() {
const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
const { nextStep } = useWizard();
return (
<div className="flex-center flex-col h-full text-center">
<div className="flex-center flex-col h-full text-center dark:text-gray-100">
<span className="text-2xl mb-2 font-bold">{t("welcome")}</span>
<span className="text-sm mb-6">
{t("welcome_desc")}
src/routes/onboarding/steps/who-can-sign-up.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export default function SignUpSetting() {
return (
<div className="h-full flex-center flex-col text-center w-[512px] m-auto">
<div className="h-full px-2 flex-center flex-col text-center w-full md:w-[512px] m-auto dark:text-gray-100">
<span className="font-bold text-2xl mb-2">{t("onboarding.invite_title")}</span>
<span className="text-sm mb-6">{t("onboarding.invite_desc")}</span>
{value && <StyledRadio