From e668b766020a782e38d8bcd888a494fb0c027463 Mon Sep 17 00:00:00 2001
From: teegoood <teegooodgood@gmail.com>
Date: Wed, 27 Mar 2024 22:05:04 +0700
Subject: [PATCH] refactor: overlay sizing

---
 apps/web/src/app/(screen)/overlay/page.tsx | 32 +++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/app/(screen)/overlay/page.tsx b/apps/web/src/app/(screen)/overlay/page.tsx
index 9de8670..d4e1e63 100644
--- a/apps/web/src/app/(screen)/overlay/page.tsx
+++ b/apps/web/src/app/(screen)/overlay/page.tsx
@@ -4,23 +4,23 @@ import QrCode from "../display/components/QrCode";
 
 const OverLay = () => {
     return ( 
-        <div className="bg-[#00FF00] w-screen h-screen text-white text-[50px] font-semibold p-32 flex flex-col justify-between">
+        <div className="bg-[#00FF00] w-screen h-screen text-white text-[40px] font-semibold p-28 flex flex-col justify-between">
             <div className="flex justify-between">
                 <div className="flex flex-col items-center gap-10">
                     <Image
                         src="user/logo.svg"
-                        width={200}
-                        height={360}
+                        width={120}
+                        height={120}
                         alt="live feedback"
                     />
-                    <QrCode size="[260px]" />
+                    <QrCode size="[200px]" />
                 </div>
                 <div className="flex flex-col items-center gap-[50px]">
                     <div className="flex flex-col items-center gap-10">
                         <Image
                             src="user/live.svg"
-                            width={150}
-                            height={150}
+                            width={100}
+                            height={100}
                             alt="live feedback"
                         />
                         <span>LIVE FEEDBACK</span>
@@ -28,41 +28,41 @@ const OverLay = () => {
                     <div className="flex gap-[40px]">
                         <Image
                             src="user/sgcu.svg"
-                            width={140}
-                            height={140}
+                            width={120}
+                            height={120}
                             alt="sgcu"
                         />
                         <Image
                             src="user/isd.svg"
-                            width={140}
-                            height={140}
+                            width={120}
+                            height={120}
                             alt="isd"
                         />
                     </div>
                 </div>
             </div>
             <div>
-                <div className="flex justify-between">
-                    <div>
+                <div className="flex justify-between mb-4">
+                    <div className="flex flex-col items-center">
                         <Image
                             src="overlay/team-cu.svg"
-                            width={170}
+                            width={140}
                             height={140}
                             alt="cu-team"
                         />
                         <span>#ทีมจุฬาฯ</span>
                     </div>
-                    <div>
+                    <div className="flex flex-col items-center">
                         <Image
                             src="overlay/team-tu.svg"
-                            width={170}
+                            width={140}
                             height={140}
                             alt="tu-team"
                         />
                         <span>#ทีมมธ</span>
                     </div>
                 </div>
-                <FootBallSlider sliderHeight='32' ballSize='64' />
+                <FootBallSlider sliderHeight='[50px]' ballSize='64' />
             </div>
         </div>
     );