siginページの背景変更

Author: hirohiro-sys

Diff for: package.json

@@ -8,7 +8,7 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "jest"
+    "test": "jest --detectOpenHandles"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",

Diff for: src/components/Contributors.tsx

@@ -357,7 +357,7 @@ export const Contributors = () => {
             mb="5px"
             fontStyle="italic"
           >
-            ここでは試験や課題の過去問を登録し閲覧できます。
+            ここでは試験や課題の過去問を登録したり閲覧できます。
           </Text>
 
           <Button

Diff for: src/components/SignIn.tsx

@@ -1,14 +1,13 @@
 import {
-  Box,
   Button,
   Card,
   CardBody,
   CardHeader,
-  Center,
   Divider,
   Heading,
   Stack,
   Text,
+  Box,
 } from "@chakra-ui/react";
 import {
   GoogleAuthProvider,
@@ -22,7 +21,6 @@ import { FaGithub } from "react-icons/fa";
 import { FaDoorOpen } from "react-icons/fa6";
 import { useNavigate } from "react-router-dom";
 
-
 export const SignIn = () => {
   const { auth } = firebaseServices;
   const navigate = useNavigate();
@@ -35,6 +33,7 @@ export const SignIn = () => {
       return result;
     });
   };
+
   const signInWithGithub = (): Promise<UserCredential> => {
     const provider = new GithubAuthProvider();
     return signInWithPopup(auth, provider).then((result) => {
@@ -44,48 +43,50 @@ export const SignIn = () => {
     });
   };
 
-  
   return (
-    <>
-      <Center h="100vh" position="relative" overflow="hidden">
-        <Box
-          position="absolute"
-          top="0"
-          left="0"
-          right="0"
-          bottom="0"
-          bgImage={`url(https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279945/533e08f0-f2da-d547-bfcc-276c3123c0ec.jpeg)`}
-          bgSize="cover"
-          bgPosition="center"
-          filter="brightness(70%)"
-          zIndex="-1"
-        />
-        <Card p="10" mb="20px" maxW="lg" boxShadow="lg">
-          <CardHeader>
-            <Stack align="center">
-              <FaDoorOpen size="30px" />
-
-              <Heading size="lg" data-testid="auth-page-title">Sign in</Heading>
-              <Text mt="4" textAlign="center" fontSize="sm">
-                Please sign in with your Google or GitHub account！
-              </Text>
-            </Stack>
-          </CardHeader>
-          <Divider borderColor="gray.400"/>
-          <CardBody>
-            <Stack>
-              <Button onClick={signInWithGoogle} fontSize="20px" p="25px">
-                <FcGoogle size="30px" style={{ marginRight: "8px" }} />
-                Googleでログイン
-              </Button>
-              <Button onClick={signInWithGithub} fontSize="20px" p="25px">
-                <FaGithub size="30px" style={{ marginRight: "8px" }} />
-                Githubでログイン
-              </Button>
-            </Stack>
-          </CardBody>
-        </Card>
-      </Center>
-    </>
+    <Box
+      h="100vh"
+      bgGradient="linear(to-r, blackAlpha.500, blue.500,cyan.400)"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Card p="10" mb="20px" maxW="lg" boxShadow="xl" bgColor="gray.50" borderRadius="30px">
+        <CardHeader>
+          <Stack align="center">
+            <FaDoorOpen size="30px" />
+            <Heading size="lg" data-testid="auth-page-title">
+              Sign in
+            </Heading>
+            <Text mt="4" textAlign="center" fontSize="sm">
+              Please sign in with your Google or GitHub account！
+            </Text>
+          </Stack>
+        </CardHeader>
+        <Divider borderColor="gray.400" />
+        <CardBody>
+          <Stack>
+            <Button
+              onClick={signInWithGoogle}
+              fontSize="20px"
+              p="25px"
+              border="1px"
+            >
+              <FcGoogle size="30px" style={{ marginRight: "8px" }} />
+              Googleでログイン
+            </Button>
+            <Button
+              onClick={signInWithGithub}
+              fontSize="20px"
+              p="25px"
+              border="1px"
+            >
+              <FaGithub size="30px" style={{ marginRight: "8px" }} />
+              Githubでログイン
+            </Button>
+          </Stack>
+        </CardBody>
+      </Card>
+    </Box>
   );
 };