Small changes

Author: justinnas

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

@@ -1,7 +1,7 @@
 import { SettingSpacer } from '@/components/dialogs/settingsDialog';
 import { ColorModeSetting, LanguageSetting, TimeZoneSetting } from '@/components/dialogs/settingsDialog/settingsFields';
 import { Close as CloseIcon } from '@mui/icons-material';
-import { Box, Dialog, DialogContent, DialogTitle, Grid, IconButton, styled, useTheme } from '@mui/material';
+import { alpha, Box, Dialog, DialogContent, DialogTitle, Grid, IconButton, styled, useTheme } from '@mui/material';
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
   backdropFilter: 'blur(5px)',
@@ -21,14 +21,14 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({
 
 interface SettingsDialogProps {
   open: boolean;
-  handleClose: () => void;
+  onClose: () => void;
 }
 
-export const SettingsDialog: React.FC<SettingsDialogProps> = ({ open, handleClose }) => {
+export const SettingsDialog: React.FC<SettingsDialogProps> = ({ open, onClose }) => {
   const Theme = useTheme();
 
   return (
-    <BootstrapDialog onClose={handleClose} open={open}>
+    <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' }}>
@@ -39,7 +39,7 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({ open, handleClos
           <Box display='flex' justifyContent='flex-end'>
             <IconButton
               aria-label='close'
-              onClick={handleClose}
+              onClick={onClose}
               sx={{
                 color: Theme.palette.primary.main,
                 mt: '0.5rem',
@@ -51,7 +51,7 @@ export const SettingsDialog: React.FC<SettingsDialogProps> = ({ open, handleClos
           </Box>
         </Grid>
       </Grid>
-      <DialogContent dividers>
+      <DialogContent sx={{ borderTop: `1px solid ${alpha(Theme.palette.text.secondary, 0.3)}` }}>
         <ColorModeSetting />
         <SettingSpacer />
         <LanguageSetting />

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

@@ -152,7 +152,7 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
         <Box sx={{ width: '95.75%', height: '99.5%', borderRadius: '0.625rem', bgcolor: Theme.palette.secondary.main }}>
           {children}
         </Box>
-        <SettingsDialog open={isSettingsDialogOpen} handleClose={handleSettingsDialogClose} />
+        <SettingsDialog open={isSettingsDialogOpen} onClose={handleSettingsDialogClose} />
       </Box>
     </Box>
   );