From c58d0c3e97aa5a7b15aa92f000b222b05480174e Mon Sep 17 00:00:00 2001
From: KalpasWang <wf6212@gmail.com>
Date: Fri, 8 Dec 2023 16:10:00 +0800
Subject: [PATCH] bugfix: fix page, button and card layout

---
 frontend/app/card-picking/page.tsx            | 38 ++++++++++---------
 frontend/app/level-select/page.tsx            |  4 +-
 .../components/investigator-card2/index.tsx   |  1 +
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/frontend/app/card-picking/page.tsx b/frontend/app/card-picking/page.tsx
index d9cae17..e298aef 100644
--- a/frontend/app/card-picking/page.tsx
+++ b/frontend/app/card-picking/page.tsx
@@ -3,23 +3,27 @@ import { investigators } from "@/config/investigators";
 
 export default function RolePickingDemo() {
   return (
-    <main className="flex flex-col w-full h-full p-4 bg-cover gap-11 bg-map">
-      <h1 className="font-bold leading-tight text-center text-outline text-7xl xl:text-8xl text-yellow">
-        Please Select a Character
-        <span className="block leading-tight tracking-[20px]">請選擇角色</span>
-      </h1>
-      <div className="grid grid-cols-4 gap-4 justify-items-center">
-        {investigators.map((investigator) => {
-          const { name, saneImage, sanity } = investigator;
-          return (
-            <InvestigatorCard
-              key={name}
-              investigator={name}
-              imgUrl={saneImage}
-              sanity={sanity}
-            />
-          );
-        })}
+    <main className="min-h-screen py-4 bg-cover bg-map">
+      <div className="container">
+        <h1 className="font-bold leading-tight text-center text-outline-4 tracking-[4px] text-7xl xl:text-8xl text-yellow">
+          Please Select a Character
+          <span className="block leading-tight tracking-[20px]">
+            請選擇角色
+          </span>
+        </h1>
+        <div className="flex flex-wrap items-center justify-center gap-4 mt-11">
+          {investigators.map((investigator) => {
+            const { name, saneImage, sanity } = investigator;
+            return (
+              <InvestigatorCard
+                key={name}
+                investigator={name}
+                imgUrl={saneImage}
+                sanity={sanity}
+              />
+            );
+          })}
+        </div>
       </div>
     </main>
   );
diff --git a/frontend/app/level-select/page.tsx b/frontend/app/level-select/page.tsx
index cc5e39e..8998828 100644
--- a/frontend/app/level-select/page.tsx
+++ b/frontend/app/level-select/page.tsx
@@ -3,7 +3,7 @@ import { levels } from "@/config/levels";
 
 export default function LevelSelectDemo() {
   return (
-    <main className="h-full pb-48 bg-cover bg-map pt-11">
+    <main className="min-h-screen pb-48 bg-cover bg-map pt-11">
       <div className="container">
         <h1 className="text-6xl font-bold leading-tight text-center text-outline-4 xl:text-8xl text-yellow tracking-[4px]">
           Please Select the Level of Difficulty
@@ -16,7 +16,7 @@ export default function LevelSelectDemo() {
             return (
               <Button
                 key={level.en}
-                className="w-full h-auto transition-opacity bg-gradient-to-r from-tertiary to-secondary rounded-3xl py-14 shadow-custom hover:opacity-90 active:opacity-90"
+                className="w-full h-auto transition-all bg-gradient-to-r from-tertiary to-secondary rounded-3xl py-14 shadow-custom hover:scale-95 active:scale-95"
                 size="lg"
               >
                 <span className="text-white font-bold tracking-[2px] text-outline-2 text-7xl xl:text-8xl">
diff --git a/frontend/components/investigator-card2/index.tsx b/frontend/components/investigator-card2/index.tsx
index 04da0cd..713484e 100644
--- a/frontend/components/investigator-card2/index.tsx
+++ b/frontend/components/investigator-card2/index.tsx
@@ -45,6 +45,7 @@ const InvestigatorCard = React.memo(function ({
     <Card
       className={cn(
         "rounded-2xl w-60 min-h-[250px] border-0 bg-gradient-to-r shadow-lg cursor-pointer transition-all",
+        "hover:scale-95 active:scale-95",
         gradientStyle[sanity],
         isSelected ? "grayscale" : "grayscale-0"
       )}