Home画面のcssを修正 (#393)

<!--変更したい場合は、`/.github/pull_request_template.md` を修正して下さい。-->
# PRの概要
Home画面のcssを修正しました。

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

## 具体的な変更内容
<!-- ビューの変更がある場合はスクショによる比較などがあるとわかりやすい -->
- ボタンサイズを大きくした
- 背景の切れていた部分の修正
- カードのwidthを大きくした
- カードのスワイプのthresholdを減少させた


https://github.com/user-attachments/assets/81875c78-3370-4081-8c26-be5ee90320a5


## 影響範囲
<!-- この関数を変更したのでこの機能にも影響がある、など -->
とくになし

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

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->
ブラウザ版横長画面のボタンが結構デカい

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

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

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

Author: GuY8528

web/src/components/Card.tsx

@@ -38,7 +38,7 @@ export function Card({ displayedUser, onFlip }: CardProps) {
     <div
       style={{
         perspective: "1000px",
-        width: "70vw",
+        width: "85vw",
         height: "70vh",
         position: "relative",
       }}

web/src/components/DraggableCard.tsx

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import type { User } from "../common/types";
 import { Card } from "./Card";
 
-const SWIPE_THRESHOLD = 200;
+const SWIPE_THRESHOLD = 125;
 
 interface DraggableCardProps {
   displayedUser: User;
@@ -57,7 +57,9 @@ export const DraggableCard = ({
   }, [dragX, dragY, onSwipeRight, onSwipeLeft]);
 
   return (
-    <section style={{ pointerEvents: dragging ? "none" : undefined }}>
+    <section
+      style={{ pointerEvents: dragging ? "none" : undefined, height: "100%" }}
+    >
       <motion.div
         drag
         dragElastic={0.9}

web/src/routes/tabs/home.tsx

@@ -98,9 +98,22 @@ export default function Home() {
   }
 
   return (
-    <div style={{ backgroundColor: getBackgroundColor(dragValue) }}>
+    <div
+      style={{
+        backgroundColor: getBackgroundColor(dragValue),
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+      }}
+    >
       {displayedUser ? (
-        <Box display="flex" flexDirection="column" alignItems="center">
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          height="100%"
+        >
           <DraggableCard
             displayedUser={displayedUser}
             onSwipeLeft={handleReject}
@@ -113,7 +126,9 @@ export default function Home() {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "space-around",
-              width: "50%",
+              width: "100%",
+              height: "100%",
+              marginBottom: "10px",
             }}
           >
             <RoundButton onclick={handleReject} icon={<CloseIconStyled />} />
@@ -144,17 +159,16 @@ const RoundButton = ({ onclick, icon }: RoundButtonProps) => {
 
 const ButtonStyle = {
   borderRadius: "50%",
-  width: "7vw",
-  height: "auto",
-  margin: "10px",
+  width: "15vw",
+  height: "15vw",
   boxShadow: shadows[10],
   backgroundColor: "white",
 };
 
 const CloseIconStyled = () => {
-  return <CloseIcon style={{ color: "grey", fontSize: "5vw" }} />;
+  return <CloseIcon style={{ color: "grey", fontSize: "10vw" }} />;
 };
 
 const FavoriteIconStyled = () => {
-  return <FavoriteIcon style={{ color: "red", fontSize: "5vw" }} />;
+  return <FavoriteIcon style={{ color: "red", fontSize: "10vw" }} />;
 };