hospital portal

frontend/hospital-portal/src/theme/overrides/Accordion.ts

@@ -0,0 +1,39 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Accordion(theme: Theme) {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          '&.Mui-expanded': {
+            boxShadow: theme.customShadows.z8,
+            borderRadius: theme.shape.borderRadius
+          },
+          '&.Mui-disabled': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          paddingLeft: theme.spacing(2),
+          paddingRight: theme.spacing(1),
+          '&.Mui-disabled': {
+            opacity: 1,
+            color: theme.palette.action.disabled,
+            '& .MuiTypography-root': {
+              color: 'inherit'
+            }
+          }
+        },
+        expandIconWrapper: {
+          color: 'inherit'
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Alert.tsx

@@ -0,0 +1,74 @@
+// @mui
+import { Theme } from '@mui/material/styles';
+// theme
+import { ColorSchema } from '../palette';
+//
+import { ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from './CustomIcons';
+
+// ----------------------------------------------------------------------
+
+export default function Alert(theme: Theme) {
+  const isLight = theme.palette.mode === 'light';
+
+  const standardStyle = (color: ColorSchema) => ({
+    color: theme.palette[color][isLight ? 'darker' : 'lighter'],
+    backgroundColor: theme.palette[color][isLight ? 'lighter' : 'darker'],
+    '& .MuiAlert-icon': {
+      color: theme.palette[color][isLight ? 'main' : 'light'],
+    },
+  });
+
+  const filledStyle = (color: ColorSchema) => ({
+    color: theme.palette[color].contrastText,
+  });
+
+  const outlinedStyle = (color: ColorSchema) => ({
+    color: theme.palette[color][isLight ? 'darker' : 'lighter'],
+    border: `solid 1px ${theme.palette[color][isLight ? 'light' : 'dark']}`,
+    backgroundColor: theme.palette[color][isLight ? 'lighter' : 'darker'],
+    '& .MuiAlert-icon': {
+      color: theme.palette[color][isLight ? 'main' : 'light'],
+    },
+  });
+
+  return {
+    MuiAlert: {
+      defaultProps: {
+        iconMapping: {
+          info: <InfoIcon />,
+          success: <SuccessIcon />,
+          warning: <WarningIcon />,
+          error: <ErrorIcon />,
+        },
+      },
+
+      styleOverrides: {
+        message: {
+          '& .MuiAlertTitle-root': {
+            marginBottom: theme.spacing(0.5),
+          },
+        },
+        action: {
+          '& button:not(:first-of-type)': {
+            marginLeft: theme.spacing(1),
+          },
+        },
+
+        standardInfo: standardStyle('info'),
+        standardSuccess: standardStyle('success'),
+        standardWarning: standardStyle('warning'),
+        standardError: standardStyle('error'),
+
+        filledInfo: filledStyle('info'),
+        filledSuccess: filledStyle('success'),
+        filledWarning: filledStyle('warning'),
+        filledError: filledStyle('error'),
+
+        outlinedInfo: outlinedStyle('info'),
+        outlinedSuccess: outlinedStyle('success'),
+        outlinedWarning: outlinedStyle('warning'),
+        outlinedError: outlinedStyle('error'),
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Autocomplete.ts

@@ -0,0 +1,23 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Autocomplete(theme: Theme) {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.dropdown,
+        },
+        listbox: {
+          padding: theme.spacing(0, 1),
+          '& .MuiAutocomplete-option': {
+            padding: theme.spacing(1),
+            margin: theme.spacing(1, 0),
+            borderRadius: theme.shape.borderRadius,
+          },
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Avatar.ts

@@ -0,0 +1,29 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Avatar(theme: Theme) {
+  return {
+    MuiAvatar: {
+      styleOverrides: {
+        colorDefault: {
+          color: theme.palette.text.secondary,
+          backgroundColor: theme.palette.grey[400]
+        }
+      }
+    },
+    MuiAvatarGroup: {
+      styleOverrides: {
+        avatar: {
+          fontSize: 16,
+          fontWeight: theme.typography.fontWeightMedium,
+          '&:first-of-type': {
+            fontSize: 14,
+            color: theme.palette.primary.main,
+            backgroundColor: theme.palette.primary.lighter
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Backdrop.ts

@@ -0,0 +1,26 @@
+import { alpha, Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Backdrop(theme: Theme) {
+  const varLow = alpha(theme.palette.grey[900], 0.48);
+  const varHigh = alpha(theme.palette.grey[900], 1);
+
+  return {
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          background: [
+            `rgb(22,28,36)`,
+            `-moz-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,
+            `-webkit-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,
+            `linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`
+          ],
+          '&.MuiBackdrop-invisible': {
+            background: 'transparent'
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Badge.ts

@@ -0,0 +1,17 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Badge(theme: Theme) {
+  return {
+    MuiBadge: {
+      styleOverrides: {
+        dot: {
+          width: 10,
+          height: 10,
+          borderRadius: '50%'
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Breadcrumbs.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Breadcrumbs(theme: Theme) {
+  return {
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        separator: {
+          marginLeft: theme.spacing(2),
+          marginRight: theme.spacing(2)
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Button.ts

@@ -0,0 +1,58 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Button(theme: Theme) {
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            boxShadow: 'none',
+          },
+        },
+        sizeLarge: {
+          height: 48,
+        },
+        // contained
+        containedInherit: {
+          color: theme.palette.grey[800],
+          boxShadow: theme.customShadows.z8,
+          '&:hover': {
+            backgroundColor: theme.palette.grey[400],
+          },
+        },
+        containedPrimary: {
+          boxShadow: theme.customShadows.primary,
+        },
+        containedSecondary: {
+          boxShadow: theme.customShadows.secondary,
+        },
+        containedInfo: {
+          boxShadow: theme.customShadows.info,
+        },
+        containedSuccess: {
+          boxShadow: theme.customShadows.success,
+        },
+        containedWarning: {
+          boxShadow: theme.customShadows.warning,
+        },
+        containedError: {
+          boxShadow: theme.customShadows.error,
+        },
+        // outlined
+        outlinedInherit: {
+          border: `1px solid ${theme.palette.grey[500_32]}`,
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+          },
+        },
+        textInherit: {
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+          },
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/ButtonGroup.ts

@@ -0,0 +1,51 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function ButtonGroup(theme: Theme) {
+  const styleContained = (
+    color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+  ) => ({
+    props: { variant: 'contained', color },
+    style: { boxShadow: theme.customShadows[color] }
+  });
+
+  return {
+    MuiButtonGroup: {
+      variants: [
+        {
+          props: { variant: 'contained', color: 'inherit' },
+          style: { boxShadow: theme.customShadows.z8 }
+        },
+        styleContained('primary'),
+        styleContained('secondary'),
+        styleContained('info'),
+        styleContained('success'),
+        styleContained('warning'),
+        styleContained('error'),
+
+        {
+          props: { disabled: true },
+          style: {
+            boxShadow: 'none',
+            '& .MuiButtonGroup-grouped.Mui-disabled': {
+              color: theme.palette.action.disabled,
+              borderColor: `${theme.palette.action.disabledBackground} !important`,
+              '&.MuiButton-contained': {
+                backgroundColor: theme.palette.action.disabledBackground
+              }
+            }
+          }
+        }
+      ],
+
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            boxShadow: 'none'
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Card.ts

@@ -0,0 +1,36 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Card(theme: Theme) {
+  return {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          position: 'relative',
+          boxShadow: theme.customShadows.card,
+          borderRadius: Number(theme.shape.borderRadius) * 2,
+          zIndex: 0, // Fix Safari overflow: hidden with border radius
+        },
+      },
+    },
+    MuiCardHeader: {
+      defaultProps: {
+        titleTypographyProps: { variant: 'h6' },
+        subheaderTypographyProps: { variant: 'body2', marginTop: theme.spacing(0.5) },
+      },
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3, 3, 0),
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3),
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Checkbox.tsx

@@ -0,0 +1,40 @@
+import { Theme } from '@mui/material/styles';
+//
+import { CheckboxIcon, CheckboxCheckedIcon, CheckboxIndeterminateIcon } from './CustomIcons';
+
+// ----------------------------------------------------------------------
+
+export default function Checkbox(theme: Theme) {
+  return {
+    MuiCheckbox: {
+      defaultProps: {
+        icon: <CheckboxIcon />,
+        checkedIcon: <CheckboxCheckedIcon />,
+        indeterminateIcon: <CheckboxIndeterminateIcon />,
+      },
+
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(1),
+          '&.Mui-checked.Mui-disabled, &.Mui-disabled': {
+            color: theme.palette.action.disabled,
+          },
+          '& .MuiSvgIcon-fontSizeMedium': {
+            width: 24,
+            height: 24,
+          },
+          '& .MuiSvgIcon-fontSizeSmall': {
+            width: 20,
+            height: 20,
+          },
+          svg: {
+            fontSize: 24,
+            '&[font-size=small]': {
+              fontSize: 20,
+            },
+          },
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Chip.tsx

@@ -0,0 +1,49 @@
+import { Theme } from '@mui/material/styles';
+//
+import { CloseIcon } from './CustomIcons';
+
+// ----------------------------------------------------------------------
+
+export default function Chip(theme: Theme) {
+  return {
+    MuiChip: {
+      defaultProps: {
+        deleteIcon: <CloseIcon />,
+      },
+
+      styleOverrides: {
+        colorDefault: {
+          '& .MuiChip-avatarMedium, .MuiChip-avatarSmall': {
+            color: theme.palette.text.secondary,
+          },
+        },
+        outlined: {
+          borderColor: theme.palette.grey[500_32],
+          '&.MuiChip-colorPrimary': {
+            borderColor: theme.palette.primary.main,
+          },
+          '&.MuiChip-colorSecondary': {
+            borderColor: theme.palette.secondary.main,
+          },
+        },
+        //
+        avatarColorInfo: {
+          color: theme.palette.info.contrastText,
+          backgroundColor: theme.palette.info.dark,
+        },
+        avatarColorSuccess: {
+          color: theme.palette.success.contrastText,
+          backgroundColor: theme.palette.success.dark,
+        },
+        avatarColorWarning: {
+          color: theme.palette.warning.contrastText,
+          backgroundColor: theme.palette.warning.dark,
+        },
+        avatarColorError: {
+          color: theme.palette.error.contrastText,
+          backgroundColor: theme.palette.error.dark,
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/ControlLabel.ts

@@ -0,0 +1,29 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function ControlLabel(theme: Theme) {
+  return {
+    MuiFormControlLabel: {
+      styleOverrides: {
+        label: {
+          ...theme.typography.body2
+        }
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          marginTop: theme.spacing(1)
+        }
+      }
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.disabled
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/CssBaseline.ts

@@ -0,0 +1,47 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function CssBaseline(theme: Theme) {
+  return {
+    MuiCssBaseline: {
+      styleOverrides: {
+        '*': {
+          margin: 0,
+          padding: 0,
+          boxSizing: 'border-box',
+        },
+        html: {
+          width: '100%',
+          height: '100%',
+          WebkitOverflowScrolling: 'touch',
+        },
+        body: {
+          width: '100%',
+          height: '100%',
+        },
+        '#root': {
+          width: '100%',
+          height: '100%',
+        },
+        input: {
+          '&[type=number]': {
+            MozAppearance: 'textfield',
+            '&::-webkit-outer-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none',
+            },
+            '&::-webkit-inner-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none',
+            },
+          },
+        },
+        img: {
+          display: 'block',
+          maxWidth: '100%',
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/CustomIcons.tsx

@@ -0,0 +1,122 @@
+// @mui
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+// CloseIcon
+export function CloseIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,9.3478351 20.9464316,6.80429597 19.0710678,4.92893219 C17.195704,3.0535684 14.6521649,2 12,2 Z M14.71,13.29 C14.8993127,13.4777666 15.0057983,13.7333625 15.0057983,14 C15.0057983,14.2666375 14.8993127,14.5222334 14.71,14.71 C14.5222334,14.8993127 14.2666375,15.0057983 14,15.0057983 C13.7333625,15.0057983 13.4777666,14.8993127 13.29,14.71 L12,13.41 L10.71,14.71 C10.5222334,14.8993127 10.2666375,15.0057983 10,15.0057983 C9.73336246,15.0057983 9.4777666,14.8993127 9.29,14.71 C9.10068735,14.5222334 8.99420168,14.2666375 8.99420168,14 C8.99420168,13.7333625 9.10068735,13.4777666 9.29,13.29 L10.59,12 L9.29,10.71 C8.89787783,10.3178778 8.89787783,9.68212217 9.29,9.29 C9.68212217,8.89787783 10.3178778,8.89787783 10.71,9.29 L12,10.59 L13.29,9.29 C13.6821222,8.89787783 14.3178778,8.89787783 14.71,9.29 C15.1021222,9.68212217 15.1021222,10.3178778 14.71,10.71 L13.41,12 L14.71,13.29 Z" />
+    </SvgIcon>
+  );
+}
+
+// StarIcon
+export function StarIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M17.56,21 C17.4000767,21.0006435 17.2423316,20.9629218 17.1,20.89 L12,18.22 L6.9,20.89 C6.56213339,21.067663 6.15259539,21.0374771 5.8444287,20.8121966 C5.53626201,20.5869161 5.38323252,20.2058459 5.45,19.83 L6.45,14.2 L2.33,10.2 C2.06805623,9.93860108 1.9718844,9.55391377 2.08,9.2 C2.19824414,8.83742187 2.51242293,8.57366684 2.89,8.52 L8.59,7.69 L11.1,2.56 C11.2670864,2.21500967 11.6166774,1.99588989 12,1.99588989 C12.3833226,1.99588989 12.7329136,2.21500967 12.9,2.56 L15.44,7.68 L21.14,8.51 C21.5175771,8.56366684 21.8317559,8.82742187 21.95,9.19 C22.0581156,9.54391377 21.9619438,9.92860108 21.7,10.19 L17.58,14.19 L18.58,19.82 C18.652893,20.2027971 18.4967826,20.5930731 18.18,20.82 C17.9989179,20.9468967 17.7808835,21.010197 17.56,21 L17.56,21 Z" />
+    </SvgIcon>
+  );
+}
+
+// Using for Alert
+export function InfoIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,9.3478351 20.9464316,6.80429597 19.0710678,4.92893219 C17.195704,3.0535684 14.6521649,2 12,2 Z M13,16 C13,16.5522847 12.5522847,17 12,17 C11.4477153,17 11,16.5522847 11,16 L11,11 C11,10.4477153 11.4477153,10 12,10 C12.5522847,10 13,10.4477153 13,11 L13,16 Z M12,9 C11.4477153,9 11,8.55228475 11,8 C11,7.44771525 11.4477153,7 12,7 C12.5522847,7 13,7.44771525 13,8 C13,8.55228475 12.5522847,9 12,9 Z" />
+    </SvgIcon>
+  );
+}
+
+export function WarningIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M22.56,16.3 L14.89,3.58 C14.2597186,2.59400001 13.1702353,1.99737652 12,1.99737652 C10.8297647,1.99737652 9.74028139,2.59400001 9.11,3.58 L1.44,16.3 C0.888546003,17.2192471 0.869485343,18.3628867 1.39,19.3 C1.99197363,20.3551378 3.11522982,21.0046397 4.33,21 L19.67,21 C20.8765042,21.0128744 21.9978314,20.3797441 22.61,19.34 C23.146086,18.3926382 23.1269508,17.2292197 22.56,16.3 L22.56,16.3 Z M12,17 C11.4477153,17 11,16.5522847 11,16 C11,15.4477153 11.4477153,15 12,15 C12.5522847,15 13,15.4477153 13,16 C13,16.5522847 12.5522847,17 12,17 Z M13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,9 C11,8.44771525 11.4477153,8 12,8 C12.5522847,8 13,8.44771525 13,9 L13,13 Z" />
+    </SvgIcon>
+  );
+}
+
+export function SuccessIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,9.3478351 20.9464316,6.80429597 19.0710678,4.92893219 C17.195704,3.0535684 14.6521649,2 12,2 Z M16.3,9.61 L11.73,15.61 C11.5412074,15.855247 11.2494966,15.9992561 10.94,16.0000145 C10.6322197,16.001658 10.3408221,15.861492 10.15,15.62 L7.71,12.51 C7.49028166,12.2277602 7.43782669,11.8497415 7.57239438,11.5183399 C7.70696206,11.1869384 8.00810836,10.9525017 8.36239438,10.9033399 C8.7166804,10.8541782 9.07028166,10.9977602 9.29,11.28 L10.92,13.36 L14.7,8.36 C14.917932,8.07418751 15.2717886,7.92635122 15.6282755,7.97217964 C15.9847624,8.01800806 16.2897207,8.25053875 16.4282755,8.58217966 C16.5668304,8.91382056 16.517932,9.29418753 16.3,9.58 L16.3,9.61 Z" />
+    </SvgIcon>
+  );
+}
+
+export function ErrorIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,9.3478351 20.9464316,6.80429597 19.0710678,4.92893219 C17.195704,3.0535684 14.6521649,2 12,2 Z M12,17 C11.4477153,17 11,16.5522847 11,16 C11,15.4477153 11.4477153,15 12,15 C12.5522847,15 13,15.4477153 13,16 C13,16.5522847 12.5522847,17 12,17 Z M13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,8 C11,7.44771525 11.4477153,7 12,7 C12.5522847,7 13,7.44771525 13,8 L13,13 Z" />
+    </SvgIcon>
+  );
+}
+
+// Using for Checkbox
+export function CheckboxIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm0 2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2z" />
+    </SvgIcon>
+  );
+}
+
+export function CheckboxCheckedIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.372 4.972a1.006 1.006 0 00-.928.388l-3.78 5-1.63-2.08a1.001 1.001 0 00-1.58 1.23l2.44 3.11a1 1 0 001.58-.01l4.57-6v-.03a1.006 1.006 0 00-.672-1.608z" />
+    </SvgIcon>
+  );
+}
+
+export function CheckboxIndeterminateIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" />
+    </SvgIcon>
+  );
+}
+
+// Using for Select Input
+export function InputSelectIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon
+      {...props}
+      sx={{
+        right: 12,
+        fontSize: 16,
+        position: 'absolute',
+        pointerEvents: 'none',
+      }}
+    >
+      <path d="M12,16 C11.7663478,16.0004565 11.5399121,15.9190812 11.36,15.77 L5.36,10.77 C4.93474074,10.4165378 4.87653776,9.78525926 5.23,9.36 C5.58346224,8.93474074 6.21474074,8.87653776 6.64,9.23 L12,13.71 L17.36,9.39 C17.5665934,9.2222295 17.8315409,9.14373108 18.0961825,9.17188444 C18.3608241,9.2000378 18.6033268,9.33252029 18.77,9.54 C18.9551341,9.74785947 19.0452548,10.0234772 19.0186853,10.3005589 C18.9921158,10.5776405 18.8512608,10.8311099 18.63,11 L12.63,15.83 C12.444916,15.955516 12.2231011,16.0153708 12,16 Z" />
+    </SvgIcon>
+  );
+}
+
+//  Using for TreeView
+export function TreeViewCollapseIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M12,8 C12.5522847,8 13,8.44771525 13,9 L13,9 L13,11 L15,11 C15.5522847,11 16,11.4477153 16,12 C16,12.5522847 15.5522847,13 15,13 L15,13 L13,13 L13,15 C13,15.5522847 12.5522847,16 12,16 C11.4477153,16 11,15.5522847 11,15 L11,15 L11,13 L9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,11 L9,11 L11,11 L11,9 C11,8.44771525 11.4477153,8 12,8 Z" />
+    </SvgIcon>
+  );
+}
+
+export function TreeViewExpandIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M15,11 C15.5522847,11 16,11.4477153 16,12 C16,12.5522847 15.5522847,13 15,13 L15,13 L9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,11 L9,11 Z" />
+    </SvgIcon>
+  );
+}
+
+export function TreeViewEndIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M18,3 C19.6568542,3 21,4.34314575 21,6 L21,6 L21,18 C21,19.6568542 19.6568542,21 18,21 L18,21 L6,21 C4.34314575,21 3,19.6568542 3,18 L3,18 L3,6 C3,4.34314575 4.34314575,3 6,3 L6,3 Z M18,5 L6,5 C5.44771525,5 5,5.44771525 5,6 L5,6 L5,18 C5,18.5522847 5.44771525,19 6,19 L6,19 L18,19 C18.5522847,19 19,18.5522847 19,18 L19,18 L19,6 C19,5.44771525 18.5522847,5 18,5 L18,5 Z M14,8.99420168 C14.2666375,8.99420168 14.5222334,9.10068735 14.71,9.29 C14.8993127,9.4777666 15.0057983,9.73336246 15.0057983,10 C15.0057983,10.2666375 14.8993127,10.5222334 14.71,10.71 L14.71,10.71 L13.41,12 L14.71,13.29 C14.8993127,13.4777666 15.0057983,13.7333625 15.0057983,14 C15.0057983,14.2666375 14.8993127,14.5222334 14.71,14.71 C14.5222334,14.8993127 14.2666375,15.0057983 14,15.0057983 C13.7333625,15.0057983 13.4777666,14.8993127 13.29,14.71 L13.29,14.71 L12,13.41 L10.71,14.71 C10.5222334,14.8993127 10.2666375,15.0057983 10,15.0057983 C9.73336246,15.0057983 9.4777666,14.8993127 9.29,14.71 C9.10068735,14.5222334 8.99420168,14.2666375 8.99420168,14 C8.99420168,13.7333625 9.10068735,13.4777666 9.29,13.29 L9.29,13.29 L10.59,12 L9.29,10.71 C8.89787783,10.3178778 8.89787783,9.68212217 9.29,9.29 C9.68212217,8.89787783 10.3178778,8.89787783 10.71,9.29 L10.71,9.29 L12,10.59 L13.29,9.29 C13.4777666,9.10068735 13.7333625,8.99420168 14,8.99420168 Z" />
+    </SvgIcon>
+  );
+}

frontend/hospital-portal/src/theme/overrides/DataGrid.ts

@@ -0,0 +1,101 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function DataGrid(theme: Theme) {
+  return {
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          border: `1px solid transparent`,
+          '& .MuiTablePagination-root': {
+            borderTop: 0,
+          },
+          '& .MuiDataGrid-toolbarContainer': {
+            padding: theme.spacing(2),
+            backgroundColor: theme.palette.background.neutral,
+            '& .MuiButton-root': {
+              marginRight: theme.spacing(1.5),
+              color: theme.palette.text.primary,
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+              },
+            },
+          },
+          '& .MuiDataGrid-cell, .MuiDataGrid-columnsContainer': {
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          },
+          '& .MuiDataGrid-columnSeparator': {
+            color: theme.palette.divider,
+          },
+          '& .MuiDataGrid-columnHeader[data-field="__check__"]': {
+            padding: 0,
+          },
+        },
+      },
+    },
+    MuiGridMenu: {
+      styleOverrides: {
+        root: {
+          '& .MuiDataGrid-gridMenuList': {
+            boxShadow: theme.customShadows.z20,
+            borderRadius: theme.shape.borderRadius,
+          },
+          '& .MuiMenuItem-root': {
+            ...theme.typography.body2,
+          },
+        },
+      },
+    },
+    MuiGridFilterForm: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(1.5, 0),
+          '& .MuiFormControl-root': {
+            margin: theme.spacing(0, 0.5),
+          },
+          '& .MuiInput-root': {
+            marginTop: theme.spacing(3),
+            '&::before, &::after': {
+              display: 'none',
+            },
+            '& .MuiNativeSelect-select, .MuiInput-input': {
+              ...theme.typography.body2,
+              padding: theme.spacing(0.75, 1),
+              borderRadius: theme.shape.borderRadius,
+              backgroundColor: theme.palette.background.neutral,
+            },
+            '& .MuiSvgIcon-root': {
+              right: 4,
+            },
+          },
+        },
+      },
+    },
+    MuiGridPanelFooter: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(2),
+          justifyContent: 'flex-end',
+          '& .MuiButton-root': {
+            '&:first-of-type': {
+              marginRight: theme.spacing(1.5),
+              color: theme.palette.text.primary,
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+              },
+            },
+            '&:last-of-type': {
+              color: theme.palette.common.white,
+              backgroundColor: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: theme.palette.primary.dark,
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Dialog.ts

@@ -0,0 +1,60 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Dialog(theme: Theme) {
+  return {
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.dialog,
+          '&.MuiPaper-rounded': {
+            borderRadius: Number(theme.shape.borderRadius) * 2,
+          },
+          '&.MuiDialog-paperFullScreen': {
+            borderRadius: 0,
+          },
+          '&.MuiDialog-paper .MuiDialogActions-root': {
+            padding: theme.spacing(3),
+          },
+          '@media (max-width: 600px)': {
+            margin: theme.spacing(2),
+          },
+          '@media (max-width: 663.95px)': {
+            '&.MuiDialog-paperWidthSm.MuiDialog-paperScrollBody': {
+              maxWidth: '100%',
+            },
+          },
+        },
+        paperFullWidth: {
+          width: '100%',
+        },
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3, 3, 0),
+        },
+      },
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          borderTop: 0,
+          borderBottom: 0,
+          padding: theme.spacing(3),
+        },
+      },
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          '& > :not(:first-of-type)': {
+            marginLeft: theme.spacing(1.5),
+          },
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Drawer.ts

@@ -0,0 +1,30 @@
+import { alpha, Theme } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function Drawer(theme: Theme) {
+  const isLight = theme.palette.mode === 'light';
+
+  return {
+    MuiDrawer: {
+      styleOverrides: {
+        modal: {
+          '&[role="presentation"]': {
+            '& .MuiDrawer-paperAnchorLeft': {
+              boxShadow: `8px 24px 24px 12px ${alpha(
+                theme.palette.grey[900],
+                isLight ? 0.16 : 0.48
+              )}`
+            },
+            '& .MuiDrawer-paperAnchorRight': {
+              boxShadow: `-8px 24px 24px 12px ${alpha(
+                theme.palette.grey[900],
+                isLight ? 0.16 : 0.48
+              )}`
+            }
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Fab.ts

@@ -0,0 +1,40 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Fab(theme: Theme) {
+  return {
+    MuiFab: {
+      defaultProps: {
+        color: 'primary'
+      },
+
+      styleOverrides: {
+        root: {
+          boxShadow: theme.customShadows.z8,
+          '&:hover': {
+            boxShadow: 'none',
+            backgroundColor: theme.palette.grey[400]
+          }
+        },
+        primary: {
+          boxShadow: theme.customShadows.primary,
+          '&:hover': {
+            backgroundColor: theme.palette.primary.dark
+          }
+        },
+        secondary: {
+          boxShadow: theme.customShadows.secondary,
+          '&:hover': {
+            backgroundColor: theme.palette.secondary.dark
+          }
+        },
+        extended: {
+          '& svg': {
+            marginRight: theme.spacing(1)
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Input.ts

@@ -0,0 +1,67 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Input(theme: Theme) {
+  return {
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            '& svg': { color: theme.palette.text.disabled },
+          },
+        },
+        input: {
+          '&::placeholder': {
+            opacity: 1,
+            color: theme.palette.text.disabled,
+          },
+        },
+      },
+    },
+    MuiInput: {
+      styleOverrides: {
+        underline: {
+          '&:before': {
+            borderBottomColor: theme.palette.grey[500_56],
+          },
+        },
+      },
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.grey[500_12],
+          '&:hover': {
+            backgroundColor: theme.palette.grey[500_16],
+          },
+          '&.Mui-focused': {
+            backgroundColor: theme.palette.action.focus,
+          },
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.action.disabledBackground,
+          },
+        },
+        underline: {
+          '&:before': {
+            borderBottomColor: theme.palette.grey[500_56],
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.grey[500_32],
+          },
+          '&.Mui-disabled': {
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: theme.palette.action.disabledBackground,
+            },
+          },
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Link.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Link(theme: Theme) {
+  return {
+    MuiLink: {
+      defaultProps: {
+        underline: 'hover',
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/List.ts

@@ -0,0 +1,37 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function List(theme: Theme) {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          color: 'inherit',
+          minWidth: 'auto',
+          marginRight: theme.spacing(2),
+        },
+      },
+    },
+    MuiListItemAvatar: {
+      styleOverrides: {
+        root: {
+          minWidth: 'auto',
+          marginRight: theme.spacing(2),
+        },
+      },
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          marginTop: 0,
+          marginBottom: 0,
+        },
+        multiline: {
+          marginTop: 0,
+          marginBottom: 0,
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/LoadingButton.ts

@@ -0,0 +1,22 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function LoadingButton(theme: Theme) {
+  return {
+    MuiLoadingButton: {
+      styleOverrides: {
+        root: {
+          '&.MuiButton-text': {
+            '& .MuiLoadingButton-startIconPendingStart': {
+              marginLeft: 0
+            },
+            '& .MuiLoadingButton-endIconPendingEnd': {
+              marginRight: 0
+            }
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Menu.ts

@@ -0,0 +1,20 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Menu(theme: Theme) {
+  return {
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            backgroundColor: theme.palette.action.selected,
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover
+            }
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Pagination.ts

@@ -0,0 +1,35 @@
+import { alpha, Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Pagination(theme: Theme) {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            fontWeight: theme.typography.fontWeightBold,
+          },
+        },
+        textPrimary: {
+          '&.Mui-selected': {
+            color: theme.palette.primary.main,
+            backgroundColor: alpha(theme.palette.primary.main, 0.08),
+            '&:hover, &.Mui-focusVisible': {
+              backgroundColor: `${alpha(theme.palette.primary.main, 0.24)} !important`,
+            },
+          },
+        },
+        outlined: {
+          border: `1px solid ${theme.palette.grey[500_32]}`,
+        },
+        outlinedPrimary: {
+          '&.Mui-selected': {
+            backgroundColor: alpha(theme.palette.primary.main, 0.08),
+            border: `1px solid ${alpha(theme.palette.primary.main, 0.24)}`,
+          },
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Paper.ts

@@ -0,0 +1,26 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Paper(theme: Theme) {
+  return {
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0,
+      },
+
+      variants: [
+        {
+          props: { variant: 'outlined' },
+          style: { borderColor: theme.palette.grey[500_12] },
+        },
+      ],
+
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Popover.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Popover(theme: Theme) {
+  return {
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.dropdown,
+          borderRadius: Number(theme.shape.borderRadius) * 1.5,
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Progress.ts

@@ -0,0 +1,27 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Progress(theme: Theme) {
+  const isLight = theme.palette.mode === 'light';
+
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          overflow: 'hidden'
+        },
+        bar: {
+          borderRadius: 4
+        },
+        colorPrimary: {
+          backgroundColor: theme.palette.primary[isLight ? 'lighter' : 'darker']
+        },
+        buffer: {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Radio.ts

@@ -0,0 +1,21 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Radio(theme: Theme) {
+  return {
+    MuiRadio: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(1),
+          svg: {
+            fontSize: 24,
+            '&[font-size=small]': {
+              fontSize: 20
+            }
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Rating.tsx

@@ -0,0 +1,30 @@
+import { Theme } from '@mui/material/styles';
+//
+import { StarIcon } from './CustomIcons';
+
+// ----------------------------------------------------------------------
+
+const ICON_SMALL = { width: 20, height: 20 };
+const ICON_LARGE = { width: 28, height: 28 };
+
+export default function Rating(theme: Theme) {
+  return {
+    MuiRating: {
+      defaultProps: {
+        emptyIcon: <StarIcon />,
+        icon: <StarIcon />,
+      },
+
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            opacity: 0.48,
+          },
+        },
+        iconEmpty: { color: theme.palette.grey[500_48] },
+        sizeSmall: { '& svg': { ...ICON_SMALL } },
+        sizeLarge: { '& svg': { ...ICON_LARGE } },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Select.tsx

@@ -0,0 +1,16 @@
+import { Theme } from '@mui/material/styles';
+//
+//
+import { InputSelectIcon } from './CustomIcons';
+
+// ----------------------------------------------------------------------
+
+export default function Select(theme: Theme) {
+  return {
+    MuiSelect: {
+      defaultProps: {
+        IconComponent: InputSelectIcon,
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Skeleton.ts

@@ -0,0 +1,19 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Skeleton(theme: Theme) {
+  return {
+    MuiSkeleton: {
+      defaultProps: {
+        animation: 'wave'
+      },
+
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.background.neutral
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Slider.ts

@@ -0,0 +1,31 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Slider(theme: Theme) {
+  const isLight = theme.palette.mode === 'light';
+
+  return {
+    MuiSlider: {
+      defaultProps: {
+        size: 'small'
+      },
+
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            color: theme.palette.action.disabled
+          }
+        },
+        markLabel: {
+          fontSize: 13,
+          color: theme.palette.text.disabled
+        },
+        valueLabel: {
+          borderRadius: 8,
+          backgroundColor: theme.palette.grey[isLight ? 800 : 700]
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Stepper.ts

@@ -0,0 +1,15 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Stepper(theme: Theme) {
+  return {
+    MuiStepConnector: {
+      styleOverrides: {
+        line: {
+          borderColor: theme.palette.divider
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/SvgIcon.ts

@@ -0,0 +1,22 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function SvgIcon(theme: Theme) {
+  return {
+    MuiSvgIcon: {
+      styleOverrides: {
+        fontSizeSmall: {
+          width: 20,
+          height: 20,
+          fontSize: 'inherit'
+        },
+        fontSizeLarge: {
+          width: 32,
+          height: 32,
+          fontSize: 'inherit'
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Switch.ts

@@ -0,0 +1,35 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Switch(theme: Theme) {
+  const isLight = theme.palette.mode === 'light';
+
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        thumb: {
+          boxShadow: theme.customShadows.z1
+        },
+        track: {
+          opacity: 1,
+          backgroundColor: theme.palette.grey[500]
+        },
+        switchBase: {
+          left: 0,
+          right: 'auto',
+          '&:not(:.Mui-checked)': {
+            color: theme.palette.grey[isLight ? 100 : 300]
+          },
+          '&.Mui-checked.Mui-disabled, &.Mui-disabled': {
+            color: theme.palette.grey[isLight ? 400 : 600]
+          },
+          '&.Mui-disabled+.MuiSwitch-track': {
+            opacity: 1,
+            backgroundColor: `${theme.palette.action.disabledBackground} !important`
+          }
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Table.ts

@@ -0,0 +1,75 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Table(theme: Theme) {
+  return {
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            backgroundColor: theme.palette.action.selected,
+            '&:hover': {
+              backgroundColor: theme.palette.action.hover,
+            },
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: 'none',
+        },
+        head: {
+          color: theme.palette.text.secondary,
+          backgroundColor: theme.palette.background.neutral,
+          '&:first-of-type': {
+            paddingLeft: theme.spacing(3),
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderBottomLeftRadius: theme.shape.borderRadius,
+            boxShadow: `inset 8px 0 0 ${theme.palette.background.paper}`,
+          },
+          '&:last-of-type': {
+            paddingRight: theme.spacing(3),
+            borderTopRightRadius: theme.shape.borderRadius,
+            borderBottomRightRadius: theme.shape.borderRadius,
+            boxShadow: `inset -8px 0 0 ${theme.palette.background.paper}`,
+          },
+        },
+        stickyHeader: {
+          backgroundColor: theme.palette.background.paper,
+          backgroundImage: `linear-gradient(to bottom, ${theme.palette.background.neutral} 0%, ${theme.palette.background.neutral} 100%)`,
+        },
+        body: {
+          '&:first-of-type': {
+            paddingLeft: theme.spacing(3),
+          },
+          '&:last-of-type': {
+            paddingRight: theme.spacing(3),
+          },
+        },
+      },
+    },
+    MuiTablePagination: {
+      styleOverrides: {
+        root: {
+          borderTop: `solid 1px ${theme.palette.divider}`,
+        },
+        toolbar: {
+          height: 64,
+        },
+        select: {
+          '&:focus': {
+            borderRadius: theme.shape.borderRadius,
+          },
+        },
+        selectIcon: {
+          width: 20,
+          height: 20,
+          marginTop: -4,
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Tabs.ts

@@ -0,0 +1,58 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Tabs(theme: Theme) {
+  return {
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+          fontWeight: theme.typography.fontWeightMedium,
+          borderTopLeftRadius: theme.shape.borderRadius,
+          borderTopRightRadius: theme.shape.borderRadius,
+          '&.Mui-selected': {
+            color: theme.palette.text.primary
+          },
+          '&:not(:last-of-type)': {
+            marginRight: theme.spacing(5)
+          },
+          '@media (min-width: 600px)': {
+            minWidth: 48
+          }
+        },
+        labelIcon: {
+          minHeight: 48,
+          flexDirection: 'row',
+          '& > *:first-of-type': {
+            marginBottom: 0,
+            marginRight: theme.spacing(1)
+          }
+        },
+        wrapper: {
+          flexDirection: 'row',
+          whiteSpace: 'nowrap'
+        },
+        textColorInherit: {
+          opacity: 1,
+          color: theme.palette.text.secondary
+        }
+      }
+    },
+    MuiTabPanel: {
+      styleOverrides: {
+        root: {
+          padding: 0
+        }
+      }
+    },
+    MuiTabScrollButton: {
+      styleOverrides: {
+        root: {
+          width: 48,
+          borderRadius: '50%'
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/Timeline.ts

@@ -0,0 +1,23 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Timeline(theme: Theme) {
+  return {
+    MuiTimelineDot: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none'
+        }
+      }
+    },
+
+    MuiTimelineConnector: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.divider
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/ToggleButton.ts

@@ -0,0 +1,55 @@
+import { Theme, alpha } from '@mui/material/styles';
+//
+import { ColorSchema } from '../palette';
+
+// ----------------------------------------------------------------------
+
+export default function ToggleButton(theme: Theme) {
+  const style = (color: ColorSchema) => ({
+    props: { color },
+    style: {
+      '&:hover': {
+        borderColor: alpha(theme.palette[color].main, 0.48),
+        backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
+      },
+      '&.Mui-selected': {
+        borderColor: alpha(theme.palette[color].main, 0.48),
+      },
+    },
+  });
+
+  return {
+    MuiToggleButton: {
+      variants: [
+        {
+          props: { color: 'standard' },
+          style: {
+            '&.Mui-selected': {
+              backgroundColor: theme.palette.action.selected,
+            },
+          },
+        },
+        style('primary'),
+        style('secondary'),
+        style('info'),
+        style('success'),
+        style('warning'),
+        style('error'),
+      ],
+    },
+    MuiToggleButtonGroup: {
+      styleOverrides: {
+        root: {
+          borderRadius: theme.shape.borderRadius,
+          backgroundColor: theme.palette.background.paper,
+          border: `solid 1px ${theme.palette.grey[500_12]}`,
+          '& .MuiToggleButton-root': {
+            margin: 4,
+            borderColor: 'transparent !important',
+            borderRadius: `${theme.shape.borderRadius}px !important`,
+          },
+        },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Tooltip.ts

@@ -0,0 +1,20 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Tooltip(theme: Theme) {
+  const isLight = theme.palette.mode === 'light';
+
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: theme.palette.grey[isLight ? 800 : 700]
+        },
+        arrow: {
+          color: theme.palette.grey[isLight ? 800 : 700]
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/TreeView.tsx

@@ -0,0 +1,23 @@
+import { Theme } from '@mui/material/styles';
+//
+import { TreeViewCollapseIcon, TreeViewExpandIcon, TreeViewEndIcon } from './CustomIcons';
+
+// ----------------------------------------------------------------------
+
+export default function TreeView(theme: Theme) {
+  return {
+    MuiTreeView: {
+      defaultProps: {
+        defaultCollapseIcon: <TreeViewCollapseIcon sx={{ width: 20, height: 20 }} />,
+        defaultExpandIcon: <TreeViewExpandIcon sx={{ width: 20, height: 20 }} />,
+        defaultEndIcon: <TreeViewEndIcon sx={{ color: 'text.secondary', width: 20, height: 20 }} />,
+      },
+    },
+    MuiTreeItem: {
+      styleOverrides: {
+        label: { ...theme.typography.body2 },
+        iconContainer: { width: 'auto' },
+      },
+    },
+  };
+}

frontend/hospital-portal/src/theme/overrides/Typography.ts

@@ -0,0 +1,18 @@
+import { Theme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+export default function Typography(theme: Theme) {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        paragraph: {
+          marginBottom: theme.spacing(2)
+        },
+        gutterBottom: {
+          marginBottom: theme.spacing(1)
+        }
+      }
+    }
+  };
+}

frontend/hospital-portal/src/theme/overrides/index.ts

@@ -0,0 +1,93 @@
+import { Theme } from '@mui/material/styles';
+//
+import Fab from './Fab';
+import Card from './Card';
+import Chip from './Chip';
+import Tabs from './Tabs';
+import Menu from './Menu';
+import Link from './Link';
+import Lists from './List';
+import Table from './Table';
+import Alert from './Alert';
+import Badge from './Badge';
+import Paper from './Paper';
+import Input from './Input';
+import Radio from './Radio';
+import Drawer from './Drawer';
+import Dialog from './Dialog';
+import Avatar from './Avatar';
+import Rating from './Rating';
+import Slider from './Slider';
+import Button from './Button';
+import Switch from './Switch';
+import Select from './Select';
+import SvgIcon from './SvgIcon';
+import Tooltip from './Tooltip';
+import Popover from './Popover';
+import Stepper from './Stepper';
+import DataGrid from './DataGrid';
+import Skeleton from './Skeleton';
+import Backdrop from './Backdrop';
+import Progress from './Progress';
+import Timeline from './Timeline';
+import TreeView from './TreeView';
+import Checkbox from './Checkbox';
+import Accordion from './Accordion';
+import Typography from './Typography';
+import Pagination from './Pagination';
+import Breadcrumbs from './Breadcrumbs';
+import ButtonGroup from './ButtonGroup';
+import CssBaseline from './CssBaseline';
+import Autocomplete from './Autocomplete';
+import ToggleButton from './ToggleButton';
+import ControlLabel from './ControlLabel';
+import LoadingButton from './LoadingButton';
+
+// ----------------------------------------------------------------------
+
+export default function ComponentsOverrides(theme: Theme) {
+  return Object.assign(
+    Fab(theme),
+    Tabs(theme),
+    Chip(theme),
+    Card(theme),
+    Menu(theme),
+    Link(theme),
+    Input(theme),
+    Radio(theme),
+    Badge(theme),
+    Lists(theme),
+    Table(theme),
+    Paper(theme),
+    Alert(theme),
+    Switch(theme),
+    Select(theme),
+    Button(theme),
+    Rating(theme),
+    Dialog(theme),
+    Avatar(theme),
+    Slider(theme),
+    Drawer(theme),
+    Stepper(theme),
+    Tooltip(theme),
+    Popover(theme),
+    SvgIcon(theme),
+    Checkbox(theme),
+    DataGrid(theme),
+    Skeleton(theme),
+    Timeline(theme),
+    TreeView(theme),
+    Backdrop(theme),
+    Progress(theme),
+    Accordion(theme),
+    Typography(theme),
+    Pagination(theme),
+    ButtonGroup(theme),
+    Breadcrumbs(theme),
+    CssBaseline(theme),
+    Autocomplete(theme),
+    ControlLabel(theme),
+    ToggleButton(theme),
+    LoadingButton(theme)
+  );
+}