Kilian/PHP-Course
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Light theme

Browse Source
This commit is contained in:
Kilian Hofmann 2024-07-29 05:07:35 +02:00
parent 9deff439d7
commit e6fcd54e22
11 changed files with 138 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
exam/dist/assets/index-BaG4uuqL.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
exam/dist/assets/index-CzVZnOtD.js vendored
View File

File diff suppressed because one or more lines are too long

2
exam/dist/index.html vendored
View File

@ -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">

2
exam/dist/stats.html vendored
View File

File diff suppressed because one or more lines are too long

18
exam/react/src/App.tsx
View File

@ -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(
() =>
createTheme({
palette: {
mode: theme ?? (prefersDarkMode ? 'dark' : 'light'),
},
}),
[theme, prefersDarkMode]
);
const themePreset = useMemo(() => {
if (theme === 'dark' || prefersDarkMode) return darkTheme;
return lightTheme;
}, [theme, prefersDarkMode]);
return (
<ThemeProvider theme={themePreset}>

2
exam/react/src/components/Header/Header.tsx
View File

@ -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' }} />}

1
exam/react/src/components/Menus/User/UserMenu.tsx
View File

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

25
exam/react/src/routes/profile/$id.tsx
View File

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

25
exam/react/src/routes/profile/index.tsx
View File

@ -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(
profilePostsQueryOptions(Api, Api.authenticatedUser?.id ?? 0)
);
const {
data: profilePostsQuery,
isFetching: isFetchingPosts,
error: errorPosts,
failureReason: failureReasonPosts,
} = useSuspenseQuery(profilePostsQueryOptions(Api, Api.authenticatedUser?.id ?? 0));
if (failureReason && 'code' in failureReason && failureReason.code === ERRORS.UNAUTHORIZED) {
throw failureReason;
if (failureReasonProfile && 'code' in failureReasonProfile && failureReasonProfile.code === ERRORS.UNAUTHORIZED) {
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 (

41
exam/react/src/theme/dark/dark.ts Normal file
View File

@ -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;

41
exam/react/src/theme/light/light.ts Normal file
View File

@ -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;