muiを削除

Author: KaichiManabe

web/components/match/matching.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { Box, List } from "@mui/material";
 import { deleteMatch } from "~/api/match";
 import { useMatched } from "~/api/user";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
@@ -14,7 +13,7 @@ export default function Matchings() {
   const { openModal } = useModal();
 
   return (
-    <Box>
+    <div>
       <p
         style={{
           marginLeft: "40px",
@@ -34,7 +33,7 @@ export default function Matchings() {
       ) : error ? (
         <p>Error: {error.message}</p>
       ) : (
-        <List>
+        <ul>
           {data?.map((matchedUser) => (
             <HumanListItem
               key={matchedUser.id}
@@ -46,8 +45,8 @@ export default function Matchings() {
               hasDots
             />
           ))}
-        </List>
+        </ul>
       )}
-    </Box>
+    </div>
   );
 }

web/components/match/myRequests.tsx

@@ -1,6 +1,4 @@
 "use client";
-import { Box } from "@mui/material";
-import { List } from "@mui/material";
 import * as request from "~/api/request";
 import { usePendingFromMe } from "~/api/user";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
@@ -12,7 +10,7 @@ export default function MyReq() {
   const { openModal } = useModal();
 
   return (
-    <Box>
+    <div>
       <p
         style={{
           marginLeft: "40px",
@@ -27,7 +25,7 @@ export default function MyReq() {
       ) : state.error ? (
         <p>Error: {state.error.message}</p>
       ) : (
-        <List>
+        <ul>
           {state.data?.map((receivingUser) => (
             <HumanListItem
               key={receivingUser.id}
@@ -40,8 +38,8 @@ export default function MyReq() {
               }}
             />
           ))}
-        </List>
+        </ul>
       )}
-    </Box>
+    </div>
   );
 }

web/components/match/othersRequests.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { Box, List } from "@mui/material";
 import request from "~/api/request";
 import { usePendingToMe } from "~/api/user";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
@@ -15,7 +14,7 @@ export default function OthersReq() {
   const { openModal } = useModal();
 
   return (
-    <Box>
+    <div>
       <p
         style={{
           marginLeft: "40px",
@@ -30,7 +29,7 @@ export default function OthersReq() {
       ) : error ? (
         <p>Error: {error.message}</p>
       ) : (
-        <List>
+        <ul>
           {data?.map((sendingUser) => (
             <HumanListItem
               key={sendingUser.id}
@@ -42,8 +41,8 @@ export default function OthersReq() {
               onReject={() => request.reject(sendingUser.id).then(reload)}
             />
           ))}
-        </List>
+        </ul>
       )}
-    </Box>
+    </div>
   );
 }