Update UI to match MUI Themes

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Themprovider"]
+}

components/footer.tsx

@@ -1,18 +1,20 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Button, ButtonGroup, Typography } from "@mui/material";
 import * as React from "react";
+import GitHubIcon from "@mui/icons-material/GitHub";
 
 export default function Footer() {
   return (
     <Box>
-      <Typography>
-        <a
+      <ButtonGroup variant="outlined" aria-label="outlined button group">
+        <Button
           href="https://github.com/ItsukiKigoshi/itsukikigoshi.github.io"
           target="_blank"
+          startIcon={<GitHubIcon />}
         >
           Source
-        </a>
-        ・<a href="/salespolicy">特定商取引法に基づく表記</a>
-      </Typography>
+        </Button>
+        ・<Button href="/salespolicy">特定商取引法に基づく表記</Button>
+      </ButtonGroup>
     </Box>
   );
 }

src/app/salespolicy/page.tsx

@@ -1,30 +1,64 @@
 import * as React from "react";
 import CottageIcon from "@mui/icons-material/Cottage";
-import { Typography, Box, Button } from "@mui/material";
+import {
+  Typography,
+  Box,
+  Button,
+  TableContainer,
+  TableRow,
+  TableCell,
+  TableBody,
+  Table,
+  Paper,
+} from "@mui/material";
 
 export default function App() {
+  function createData(title: string, content: string) {
+    return { title, content };
+  }
+
+  const rows = [
+    createData("販売業社の名称/運営統括責任者", "Itsuki KIGOSHI"),
+    createData("所在地/住所", "請求があったら遅滞なく開示します"),
+    createData("e-mail", "[email protected]"),
+    createData("引渡時期", "注文後すぐにご利用いただけます"),
+    createData("手数料等の追加料金", "なし"),
+    createData("決済手段", "クレジットカード"),
+    createData("決済期間", "直ちに処理されます"),
+    createData("販売価格", "なし"),
+    createData(
+      "返金ポリシー",
+      "注文日より10日以内に代表（e-mail:[email protected]）までご連絡頂いた場合に限り，返金を受け付けます．"
+    ),
+  ];
   return (
     <Box
       sx={{
         display: "grid",
         placeItems: "center", // Center the content horizontally and vertically
         minHeight: "80vh", // Set a minimum height to fill the entire viewport
+        m: 5,
       }}
     >
       {/* The codes below should be more readable */}
       <Typography sx={{ fontSize: 28 }}>特定商取引法に基づく表記</Typography>
-      <Typography>販売業社の名称/運営統括責任者: Itsuki KIGOSHI</Typography>
-      <Typography>所在地/住所: 請求があったら遅滞なく開示します</Typography>
-      <Typography>e-mail: [email protected]</Typography>
-      <Typography>引渡時期: 注文後すぐにご利用いただけます</Typography>
-      <Typography>追加手数料等の追加料金: なし</Typography>
-      <Typography>決済手段: クレジットカード</Typography>
-      <Typography>決済期間: 直ちに処理されます</Typography>
-      <Typography>販売価格: なし</Typography>
-      <Typography>
-        返金ポリシー: 注文日より10日以内に代表（e-mail:
-        [email protected]）までご連絡頂いた場合に限り，返金を受け付けます．
-      </Typography>
+      <TableContainer component={Paper}>
+        <Table sx={{ minWidth: 650 }}>
+          <TableBody>
+            {rows.map((row) => (
+              <TableRow
+                key={row.title}
+                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+              >
+                <TableCell component="th" scope="row">
+                  {row.title}
+                </TableCell>
+                <TableCell>{row.content}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
       <Button href="/" variant="contained" startIcon={<CottageIcon />}>
         Go Home
       </Button>