From 0d06ffd8eac3a2076dc4dea98dfb3d068e002c85 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Wed, 21 Aug 2024 07:17:00 +0000
Subject: [PATCH] Update components

---
 .../AccountSettings/AccountDetailPanel.tsx    |  22 +---
 .../AccountSettings/UserThemePanel.tsx        | 122 +++++++++++++++---
 2 files changed, 106 insertions(+), 38 deletions(-)

diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
index f58a44d8cb..b337ad719b 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
@@ -1,27 +1,11 @@
 import { Trans, t } from '@lingui/macro';
-import {
-  ActionIcon,
-  Button,
-  Group,
-  Stack,
-  Table,
-  Text,
-  TextInput,
-  Title,
-  Tooltip
-} from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { useToggle } from '@mantine/hooks';
+import { ActionIcon, Group, Stack, Table, Title, Tooltip } from '@mantine/core';
 import { IconEdit } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
-import { api } from '../../../../App';
-import { EditButton } from '../../../../components/buttons/EditButton';
 import { ApiFormFieldSet } from '../../../../components/forms/fields/ApiFormField';
-import { StylishText } from '../../../../components/items/StylishText';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { useEditApiFormModal } from '../../../../hooks/UseForm';
-import { apiUrl } from '../../../../states/ApiState';
 import { useUserState } from '../../../../states/UserState';
 
 export function AccountDetailPanel() {
@@ -50,9 +34,9 @@ export function AccountDetailPanel() {
       {editUser.modal}
       <Stack gap="xs">
         <Group justify="space-between">
-          <StylishText size="xl">
+          <Title order={3}>
             <Trans>User Details</Trans>
-          </StylishText>
+          </Title>
           <Tooltip label={t`Edit User Information`}>
             <ActionIcon variant="default" onClick={editUser.open}>
               <IconEdit />
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
index 8b405add29..b93d2e1a75 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
@@ -1,19 +1,26 @@
 import { Trans, t } from '@lingui/macro';
 import {
+  ActionIcon,
   Button,
+  ColorInput,
   ColorPicker,
   Container,
   DEFAULT_THEME,
   Group,
   Loader,
   Select,
+  Slider,
   Table,
   Title,
   useMantineTheme
 } from '@mantine/core';
+import { IconReload, IconRestore } from '@tabler/icons-react';
+import { useState } from 'react';
 
 import { ColorToggle } from '../../../../components/items/ColorToggle';
 import { LanguageSelect } from '../../../../components/items/LanguageSelect';
+import { SizeMarks } from '../../../../defaults/defaults';
+import { notYetImplemented } from '../../../../functions/notifications';
 import { IS_DEV } from '../../../../main';
 import { useLocalState } from '../../../../states/LocalState';
 
@@ -26,12 +33,47 @@ const LOOKUP = Object.assign(
 );
 
 export function UserTheme({ height }: { height: number }) {
+  const theme = useMantineTheme();
+
   const [themeLoader, setThemeLoader] = useLocalState((state) => [
     state.loader,
     state.setLoader
   ]);
 
-  const theme = useMantineTheme();
+  // 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 });
+  }
 
   // Set theme primary color
   function changePrimary(color: string) {
@@ -87,6 +129,66 @@ export function UserTheme({ height }: { height: number }) {
             </Table.Td>
             <Table.Td></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.Tr>
+            <Table.Td>
+              <Trans>White color</Trans>
+            </Table.Td>
+            <Table.Td>
+              <ColorInput value={whiteColor} onChange={changeWhite} />
+            </Table.Td>
+            <Table.Td>
+              <ActionIcon variant="default" onClick={notYetImplemented}>
+                <IconRestore />
+              </ActionIcon>
+            </Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>
+              <Trans>Black color</Trans>
+            </Table.Td>
+            <Table.Td>
+              <ColorInput value={blackColor} onChange={changeBlack} />
+            </Table.Td>
+            <Table.Td>
+              <ActionIcon variant="default" onClick={notYetImplemented}>
+                <IconRestore />
+              </ActionIcon>
+            </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>
@@ -106,24 +208,6 @@ export function UserTheme({ height }: { height: number }) {
               </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>
     </Container>