Skip to content

Commit 9f25001

Browse files
nakatermnakaterm
committed
settings 周りの MUI → daisyUI 移行
1 parent 028b3b8 commit 9f25001

File tree

5 files changed

+83
-221
lines changed

5 files changed

+83
-221
lines changed

‎web/app/settings/aboutUs/page.tsx‎

Lines changed: 46 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,81 @@
1-
import { GitHub, Language } from "@mui/icons-material";
2-
import XIcon from "@mui/icons-material/X";
3-
import { Box, Link, Typography } from "@mui/material";
1+
import { FaGithub, FaXTwitter } from "react-icons/fa6";
2+
import { MdLanguage } from "react-icons/md";
43
import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
54
import TopNavigation from "~/components/common/TopNavigation";
65

76
export default function AboutUs() {
87
return (
98
<NavigateByAuthState type="toLoginForUnauthenticated">
10-
<Box
11-
sx={{
12-
padding: "8px",
13-
display: "flex",
14-
flexDirection: "column",
15-
position: "relative",
16-
}}
17-
>
9+
<div className="relative flex flex-col p-2">
1810
<TopNavigation title="About Us" />
19-
<Box
20-
sx={{
21-
width: "100%",
22-
maxWidth: "600px",
23-
padding: "30px",
24-
}}
25-
>
26-
<Typography
27-
variant="h6"
28-
gutterBottom
29-
sx={{ textAlign: "left", textDecoration: "underline" }}
30-
>
11+
<div className="w-full p-8">
12+
<h1 className="mb-2 text-left text-xl underline">
3113
CourseMateについて
32-
</Typography>
33-
<Typography sx={{ mb: "24px", lineHeight: "1.6", textAlign: "left" }}>
14+
</h1>
15+
<div className="mb-6 text-left">
3416
大学の授業を受けている際に、一緒に受ける友達がいなくて困ったことはありませんか？
3517
「友達がいないから授業をサボるようになってしまった」、「過去問を共有してくれる人がいない」
3618
などの東大生の悩みを解決したいと思い、CourseMateは開発されました。CourseMateを使うことで
3719
みなさまの大学生活がより良くなれば幸いです。ぜひ知り合いの方々に広めていただければと思っています。
38-
</Typography>
39-
40-
<Box sx={{ mt: "20px", mb: "20px" }}>
41-
<Link
20+
</div>
21+
<div className="my-5">
22+
<a
4223
href="https://github.com/ut-code/CourseMate"
4324
target="_blank"
44-
sx={{
45-
display: "flex",
46-
mb: "16px",
47-
textDecoration: "none",
48-
color: "inherit",
49-
"&:hover": { color: "#000000" },
50-
}}
25+
rel="noreferrer"
26+
className="mb-4 flex"
5127
>
52-
<GitHub sx={{ mr: "8px" }} /> CourseMate の GitHub
53-
</Link>
54-
<Link
28+
<FaGithub className="mr-2 text-2xl" /> CourseMate の GitHub
29+
</a>
30+
<a
5531
href="https://x.com/course_mate"
5632
target="_blank"
57-
sx={{
58-
display: "flex",
59-
textDecoration: "none",
60-
color: "inherit",
61-
"&:hover": { color: "#000000" },
62-
}}
33+
rel="noreferrer"
34+
className="mb-4 flex"
6335
>
64-
<XIcon sx={{ mr: "8px" }} /> CourseMate の X (旧 Twitter)
65-
</Link>
66-
</Box>
36+
<FaXTwitter className="mr-2 text-2xl" /> CourseMate の X (旧
37+
Twitter)
38+
</a>
39+
</div>
6740

68-
<Typography
69-
variant="h6"
70-
gutterBottom
71-
sx={{ textAlign: "left", textDecoration: "underline" }}
72-
>
41+
<h1 className="mb-2 text-left text-xl underline">
7342
ut.code();について
74-
</Typography>
75-
<Typography sx={{ mb: "24px", lineHeight: "1.6", textAlign: "left" }}>
43+
</h1>
44+
<div className="mb-6 text-left">
7645
ut.code();は、2019年設立の東京大学のソフトウェアエンジニアリングコミュニティです。
7746
「学習」、「交流」、「開発」の三つを活動の軸としており、さまざまなアプリを開発しています。
78-
</Typography>
79-
80-
<Box sx={{ mt: "20px" }}>
81-
<Link
47+
</div>
48+
<div className="mt-5">
49+
<a
8250
href="https://utcode.net"
8351
target="_blank"
84-
sx={{
85-
display: "flex",
86-
mb: "16px",
87-
textDecoration: "none",
88-
color: "inherit",
89-
"&:hover": { color: "#000000" },
90-
}}
52+
rel="noreferrer"
53+
className="mb-4 flex"
9154
>
92-
<Language sx={{ mr: "8px" }} /> ut.code(); の ウェブサイト
93-
</Link>
94-
95-
<Link
55+
<MdLanguage className="mr-2 text-2xl" /> ut.code(); の
56+
ウェブサイト
57+
</a>
58+
<a
9659
href="https://github.com/ut-code"
9760
target="_blank"
98-
sx={{
99-
display: "flex",
100-
mb: "16px",
101-
textDecoration: "none",
102-
color: "inherit",
103-
"&:hover": { color: "#000000" },
104-
}}
61+
rel="noreferrer"
62+
className="mb-4 flex"
10563
>
106-
<GitHub sx={{ mr: "8px" }} /> ut.code(); の GitHub
107-
</Link>
64+
<FaGithub className="mr-2 text-2xl" /> ut.code(); の GitHub
65+
</a>
10866

109-
<Link
67+
<a
11068
href="https://x.com/utokyo_code"
11169
target="_blank"
112-
sx={{
113-
display: "flex",
114-
textDecoration: "none",
115-
color: "inherit",
116-
"&:hover": { color: "#000000" },
117-
}}
70+
rel="noreferrer"
71+
className="mb-4 flex"
11872
>
119-
<XIcon sx={{ mr: "8px" }} /> ut.code(); の X (旧 Twitter)
120-
</Link>
121-
</Box>
122-
</Box>
123-
</Box>
73+
<FaXTwitter className="mr-2 text-2xl" /> ut.code(); の X (旧
74+
Twitter)
75+
</a>
76+
</div>
77+
</div>
78+
</div>
12479
</NavigateByAuthState>
12580
);
12681
}

‎web/app/settings/delete/page.tsx‎

Lines changed: 8 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
"use client";
22

3-
import { ArrowBack } from "@mui/icons-material";
4-
import { Box, IconButton, Typography } from "@mui/material";
5-
import Link from "next/link";
63
import { useRouter } from "next/navigation";
74
import { useSnackbar } from "notistack";
85
import { useCallback } from "react";
96
import { deleteAccount } from "~/api/user";
7+
import TopNavigation from "~/components/common/TopNavigation";
108
import { useAlert } from "~/components/common/alert/AlertProvider";
119

1210
export default function DeleteAccount() {
@@ -36,43 +34,12 @@ export default function DeleteAccount() {
3634
}, [showAlert, enqueueSnackbar, router.push]);
3735

3836
return (
39-
<Box
40-
sx={{
41-
padding: "20px",
42-
display: "flex",
43-
flexDirection: "column",
44-
alignItems: "center",
45-
justifyContent: "center",
46-
}}
47-
>
48-
<IconButton
49-
LinkComponent={Link}
50-
sx={{ position: "absolute", top: "20px", left: "20px" }}
51-
href="/settings"
52-
>
53-
<ArrowBack />
54-
</IconButton>
55-
56-
<Box
57-
sx={{
58-
width: "100%",
59-
padding: "30px",
60-
textAlign: "left",
61-
}}
62-
>
63-
<Typography
64-
variant="h5"
65-
component="h2"
66-
gutterBottom
67-
sx={{ fontWeight: "bold", mb: "24px", textAlign: "center" }}
68-
>
69-
アカウント削除
70-
</Typography>
71-
72-
<Typography sx={{ mb: "16px", lineHeight: "1.8", color: "red" }}>
37+
<div className="flex flex-col p-2">
38+
<TopNavigation title="アカウント削除" />
39+
<div className="w-full p-8 text-left">
40+
<p className="mb-4 text-red-500 leading-7">
7341
アカウントを削除した場合、マッチングやチャットに関する情報の一切が削除されます。
74-
</Typography>
75-
42+
</p>
7643
<div className="text-center">
7744
<button
7845
type="button"
@@ -82,7 +49,7 @@ export default function DeleteAccount() {
8249
アカウントを削除する
8350
</button>
8451
</div>
85-
</Box>
86-
</Box>
52+
</div>
53+
</div>
8754
);
8855
}

‎web/app/settings/disclaimer/page.tsx‎

Lines changed: 12 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,29 @@
1-
import { Box, Typography } from "@mui/material";
21
import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
32
import TopNavigation from "~/components/common/TopNavigation";
43

54
export default function Disclaimer() {
65
return (
76
<NavigateByAuthState type="toLoginForUnauthenticated">
8-
<Box
9-
sx={{
10-
padding: "8px",
11-
display: "flex",
12-
flexDirection: "column",
13-
}}
14-
>
7+
<div className="flex flex-col p-2">
158
<TopNavigation title="免責事項" />
16-
<Box
17-
sx={{
18-
width: "100%",
19-
maxWidth: "600px",
20-
padding: "30px",
21-
textAlign: "left",
22-
}}
23-
>
24-
<Typography
25-
variant="body1"
26-
paragraph
27-
sx={{ lineHeight: 1.8, mb: "16px" }}
28-
>
9+
<div className="w-full p-8 text-left">
10+
<p className="mb-4 leading-7">
2911
本サービスはut.code();によって運営されており、東京大学は運営に関与しておりません。本サービスは東大生のみを対象としており、ECCSアカウントによるログインが必須です。
30-
</Typography>
12+
</p>
3113

32-
<Typography
33-
variant="body1"
34-
paragraph
35-
sx={{ lineHeight: 1.8, mb: "16px" }}
36-
>
14+
<p className="mb-4 leading-7">
3715
本サービスの機能の利用に伴ういかなるトラブルや損害について、ut.code();は一切の責任を負いかねます。利用者の自己責任においてご利用ください。
38-
</Typography>
16+
</p>
3917

40-
<Typography
41-
variant="body1"
42-
paragraph
43-
sx={{ lineHeight: 1.8, mb: "16px" }}
44-
>
18+
<p className="mb-4 leading-7">
4519
本サービスで収集した個人情報は、サインインおよびサービス提供の目的にのみ使用され、他の目的には使用されません。
46-
</Typography>
20+
</p>
4721

48-
<Typography
49-
variant="body1"
50-
paragraph
51-
sx={{ lineHeight: 1.8, mb: "16px" }}
52-
>
22+
<p className="mb-4 leading-7">
5323
本サービスを通じて他の利用者と接触した際のトラブルや、マッチングを通じて生じた問題等に関しても、ut.code();は責任を負いません。ご理解とご協力をお願いいたします。
54-
</Typography>
55-
</Box>
56-
</Box>
24+
</p>
25+
</div>
26+
</div>
5727
</NavigateByAuthState>
5828
);
5929
}

‎web/app/settings/profile/page.tsx‎

Lines changed: 14 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
"use client";
22

3-
import EditIcon from "@mui/icons-material/Edit";
4-
import { Box, Button, Typography } from "@mui/material";
53
import Link from "next/link";
64
import { useState } from "react";
5+
import { MdEdit } from "react-icons/md";
76
import { useAboutMe } from "~/api/user";
87
import { Card } from "~/components/Card";
98
import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
@@ -22,50 +21,30 @@ export default function SettingsProfile() {
2221
{loading ? (
2322
<FullScreenCircularProgress />
2423
) : error ? (
25-
<Typography color="error">Error: {error.message}</Typography>
24+
<p className="text-error">エラーが発生しました。{error.message}</p>
2625
) : !data ? (
27-
<Typography>データがありません。</Typography>
26+
<p>データがありません。</p>
2827
) : (
29-
<Box
30-
sx={{
31-
display: "flex",
32-
flexDirection: "column",
33-
padding: "8px",
34-
}}
35-
>
28+
<div className="flex flex-col p-2">
3629
<TopNavigation title="あなたのカード" />
37-
<Box
38-
sx={{
39-
flex: 1,
40-
display: "flex",
41-
flexDirection: "column",
42-
alignItems: "center",
43-
}}
44-
>
45-
<Box
46-
sx={{
47-
width: "100%",
48-
display: "flex",
49-
justifyContent: "flex-end",
50-
}}
51-
>
52-
<Button
53-
LinkComponent={Link}
30+
<div className="flex flex-1 flex-col items-center">
31+
<div className="flex w-full justify-end">
32+
<Link
33+
className="btn btn-sm flex items-center border-none bg-white px-1 text-primary shadow-none"
5434
href={back ? "/edit/courses" : "/edit/profile"}
55-
startIcon={<EditIcon />}
56-
sx={{
57-
paddingRight: "0px",
35+
style={{
5836
// (画面幅 - カード幅) / 2 - profile の padding
5937
marginRight:
6038
"calc(calc(calc(100vw - min(40dvh, 87.5vw)) / 2) - 8px)",
6139
}}
6240
>
41+
<MdEdit className="text-lg" />
6342
編集する
64-
</Button>
65-
</Box>
43+
</Link>
44+
</div>
6645
<Card displayedUser={data} onFlip={(back) => setBack(back)} />
67-
</Box>
68-
</Box>
46+
</div>
47+
</div>
6948
)}
7049
</NavigateByAuthState>
7150
);

0 commit comments

Comments
 (0)