Merge pull request #56 from Sports-day/feature/responsive

レスポンシブ Feature/responsive
Sports-day · Oct 5, 2024 · 20b2dc0 · 20b2dc0
2 parents 6f8f313 + 54b54c1
commit 20b2dc0
Show file tree

Hide file tree

Showing 22 changed files with 669 additions and 354 deletions.
diff --git 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({
         <html lang="ja">
         <body className={noto.className}>
         <AppRouterCacheProvider>
-            <ThemeProvider theme={theme}>
                 <CssBaseline/>
                 {children}
-            </ThemeProvider>
         </AppRouterCacheProvider>
         </body>
         </html>

diff --git 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 (
-        <Stack height="100vh" width="100vw" justifyContent="center" alignItems="center" sx={{background:"radial-gradient(ellipse at left, #5F6DC2, #3E4EB3)"}}>
-            <Stack justifyContent="center" alignItems="center" spacing={1.5}>
-                <Image src={"/logo/logo_admin.png"} height={"24"} width={"302"} alt={"SPORTSDAY Admin"}/>
-                <Typography pb={3} fontSize={"14px"} fontWeight={"600"} color={"#EFF0F8"}>球技大会の進行管理アプリケーション</Typography>
+        <Stack height="100vh" width="100vw" justifyContent="center" alignItems="center" sx={{background: `linear-gradient(${theme.palette.secondary.light}, ${theme.palette.secondary.dark})`,}}>
+            <Stack justifyContent="center" alignItems="center" spacing={1.5} maxWidth={"600px"} width={"100%"} px={2}>
+                <Stack
+                    direction={"row"}
+                    spacing={1}
+                    sx={{
+                        cursor: "pointer",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        color: theme.palette.text.primary,
+                        textDecoration: "none"
+                    }}
+                >
+                    <Logo width={18 * 8.45} height={18} fill={theme.palette.text.primary}/>
+                    <Typography
+                        color={"text.primary"} fontWeight={"bold"} pt={0.15}
+                        fontSize={"18px"}
+                        sx={{textTransform: "none"}}
+                    >Admin
+                    </Typography>
+                </Stack>
+                <Typography pb={3} fontSize={"20px"} fontWeight={"600"}>球技大会の進行管理アプリケーション</Typography>
                 <LoginButton/>
                 <PrivacyPolicyDrawer/>
                 <Typography fontSize={"13px"} fontWeight={"400"} color={"#9aa6e5"}>SPORTSDAYを使うにはCookieが必要です</Typography>

diff --git 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 (
-        <html lang="ja">
-        <body className={noto.className}>
-        <AppRouterCacheProvider>
-            <ThemeProvider theme={theme}>
-                <CssBaseline/>
-                <Box sx={{ display: 'flex' }}>
-                    <Navigation/>
-                    <Stack minHeight="100lvh-8" width="100%" mt={8}>
-                        {children}
-                    </Stack>
-                </Box>
-            </ThemeProvider>
-        </AppRouterCacheProvider>
-        </body>
-        </html>
+        <>
+            <CssBaseline/>
+            <Box sx={{ display: 'flex' }}>
+                <Navigation/>
+                <Stack minHeight="100lvh-8" width="100%" mt={8}>
+                    {children}
+                </Stack>
+            </Box>
+        </>
     )
 }
diff --git a/app/(authenticated)/loading.tsx b/app/(authenticated)/loading.tsx
@@ -12,7 +12,7 @@ export default function Loading() {
 
     return(
         <>
-            <Backdrop open={backdropOpen} sx={{backgroundColor:"rgba(239,240,248, 0.4)", zIndex: 1}}/>
+            <Backdrop open={backdropOpen} sx={{backgroundColor:"rgba(45,52,98,0.3)", zIndex: 1}}/>
             <Stack spacing={2} mx={2} my={3}>
                 <Skeleton animation="wave" variant="text" width={300} height={18} />
                 <CardBackground>

diff --git 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
@@ -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 (
         <html lang="ja">
         <body className={noto.className}>
+
         <AppRouterCacheProvider>
-            <ThemeProvider theme={theme}>
-                <CssBaseline/>
-                {children}
-            </ThemeProvider>
+                <ColorModeProvider>
+                    <CssBaseline/>
+                    {children}
+                </ColorModeProvider>
         </AppRouterCacheProvider>
+
         </body>
         </html>
     )

diff --git 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<string>('')
+    const theme = useTheme()
 
     useEffect(() => {
         const authorizationBaseUrl = process.env.NEXT_PUBLIC_OIDC_AUTHORIZE_URL
@@ -37,12 +39,14 @@ export default function LoginButton() {
     return (
         <Button
             variant="contained"
-            color="secondary"
+            color="primary"
             href={authorizationUrl}
-            sx={{py:1.5, width:"100%"}}
+            sx={{px:3, py:1.5, width:"100%", backgroundColor:`${theme.palette.text.primary}`}}
             disableElevation
         >
-            {buttonDisplayName}
+            <Typography fontSize={"14px"} color={theme.palette.background.paper}>
+                {buttonDisplayName}
+            </Typography>
         </Button>
     );
 }
diff --git 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 (
         <Tooltip title={"ログアウト"}>
@@ -18,7 +20,7 @@ export default function LogoutButton() {
                 }}
                 sx={{width:"fit-content"}}
             >
-                <HiArrowRightOnRectangle color={"#eff0f8"}/>
+                <HiArrowRightOnRectangle color={theme.palette.text.secondary}/>
             </IconButton>
         </Tooltip>
     );

diff --git 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<ButtonLargeProps> = ({img, children, link})=>
     return(
         <Grid item xs={12} sm={6} md={4} lg={3}>
             <Button
+                color={"secondary"}
                 variant={"contained"}
                 sx={{width:"100%"}}
                 href={link}
@@ -27,7 +28,9 @@ export const ButtonLarge: React.FC<ButtonLargeProps> = ({img, children, link})=>
                         src={img}
                     >
                     </Avatar>}
-                    {children}
+                    <Typography fontSize={"inherit"} color={"text.primary"}>
+                        {children}
+                    </Typography>
                 </Stack>
             </Button>
         </Grid>

diff --git 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<CardProps> = ({title, button, link, children, onClick}) => {
+
     return (
         <>
-            <Card sx={{py: 2, px: 2}}>
+            <Card
+                sx={{
+                    py: 2, px: 2,
+                    backgroundImage:`linear-gradient(rgba(105,112,164,0), rgba(47,60,140,0.08))`
+                }}
+            >
                 <Stack pb={2} spacing={1} direction={"row"} justifyContent={"flex-start"} alignItems="center">
-                    {title && <Typography color={"primary.light"}>{title}</Typography>}
+                    {title && <Typography color={"text.primary"}>{title}</Typography>}
                     {button &&
                         <Button
+                            color={"secondary"}
                             variant={"contained"}
                             href={link}
                             onClick={onClick}
                         >
-                            {button}
+                            <Typography fontSize={"inherit"} color={"text.primary"}>
+                                {button}
+                            </Typography>
                         </Button>
                     }
                 </Stack>

diff --git a/components/layout/cardLarge.tsx b/components/layout/cardLarge.tsx
@@ -9,10 +9,10 @@ type CardProps = {
 const CardLarge: React.FC<CardProps> = ({ children }) => {
     return (
         <>
-            <Card sx={{py:1.5, px:2, backgroundColor:"primary.main", color:"secondary.main"}}>
+            <Card sx={{py:1.5, px:2, backgroundColor:"secondary.main", color:"text.primary"}}>
                 <Stack spacing={1} direction={"row"} justifyContent={"flex-start"} alignItems="center">
-                    <Avatar sx={{height:"1.5em", width:"1.5em", backgroundColor:"primary.dark"}}>
-                        <HiMegaphone/>
+                    <Avatar sx={{height:"1.5em", width:"1.5em", backgroundColor:"text.secondary"}}>
+                        <HiMegaphone color={"secondary.main"}/>
                     </Avatar>
                     <Typography>{children}</Typography>
                 </Stack>

diff --git a/components/layout/logo.tsx 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 (
+        <>
+            <Image src={"public/logo.svg"} alt="logo" height={w*8.45} width={w} priority />
+        </>
+    );
+};
+
+SDLogo.propTypes = {
+    w: PropTypes.object
+};
diff --git 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 = () => {
                 <IconButton
                     onClick={toggleDrawer(true)}
                 >
-                    <HiBuildingLibrary color={"#eff0f8"}/>
+                    <HiBuildingLibrary color={theme.palette.text.secondary}/>
                 </IconButton>
             </Tooltip>
             <SwipeableDrawer