Merge pull request #46 from Strexas/JTE/PKFE-20

JTE/PKFE-20

app/front-end/src/components/dialogs/settingsDialog/index.ts

@@ -0,0 +1,3 @@
+export { SettingsDialog } from './settingsDialog';
+export { SettingSpacer } from './settingSpacer';
+export { SettingsSelectField } from './settingsSelectField';

app/front-end/src/components/dialogs/settingsDialog/settingSpacer.tsx

@@ -0,0 +1,5 @@
+import { Box } from '@mui/material';
+
+export const SettingSpacer = ({ size = 3 }) => {
+  return <Box mb={size} />;
+};

app/front-end/src/components/dialogs/settingsDialog/settingsDialog.tsx

@@ -0,0 +1,63 @@
+import { SettingSpacer } from '@/components/dialogs/settingsDialog';
+import { ColorModeSetting, LanguageSetting, TimeZoneSetting } from '@/components/dialogs/settingsDialog/settingsFields';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { alpha, Box, Dialog, DialogContent, DialogTitle, Grid, IconButton, styled, useTheme } from '@mui/material';
+
+const BootstrapDialog = styled(Dialog)(({ theme }) => ({
+  backdropFilter: 'blur(5px)',
+  '& .MuiDialogContent-root': {
+    padding: '1.5rem',
+  },
+  '& .MuiDialogActions-root': {
+    padding: '1.5rem',
+  },
+  '& .MuiDialog-paper': {
+    borderRadius: '1.5rem',
+    minWidth: '25%',
+    backgroundColor: theme.palette.background.paper,
+    backgroundImage: 'none',
+  },
+}));
+
+interface SettingsDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const SettingsDialog: React.FC<SettingsDialogProps> = ({ open, onClose }) => {
+  const Theme = useTheme();
+
+  return (
+    <BootstrapDialog onClose={onClose} open={open}>
+      <Grid container spacing={2} justifyContent='center' alignItems='center'>
+        <Grid item xs={8}>
+          <DialogTitle sx={{ color: Theme.palette.primary.main, pl: '1.5rem', pt: '1.5rem', fontWeight: '700' }}>
+            Settings
+          </DialogTitle>
+        </Grid>
+        <Grid item xs={4}>
+          <Box display='flex' justifyContent='flex-end'>
+            <IconButton
+              aria-label='close'
+              onClick={onClose}
+              sx={{
+                color: Theme.palette.primary.main,
+                mt: '0.5rem',
+                mr: '1.5rem',
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
+        </Grid>
+      </Grid>
+      <DialogContent sx={{ borderTop: `1px solid ${alpha(Theme.palette.text.secondary, 0.3)}` }}>
+        <ColorModeSetting />
+        <SettingSpacer />
+        <LanguageSetting />
+        <SettingSpacer />
+        <TimeZoneSetting />
+      </DialogContent>
+    </BootstrapDialog>
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsFields/colorModeSetting.tsx

@@ -0,0 +1,23 @@
+import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
+import { useThemeContext } from '@/hooks';
+
+export const ColorModeSetting = () => {
+  const ThemeContext = useThemeContext();
+
+  const handleThemeChange = () => {
+    ThemeContext.update();
+  };
+
+  return (
+    <SettingsSelectField
+      title='Color mode'
+      description='Toggle between light and dark modes'
+      settings={[
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+      ]}
+      value={ThemeContext.mode}
+      onChange={handleThemeChange}
+    />
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsFields/index.ts

@@ -0,0 +1,3 @@
+export { ColorModeSetting } from './colorModeSetting';
+export { LanguageSetting } from './languageSetting';
+export { TimeZoneSetting } from './timeZoneSetting';

app/front-end/src/components/dialogs/settingsDialog/settingsFields/languageSetting.tsx

@@ -0,0 +1,28 @@
+import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
+import { SelectChangeEvent } from '@mui/material';
+import { useState } from 'react';
+
+export const LanguageSetting = () => {
+  // TODO: Implement language switching functionality and replace with correct values
+
+  const [switchLanguage, setSwitchLanguage] = useState('en');
+
+  const handleLanguageChange = (event: SelectChangeEvent<string>) => {
+    const selectedLanguage = event.target.value;
+    setSwitchLanguage(selectedLanguage);
+  };
+
+  return (
+    <SettingsSelectField
+      title='Language'
+      description='Change the language of the application'
+      settings={[
+        { value: 'en', label: 'English' },
+        { value: 'lt', label: 'Lithuanian' },
+        { value: 'it', label: 'Italian' },
+      ]}
+      value={switchLanguage}
+      onChange={handleLanguageChange}
+    />
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsFields/timeZoneSetting.tsx

@@ -0,0 +1,24 @@
+import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
+import { SelectChangeEvent } from '@mui/material';
+import { useState } from 'react';
+
+export const TimeZoneSetting = () => {
+  // TODO: Implement time zone switching functionality and replace with correct values
+
+  const [switchTimeZone, setSwitchTimeZone] = useState('GMT+3');
+
+  const handleTimeZoneChange = (event: SelectChangeEvent<string>) => {
+    const selectedValue = event.target.value;
+    setSwitchTimeZone(selectedValue);
+  };
+
+  return (
+    <SettingsSelectField
+      title='Time zone'
+      description='Change the time zone of the application'
+      settings={[{ value: 'GMT+3', label: 'GMT+3' }]}
+      value={switchTimeZone}
+      onChange={handleTimeZoneChange}
+    />
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsSelectField.tsx

@@ -0,0 +1,53 @@
+import { Box, FormControl, Grid, MenuItem, Select, SelectChangeEvent, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+interface Setting {
+  value: string | undefined;
+  label: string;
+}
+
+interface SettingsSelectFieldProps {
+  title: string;
+  description: string;
+  settings: Setting[];
+  value: string | undefined;
+  onChange: (event: SelectChangeEvent) => void;
+}
+
+export const SettingsSelectField: React.FC<SettingsSelectFieldProps> = ({
+  title,
+  description,
+  settings,
+  value,
+  onChange,
+}) => {
+  const Theme = useTheme();
+
+  return (
+    <Grid container spacing={2} justifyContent='center' alignItems='center'>
+      <Grid item xs={8}>
+        <Typography sx={{ fontSize: '1.1rem', fontWeight: '500' }}>{title}</Typography>
+        <Typography sx={{ fontSize: '0.9rem', color: Theme.palette.text.secondary }}>{description}</Typography>
+      </Grid>
+      <Grid item xs={4}>
+        <Box display='flex' justifyContent='flex-end'>
+          <FormControl sx={{ minWidth: 120 }}>
+            <Select
+              value={value}
+              onChange={onChange}
+              displayEmpty
+              size='small'
+              inputProps={{ 'aria-label': 'Without label' }}
+            >
+              {settings.map((setting) => (
+                <MenuItem key={setting.value} value={setting.value}>
+                  {setting.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};

app/front-end/src/components/layouts/baseLayout.tsx

@@ -1,8 +1,14 @@
 import { IconTitleButton } from '@/components/buttons/IconTitleButton';
-import { useThemeContext } from '@/hooks';
+import { SettingsDialog } from '@/components/dialogs/settingsDialog';
 import { Colors } from '@/types';
-import { AutoMode, DarkMode, Home, LightMode, SettingsOutlined, SwitchAccessShortcut } from '@mui/icons-material';
+import {
+  AutoMode as AutoModeIcon,
+  Home as HomeIcon,
+  SettingsOutlined as SettingsOutlinedIcon,
+  SwitchAccessShortcut as SwitchAccessShortcutIcon,
+} from '@mui/icons-material';
 import { Box, Typography, useTheme } from '@mui/material';
+import { useState } from 'react';
 
 interface Props {
   children?: React.ReactNode;
@@ -26,7 +32,15 @@ interface Props {
  */
 export const BaseLayout: React.FC<Props> = ({ children }) => {
   const Theme = useTheme();
-  const ThemeContext = useThemeContext();
+
+  const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
+  const handleSettingsDialogOpen = () => {
+    setIsSettingsDialogOpen(true);
+  };
+  const handleSettingsDialogClose = () => {
+    setIsSettingsDialogOpen(false);
+  };
+
   return (
     <Box
       sx={{
@@ -99,11 +113,11 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
             }}
           >
             <IconTitleButton
-              icon={<Home sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
+              icon={<HomeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
               title={'Home'}
             />
             <IconTitleButton
-              icon={<AutoMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
+              icon={<AutoModeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
               title={'Macros'}
             />
           </Box>
@@ -120,32 +134,25 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
           >
             <IconTitleButton
               icon={
-                <SettingsOutlined sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />
+                <SettingsOutlinedIcon
+                  sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
+                />
               }
+              onClick={handleSettingsDialogOpen}
             />
             <IconTitleButton
               icon={
-                <SwitchAccessShortcut
+                <SwitchAccessShortcutIcon
                   sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
                 />
               }
             />
-            {ThemeContext.mode === 'light' ? (
-              <IconTitleButton
-                icon={<DarkMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
-                onClick={() => ThemeContext.update()}
-              />
-            ) : (
-              <IconTitleButton
-                icon={<LightMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
-                onClick={() => ThemeContext.update()}
-              />
-            )}
           </Box>
         </Box>
         <Box sx={{ width: '95.75%', height: '99.5%', borderRadius: '0.625rem', bgcolor: Theme.palette.secondary.main }}>
           {children}
         </Box>
+        <SettingsDialog open={isSettingsDialogOpen} onClose={handleSettingsDialogClose} />
       </Box>
     </Box>
   );

app/front-end/src/components/modals/settingsDialog/settingsDialog.tsx

@@ -0,0 +1,69 @@
+import ColorModeSetting from '@/components/modals/settingsDialog/settingsFields/colorModeSetting';
+import LanguageSetting from '@/components/modals/settingsDialog/settingsFields/languageSetting';
+import TimeZoneSetting from '@/components/modals/settingsDialog/settingsFields/timeZoneSetting';
+import { SettingSpacer } from '@/components/modals/settingsDialog/settingSpacer';
+import CloseIcon from '@mui/icons-material/Close';
+import { Box, Grid } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import { styled, useTheme } from '@mui/material/styles';
+
+const BootstrapDialog = styled(Dialog)(({ theme }) => ({
+  backdropFilter: 'blur(5px)',
+  '& .MuiDialogContent-root': {
+    padding: '1.5rem',
+  },
+  '& .MuiDialogActions-root': {
+    padding: '1.5rem',
+  },
+  '& .MuiDialog-paper': {
+    borderRadius: '1.5rem',
+    minWidth: '25%',
+    backgroundColor: theme.palette.background.default,
+  },
+}));
+
+interface SettingsDialogProps {
+  open: boolean;
+  handleClose: () => void;
+}
+
+export default function SettingsDialog({ open, handleClose }: SettingsDialogProps) {
+  const Theme = useTheme();
+
+  return (
+    <BootstrapDialog onClose={handleClose} open={open}>
+      <Grid container spacing={2} justifyContent='center' alignItems='center'>
+        <Grid item xs={8}>
+          <DialogTitle sx={{ color: Theme.palette.primary.main, pl: '1.5rem', pt: '1.5rem', fontWeight: '700' }}>
+            Settings
+          </DialogTitle>
+        </Grid>
+        <Grid item xs={4}>
+          <Box display='flex' justifyContent='flex-end'>
+            <IconButton
+              aria-label='close'
+              onClick={handleClose}
+              sx={{
+                color: Theme.palette.primary.main,
+                mt: '0.5rem',
+                mr: '1.5rem',
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
+        </Grid>
+      </Grid>
+      <DialogContent dividers>
+        <ColorModeSetting />
+        <SettingSpacer />
+        <LanguageSetting />
+        <SettingSpacer />
+        <TimeZoneSetting />
+      </DialogContent>
+    </BootstrapDialog>
+  );
+}

app/front-end/src/components/modals/settingsDialog/settingsFields/colorModeSetting.tsx

@@ -0,0 +1,29 @@
+import SettingsSelectField from '@/components/modals/settingsDialog/settingsSelectField';
+import { useThemeContext } from '@/hooks';
+import { SelectChangeEvent } from '@mui/material';
+import { useState } from 'react';
+
+export default function ColorModeSetting() {
+  const ThemeContext = useThemeContext();
+
+  const [switchTheme, setSwitchTheme] = useState(ThemeContext.mode);
+
+  const handleThemeChange = (event: SelectChangeEvent<string>) => {
+    const selectedTheme = event.target.value as 'light' | 'dark';
+    setSwitchTheme(selectedTheme);
+    ThemeContext.update();
+  };
+
+  return (
+    <SettingsSelectField
+      title='Color mode'
+      description='Toggle between light and dark modes'
+      settings={[
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+      ]}
+      value={switchTheme}
+      onChange={handleThemeChange}
+    />
+  );
+}