Setting 画面のスタイルを修正 (#437)

# PRの概要

- Setting 画面の上部のナビゲーションを共通化した。
- 「あなたのカード」画面の構成を修正した。

<!-- 変更の目的 もしくは 関連する Issue 番号 -->
<!-- 以下のように書くと Issue にリンクでき、マージ時に自動で Issue を閉じられる-->
<!-- closes #1 -->

- close #436

## 具体的な変更内容

<img width="424" alt="image"
src="https://github.com/user-attachments/assets/ce95b25d-3f0b-4b22-97f9-07c9baac630c">



## 影響範囲

Setting 画面。

## 動作要件
<!-- 動作に必要な 環境変数 / 依存関係 / DBの更新 など -->

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->

## レビューリクエストを出す前にチェック！

- [x] 改めてセルフレビューしたか
- [x] 手動での動作検証を行ったか
- [x] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [x] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [x] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

web/src/routes/tabs/settings/aboutUs.tsx

@@ -1,49 +1,26 @@
-import { ArrowBack, GitHub, Language } from "@mui/icons-material";
+import { GitHub, Language } from "@mui/icons-material";
 import XIcon from "@mui/icons-material/X";
-import { Box, IconButton, Link, Typography } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { Box, Link, Typography } from "@mui/material";
+import TopNavigation from "./components/TopNavigation";
 
 export default function AboutUs() {
-  const navigate = useNavigate();
-
   return (
     <Box
       sx={{
-        padding: "20px",
+        padding: "8px",
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
         position: "relative",
       }}
     >
-      <IconButton
-        sx={{
-          position: "absolute",
-          top: "20px",
-          left: "20px",
-        }}
-        onClick={() => navigate("/settings")}
-      >
-        <ArrowBack />
-      </IconButton>
-
+      <TopNavigation title="About Us" />
       <Box
         sx={{
           width: "100%",
           maxWidth: "600px",
           padding: "30px",
         }}
       >
-        <Typography
-          variant="h5"
-          component="h3"
-          gutterBottom
-          sx={{ fontWeight: "bold", mb: "24px" }}
-        >
-          About Us
-        </Typography>
         <Typography
           variant="h6"
           gutterBottom

web/src/routes/tabs/settings/components/TopNavigation.tsx

@@ -0,0 +1,45 @@
+import { ArrowBack } from "@mui/icons-material";
+import { Box, IconButton, Typography } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+/**
+ * Settings の子ページから Setting に戻るナビゲーションを提供
+ */
+export default function TopNavigation({ title }: { title: string }) {
+  const navigate = useNavigate();
+  return (
+    <Box
+      py={1}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        // 主に profile ページ向け。calc(画面縦幅 - カード縦幅 - ヘッダー幅 - ボトムナビ幅 - ページの py - 編集ボタンの高さ)。
+        height: "min(56px, calc(100dvh - 70dvh - 56px - 56px - 16px - 36px))",
+      }}
+    >
+      <IconButton
+        onClick={() => {
+          navigate("/settings");
+        }}
+      >
+        <ArrowBack />
+      </IconButton>
+      <Typography
+        variant="h5"
+        component="h1"
+        sx={{
+          fontWeight: "bold",
+          // タイトルを中央に寄せる。矢印が左にしかないため。
+          position: "absolute",
+          left: "50%",
+          transform: "translateX(-50%)",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {title}
+      </Typography>
+    </Box>
+  );
+}

web/src/routes/tabs/settings/contact.tsx

@@ -1,43 +1,23 @@
-import { ArrowBack } from "@mui/icons-material";
-import { Box, Button, IconButton, Typography } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { Box, Button, Typography } from "@mui/material";
+import TopNavigation from "./components/TopNavigation";
 
 export default function Contact() {
-  const navigate = useNavigate();
-
   return (
     <Box
       sx={{
-        padding: "20px",
+        padding: "8px",
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
       }}
     >
-      <IconButton
-        sx={{ position: "absolute", top: "20px", left: "20px" }}
-        onClick={() => navigate("/settings")}
-      >
-        <ArrowBack />
-      </IconButton>
-
+      <TopNavigation title="お問い合わせ" />
       <Box
         sx={{
           width: "100%",
           padding: "30px",
           textAlign: "left",
         }}
       >
-        <Typography
-          variant="h5"
-          component="h2"
-          gutterBottom
-          sx={{ fontWeight: "bold", mb: "24px", textAlign: "center" }}
-        >
-          お問い合わせ
-        </Typography>
-
         <Typography sx={{ mb: "16px", lineHeight: "1.8" }}>
           ご利用いただきありがとうございます。サービスに関するご意見やバグ報告がございましたら、以下のリンクからお問い合わせください。皆様のフィードバックは、サービスの改善に役立てさせていただきます。
         </Typography>

web/src/routes/tabs/settings/disclaimer.tsx

@@ -1,27 +1,16 @@
-import { ArrowBack } from "@mui/icons-material";
-import { Box, IconButton, Typography } from "@mui/material";
-import { useNavigate } from "react-router-dom";
+import { Box, Typography } from "@mui/material";
+import TopNavigation from "./components/TopNavigation";
 
 export default function Disclaimer() {
-  const navigate = useNavigate();
-
   return (
     <Box
       sx={{
-        padding: "20px",
+        padding: "8px",
         display: "flex",
         flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
       }}
     >
-      <IconButton
-        sx={{ position: "absolute", top: "20px", left: "20px" }}
-        onClick={() => navigate("/settings")}
-      >
-        <ArrowBack />
-      </IconButton>
-
+      <TopNavigation title="免責事項" />
       <Box
         sx={{
           width: "100%",
@@ -30,15 +19,6 @@ export default function Disclaimer() {
           textAlign: "left",
         }}
       >
-        <Typography
-          variant="h5"
-          component="h1"
-          gutterBottom
-          sx={{ fontWeight: "bold", mb: "24px", textAlign: "center" }}
-        >
-          免責事項
-        </Typography>
-
         <Typography
           variant="body1"
           paragraph

web/src/routes/tabs/settings/profile.tsx

@@ -1,12 +1,12 @@
-import { ArrowBack } from "@mui/icons-material";
 import EditIcon from "@mui/icons-material/Edit";
-import { Box, IconButton, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAboutMe } from "../../../api/user";
 ("../../../api/user");
 import { Card } from "../../../components/Card";
 import FullScreenCircularProgress from "../../../components/common/FullScreenCircularProgress";
+import TopNavigation from "./components/TopNavigation";
 
 export default function Profile() {
   const { state } = useAboutMe();
@@ -29,59 +29,44 @@ export default function Profile() {
   }
 
   return (
-    <>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        padding: "8px",
+      }}
+    >
+      <TopNavigation title="あなたのカード" />
       <Box
         sx={{
-          padding: "8px",
+          flex: 1,
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          justifyContent: "center",
-          textAlign: "center",
         }}
       >
-        <IconButton
-          sx={{ position: "absolute", top: "8px", left: "20px", zIndex: 10 }}
-          onClick={() => {
-            navigate("/settings");
-          }}
-        >
-          <ArrowBack />
-        </IconButton>
         <Box
           sx={{
             width: "100%",
-            maxWidth: "600px",
-            padding: "8px 8px 0px 8px",
-            position: "relative",
+            display: "flex",
+            justifyContent: "flex-end",
           }}
         >
-          <Typography
-            variant="h5"
-            component="h3"
-            gutterBottom
-            sx={{ fontWeight: "bold" }}
-          >
-            あなたのカード
-          </Typography>
-          <Box
+          <Button
+            onClick={() => navigate(back ? "/edit/courses" : "/edit/profile")}
+            startIcon={<EditIcon />}
             sx={{
-              position: "absolute",
-              top: "0px",
-              right: "32px",
+              paddingRight: "0px",
+              // (画面幅 - カード幅) / 2 - profile の padding
+              marginRight:
+                "calc(calc(calc(100vw - min(40dvh, 87.5vw)) / 2) - 8px)",
             }}
           >
-            <IconButton
-              onClick={() => navigate(back ? "/edit/courses" : "/edit/profile")}
-            >
-              <EditIcon sx={{ color: "#039BE5" }} fontSize="large" />
-            </IconButton>
-          </Box>
+            編集する
+          </Button>
         </Box>
-      </Box>
-      <Box sx={{ display: "flex", justifyContent: "center", width: "100%" }}>
         <Card displayedUser={data} onFlip={(back) => setBack(back)} />
       </Box>
-    </>
+    </Box>
   );
 }