Merge branch 'main' into memo

Author: KaichiManabe

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" />
 );

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>