Light theme

exam/dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/phpCourse/exam/dist/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/phpCourse/exam/dist/assets/index-CzVZnOtD.js"></script>
+    <script type="module" crossorigin src="/phpCourse/exam/dist/assets/index-BaG4uuqL.js"></script>
     <link rel="modulepreload" crossorigin href="/phpCourse/exam/dist/assets/react-C_FdcE2X.js">
     <link rel="modulepreload" crossorigin href="/phpCourse/exam/dist/assets/mui-aBip8mmu.js">
     <link rel="modulepreload" crossorigin href="/phpCourse/exam/dist/assets/tanstack-DojtBDN6.js">

exam/react/src/App.tsx

@@ -1,21 +1,19 @@
-import { createTheme, CssBaseline, ThemeProvider, useMediaQuery } from '@mui/material';
+import { CssBaseline, ThemeProvider, useMediaQuery } from '@mui/material';
 import { FC, useMemo } from 'react';
 import Router from './router';
 import useGuestBookStore from './store/store';
+import darkTheme from './theme/dark/dark';
+import lightTheme from './theme/light/light';
 
 const App: FC = () => {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const theme = useGuestBookStore((state) => state.theme);
 
-  const themePreset = useMemo(
+  const themePreset = useMemo(() => {
-    () =>
+    if (theme === 'dark' || prefersDarkMode) return darkTheme;
-      createTheme({
+
-        palette: {
+    return lightTheme;
-          mode: theme ?? (prefersDarkMode ? 'dark' : 'light'),
+  }, [theme, prefersDarkMode]);
-        },
-      }),
-    [theme, prefersDarkMode]
-  );
 
   return (
     <ThemeProvider theme={themePreset}>

exam/react/src/components/Header/Header.tsx

@@ -51,7 +51,7 @@ const Header: FC = () => {
         <AppBar>
           <Toolbar>
             <Box sx={{ flexGrow: 1, alignItems: 'center', display: 'flex', gap: 1 }}>
-              <MUILink component={Link} to="/" color="#FFF" variant="h6" underline="none">
+              <MUILink component={Link} to="/" color="white" variant="h6" underline="none">
                 {t('GuestBook')}
               </MUILink>
               {isLoading && <CircularProgress size={16} thickness={10} sx={{ color: 'white' }} />}

exam/react/src/components/Menus/User/UserMenu.tsx

@@ -82,6 +82,7 @@ const UserMenu: FC<Props> = ({ anchorEl, handleClose }) => {
                 sx={{ cursor: 'pointer' }}
                 variant="body1"
                 underline="hover"
+                color="secondary.main"
                 onClick={() => {
                   setRegister(true);
                   handleClose();

exam/react/src/routes/profile/$id.tsx

@@ -15,12 +15,27 @@ const ProfilePage = () => {
   const {
     data: profileQuery,
     isFetching: isFetchingProfile,
-    failureReason,
+    error: errorProfile,
-  } = useSuspenseQuery(profileQueryOptions(Api, id));
+    failureReason: failureReasonProfile,
-  const { data: profilePostsQuery, isFetching: isFetchingPosts } = useSuspenseQuery(profilePostsQueryOptions(Api, id));
+  } = useSuspenseQuery(profileQueryOptions(Api));
+  const {
+    data: profilePostsQuery,
+    isFetching: isFetchingPosts,
+    error: errorPosts,
+    failureReason: failureReasonPosts,
+  } = useSuspenseQuery(profilePostsQueryOptions(Api, id));
 
-  if (failureReason && 'code' in failureReason && failureReason.code === ERRORS.UNAUTHORIZED) {
+  if (failureReasonProfile && 'code' in failureReasonProfile && failureReasonProfile.code === ERRORS.UNAUTHORIZED) {
-    throw failureReason;
+    throw failureReasonProfile;
+  }
+  if (errorProfile && 'code' in errorProfile && errorProfile.code === ERRORS.UNAUTHORIZED) {
+    throw errorProfile;
+  }
+  if (failureReasonPosts && 'code' in failureReasonPosts && failureReasonPosts.code === ERRORS.UNAUTHORIZED) {
+    throw failureReasonPosts;
+  }
+  if (errorPosts && 'code' in errorPosts && errorPosts.code === ERRORS.UNAUTHORIZED) {
+    throw errorPosts;
   }
 
   return (

exam/react/src/routes/profile/index.tsx

@@ -14,14 +14,27 @@ const ProfilePage = () => {
   const {
     data: profileQuery,
     isFetching: isFetchingProfile,
-    failureReason,
+    error: errorProfile,
+    failureReason: failureReasonProfile,
   } = useSuspenseQuery(profileSelfQueryOptions(Api));
-  const { data: profilePostsQuery, isFetching: isFetchingPosts } = useSuspenseQuery(
+  const {
-    profilePostsQueryOptions(Api, Api.authenticatedUser?.id ?? 0)
+    data: profilePostsQuery,
-  );
+    isFetching: isFetchingPosts,
+    error: errorPosts,
+    failureReason: failureReasonPosts,
+  } = useSuspenseQuery(profilePostsQueryOptions(Api, Api.authenticatedUser?.id ?? 0));
 
-  if (failureReason && 'code' in failureReason && failureReason.code === ERRORS.UNAUTHORIZED) {
+  if (failureReasonProfile && 'code' in failureReasonProfile && failureReasonProfile.code === ERRORS.UNAUTHORIZED) {
-    throw failureReason;
+    throw failureReasonProfile;
+  }
+  if (errorProfile && 'code' in errorProfile && errorProfile.code === ERRORS.UNAUTHORIZED) {
+    throw errorProfile;
+  }
+  if (failureReasonPosts && 'code' in failureReasonPosts && failureReasonPosts.code === ERRORS.UNAUTHORIZED) {
+    throw failureReasonPosts;
+  }
+  if (errorPosts && 'code' in errorPosts && errorPosts.code === ERRORS.UNAUTHORIZED) {
+    throw errorPosts;
   }
 
   return (

exam/react/src/theme/dark/dark.ts

@@ -0,0 +1,41 @@
+import { createTheme } from '@mui/material';
+
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#b8e1ff',
+    },
+    secondary: {
+      main: '#f990ca',
+    },
+    warning: {
+      main: '#f9bf90',
+    },
+    error: {
+      main: '#ffada7',
+    },
+    info: {
+      main: '#2ea8ff',
+    },
+    success: {
+      main: '#caf990',
+    },
+    background: {
+      default: '#0f1115',
+      paper: '#0d1019',
+    },
+  },
+  components: {
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          backgroundColor: undefined,
+          color: 'text.primary',
+        },
+      },
+    },
+  },
+});
+
+export default darkTheme;

exam/react/src/theme/light/light.ts

@@ -0,0 +1,41 @@
+import { createTheme } from '@mui/material';
+
+const lightTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#000b29',
+    },
+    secondary: {
+      main: '#9d002a',
+    },
+    error: {
+      main: '#d10000',
+    },
+    warning: {
+      main: '#ff9800',
+    },
+    info: {
+      main: '#2196f3',
+    },
+    success: {
+      main: '#4caf50',
+    },
+    background: {
+      default: '#fafafa',
+      paper: '#ffffff',
+    },
+  },
+  components: {
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          backgroundColor: undefined,
+          color: 'text.primary',
+        },
+      },
+    },
+  },
+});
+
+export default lightTheme;