From dd3dad8ed3fddf9d9e0908f821f07b4da1941232 Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Sat, 30 Nov 2024 19:04:29 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=8F=E3=83=BC=E3=83=88=E8=A6=81=E7=B4=A0?=
 =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4=E3=81=97=E3=81=9F=20(#536)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# PRの概要
close #490

## 具体的な変更内容
<img width="857" alt="スクリーンショット 2024-11-30 16 54 19"
src="https://github.com/user-attachments/assets/d5bbd984-375a-44d9-b51a-99b57086c804">


## 影響範囲

## 動作要件

## 補足

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

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

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->
---
 web/app/home/page.tsx            | 21 +++++++++++++++------
 web/components/DraggableCard.tsx | 17 ++++-------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/web/app/home/page.tsx b/web/app/home/page.tsx
index dcb643ed..fbfaf64e 100644
--- a/web/app/home/page.tsx
+++ b/web/app/home/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import CloseIcon from "@mui/icons-material/Close";
-import FavoriteIcon from "@mui/icons-material/Favorite";
 import { motion, useAnimation } from "framer-motion";
 import { useCallback, useEffect, useState } from "react";
+import { MdThumbUp } from "react-icons/md";
 import request from "~/api/request";
 import { useMyID, useRecommended } from "~/api/user";
 import { Card } from "~/components/Card";
@@ -33,7 +33,7 @@ export default function Home() {
     if (displayedUser?.id) request.send(displayedUser.id);
   }, [displayedUser?.id]);
 
-  const onClickCross = useCallback(() => {
+  const onClickClose = useCallback(() => {
     setClickedButton("cross");
     controls
       .start({
@@ -102,8 +102,8 @@ export default function Home() {
               </div>
             )}
             <div className="button-container mt-4 mb-4 flex w-full justify-center space-x-8">
-              <RoundButton onclick={onClickCross} icon={<CloseIconStyled />} />
-              <RoundButton
+              <CloseButton onclick={onClickClose} icon={<CloseIconStyled />} />
+              <GoodButton
                 onclick={onClickHeart}
                 icon={<FavoriteIconStyled />}
               />
@@ -120,7 +120,16 @@ interface RoundButtonProps {
   icon: JSX.Element;
 }
 
-const RoundButton = ({ onclick, icon }: RoundButtonProps) => (
+const CloseButton = ({ onclick, icon }: RoundButtonProps) => (
+  <button
+    type="button"
+    onClick={onclick}
+    className="btn btn-circle bg-white shadow-md"
+  >
+    {icon}
+  </button>
+);
+const GoodButton = ({ onclick, icon }: RoundButtonProps) => (
   <button
     type="button"
     onClick={onclick}
@@ -133,5 +142,5 @@ const RoundButton = ({ onclick, icon }: RoundButtonProps) => (
 const CloseIconStyled = () => <CloseIcon className="text-4xl text-gray-500" />;
 
 const FavoriteIconStyled = () => (
-  <FavoriteIcon className="text-4xl text-red-500" />
+  <MdThumbUp className="text-3xl text-primary" />
 );
diff --git a/web/components/DraggableCard.tsx b/web/components/DraggableCard.tsx
index 91de23e9..130d5a5e 100644
--- a/web/components/DraggableCard.tsx
+++ b/web/components/DraggableCard.tsx
@@ -1,9 +1,9 @@
 import CloseIcon from "@mui/icons-material/Close";
-import FavoriteIcon from "@mui/icons-material/Favorite";
 import { Box, Typography } from "@mui/material";
 import type { User, UserID } from "common/types";
 import { motion, useMotionValue, useMotionValueEvent } from "framer-motion";
 import { useCallback, useState } from "react";
+import { MdThumbUp } from "react-icons/md";
 import { Card } from "./Card";
 
 const SWIPE_THRESHOLD = 30;
@@ -51,17 +51,8 @@ export const DraggableCard = ({
       <div>
         {dragProgress > SWIPE_THRESHOLD || clickedButton === "heart" ? (
           <div
-            style={{
-              position: "absolute",
-              zIndex: 2,
-              backgroundColor: "rgba(255, 0, 0, 0.3)",
-              width: "min(40dvh, 87.5vw)",
-              height: "70dvh",
-              pointerEvents: "none",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
+            className="pointer-events-none absolute z-20 flex h-[70dvh] w-[min(40dvh,87.5vw)] items-center justify-center"
+            style={{ backgroundColor: "rgba(3, 155, 229, 0.4)" }}
           >
             <Box
               display="flex"
@@ -73,7 +64,7 @@ export const DraggableCard = ({
               width={"16dvh"}
               height={"16dvh"}
             >
-              <FavoriteIcon style={{ color: "red", fontSize: "4.5dvh" }} />
+              <MdThumbUp className="text-5xl text-primary" />
               <Typography variant="h5" component="h1" mb={1}>
                 いいね！
               </Typography>