Skip to content

Commit cfe80f4

Browse files
aster-voidaster-void
committed
merge main
2 parents 486eb4d + 7b85df1 commit cfe80f4

23 files changed

+441
-844
lines changed

‎web/app/chat/page.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22

3-
import { Typography } from "@mui/material";
43
import { useSearchParams } from "next/navigation";
54
import { Suspense } from "react";
65
import { useRoomsOverview } from "~/api/chat/hooks";
@@ -31,7 +30,7 @@ function ChatListContent() {
3130
) : state.current === "loading" ? (
3231
<FullScreenCircularProgress />
3332
) : state.current === "error" ? (
34-
<Typography color="error">Error: {state.error.message}</Typography>
33+
<p className="decoration-red">Error: {state.error.message}</p>
3534
) : (
3635
<RoomList roomsData={state.data} />
3736
);

‎web/app/home/layout.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Box } from "@mui/material";
21
import BottomBar from "~/components/BottomBar";
32
import Header from "~/components/Header";
43

@@ -10,21 +9,9 @@ export default function HomePageLayout({
109
return (
1110
<>
1211
<Header title="ホーム/Home" />
13-
<Box
14-
sx={{
15-
position: "absolute", // TODO: absolute 指定しない
16-
top: {
17-
xs: "56px",
18-
sm: "64px",
19-
},
20-
bottom: "56px",
21-
left: 0,
22-
right: 0,
23-
overflowY: "auto",
24-
}}
25-
>
12+
<div className="relative top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
2613
{children}
27-
</Box>
14+
</div>
2815
<BottomBar activeTab="0_home" />
2916
</>
3017
);

‎web/app/login/page.tsx‎

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22

3-
import { Box, Button, Link, Typography } from "@mui/material";
43
import type { GUID } from "common/types";
54
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
65
import { useRouter } from "next/navigation";
@@ -125,34 +124,21 @@ export default function Login() {
125124
return (
126125
<NavigateByAuthState type="toHomeForAuthenticated">
127126
<Header title="CourseMate" />
128-
<Box
129-
sx={{
130-
position: "absolute",
131-
top: "56px",
132-
bottom: 0,
133-
left: 0,
134-
right: 0,
135-
overflowY: "auto",
136-
display: "flex",
137-
flexDirection: "column",
138-
alignItems: "center",
139-
justifyContent: "space-around",
140-
}}
141-
>
142-
<Box textAlign="center">
127+
<div className="absolute top-14 right-0 bottom-0 left-0 flex flex-col items-center justify-around overflow-y-auto">
128+
<div className="text-center">
143129
<CourseMateIcon width="200px" height="200px" />
144-
</Box>
145-
<Box textAlign="left">
146-
<Typography variant="h4">
130+
</div>
131+
<div className="text-left">
132+
<h1 className="font-semibold text-3xl">
147133
CourseMateを使って
148134
<br />
149135
同じ授業の人と
150136
<br />
151137
友達になろう
152-
</Typography>
153-
</Box>
138+
</h1>
139+
</div>
154140

155-
<Box sx={{ width: "80%" }} textAlign="center">
141+
<div className="w-4/5 text-center">
156142
<button
157143
className="gsi-material-button"
158144
onClick={logInByGoogle}
@@ -219,16 +205,15 @@ export default function Login() {
219205
</div>
220206
</button>
221207
<br />
222-
<Link
223-
component={Button}
208+
<button
209+
type="button"
224210
onClick={singUpByGoogle}
225-
mt={2}
226-
underline="none"
211+
className="mt-2 text-blue-600 hover:underline"
227212
>
228213
初めての方はこちら
229-
</Link>
230-
</Box>
231-
</Box>
214+
</button>
215+
</div>
216+
</div>
232217
</NavigateByAuthState>
233218
);
234219
}

‎web/app/signup/page.tsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22

3-
import { Box } from "@mui/material";
43
import { useSnackbar } from "notistack";
54
import { useState } from "react";
65

@@ -78,19 +77,10 @@ function Registration() {
7877
export default function RegistrationPage() {
7978
return (
8079
<NavigateByAuthState type="toHomeForAuthenticated">
81-
<Box
82-
sx={{
83-
position: "absolute",
84-
top: "56px",
85-
bottom: 0,
86-
left: 0,
87-
right: 0,
88-
overflowY: "auto",
89-
}}
90-
>
80+
<div className="absolute top-14 right-0 bottom-0 left-0 overflow-y-auto">
9181
<Header title="登録/Register" />
9282
<Registration />
93-
</Box>
83+
</div>
9484
</NavigateByAuthState>
9585
);
9686
}

‎web/app/signup/steps/step4_course.tsx‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { Typography } from "@mui/material";
2-
import { Box } from "@mui/system";
31
import Link from "next/link";
42
import { useMyID } from "~/api/user";
53
import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
@@ -9,37 +7,26 @@ export default function Step4() {
97
const { state } = useMyID();
108
return (
119
<>
12-
<Box>
10+
<div>
1311
{state.current === "loading" ? (
1412
<FullScreenCircularProgress />
1513
) : state.current === "error" ? (
1614
<p>Error: {state.error.message}</p>
1715
) : (
18-
<Box mt={2} mx={2} display="flex" flexDirection="column" gap={2}>
19-
<Typography variant="h6" component="h1">
20-
授業情報の登録 (スキップ可)
21-
</Typography>
22-
<Box>
16+
<div className="mx-4 mt-4 flex flex-col gap-4">
17+
<h1>授業情報の登録 (スキップ可)</h1>
18+
<div>
2319
<EditableCoursesTable userId={state.data} />
24-
</Box>
25-
</Box>
20+
</div>
21+
</div>
2622
)}
27-
</Box>
28-
<Box
29-
p={3}
30-
sx={{
31-
position: "fixed",
32-
display: "flex",
33-
justifyContent: "space-between",
34-
bottom: 0,
35-
width: "100%",
36-
}}
37-
>
23+
</div>
24+
<div className="b-0 fixed flex w-full justify-between p-6">
3825
<span />
3926
<Link href="/tutorial" className="btn btn-primary">
4027
次へ
4128
</Link>
42-
</Box>
29+
</div>
4330
</>
4431
);
4532
}

‎web/app/tutorial/page.tsx‎

Lines changed: 11 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22

3-
import { Box, Typography } from "@mui/material";
43
import { Navigation, Pagination } from "swiper/modules";
54
import { Swiper, SwiperSlide } from "swiper/react";
65
import "swiper/css";
@@ -42,68 +41,36 @@ const tutorialSteps = [
4241

4342
export default function Tutorial() {
4443
return (
45-
<Box
46-
sx={{
47-
padding: "20px",
48-
display: "flex",
49-
flexDirection: "column",
50-
position: "absolute",
51-
top: "56px",
52-
bottom: 0,
53-
left: 0,
54-
right: 0,
55-
overflowY: "auto",
56-
}}
57-
>
44+
<div className="absolute inset-0 flex flex-col overflow-y-auto px-5 pt-14">
5845
<Header title="チュートリアル/Tutorial" />
59-
<Box
60-
sx={{
61-
textAlign: "left",
62-
}}
63-
>
46+
<div className="text-left">
6447
<Swiper
6548
modules={[Navigation, Pagination]}
6649
spaceBetween={50}
6750
slidesPerView={1}
6851
navigation
6952
pagination={{ clickable: true }}
70-
style={{
71-
paddingBottom: "60px",
72-
}}
53+
className="pb-16"
7354
>
7455
{tutorialSteps.map((step) => (
7556
<SwiperSlide key={step.imgPath}>
76-
<Box sx={{ textAlign: "center", mb: "24px" }}>
77-
<Typography
78-
variant="h6"
79-
component="h1"
80-
gutterBottom
81-
sx={{ fontWeight: "bold", mb: "16px" }}
82-
>
83-
{step.label}
84-
</Typography>
57+
<div className="mb-6 text-center">
58+
<h1 className="mb-4 font-bold text-lg">{step.label}</h1>
8559
<img
8660
src={step.imgPath}
8761
alt={step.label}
88-
style={{
89-
display: "block",
90-
width: "60vw",
91-
height: "calc(60vw·*·(667·/·375))",
92-
maxWidth: 400,
93-
overflow: "hidden",
94-
margin: "auto",
95-
}}
62+
className="mx-auto block h-auto w-[60vw] max-w-[400px]"
9663
/>
97-
</Box>
64+
</div>
9865
</SwiperSlide>
9966
))}
10067
</Swiper>
101-
<Box sx={{ textAlign: "center" }}>
68+
<div className="text-center">
10269
<Link href="/home" className="btn btn-primary w-full">
10370
ホーム画面へ
10471
</Link>
105-
</Box>
106-
</Box>
107-
</Box>
72+
</div>
73+
</div>
74+
</div>
10875
);
10976
}

0 commit comments

Comments
 (0)