Simplify user theme settings

src/frontend/src/pages/Index/Settings/AccountSettings/DisplaySettingsPanel.tsx

@@ -1,51 +0,0 @@
-import { Trans } from '@lingui/macro';
-import { Button, Container, Group, Table, Title } from '@mantine/core';
-
-import { ColorToggle } from '../../../../components/items/ColorToggle';
-import { LanguageSelect } from '../../../../components/items/LanguageSelect';
-import { IS_DEV } from '../../../../main';
-import { useLocalState } from '../../../../states/LocalState';
-
-export function DisplaySettingsPanel({ height }: { height: number }) {
-  function enablePseudoLang(): void {
-    useLocalState.setState({ language: 'pseudo-LOCALE' });
-  }
-
-  return (
-    <Container w="100%" mih={height} p={0}>
-      <Title order={3}>
-        <Trans>Display Settings</Trans>
-      </Title>
-      <Table>
-        <tbody>
-          <tr>
-            <td>
-              <Trans>Color Mode</Trans>
-            </td>
-            <td>
-              <Group>
-                <ColorToggle />
-              </Group>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <Trans>Language</Trans>
-            </td>
-            <td>
-              {' '}
-              <Group>
-                <LanguageSelect width={200} />
-                {IS_DEV && (
-                  <Button onClick={enablePseudoLang} variant="light">
-                    <Trans>Use pseudo language</Trans>
-                  </Button>
-                )}
-              </Group>
-            </td>
-          </tr>
-        </tbody>
-      </Table>
-    </Container>
-  );
-}

src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx

@@ -1,7 +1,6 @@
 import { Container, Grid, SimpleGrid } from '@mantine/core';
 
 import { AccountDetailPanel } from './AccountDetailPanel';
-import { DisplaySettingsPanel } from './DisplaySettingsPanel';
 import { UserTheme } from './UserThemePanel';
 
 export function AccountContent() {
@@ -18,9 +17,6 @@ export function AccountContent() {
           <Grid.Col>
             <UserTheme height={SECONDARY_COL_HEIGHT} />
           </Grid.Col>
-          <Grid.Col>
-            <DisplaySettingsPanel height={SECONDARY_COL_HEIGHT} />
-          </Grid.Col>
         </Grid>
       </SimpleGrid>
     </div>

src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx

@@ -1,21 +1,21 @@
 import { Trans, t } from '@lingui/macro';
 import {
-  ColorInput,
+  Button,
   ColorPicker,
   Container,
   DEFAULT_THEME,
   Group,
   Loader,
   Select,
-  Slider,
   Table,
-  Title
+  Title,
+  useMantineTheme
 } from '@mantine/core';
-import { useState } from 'react';
 
-import { SizeMarks } from '../../../../defaults/defaults';
+import { ColorToggle } from '../../../../components/items/ColorToggle';
+import { LanguageSelect } from '../../../../components/items/LanguageSelect';
+import { IS_DEV } from '../../../../main';
 import { useLocalState } from '../../../../states/LocalState';
-import { theme } from '../../../../theme';
 
 function getLkp(color: string) {
   return { [DEFAULT_THEME.colors[color][6]]: color };
@@ -26,50 +26,29 @@ const LOOKUP = Object.assign(
 );
 
 export function UserTheme({ height }: { height: number }) {
-  // primary color
-  function changePrimary(color: string) {
-    useLocalState.setState({ primaryColor: LOOKUP[color] });
-  }
-  // white color
-  const [whiteColor, setWhiteColor] = useState(theme.white);
-  function changeWhite(color: string) {
-    useLocalState.setState({ whiteColor: color });
-    setWhiteColor(color);
-  }
-  // black color
-  const [blackColor, setBlackColor] = useState(theme.black);
-  function changeBlack(color: string) {
-    useLocalState.setState({ blackColor: color });
-    setBlackColor(color);
-  }
-  // radius
-  function getMark(value: number) {
-    const obj = SizeMarks.find((mark) => mark.value === value);
-    if (obj) return obj;
-    return SizeMarks[0];
-  }
-  function getDefaultRadius() {
-    const obj = SizeMarks.find(
-      (mark) => mark.label === useLocalState.getState().radius
-    );
-    if (obj) return obj.value;
-    return 50;
-  }
-  const [radius, setRadius] = useState(getDefaultRadius());
-  function changeRadius(value: number) {
-    setRadius(value);
-    useLocalState.setState({ radius: getMark(value).label });
-  }
-  // loader
-  const loaderDate = [
-    { value: 'bars', label: t`bars` },
-    { value: 'oval', label: t`oval` },
-    { value: 'dots', label: t`dots` }
-  ];
   const [themeLoader, setThemeLoader] = useLocalState((state) => [
     state.loader,
     state.setLoader
   ]);
+
+  const theme = useMantineTheme();
+
+  // Set theme primary color
+  function changePrimary(color: string) {
+    useLocalState.setState({ primaryColor: LOOKUP[color] });
+  }
+
+  function enablePseudoLang(): void {
+    useLocalState.setState({ language: 'pseudo-LOCALE' });
+  }
+
+  // Custom loading indicator
+  const loaderDate = [
+    { value: 'bars', label: t`Bars` },
+    { value: 'oval', label: t`Oval` },
+    { value: 'dots', label: t`Dots` }
+  ];
+
   function changeLoader(value: string | null) {
     if (value === null) return;
     setThemeLoader(value);
@@ -78,13 +57,58 @@ export function UserTheme({ height }: { height: number }) {
   return (
     <Container w="100%" mih={height} p={0}>
       <Title order={3}>
-        <Trans>Theme</Trans>
+        <Trans>Display Settings</Trans>
       </Title>
       <Table>
         <Table.Tbody>
           <Table.Tr>
             <Table.Td>
-              <Trans>Primary color</Trans>
+              <Trans>Language</Trans>
+            </Table.Td>
+            <Table.Td>
+              <LanguageSelect width={200} />
+            </Table.Td>
+            <Table.Td>
+              {IS_DEV && (
+                <Button onClick={enablePseudoLang} variant="light">
+                  <Trans>Use pseudo language</Trans>
+                </Button>
+              )}
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Color Mode</Trans>
+            </Table.Td>
+            <Table.Td>
+              <Group justify="left">
+                <ColorToggle />
+              </Group>
+            </Table.Td>
+            <Table.Td></Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Loader</Trans>
+            </Table.Td>
+            <Table.Td>
+              <Group justify="left">
+                <Select
+                  data={loaderDate}
+                  value={themeLoader}
+                  onChange={changeLoader}
+                />
+              </Group>
+            </Table.Td>
+            <Table.Td>
+              <Group justify="left">
+                <Loader type={themeLoader} mah={18} />
+              </Group>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Highlight color</Trans>
             </Table.Td>
             <Table.Td>
               <ColorPicker
@@ -94,52 +118,10 @@ export function UserTheme({ height }: { height: number }) {
                 swatches={Object.keys(LOOKUP)}
               />
             </Table.Td>
-          </Table.Tr>
-          <Table.Tr>
             <Table.Td>
-              <Trans>White color</Trans>
-            </Table.Td>
-            <Table.Td>
-              <ColorInput value={whiteColor} onChange={changeWhite} />
-            </Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Black color</Trans>
-            </Table.Td>
-            <Table.Td>
-              <ColorInput value={blackColor} onChange={changeBlack} />
-            </Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Border Radius</Trans>
-            </Table.Td>
-            <Table.Td>
-              <Slider
-                label={(val) => getMark(val).label}
-                defaultValue={50}
-                step={25}
-                marks={SizeMarks}
-                value={radius}
-                onChange={changeRadius}
-                mb={18}
-              />
-            </Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Loader</Trans>
-            </Table.Td>
-            <Table.Td>
-              <Group align="center">
-                <Select
-                  data={loaderDate}
-                  value={themeLoader}
-                  onChange={changeLoader}
-                />
-                <Loader type={themeLoader} mah={18} />
-              </Group>
+              <Button color={theme.primaryColor} variant="light">
+                <Trans>Example</Trans>
+              </Button>
             </Table.Td>
           </Table.Tr>
         </Table.Tbody>