マッチ画面のメッセージも統一

Author: nakaterm

web/app/friends/page.tsx

@@ -15,7 +15,7 @@ export default function Friends() {
   const [activeTab, setActiveTab] = useState("matching");
 
   return (
-    <div className="relative w-full">
+    <div className="relative h-full w-full">
       <div className="fixed top-12 flex h-10 w-full border-gray-200 border-b bg-white">
         <button
           type="button"
@@ -43,7 +43,7 @@ export default function Friends() {
         </button>
       </div>
 
-      <div className="pt-10 text-center text-gray-700 text-lg">
+      <div className="h-full pt-10 text-center text-gray-700 text-lg">
         {activeTab === "matching" ? <NoSSRMatchings /> : <NoSSRRequests />}
       </div>
     </div>

web/components/match/matching.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { deleteMatch } from "~/api/match";
 import { useMatched } from "~/api/user";
+import BackgroundText from "../common/BackgroundText";
 import FullScreenCircularProgress from "../common/FullScreenCircularProgress";
 import { useModal } from "../common/modal/ModalProvider";
 import { HumanListItem } from "../human/humanListItem";
@@ -15,16 +16,14 @@ export default function Matchings() {
   if (error) throw error;
 
   return (
-    <div>
+    <div className="h-full">
       {data && data.length === 0 && (
-        <p className="p-4 text-lg">
-          誰ともマッチングしていません。 リクエストを送りましょう！
-        </p>
+        <BackgroundText text="まだ誰ともマッチングしていません。リクエストを送りましょう！" />
       )}
       {current === "loading" ? (
         <FullScreenCircularProgress />
       ) : (
-        <ul className="mt-4 space-y-4">
+        <ul className="space-y-4">
           {data?.map((matchedUser) =>
             matchedUser.id === 0 ? (
               //メモ帳