Improve visual consistency on the settings page (#799)

This PR improves the consistency of the settings UI by moving everything (except the budget name field on mobile) into `<Setting>` boxes. Additionally, it adds a “Settings” option to the file dropdown menu (I keep expecting it to be there, and I think it’s reasonable to expose it in both locations so it’s easier to access)
2026-03-11 20:44:32 -05:00 · 2023-03-21 16:11:18 -04:00
parent 3cb18683c6
commit 8e94d1777b
7 changed files with 156 additions and 138 deletions
--- a/packages/desktop-client/src/components/SidebarWithData.js
+++ b/packages/desktop-client/src/components/SidebarWithData.js
@@ -51,9 +51,10 @@ function EditableBudgetName({ prefs, savePrefs }) {
  }

  let items = [
-    { name: 'rename', text: 'Rename Budget' },
+    { name: 'rename', text: 'Rename budget' },
+    { name: 'settings', text: 'Settings' },
    ...(Platform.isBrowser ? [{ name: 'help', text: 'Help' }] : []),
-    { name: 'close', text: 'Close File' },
+    { name: 'close', text: 'Close file' },
  ];

  if (editing) {
--- a/packages/desktop-client/src/components/settings/Experimental.js
+++ b/packages/desktop-client/src/components/settings/Experimental.js
@@ -33,7 +33,7 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
                disabled={disabled}
              />{' '}
              <View>
-                Enable budget mode toggle
+                Budget mode toggle
                {disabled && (
                  <Text style={{ color: colors.r3, fontWeight: 500 }}>
                    Switch to a rollover budget before turning off this feature
@@ -50,7 +50,7 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
                  savePrefs({ 'flags.syncAccount': !flags.syncAccount });
                }}
              />{' '}
-              <View>Enable account syncing</View>
+              <View>Account syncing via Nordigen</View>
            </label>
            <label style={{ display: 'flex' }}>
              <Checkbox
@@ -62,7 +62,7 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
                  });
                }}
              />{' '}
-              <View>Enable Goal Templates</View>
+              <View>Goal templates</View>
            </label>
            <label style={{ display: 'flex' }}>
              <Checkbox
@@ -74,7 +74,7 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
                  });
                }}
              />{' '}
-              <View>Enable new Autocomplete component</View>
+              <View>New autocomplete component</View>
            </label>
          </View>
        ) : (
--- a/packages/desktop-client/src/components/settings/FixSplits.js
+++ b/packages/desktop-client/src/components/settings/FixSplits.js
@@ -83,27 +83,23 @@ export default function FixSplitsTool() {
        <strong>Repair split transactions</strong> if you are experiencing bugs
        relating to split transactions and the “Reset budget cache” button above
        does not help. If you see blank payees on splits or account balances (or
-        any balances) are incorrect, this tool may fix them.
+        any balances) are incorrect, this tool may fix them. This tool does two
+        things:
      </Text>
-      <View style={{ alignItems: 'flex-start' }}>
-        <P>This tool does two things:</P>
-        <P>
-          <ul style={{ margin: 0, paddingLeft: '1.5em' }}>
-            <li style={{ marginBottom: '1em' }}>
-              Ensures that deleted split transactions are fully deleted. In
-              previous versions of the app, certain split transactions may
-              appear deleted but not all of them are actually deleted. This
-              causes the transactions list to look correct, but certain balances
-              may be incorrect when filtering.
-            </li>
-            <li>
-              Sync the payee and cleared flag of a split transaction to the main
-              or “parent” transaction, if appropriate. The payee will only be
-              set if it currently doesn’t have one.
-            </li>
-          </ul>
-        </P>
-      </View>
+      <ul style={{ margin: 0, paddingLeft: '1.5em' }}>
+        <li style={{ marginBottom: '0.5em' }}>
+          Ensures that deleted split transactions are fully deleted. In previous
+          versions of the app, certain split transactions may appear deleted but
+          not all of them are actually deleted. This causes the transactions
+          list to look correct, but certain balances may be incorrect when
+          filtering.
+        </li>
+        <li>
+          Sync the payee and cleared flag of a split transaction to the main or
+          “parent” transaction, if appropriate. The payee will only be set if it
+          currently doesn’t have one.
+        </li>
+      </ul>
    </Setting>
  );
 }
--- a/packages/desktop-client/src/components/settings/Global.js
+++ b/packages/desktop-client/src/components/settings/Global.js
@@ -2,8 +2,9 @@ import React, { useState, useEffect, useRef } from 'react';

 import { Information } from 'loot-design/src/components/alerts';
 import { View, Text, Button } from 'loot-design/src/components/common';
+import { colors } from 'loot-design/src/style';

-import { Section } from './UI';
+import { Setting } from './UI';

 export default function GlobalSettings({ globalPrefs, saveGlobalPrefs }) {
  let [documentDirChanged, setDirChanged] = useState(false);
@@ -26,50 +27,38 @@ export default function GlobalSettings({ globalPrefs, saveGlobalPrefs }) {
  }

  return (
-    <Section title="General">
-      <View
+    <Setting
+      primaryAction={
+        <View style={{ flexDirection: 'row' }}>
+          <Button onClick={onChooseDocumentDir}>Change location</Button>
+          {documentDirChanged && (
+            <Information>
+              A restart is required for this change to take effect
+            </Information>
+          )}
+        </View>
+      }
+    >
+      <Text>
+        <strong>Actual’s files</strong> are stored in a folder on your computer.
+        Currently, that’s:
+      </Text>
+      <Text
+        innerRef={dirScrolled}
        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          overflow: 'hidden',
+          backgroundColor: colors.n10,
+          padding: '7px 10px',
+          borderRadius: 4,
+          overflow: 'auto',
+          whiteSpace: 'nowrap',
+          // TODO: When we update electron, we should be able to
+          // remove this. In previous versions of Chrome, once the
+          // scrollbar appears it never goes away
+          '::-webkit-scrollbar': { display: 'none' },
        }}
      >
-        <Text style={{ flexShrink: 0 }}>Store files here: </Text>
-        <Text
-          innerRef={dirScrolled}
-          style={{
-            backgroundColor: 'white',
-            padding: '7px 10px',
-            borderRadius: 4,
-            marginLeft: 5,
-            overflow: 'auto',
-            whiteSpace: 'nowrap',
-            // TODO: When we update electron, we should be able to
-            // remove this. In previous versions of Chrome, once the
-            // scrollbar appears it never goes away
-            '::-webkit-scrollbar': { display: 'none' },
-          }}
-        >
-          {globalPrefs.documentDir}
-        </Text>
-        <Button
-          primary
-          onClick={onChooseDocumentDir}
-          style={{
-            fontSize: 14,
-            marginLeft: 5,
-            flexShrink: 0,
-            alignSelf: 'flex-start',
-          }}
-        >
-          Change location
-        </Button>
-      </View>
-      {documentDirChanged && (
-        <Information style={{ marginTop: 10 }}>
-          A restart is required for this change to take effect
-        </Information>
-      )}
-    </Section>
+        {globalPrefs.documentDir}
+      </Text>
+    </Setting>
  );
 }
--- a/packages/desktop-client/src/components/settings/UI.js
+++ b/packages/desktop-client/src/components/settings/UI.js
@@ -7,27 +7,10 @@ import { View, Link } from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 import tokens from 'loot-design/src/tokens';

-export function Section({ title, children, style, titleProps, ...props }) {
-  return (
-    <View style={[{ gap: 20, alignItems: 'flex-start' }, style]} {...props}>
-      <View
-        style={[
-          { fontSize: 20, fontWeight: 500, flexShrink: 0 },
-          titleProps && titleProps.style,
-        ]}
-        {...titleProps}
-      >
-        {title}
-      </View>
-      {children}
-    </View>
-  );
-}
-
-export function Setting({ primaryAction, children }) {
+export function Setting({ primaryAction, style, children }) {
  return (
    <View
-      {...css(
+      {...css([
        {
          backgroundColor: colors.n9,
          alignSelf: 'flex-start',
@@ -37,10 +20,8 @@ export function Setting({ primaryAction, children }) {
          border: '1px solid ' + colors.n8,
          width: '100%',
        },
-        media(`(min-width: ${tokens.breakpoint_medium})`, {
-          width: 'auto',
-        }),
-      )}
+        style,
+      ])}
    >
      <View
        style={{
@@ -62,26 +43,30 @@ export function AdvancedToggle({ children }) {
  let [expanded, setExpanded] = useState(location.hash === '#advanced');

  return expanded ? (
-    <Section
-      innerRef={el => {
-        if (el && location.hash === '#advanced') {
-          el.scrollIntoView(true);
-        }
-      }}
+    <View
      id="advanced"
-      title="Advanced Settings"
-      {...css(
+      style={[
        {
+          gap: 20,
+          alignItems: 'flex-start',
          marginBottom: 25,
          width: '100%',
        },
        media(`(min-width: ${tokens.breakpoint_medium})`, {
          width: 'auto',
        }),
-      )}
+      ]}
+      innerRef={el => {
+        if (el && location.hash === '#advanced') {
+          el.scrollIntoView(true);
+        }
+      }}
    >
+      <View style={{ fontSize: 20, fontWeight: 500, flexShrink: 0 }}>
+        Advanced Settings
+      </View>
      {children}
-    </Section>
+    </View>
  ) : (
    <Link
      id="advanced"
--- a/packages/desktop-client/src/components/settings/index.js
+++ b/packages/desktop-client/src/components/settings/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';

-import { css, media } from 'glamor';
+import { media } from 'glamor';

 import * as actions from 'loot-core/src/client/actions';
 import * as Platform from 'loot-core/src/client/platform';
@@ -24,7 +24,7 @@ import FixSplitsTool from './FixSplits';
 import FormatSettings from './Format';
 import GlobalSettings from './Global';
 import { ResetCache, ResetSync } from './Reset';
-import { Section, AdvancedToggle } from './UI';
+import { AdvancedToggle, Setting } from './UI';

 function About() {
  const version = useServerVersion();
@@ -32,37 +32,81 @@ function About() {
  const isOutdated = useIsOutdated();

  return (
-    <Section title="About" style={{ gap: 5 }}>
+    <Setting>
      <Text>
-        Client version: v{window.Actual.ACTUAL_VERSION} (
+        <strong>Actual</strong> is a super fast privacy-focused app for managing
+        your finances.
+      </Text>
+      <View
+        style={[
+          { flexDirection: 'column', gap: 10 },
+          media(`(min-width: ${tokens.breakpoint_medium})`, {
+            display: 'grid',
+            gridTemplateRows: '1fr 1fr',
+            gridTemplateColumns: '50% 50%',
+            columnGap: '2em',
+            gridAutoFlow: 'column',
+          }),
+        ]}
+      >
+        <Text>Client version: v{window.Actual.ACTUAL_VERSION}</Text>
+        <Text>Server version: {version}</Text>
        {isOutdated ? (
-          <a href="https://actualbudget.github.io/docs/Release-Notes">
-            new version available: {latestVersion}
+          <a
+            style={{ color: colors.p4 }}
+            href="https://actualbudget.github.io/docs/Release-Notes"
+          >
+            New version available: {latestVersion}
          </a>
        ) : (
-          <span>latest</span>
+          <Text style={{ color: colors.g2, fontWeight: 600 }}>
+            You’re up to date!
+          </Text>
        )}
-        )
-      </Text>
-      <Text>Server version: {version}</Text>
-    </Section>
+        <Text>
+          <a href="https://actualbudget.github.io/docs/Release-Notes">
+            Release Notes
+          </a>
+        </Text>
+      </View>
+    </Setting>
  );
 }

+function IDName({ children }) {
+  return <Text style={{ fontWeight: 500 }}>{children}</Text>;
+}
+
 function AdvancedAbout({ prefs }) {
  return (
-    <>
-      <Text>Budget ID: {prefs.id}</Text>
-      <Text style={{ color: colors.n6 }}>
-        Sync ID: {prefs.groupId || '(none)'}
+    <Setting>
+      <Text>
+        <strong>IDs</strong> are the names Actual uses to identify your budget
+        internally. There are several different IDs associated with your budget.
+        The Budget ID is used to identify your budget file. The Sync ID is used
+        to access the budget on the server.
      </Text>
-    </>
+      <Text>
+        <IDName>Budget ID:</IDName> {prefs.id}
+      </Text>
+      <Text style={{ color: colors.n5 }}>
+        <IDName>Sync ID:</IDName> {prefs.groupId || '(none)'}
+      </Text>
+      {/* low priority todo: eliminate some or all of these, or decide when/if to show them */}
+      {/* <Text>
+        <IDName>Cloud File ID:</IDName> {prefs.cloudFileId || '(none)'}
+      </Text>
+      <Text>
+        <IDName>User ID:</IDName> {prefs.userId || '(none)'}
+      </Text> */}
+    </Setting>
  );
 }

 function Settings({
  loadPrefs,
  savePrefs,
+  saveGlobalPrefs,
  prefs,
  globalPrefs,
  pushModal,
@@ -86,32 +130,29 @@ function Settings({
    >
      <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>
+          {isMobile() && (
+            <View
+              style={{ gap: 10, flexDirection: 'row', alignItems: 'flex-end' }}
+            >
+              {/* The only spot to close a budget on mobile */}
+              <FormField>
+                <FormLabel title="Budget Name" />
+                <Input
+                  value={prefs.budgetName}
+                  disabled
+                  style={{ color: '#999' }}
+                />
+              </FormField>
+              <Button onClick={closeBudget}>Close Budget</Button>
+            </View>
+          )}

          <About />

          {!Platform.isBrowser && (
            <GlobalSettings
              globalPrefs={globalPrefs}
-              saveGlobalPrefs={this.props.saveGlobalPrefs}
+              saveGlobalPrefs={saveGlobalPrefs}
            />
          )}

--- a/upcoming-release-notes/799.md
+++ b/upcoming-release-notes/799.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [j-f1]
+---
+
+Improve visual consistency on the settings page