[PUI] User settings panel updates

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
+  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] });
   }
-  // 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 });
+
+  function enablePseudoLang(): void {
+    useLocalState.setState({ language: 'pseudo-LOCALE' });
   }
-  // loader
+
+  // Custom loading indicator
   const loaderDate = [
-    { value: 'bars', label: t`bars` },
-    { value: 'oval', label: t`oval` },
-    { value: 'dots', label: t`dots` }
+    { value: 'bars', label: t`Bars` },
+    { value: 'oval', label: t`Oval` },
+    { value: 'dots', label: t`Dots` }
   ];
-  const [themeLoader, setThemeLoader] = useLocalState((state) => [
-    state.loader,
-    state.setLoader
-  ]);
+
   function changeLoader(value: string | null) {
     if (value === null) return;
     setThemeLoader(value);
@@ -78,69 +57,72 @@ 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>
-            </Table.Td>
-            <Table.Td>
-              <ColorPicker
-                format="hex"
-                onChange={changePrimary}
-                withPicker={false}
-                swatches={Object.keys(LOOKUP)}
-              />
-            </Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>White color</Trans>
+              <Trans>Language</Trans>
             </Table.Td>
             <Table.Td>
-              <ColorInput value={whiteColor} onChange={changeWhite} />
-            </Table.Td>
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td>
-              <Trans>Black color</Trans>
+              <LanguageSelect width={200} />
             </Table.Td>
             <Table.Td>
-              <ColorInput value={blackColor} onChange={changeBlack} />
+              {IS_DEV && (
+                <Button onClick={enablePseudoLang} variant="light">
+                  <Trans>Use pseudo language</Trans>
+                </Button>
+              )}
             </Table.Td>
           </Table.Tr>
           <Table.Tr>
             <Table.Td>
-              <Trans>Border Radius</Trans>
+              <Trans>Color Mode</Trans>
             </Table.Td>
             <Table.Td>
-              <Slider
-                label={(val) => getMark(val).label}
-                defaultValue={50}
-                step={25}
-                marks={SizeMarks}
-                value={radius}
-                onChange={changeRadius}
-                mb={18}
-              />
+              <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 align="center">
+              <Group justify="left">
                 <Select
                   data={loaderDate}
                   value={themeLoader}
                   onChange={changeLoader}
                 />
-                <Loader type={themeLoader} mah={18} />
               </Group>
             </Table.Td>
+            <Table.Td>
+              <Group justify="left">
+                <Loader type={themeLoader} mah={16} size="sm" />
+              </Group>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Highlight color</Trans>
+            </Table.Td>
+            <Table.Td>
+              <ColorPicker
+                format="hex"
+                onChange={changePrimary}
+                withPicker={false}
+                swatches={Object.keys(LOOKUP)}
+              />
+            </Table.Td>
+            <Table.Td>
+              <Button color={theme.primaryColor} variant="light">
+                <Trans>Example</Trans>
+              </Button>
+            </Table.Td>
           </Table.Tr>
         </Table.Tbody>
       </Table>

src/frontend/src/tables/InvenTreeTable.tsx

@@ -155,7 +155,8 @@ export function InvenTreeTable<T = any>({
     getTableColumnNames,
     setTableColumnNames,
     getTableSorting,
-    setTableSorting
+    setTableSorting,
+    loader
   } = useLocalState();
   const [fieldNames, setFieldNames] = useState<Record<string, string>>({});
 
@@ -699,7 +700,7 @@ export function InvenTreeTable<T = any>({
               withTableBorder
               striped
               highlightOnHover
-              loaderType="dots"
+              loaderType={loader}
               pinLastColumn={tableProps.rowActions != undefined}
               idAccessor={tableProps.idAccessor}
               minHeight={300}