boxを削除

Author: KaichiManabe

web/app/login/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Button, Link, Typography } from "@mui/material";
+import { Button, Link, Typography } from "@mui/material";
 import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { useRouter } from "next/navigation";
 import { useSnackbar } from "notistack";
@@ -125,34 +125,21 @@ export default function Login() {
   return (
     <NavigateByAuthState type="toHomeForAuthenticated">
       <Header title="CourseMate" />
-      <Box
-        sx={{
-          position: "absolute",
-          top: "56px",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          overflowY: "auto",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "space-around",
-        }}
-      >
-        <Box textAlign="center">
+      <div className="absolute top-14 right-0 bottom-0 left-0 flex flex-col items-center justify-around overflow-y-auto">
+        <div className="text-center">
           <CourseMateIcon width="200px" height="200px" />
-        </Box>
-        <Box textAlign="left">
+        </div>
+        <div className="text-left">
           <Typography variant="h4">
             CourseMateを使って
             <br />
             同じ授業の人と
             <br />
             友達になろう
           </Typography>
-        </Box>
+        </div>
 
-        <Box sx={{ width: "80%" }} textAlign="center">
+        <div className="w-4/5 text-center">
           <button
             className="gsi-material-button"
             onClick={logInByGoogle}
@@ -227,8 +214,8 @@ export default function Login() {
           >
             初めての方はこちら
           </Link>
-        </Box>
-      </Box>
+        </div>
+      </div>
     </NavigateByAuthState>
   );
 }