From 59f4a632f3dd59c74bb4bcbc109a3715d4b3ae00 Mon Sep 17 00:00:00 2001
From: NikiTaysRD <nikitays101@gmail.com>
Date: Fri, 10 Jan 2025 17:44:30 +0200
Subject: [PATCH 1/2] feat: refactoring

---
 src/components/pages/game/game.tsx | 23 +++++++++++++----------
 src/components/ui/button.tsx       |  1 +
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/game/game.tsx b/src/components/pages/game/game.tsx
index 6d05ef6..9babe04 100644
--- a/src/components/pages/game/game.tsx
+++ b/src/components/pages/game/game.tsx
@@ -6,6 +6,7 @@ import { toast } from 'react-toastify';
 import { z } from 'zod';
 
 import Solana from '@/components/common/Svg/Solana.tsx';
+import { Button } from '@/components/ui/button.tsx';
 import useMakePrediction from '@/hooks/contracts/write/use-make-prediction';
 import useSendSol from '@/hooks/contracts/write/use-send-sol';
 import { cn } from '@/lib/utils';
@@ -67,8 +68,8 @@ export const GameSection = () => {
   }, [isSuccess, predictionAnswer, setValue, watch]);
 
   return (
-    <div className="container flex flex-col gap-[20px] py-[20px] font-inknut">
-      <div className="text-center font-bona-nova-sc text-[50px]">Your Future In One Bet</div>
+    <div className="font-inknut container flex flex-col gap-[20px] py-[20px]">
+      <div className="font-bona-nova-sc text-center text-[50px]">Your Future In One Bet</div>
 
       <div className="relative -z-50">
         {predictionAnswer && (
@@ -83,9 +84,9 @@ export const GameSection = () => {
 
       <div className="flex flex-row items-center justify-between">
         <div className="text-[24px]">Type your question and ask the cards</div>
-        <button className="rounded-[8px] border border-[#3A3939] bg-[#E8D5AF] px-[20px] py-[13px] text-[22px]">
+        <Button size="responsive" className="bg-[#D0C7A3] text-[22px]" variant="outline">
           Suggest question
-        </button>
+        </Button>
       </div>
 
       <div className="grid">
@@ -132,29 +133,31 @@ export const GameSection = () => {
           </div>
 
           {[0.002, 0.004, 0.02, 0.5].map((tip) => (
-            <div
+            <Button
               key={tip}
               onClick={() => {
                 setSelectedTip(selectedTip === tip ? 0 : tip);
               }}
               className={cn(
                 selectedTip === tip ? '!bg-[#9DA990]' : '',
-                'flex w-full items-center justify-center rounded-[8px] border border-[#3A3939] bg-[#D0C7A3] p-[14px] font-poppins text-[20px]',
+                'bg-[#D0C7A3] text-[20px]',
                 'cursor-pointer select-none',
               )}
             >
               {tip}
-            </div>
+            </Button>
           ))}
         </div>
 
-        <button
+        <Button
+          size="responsive"
           onClick={handleTip}
           disabled={isSolPending || !publicKey}
-          className="h-[60px] rounded-[8px] border border-[#3A3939] bg-[#9DA990] text-[22px] text-black disabled:text-[#4F5548]"
+          className="bg-[#9DA990] text-[22px]"
+          variant="outline"
         >
           Thank the Oracle
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8ce6212..95fa990 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -14,6 +14,7 @@ const buttonVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
       },
       size: {
+        responsive: 'px-4 py-2',
         default: 'h-10 px-4 py-2',
         sm: 'h-9 rounded-md px-3',
         lg: 'h-11 rounded-md px-8',

From 9016c471abd22cc7c78cc62f16307817efd88d88 Mon Sep 17 00:00:00 2001
From: NikiTaysRD <nikitays101@gmail.com>
Date: Fri, 10 Jan 2025 17:47:42 +0200
Subject: [PATCH 2/2] feat: refactoring

---
 src/components/pages/game/game.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/game/game.tsx b/src/components/pages/game/game.tsx
index 9babe04..9bd7ed1 100644
--- a/src/components/pages/game/game.tsx
+++ b/src/components/pages/game/game.tsx
@@ -107,22 +107,26 @@ export const GameSection = () => {
         </div>
 
         {publicKey ? (
-          <button
+          <Button
+            size="responsive"
+            variant="outline"
             onClick={handleSubmit(onSubmit)}
             disabled={isPending}
-            className="rounded-[8px] border border-[#3A3939] bg-[#9DA990] text-[22px] text-black disabled:text-[#4F5548]"
+            className="bg-[#9DA990] text-[22px]"
           >
             Make a Forecast
-          </button>
+          </Button>
         ) : (
-          <button
+          <Button
+            size="responsive"
+            variant="outline"
             onClick={() => {
               setIsOpen(true);
             }}
-            className="rounded-[8px] border border-[#3A3939] bg-[#9DA990] text-[22px] text-black disabled:text-[#4F5548]"
+            className="bg-[#9DA990] text-[22px]"
           >
             Connect Wallet
-          </button>
+          </Button>
         )}
       </div>
 
@@ -134,13 +138,15 @@ export const GameSection = () => {
 
           {[0.002, 0.004, 0.02, 0.5].map((tip) => (
             <Button
+              size="responsive"
+              variant="outline"
               key={tip}
               onClick={() => {
                 setSelectedTip(selectedTip === tip ? 0 : tip);
               }}
               className={cn(
                 selectedTip === tip ? '!bg-[#9DA990]' : '',
-                'bg-[#D0C7A3] text-[20px]',
+                'font-poppins bg-[#D0C7A3] text-[20px]',
                 'cursor-pointer select-none',
               )}
             >
@@ -151,10 +157,10 @@ export const GameSection = () => {
 
         <Button
           size="responsive"
+          variant="outline"
           onClick={handleTip}
           disabled={isSolPending || !publicKey}
           className="bg-[#9DA990] text-[22px]"
-          variant="outline"
         >
           Thank the Oracle
         </Button>