diff --git a/app/(auth)/login/layout.tsx b/app/(auth)/login/layout.tsx index 0f39ac4..dfb3e65 100644 --- a/app/(auth)/login/layout.tsx +++ b/app/(auth)/login/layout.tsx @@ -1,8 +1,7 @@ import type {Metadata} from 'next' import {Noto_Sans_JP} from 'next/font/google' import {AppRouterCacheProvider} from '@mui/material-nextjs/v14-appRouter'; -import {CssBaseline, ThemeProvider} from "@mui/material"; -import {theme} from "@/components/theme/theme" +import {CssBaseline} from "@mui/material"; const noto = Noto_Sans_JP({ weight: ['400', '500', '600', '700'], @@ -23,10 +22,8 @@ export default function RootLayout({ - {children} - diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx index 247ebc0..bd2ebdb 100644 --- a/app/(auth)/login/page.tsx +++ b/app/(auth)/login/page.tsx @@ -1,16 +1,37 @@ +'use client' import {Button, Stack, Typography} from "@mui/material"; import LoginButton from "@/components/auth/LoginButton"; -import Image from "next/image"; import WiderLogo from "@/components/svg/wider"; -import Link from "next/link"; import PrivacyPolicyDrawer from "@/components/layout/privacyPolicyDrawer"; +import {useTheme} from "@mui/material/styles"; +import Logo from "@/public/logo/logo.svg"; +import * as React from "react"; export default function Login() { + const theme = useTheme(); return ( - - - {"SPORTSDAY - 球技大会の進行管理アプリケーション + + + + + Admin + + + 球技大会の進行管理アプリケーション SPORTSDAYを使うにはCookieが必要です diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx index 5a16372..fef78b4 100644 --- a/app/(authenticated)/layout.tsx +++ b/app/(authenticated)/layout.tsx @@ -1,16 +1,7 @@ import type {Metadata} from 'next' -import {Noto_Sans_JP} from 'next/font/google' -import {AppRouterCacheProvider} from '@mui/material-nextjs/v14-appRouter'; -import {CssBaseline, ThemeProvider, Box, Stack} from "@mui/material"; -import {theme} from "@/components/theme/theme" +import {CssBaseline, Box, Stack} from "@mui/material"; import {Navigation} from "@/components/layout/navigation"; -const noto = Noto_Sans_JP({ - weight: ['400', '500', '600', '700'], - subsets: ['latin'], - variable: '--font-noto-sans-jp', -}); - export const metadata: Metadata = { title: 'Sports-day Admin', } @@ -21,20 +12,14 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - - - - - - - - - {children} - - - - - - + <> + + + + + {children} + + + ) } diff --git a/app/(authenticated)/loading.tsx b/app/(authenticated)/loading.tsx index ace4df4..d130815 100644 --- a/app/(authenticated)/loading.tsx +++ b/app/(authenticated)/loading.tsx @@ -12,7 +12,7 @@ export default function Loading() { return( <> - + diff --git a/app/(authenticated)/page.tsx b/app/(authenticated)/page.tsx index 63c263a..1e7358f 100644 --- a/app/(authenticated)/page.tsx +++ b/app/(authenticated)/page.tsx @@ -1,4 +1,4 @@ -import {Breadcrumbs, Grid, Stack, Typography} from "@mui/material" +import {Breadcrumbs, Grid, Stack, Typography, useTheme} from "@mui/material" import CardBackground from "@/components/layout/cardBackground" import CardLarge from "@/components/layout/cardLarge" import SportsList from "@/components/sports/sportsList" diff --git a/app/layout.tsx b/app/layout.tsx index fc7d951..73f7b17 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,8 +1,8 @@ import type {Metadata} from 'next' import {Noto_Sans_JP} from 'next/font/google' import {AppRouterCacheProvider} from '@mui/material-nextjs/v14-appRouter'; -import {CssBaseline, ThemeProvider} from "@mui/material"; -import {theme} from "@/components/theme/theme" +import {CssBaseline} from "@mui/material"; +import ColorModeProvider from "@/components/theme/colorModeProvider"; const noto = Noto_Sans_JP({ weight: ['400', '500', '600', '700'], @@ -22,12 +22,14 @@ export default function RootLayout({ return ( + - - - {children} - + + + {children} + + ) diff --git a/components/auth/LoginButton.tsx b/components/auth/LoginButton.tsx index dbab8a0..0d21454 100644 --- a/components/auth/LoginButton.tsx +++ b/components/auth/LoginButton.tsx @@ -1,11 +1,13 @@ 'use client' -import {Button} from "@mui/material"; +import {Button, Typography} from "@mui/material"; import crypto from 'crypto'; import * as querystring from "querystring"; import {useEffect, useState} from "react"; +import {useTheme} from "@mui/material/styles"; export default function LoginButton() { const [authorizationUrl, setAuthorizationUrl] = useState('') + const theme = useTheme() useEffect(() => { const authorizationBaseUrl = process.env.NEXT_PUBLIC_OIDC_AUTHORIZE_URL @@ -37,12 +39,14 @@ export default function LoginButton() { return ( ); } diff --git a/components/auth/LogoutButton.tsx b/components/auth/LogoutButton.tsx index 150221c..d4ecd83 100644 --- a/components/auth/LogoutButton.tsx +++ b/components/auth/LogoutButton.tsx @@ -3,9 +3,11 @@ import {IconButton, Tooltip} from "@mui/material"; import Cookies from "js-cookie"; import {useRouter} from "next/navigation"; import {HiArrowRightOnRectangle} from "react-icons/hi2"; +import {useTheme} from "@mui/material/styles"; export default function LogoutButton() { const router = useRouter() + const theme = useTheme() return ( @@ -18,7 +20,7 @@ export default function LogoutButton() { }} sx={{width:"fit-content"}} > - + ); diff --git a/components/layout/buttonLarge.tsx b/components/layout/buttonLarge.tsx index 9faa0d9..eed2499 100644 --- a/components/layout/buttonLarge.tsx +++ b/components/layout/buttonLarge.tsx @@ -1,4 +1,4 @@ -import {Avatar, Button, Stack, Grid} from "@mui/material"; +import {Avatar, Button, Stack, Grid, Typography} from "@mui/material"; import React, {ReactNode} from "react"; type ButtonLargeProps = { @@ -11,6 +11,7 @@ export const ButtonLarge: React.FC = ({img, children, link})=> return( diff --git a/components/layout/cardBackground.tsx b/components/layout/cardBackground.tsx index 0074172..e857d24 100644 --- a/components/layout/cardBackground.tsx +++ b/components/layout/cardBackground.tsx @@ -1,5 +1,6 @@ -import {Button, Card, Stack, Typography} from "@mui/material"; +import {Button, Card, Stack, Typography, useTheme} from "@mui/material"; import React, {ReactNode} from 'react'; +import {red} from "@mui/material/colors"; type CardProps = { title?: string; @@ -10,18 +11,27 @@ type CardProps = { }; const CardBackground: React.FC = ({title, button, link, children, onClick}) => { + return ( <> - + - {title && {title}} + {title && {title}} {button && } diff --git a/components/layout/cardLarge.tsx b/components/layout/cardLarge.tsx index ce23074..306a3fa 100644 --- a/components/layout/cardLarge.tsx +++ b/components/layout/cardLarge.tsx @@ -9,10 +9,10 @@ type CardProps = { const CardLarge: React.FC = ({ children }) => { return ( <> - + - - + + {children} diff --git a/components/layout/logo.tsx b/components/layout/logo.tsx new file mode 100644 index 0000000..2b633e4 --- /dev/null +++ b/components/layout/logo.tsx @@ -0,0 +1,15 @@ +import Image from "next/image"; +import PropTypes from "prop-types"; + +export const SDLogo = (props: any) => { + const {w} = props; + return ( + <> + logo + + ); +}; + +SDLogo.propTypes = { + w: PropTypes.object +}; \ No newline at end of file diff --git a/components/layout/navPrivacyPolicyDrawer.tsx b/components/layout/navPrivacyPolicyDrawer.tsx index d8b1281..4a216c7 100644 --- a/components/layout/navPrivacyPolicyDrawer.tsx +++ b/components/layout/navPrivacyPolicyDrawer.tsx @@ -1,11 +1,13 @@ 'use client' -import {Container, Button, AppBar, Box, SwipeableDrawer, IconButton, Tooltip, BottomNavigation,} from "@mui/material"; +import {Container, Button, Box, SwipeableDrawer, IconButton, Tooltip, BottomNavigation,} from "@mui/material"; import React from 'react'; import {HiBuildingLibrary, HiXMark} from "react-icons/hi2"; import PrivacyPolicy from "@/components/layout/privacyPolicy"; +import {useTheme} from "@mui/material/styles"; const NavPrivacyPolicyDrawer = () => { const [open, setOpen] = React.useState(false); + const theme = useTheme() const toggleDrawer = (newOpen: boolean) => () => { setOpen(newOpen); @@ -59,7 +61,7 @@ const NavPrivacyPolicyDrawer = () => { - + { + const theme = useTheme(); const drawerWidth = 303; const buttonPadding = 1.3; + const [mobileOpen, setMobileOpen] = React.useState(false); + const [isClosing, setIsClosing] = React.useState(false); + + const handleDrawerClose = () => { + setIsClosing(true); + setMobileOpen(false); + } + const handleDrawerTransitionEnd = () => { + setIsClosing(false); + } + const handleDrawerToggle = () => { + if (!isClosing) { + setMobileOpen(!mobileOpen); + } + }; + + const drawer = ( + + + 全体 + + + + + + + スポーツ + + + + + + 情報 + + + + + + + + + + + + + + + + + + (C)2024 + + + + ); return ( <> @@ -27,203 +239,73 @@ export const Navigation = () => { position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, - background: "rgba(62,78,179,0.8)", + background: "rgba(62,78,179,0.2)", backdropFilter: 'blur(30px)', + color: theme.palette.text.primary, }}> - - {"SPORTSDAY - + + + + - - - - - 全体 - - - - - - - スポーツ - - - - - - 情報 - - - - - - - - - - - - - - - - - - (C)2024 - - - - + {/* The implementation can be swapped with js to avoid SEO duplication of links. */} + + {drawer} + + + {drawer} + + ) } \ No newline at end of file diff --git a/components/layout/privacyPolicyDrawer.tsx b/components/layout/privacyPolicyDrawer.tsx index c2300a7..67cca5a 100644 --- a/components/layout/privacyPolicyDrawer.tsx +++ b/components/layout/privacyPolicyDrawer.tsx @@ -49,7 +49,7 @@ const PrivacyPolicyDrawer = () => { <>