Merge branch 'dev' of https://github.com/RedDuck-Software/ai-tarot-web …

…into feat/ui-improvements
RedDuck-Software · Jan 10, 2025 · bfd1a25 · bfd1a25
2 parents bcb9d4f + c9d1538
commit bfd1a25
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git 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';
@@ -110,8 +111,8 @@ export const GameSection = () => {
   }, [isPending]);
 
   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 && (
@@ -134,9 +135,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">
@@ -157,22 +158,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>
 
@@ -183,29 +188,33 @@ export const GameSection = () => {
           </div>
 
           {[0.002, 0.004, 0.02, 0.5].map((tip) => (
-            <div
+            <Button
+              size="responsive"
+              variant="outline"
               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]',
+                'font-poppins bg-[#D0C7A3] text-[20px]',
                 'cursor-pointer select-none',
               )}
             >
               {tip}
-            </div>
+            </Button>
           ))}
         </div>
 
-        <button
+        <Button
+          size="responsive"
+          variant="outline"
           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]"
         >
           Thank the Oracle
-        </button>
+        </Button>
       </div>
     </div>
   );

diff --git 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',