From e811fe0a1e50814b7d51c913048fdd486002cf10 Mon Sep 17 00:00:00 2001 From: tosnayu Date: Fri, 4 Oct 2024 22:49:44 +0900 Subject: [PATCH 01/13] feat: new theme(dark mode ready) --- app/(authenticated)/layout.tsx | 5 +- app/(authenticated)/page.tsx | 2 +- components/layout/buttonLarge.tsx | 7 +- components/layout/cardBackground.tsx | 18 ++- components/layout/cardLarge.tsx | 6 +- components/match/matchCard.tsx | 19 +-- components/theme/colorModeProvider.tsx | 170 +++++++++++++++++++++++++ 7 files changed, 206 insertions(+), 21 deletions(-) create mode 100644 components/theme/colorModeProvider.tsx diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx index 5a16372..3f9f70e 100644 --- a/app/(authenticated)/layout.tsx +++ b/app/(authenticated)/layout.tsx @@ -4,6 +4,7 @@ import {AppRouterCacheProvider} from '@mui/material-nextjs/v14-appRouter'; import {CssBaseline, ThemeProvider, Box, Stack} from "@mui/material"; import {theme} from "@/components/theme/theme" import {Navigation} from "@/components/layout/navigation"; +import ColorModeProvider from "@/components/theme/colorModeProvider"; const noto = Noto_Sans_JP({ weight: ['400', '500', '600', '700'], @@ -24,7 +25,7 @@ export default function RootLayout({ - + @@ -32,7 +33,7 @@ export default function RootLayout({ {children} - + 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/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/match/matchCard.tsx b/components/match/matchCard.tsx index c7ab33e..be007bc 100644 --- a/components/match/matchCard.tsx +++ b/components/match/matchCard.tsx @@ -1,5 +1,5 @@ import {Grid, Button, Avatar, Chip, Stack, Tooltip, Divider} from "@mui/material"; -import {HiClock, HiFlag, HiMapPin, HiTableCells, HiUserGroup} from "react-icons/hi2"; +import {HiClock, HiFlag, HiMapPin, HiTableCells, HiTrophy, HiUserGroup} from "react-icons/hi2"; import {Match} from "@/src/models/MatchModel"; import {sportFactory} from "@/src/models/SportModel"; import {gameFactory} from "@/src/models/GameModel"; @@ -24,6 +24,7 @@ export default async function MatchCard(props: MatchCardProps) { return ( + + + + + + スポーツ + + + + + + 情報 + + + + + + + + + + + + + + + + + + (C)2024 + + + + ); return ( <> @@ -27,203 +231,55 @@ 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)', }}> + + + - {"SPORTSDAY + {"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/theme/colorModeProvider.tsx b/components/theme/colorModeProvider.tsx index 3f48540..e5d1e95 100644 --- a/components/theme/colorModeProvider.tsx +++ b/components/theme/colorModeProvider.tsx @@ -10,7 +10,7 @@ export type ColorModeProviderProps = { const baseTheme = { breakpoints: { values: { - xs: 600, + xs: 0, sm: 790, md: 1000, lg: 1200, From c82a6aa08df00521637d43c9bed752c76d69d20c Mon Sep 17 00:00:00 2001 From: tosnayu Date: Sat, 5 Oct 2024 13:34:14 +0900 Subject: [PATCH 03/13] fix: improve theme --- components/theme/colorModeProvider.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/theme/colorModeProvider.tsx b/components/theme/colorModeProvider.tsx index e5d1e95..3b46655 100644 --- a/components/theme/colorModeProvider.tsx +++ b/components/theme/colorModeProvider.tsx @@ -101,7 +101,7 @@ const baseTheme = { const lightPalette = { mode: 'light' as PaletteMode, // 型キャストを追加 primary: { - main: '#EFF0F8', + main: '#52598d', dark: '#4a5abb', light: '#5f6dc2', }, @@ -131,7 +131,7 @@ const lightPalette = { const darkPalette = { mode: 'dark' as PaletteMode, // 型キャストを追加 primary: { - main: '#22284F', + main: '#8d95c9', dark: '#050925', light: '#373e6e', }, @@ -163,7 +163,7 @@ export default function ColorModeProvider({ children }: ColorModeProviderProps) const theme = useMemo(() => createTheme({ ...baseTheme, - palette: prefersDarkMode ? darkPalette : lightPalette, + palette: lightPalette, }), [prefersDarkMode]); return {children}; From d98498c2686f60ab2674621d1c68e702873ea28b Mon Sep 17 00:00:00 2001 From: 1nayu Date: Sat, 5 Oct 2024 13:43:39 +0900 Subject: [PATCH 04/13] fix: changed colorModeProvider position --- app/(auth)/login/layout.tsx | 2 -- app/(authenticated)/layout.tsx | 24 +++++++++--------------- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/app/(auth)/login/layout.tsx b/app/(auth)/login/layout.tsx index 0f39ac4..7bbd8c0 100644 --- a/app/(auth)/login/layout.tsx +++ b/app/(auth)/login/layout.tsx @@ -23,10 +23,8 @@ export default function RootLayout({ - {children} - diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx index 3f9f70e..bbe74e7 100644 --- a/app/(authenticated)/layout.tsx +++ b/app/(authenticated)/layout.tsx @@ -22,20 +22,14 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - - - - - - - - - {children} - - - - - - + <> + + + + + {children} + + + ) } From 49baa90d367478a1dd91628622ca52574a7610ac Mon Sep 17 00:00:00 2001 From: 1nayu Date: Sat, 5 Oct 2024 13:44:12 +0900 Subject: [PATCH 05/13] fix: changed colorModeProvider position --- app/layout.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) 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} + + ) From 3bbd7ec338801b14fc073af841e8476e0ab93a7d Mon Sep 17 00:00:00 2001 From: 1nayu Date: Sat, 5 Oct 2024 13:44:48 +0900 Subject: [PATCH 06/13] fix: change logo color with color mode --- components/layout/logo.tsx | 15 ++++++++++++ components/layout/navigation.tsx | 40 ++++++++++++++++++++++---------- 2 files changed, 43 insertions(+), 12 deletions(-) create mode 100644 components/layout/logo.tsx 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/navigation.tsx b/components/layout/navigation.tsx index 436f285..10a0410 100644 --- a/components/layout/navigation.tsx +++ b/components/layout/navigation.tsx @@ -1,9 +1,8 @@ 'use client' import * as React from 'react' import {AppBar, Box, Button, Drawer, IconButton, Stack, SvgIcon, Toolbar, Tooltip, Typography} from "@mui/material"; -import {createTheme} from "@mui/material/styles"; - -import Image from "next/image"; +import {useTheme} from "@mui/material/styles"; +import Logo from "@/public/logo/logo.svg"; import { HiHome, HiMegaphone, @@ -21,7 +20,7 @@ import LogoutButton from "@/components/auth/LogoutButton"; export const Navigation = () => { - const theme = createTheme(); + const theme = useTheme(); const drawerWidth = 303; const buttonPadding = 1.3; const [mobileOpen, setMobileOpen] = React.useState(false); @@ -41,8 +40,7 @@ export const Navigation = () => { }; const drawer = ( - - + 全体 Date: Sat, 5 Oct 2024 13:46:15 +0900 Subject: [PATCH 07/13] fix: improve capability of some components --- components/auth/LogoutButton.tsx | 4 +++- components/layout/navPrivacyPolicyDrawer.tsx | 4 +++- components/league/table/matchCell.tsx | 4 ++++ components/league/table/slashCell.tsx | 3 ++- components/league/table/teamCell.tsx | 2 ++ 5 files changed, 14 insertions(+), 3 deletions(-) diff --git a/components/auth/LogoutButton.tsx b/components/auth/LogoutButton.tsx index fe6a522..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/navPrivacyPolicyDrawer.tsx b/components/layout/navPrivacyPolicyDrawer.tsx index e8c27e6..c6c03d7 100644 --- a/components/layout/navPrivacyPolicyDrawer.tsx +++ b/components/layout/navPrivacyPolicyDrawer.tsx @@ -3,9 +3,11 @@ import {Container, Button, AppBar, Box, SwipeableDrawer, IconButton, Tooltip, Bo 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 = () => { - + エラー @@ -44,6 +46,8 @@ export default function MatchCell(props: MatchCellProps) { alignItems={"center"} justifyContent={"center"} display={"flex"} + color={"text.primary"} + bgcolor={"secondary.main"} > {leftTeam.name} vs {rightTeam.name} diff --git a/components/league/table/slashCell.tsx b/components/league/table/slashCell.tsx index bcfcda2..08732e0 100644 --- a/components/league/table/slashCell.tsx +++ b/components/league/table/slashCell.tsx @@ -7,7 +7,8 @@ export default function SlashCell() { height={100} width={200} border={1} - bgcolor={"#d3d3d3"} + bgcolor={"background.paper"} + color={"text.disabled"} > ) diff --git a/components/league/table/teamCell.tsx b/components/league/table/teamCell.tsx index b37ab43..36b97ae 100644 --- a/components/league/table/teamCell.tsx +++ b/components/league/table/teamCell.tsx @@ -19,6 +19,8 @@ export default function TeamCell(props: TeamCellProps) { alignItems={"center"} justifyContent={"center"} display={"flex"} + color={"text.primary"} + bgcolor={"secondary.main"} > {props.team.name} From e042c3aea044c73138b18f2a33116a0e9c70eeae Mon Sep 17 00:00:00 2001 From: 1nayu Date: Sat, 5 Oct 2024 13:50:36 +0900 Subject: [PATCH 08/13] fix: removed unused imports --- app/(auth)/login/layout.tsx | 3 +- app/(authenticated)/layout.tsx | 12 +--- components/layout/navPrivacyPolicyDrawer.tsx | 2 +- components/theme/colorModeProvider.tsx | 58 ++++++++++---------- 4 files changed, 32 insertions(+), 43 deletions(-) diff --git a/app/(auth)/login/layout.tsx b/app/(auth)/login/layout.tsx index 7bbd8c0..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'], diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx index bbe74e7..fef78b4 100644 --- a/app/(authenticated)/layout.tsx +++ b/app/(authenticated)/layout.tsx @@ -1,16 +1,6 @@ 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"; -import ColorModeProvider from "@/components/theme/colorModeProvider"; - -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', diff --git a/components/layout/navPrivacyPolicyDrawer.tsx b/components/layout/navPrivacyPolicyDrawer.tsx index c6c03d7..4a216c7 100644 --- a/components/layout/navPrivacyPolicyDrawer.tsx +++ b/components/layout/navPrivacyPolicyDrawer.tsx @@ -1,5 +1,5 @@ '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"; diff --git a/components/theme/colorModeProvider.tsx b/components/theme/colorModeProvider.tsx index 3b46655..dee8449 100644 --- a/components/theme/colorModeProvider.tsx +++ b/components/theme/colorModeProvider.tsx @@ -128,35 +128,35 @@ const lightPalette = { divider: '#7f8cd6', }; -const darkPalette = { - mode: 'dark' as PaletteMode, // 型キャストを追加 - primary: { - main: '#8d95c9', - dark: '#050925', - light: '#373e6e', - }, - secondary: { - main: '#303560', - contrastText: '#eff0f8', - dark: '#262b57', - light: '#373e6e', - }, - background: { - paper: '#22284F', - default: '#181D3C', - }, - text: { - primary: '#eff0f8', - secondary: '#99a5d6', - disabled: '#5c628a', - }, - warning: { - main: '#b9891a', - contrastText: 'rgba(253,252,252,0.87)', - }, - info: { main: '#3a468f' }, - divider: '#373e6e', -}; +// const darkPalette = { +// mode: 'dark' as PaletteMode, // 型キャストを追加 +// primary: { +// main: '#8d95c9', +// dark: '#050925', +// light: '#373e6e', +// }, +// secondary: { +// main: '#303560', +// contrastText: '#eff0f8', +// dark: '#262b57', +// light: '#373e6e', +// }, +// background: { +// paper: '#22284F', +// default: '#181D3C', +// }, +// text: { +// primary: '#eff0f8', +// secondary: '#99a5d6', +// disabled: '#5c628a', +// }, +// warning: { +// main: '#b9891a', +// contrastText: 'rgba(253,252,252,0.87)', +// }, +// info: { main: '#3a468f' }, +// divider: '#373e6e', +// }; export default function ColorModeProvider({ children }: ColorModeProviderProps) { const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); From b2f9e271b123336d46806fbc2f825a05f213a968 Mon Sep 17 00:00:00 2001 From: 1nayu Date: Sat, 5 Oct 2024 14:57:53 +0900 Subject: [PATCH 09/13] fix: leagueTable layout shift when the window size is md --- components/league/table/leagueTable.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/components/league/table/leagueTable.tsx b/components/league/table/leagueTable.tsx index 27bb0bb..9700b7f 100644 --- a/components/league/table/leagueTable.tsx +++ b/components/league/table/leagueTable.tsx @@ -1,6 +1,6 @@ import {Game, gameFactory} from "@/src/models/GameModel"; import {Sport} from "@/src/models/SportModel"; -import {Alert, Stack} from "@mui/material"; +import {Alert, Box, Container, Stack, Typography} from "@mui/material"; import {ReactNode} from "react"; import TeamCell from "@/components/league/table/teamCell"; import SlashCell from "@/components/league/table/slashCell"; @@ -161,13 +161,12 @@ export default async function LeagueTable(props: LeagueTableProps) { ) } - - {cells} - + + {/*maxWidth=1pxでなぜ動くかわからない*/} + + {cells} + + ) } From ccaf72c97aa36f9830a0c4339ab45d3b1b6436ef Mon Sep 17 00:00:00 2001 From: 1nayu Date: Sat, 5 Oct 2024 15:15:01 +0900 Subject: [PATCH 10/13] feat: new login page --- app/(auth)/login/page.tsx | 31 ++++++++++++++++++++--- components/auth/LoginButton.tsx | 12 ++++++--- components/layout/privacyPolicyDrawer.tsx | 2 +- 3 files changed, 36 insertions(+), 9 deletions(-) diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx index 247ebc0..61a4f27 100644 --- a/app/(auth)/login/page.tsx +++ b/app/(auth)/login/page.tsx @@ -1,16 +1,39 @@ +'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/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/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 = () => { <>