style: adjust level button, letter spacing, title font size and spacing

Game-as-a-Service · Dec 26, 2023 · 956940c · 956940c
1 parent b0b5766
commit 956940c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 11 deletions.
diff --git a/frontend/app/card-picking/page.tsx b/frontend/app/card-picking/page.tsx
@@ -3,9 +3,9 @@ import { investigators } from "@/config/investigators";
 
 export default function RolePickingDemo() {
   return (
-    <main className="min-h-full py-4 bg-cover bg-map">
+    <main className="min-h-full py-8 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">
+        <h1 className="font-bold leading-tight text-center text-outline-4 tracking-[4px] text-5xl xl:text-6xl 2xl:text-7xl text-yellow">
           Please Select a Character
           {/* <span className="block leading-tight tracking-[20px]">請選擇角色</span> */}
         </h1>

diff --git a/frontend/app/level-setup/page.tsx b/frontend/app/level-setup/page.tsx
@@ -3,20 +3,22 @@ import { levels } from "@/config/levels";
 
 export default function LevelSelectDemo() {
   return (
-    <main className="min-h-full pb-48 bg-cover bg-map pt-11">
+    <main className="min-h-full py-8 bg-cover bg-map">
       <div className="container">
         <h1 className="text-5xl font-bold leading-tight text-center text-outline-4 xl:text-6xl 2xl:text-7xl text-yellow tracking-[4px]">
           Please Select the Level of Difficulty
           {/* <span className="block leading-tight tracking-[20px]">請選擇難度</span> */}
         </h1>
-        <div className="grid grid-rows-3 gap-16 pt-16 justify-items-center">
+        <div className="grid grid-rows-3 grid-cols-1 gap-6 xl:gap-10 2xl:gap-12 mt-11 justify-items-center">
           {levels.map((level) => {
             return (
-              <Button key={level.label} variant="gradient" className="w-full h-36 xl:h-48 2xl:h-56">
-                <span className="text-white font-bold tracking-[2px] text-outline-2 text-5xl xl:text-6xl 2xl:text-7xl">
-                  {level.label}
-                </span>
-              </Button>
+              <div className="w-full lg:px-10 xl:px-20 2xl:px-32" key={level.label}>
+                <Button variant="gradient" className="w-full h-28 xl:h-36 2xl:h-44">
+                  <span className="text-white font-bold tracking-[2px] text-outline-2 text-4xl xl:text-5xl 2xl:text-6xl">
+                    {level.label}
+                  </span>
+                </Button>
+              </div>
             );
           })}
         </div>

diff --git a/frontend/components/investigator-card2/index.tsx b/frontend/components/investigator-card2/index.tsx
@@ -71,7 +71,7 @@ const InvestigatorCard = React.memo(function ({
         </div>
       </CardHeader>
       <CardFooter className="w-full gap-3 justify-center align-center relative py-2 px-4 min-h-[45px]">
-        <CardTitle className="text-2xl text-white capitalize font-display">
+        <CardTitle className="text-2xl tracking-wider text-white capitalize font-display">
           {investigator}
         </CardTitle>
         <div className="absolute right-1 bottom-1">

diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         gradient:
-          "bg-gradient-to-r from-tertiary to-secondary rounded-3xl shadow-custom hover:scale-99 active:scale-99 transition-all",
+          "bg-gradient-to-r from-tertiary to-secondary rounded-xl shadow-custom hover:scale-99 active:scale-99 transition-all",
       },
       size: {
         default: "h-10 px-4 py-2",