Merge branch 'develop' into fix/completion-page

src/components/CardContainer.tsx

@@ -25,6 +25,7 @@ export function CardContainer({
           display: 'flex',
           flexDirection: 'column',
           gap: 2,
+          borderRadius: 1,
         }}
       >
         <Box

src/components/Layout/Layout.tsx

@@ -44,7 +44,15 @@ export const Layout = () => {
             setSideNavOpen={setSideNavOpen}
             user={userInfo}
           />
-          <Box sx={{ flex: 1, overflowY: 'auto' }}>
+          <Box
+            sx={{
+              flex: 1,
+              overflowY: 'auto',
+              p: 2,
+              maxHeight: 'calc(100% - 85px)',
+              overflowInline: 'auto',
+            }}
+          >
             <Outlet />
           </Box>
         </Box>

src/components/NavigateWithToast.tsx

@@ -0,0 +1,24 @@
+import { useToast, type ToastOptions } from '@rkheftan/harmony-ui';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Navigate } from 'react-router-dom';
+
+export interface NavigateWithToastProps extends ToastOptions {
+  to: string;
+  replace?: boolean;
+  translator?: string;
+}
+
+export const NavigateWithToast = (props: NavigateWithToastProps) => {
+  const { t } = useTranslation(props.translator ?? 'common');
+  const toast = useToast();
+
+  useEffect(() => {
+    toast({
+      ...props,
+      message: t(props.message),
+    });
+  }, []);
+
+  return <Navigate to={props.to} replace={props.replace ? true : false} />;
+};

src/components/ThemToggle.tsx

@@ -34,7 +34,9 @@ export const ThemeToggleButton = ({
       <ToggleButtonGroup
         value={value}
         exclusive
+        color="primary"
         onChange={handleChange}
+        size="medium"
         sx={{
           borderRadius: 1.5,
           border: '1px solid',
@@ -51,10 +53,6 @@ export const ThemeToggleButton = ({
             gap: 1,
             px: 2,
             py: 1,
-            '&.Mui-selected': {
-              bgcolor: 'primary.light',
-              color: 'primary.main',
-            },
           }}
         >
           <Icon Component={Sun1} color="primary.main" variant="Bold" />
@@ -70,10 +68,6 @@ export const ThemeToggleButton = ({
             gap: 1,
             px: 2,
             py: 1,
-            '&.Mui-selected': {
-              bgcolor: 'primary.light',
-              color: 'primary.main',
-            },
           }}
         >
           <Icon Component={Moon} size="medium" color="primary.light" />