From 918b80bec5ddd929c5d6fd2599fcc074c97a1b1a Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Fri, 13 Jan 2023 17:34:59 -0500
Subject: [PATCH] Center the settings UI when the sidebar is collapsed (#458)
* Center the settings UI when the sidebar is collapsed
* Fix lint
---
.../src/components/settings/index.js | 83 ++++++++++---------
1 file changed, 45 insertions(+), 38 deletions(-)
diff --git a/packages/desktop-client/src/components/settings/index.js b/packages/desktop-client/src/components/settings/index.js
index 33bc8b77a..0ba5a6a9f 100644
--- a/packages/desktop-client/src/components/settings/index.js
+++ b/packages/desktop-client/src/components/settings/index.js
@@ -13,6 +13,7 @@ import tokens from 'loot-design/src/tokens';
import { withThemeColor } from 'loot-design/src/util/withThemeColor';
import useServerVersion from '../../hooks/useServerVersion';
+import { isMobile } from '../../util';
import { Page } from '../Page';
import EncryptionSettings from './Encryption';
import ExportBudget from './Export';
@@ -62,48 +63,54 @@ function Settings({
}, [loadPrefs]);
return (
- <Page title="Settings">
- <View style={{ flexShrink: 0, gap: 30, maxWidth: 600 }}>
- {/* The only spot to close a budget on mobile */}
- <Section
- title="Budget"
- style={css(
- media(`(min-width: ${tokens.breakpoint_medium})`, {
- display: 'none'
- })
- )}
- >
- <FormField>
- <FormLabel title="Name" />
- <Input
- value={prefs.budgetName}
- disabled
- style={{ color: '#999' }}
- />
- </FormField>
- <Button onClick={closeBudget}>Close Budget</Button>
- </Section>
+ <View
+ style={{
+ marginInline: globalPrefs.floatingSidebar && !isMobile() ? 'auto' : 0
+ }}
+ >
+ <Page title="Settings">
+ <View style={{ flexShrink: 0, gap: 30 }}>
+ {/* The only spot to close a budget on mobile */}
+ <Section
+ title="Budget"
+ style={css(
+ media(`(min-width: ${tokens.breakpoint_medium})`, {
+ display: 'none'
+ })
+ )}
+ >
+ <FormField>
+ <FormLabel title="Name" />
+ <Input
+ value={prefs.budgetName}
+ disabled
+ style={{ color: '#999' }}
+ />
+ </FormField>
+ <Button onClick={closeBudget}>Close Budget</Button>
+ </Section>
- <About />
+ <About />
- {!Platform.isBrowser && (
- <GlobalSettings
- globalPrefs={globalPrefs}
- saveGlobalPrefs={this.props.saveGlobalPrefs}
- />
- )}
+ {!Platform.isBrowser && (
+ <GlobalSettings
+ globalPrefs={globalPrefs}
+ saveGlobalPrefs={this.props.saveGlobalPrefs}
+ />
+ )}
- <FormatSettings prefs={prefs} savePrefs={savePrefs} />
- <EncryptionSettings prefs={prefs} pushModal={pushModal} />
- <ExportBudget prefs={prefs} />
+ <FormatSettings prefs={prefs} savePrefs={savePrefs} />
+ <EncryptionSettings prefs={prefs} pushModal={pushModal} />
+ <ExportBudget prefs={prefs} />
- <AdvancedToggle>
- <AdvancedAbout prefs={prefs} />
- <ResetCache />
- <ResetSync resetSync={resetSync} />
- </AdvancedToggle>
- </View>
- </Page>
+ <AdvancedToggle>
+ <AdvancedAbout prefs={prefs} />
+ <ResetCache />
+ <ResetSync resetSync={resetSync} />
+ </AdvancedToggle>
+ </View>
+ </Page>
+ </View>
);
}
--
GitLab