feat(standalone/setup): use segmented cards for sync setup

This commit is contained in:
Elian Doran
2026-03-25 20:23:57 +02:00
parent ae996e8847
commit 04db52145d
2 changed files with 36 additions and 24 deletions

View File

@@ -30,7 +30,7 @@ body.setup {
display: flex;
flex-direction: column;
gap: 2rem;
height: 550px;
height: 600px;
width: 700px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
overflow: hidden;
@@ -42,6 +42,10 @@ body.setup {
justify-content: center;
gap: 1rem;
&.centered {
flex-grow: 1;
}
.setup-option-card {
padding: 1.5em;
cursor: pointer;

View File

@@ -84,7 +84,7 @@ function App() {
function SetupOptions({ setState }: { setState: (state: State) => void }) {
return (
<SetupPage title={t("setup.heading")} className="setup-options-container">
<div class="setup-options">
<div class="setup-options centered">
<SetupOptionCard
icon="bx bx-file-blank"
title={t("setup.new-document")}
@@ -285,30 +285,38 @@ function SyncFromServer({ setState }: { setState: (state: State) => void }) {
footer={<Button text={t("setup.button-finish-setup")} kind="primary" onClick={handleFinishSetup} disabled={!isValid} />}
>
<form>
<FormGroup label={t("setup.server-host")} name="serverHost">
<FormTextBox placeholder={t("setup.server-host-placeholder")} currentValue={syncServerHost} onChange={setSyncServerHost} required />
</FormGroup>
<Card>
<CardSection>
<FormGroup label={t("setup.server-host")} name="serverHost">
<FormTextBox placeholder={t("setup.server-host-placeholder")} currentValue={syncServerHost} onChange={setSyncServerHost} required />
</FormGroup>
</CardSection>
<FormGroup
label={t("setup.server-password")} name="serverPassword"
error={isWrongPassword ? t("setup.wrong-password") : undefined}
>
<FormTextBox
type="password"
currentValue={password} onChange={setPassword}
required
/>
</FormGroup>
<CardSection>
<FormGroup
label={t("setup.server-password")} name="serverPassword"
error={isWrongPassword ? t("setup.wrong-password") : undefined}
>
<FormTextBox
type="password"
currentValue={password} onChange={setPassword}
required
/>
</FormGroup>
</CardSection>
</Card>
<Collapsible title={t("setup.advanced-options")} initiallyExpanded={false}>
<FormGroup
name="proxyServer"
label={t("setup.proxy-server")}
description={isElectron() ? t("setup.proxy-instruction") : undefined}
>
<FormTextBox placeholder={t("setup.proxy-server-placeholder")} currentValue={syncProxy} onChange={setSyncProxy} />
</FormGroup>
</Collapsible>
<Card heading={t("setup.advanced-options")}>
<CardSection>
<FormGroup
name="proxyServer"
label={t("setup.proxy-server")}
description={isElectron() ? t("setup.proxy-instruction") : undefined}
>
<FormTextBox placeholder={t("setup.proxy-server-placeholder")} currentValue={syncProxy} onChange={setSyncProxy} />
</FormGroup>
</CardSection>
</Card>
</form>
</SetupPage>
);