Skip to content

Commit 44d7657

Browse files
qu1ckqu1ck
committed
Improve settings dialogs spacing and layout
1 parent b0cd59d commit 44d7657

3 files changed

Lines changed: 214 additions & 217 deletions

File tree

‎src/components/modals/daemon.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ interface FormValues extends InterfaceFormValues {
4444
function PollingPanel({ form }: { form: UseFormReturnType<FormValues> }) {
4545
return (
4646
<Grid align="center">
47-
<Grid.Col span={12}><Text>Update intervals (sec)</Text></Grid.Col>
47+
<Grid.Col><Text>Update intervals (sec)</Text></Grid.Col>
4848
<Grid.Col span={8}>Session</Grid.Col>
4949
<Grid.Col span={2}>
5050
<NumberInput
@@ -95,7 +95,7 @@ function DownloadPanel({ form, session }: { form: UseFormReturnType<FormValues>,
9595
autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" />
9696
</Grid.Col>
9797
<Grid.Col>
98-
<Checkbox
98+
<Checkbox mt="lg"
9999
label={<Box>
100100
<span>Start added torrents</span>
101101
<HoverCard width={280} shadow="md">
@@ -115,12 +115,12 @@ function DownloadPanel({ form, session }: { form: UseFormReturnType<FormValues>,
115115
{...form.getInputProps("session.start-added-torrents", { type: "checkbox" })} />
116116
</Grid.Col>
117117
<Grid.Col>
118-
<Checkbox
118+
<Checkbox mt="lg"
119119
label="Add .part extension to incomplete files"
120120
{...form.getInputProps("session.rename-partial-files", { type: "checkbox" })} />
121121
</Grid.Col>
122122
<Grid.Col>
123-
<Checkbox
123+
<Checkbox mt="lg"
124124
label="Use separate directory for incomplete files"
125125
{...form.getInputProps("session.incomplete-dir-enabled", { type: "checkbox" })} />
126126
</Grid.Col>
@@ -275,13 +275,13 @@ function NetworkPanel(
275275
: <Text key="pt" color={testPortResult.color}>{testPortResult.label}</Text>
276276
}
277277
</Grid.Col>
278-
<Grid.Col span={6}>
279-
<Checkbox
278+
<Grid.Col>
279+
<Checkbox mt="lg"
280280
label="Let daemon pick a random port"
281281
{...form.getInputProps("session.peer-port-random-on-start", { type: "checkbox" })} />
282282
</Grid.Col>
283-
<Grid.Col span={6}>
284-
<Checkbox
283+
<Grid.Col>
284+
<Checkbox mt="lg"
285285
label="Enable UPnP port forwarding"
286286
{...form.getInputProps("session.port-forwarding-enabled", { type: "checkbox" })} />
287287
</Grid.Col>
@@ -313,22 +313,22 @@ function NetworkPanel(
313313
/>
314314
</Grid.Col>
315315
<Grid.Col span={6}>
316-
<Checkbox
316+
<Checkbox mt="lg"
317317
label="Enable peer exchange"
318318
{...form.getInputProps("session.pex-enabled", { type: "checkbox" })} />
319319
</Grid.Col>
320320
<Grid.Col span={6}>
321-
<Checkbox
321+
<Checkbox mt="lg"
322322
label="Enable DHT"
323323
{...form.getInputProps("session.dht-enabled", { type: "checkbox" })} />
324324
</Grid.Col>
325325
<Grid.Col span={6}>
326-
<Checkbox
326+
<Checkbox my="lg"
327327
label="Enable local discovery"
328328
{...form.getInputProps("session.lpd-enabled", { type: "checkbox" })} />
329329
</Grid.Col>
330330
<Grid.Col span={6}>
331-
<Checkbox
331+
<Checkbox my="lg"
332332
label="Enable uTP"
333333
{...form.getInputProps("session.utp-enabled", { type: "checkbox" })} />
334334
</Grid.Col>
@@ -391,7 +391,7 @@ function TimeInput(props: NumberInputProps) {
391391
const DaysOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as const;
392392

393393
function DayOfWeekCheckbox({ form, day, session }: { form: UseFormReturnType<FormValues>, day: number, session: SessionInfo }) {
394-
return <Checkbox
394+
return <Checkbox my="lg"
395395
label={DaysOfTheWeek[day]}
396396
checked={((session["alt-speed-time-day"] as number) & (1 << day)) > 0}
397397
onChange={(event) => {
@@ -442,12 +442,12 @@ function BandwidthPanel({ form, session }: { form: UseFormReturnType<FormValues>
442442
{...form.getInputProps("session.alt-speed-up")} />
443443
</Grid.Col>
444444
<Grid.Col>
445-
<Checkbox
445+
<Checkbox mt="lg"
446446
label="Use alternate bandwidth settings"
447447
{...form.getInputProps("session.alt-speed-enabled", { type: "checkbox" })} />
448448
</Grid.Col>
449449
<Grid.Col>
450-
<Checkbox
450+
<Checkbox my="lg"
451451
label="Apply alternate bandwidth settings automatically"
452452
{...form.getInputProps("session.alt-speed-time-enabled", { type: "checkbox" })} />
453453
</Grid.Col>
@@ -651,31 +651,31 @@ export function DaemonSettingsModal(props: ModalState) {
651651
</Tabs.List>
652652
{form.values.session !== undefined
653653
? <>
654-
<Tabs.Panel value="polling" pt="md">
654+
<Tabs.Panel value="polling" p="lg">
655655
<PollingPanel form={form} />
656656
</Tabs.Panel>
657657

658-
<Tabs.Panel value="download" pt="md">
658+
<Tabs.Panel value="download" p="lg">
659659
<DownloadPanel form={form} session={form.values.session} />
660660
</Tabs.Panel>
661661

662-
<Tabs.Panel value="network" pt="md">
662+
<Tabs.Panel value="network" p="lg">
663663
<NetworkPanel opened={props.opened} form={form} session={form.values.session} />
664664
</Tabs.Panel>
665665

666-
<Tabs.Panel value="bandwidth" pt="md">
666+
<Tabs.Panel value="bandwidth" p="lg">
667667
<BandwidthPanel form={form} session={form.values.session} />
668668
</Tabs.Panel>
669669

670-
<Tabs.Panel value="queue" pt="md">
670+
<Tabs.Panel value="queue" p="lg">
671671
<QueuePanel form={form} session={form.values.session} />
672672
</Tabs.Panel>
673673

674674
{!TAURI && <>
675-
<Tabs.Panel value="interface" pt="md">
675+
<Tabs.Panel value="interface" p="lg">
676676
<InterfaceSettigsPanel form={form} />
677677
</Tabs.Panel>
678-
<Tabs.Panel value="magnethandler" pt="md">
678+
<Tabs.Panel value="magnethandler" p="lg">
679679
<MagnetHandlerPanel />
680680
</Tabs.Panel>
681681
</>}

0 commit comments

Comments
 (0)