responsive polish

ui/src/app/components/ArcadeDialog.tsx

@@ -35,8 +35,8 @@ export const ArcadeDialog = () => {
 
   return (
     <>
-      <div className="fixed inset-0 opacity-80 bg-terminal-black z-40 m-2" />
-      <div className="fixed text-center top-1/8 left-1/8 sm:left-1/4 w-3/4 sm:w-1/2 h-3/4 border-4 bg-terminal-black z-50 border-terminal-green p-4 overflow-y-auto">
+      <div className="fixed inset-0 opacity-80 bg-terminal-black z-40" />
+      <div className="fixed text-center sm:top-1/8 sm:left-1/8 sm:left-1/4 sm:w-3/4 sm:w-1/2 h-3/4 border-4 bg-terminal-black z-50 border-terminal-green p-4 overflow-y-auto">
         <h3 className="mt-4">Arcade Accounts</h3>
         <p className="m-2 text-sm xl:text-xl 2xl:text-2xl">
           Go deep into the mist with signature free gameplay! Simply connect
@@ -46,19 +46,19 @@ export const ArcadeDialog = () => {
         <div className="flex justify-center mb-1">
           {((connector?.options as any)?.id == "argentX" ||
             (connector?.options as any)?.id == "braavos") && (
-            <div>
-              <p className="my-2 text-sm sm:text-base text-terminal-yellow p-2 border border-terminal-yellow">
-                Note: This will initiate a transfer of 0.001 ETH from your
-                connected wallet to the arcade account to cover your transaction
-                costs from normal gameplay.
-                <br />
-                You may need to refresh after the account has been created!
-              </p>
-              <Button onClick={() => create()} disabled={isWrongNetwork}>
-                create arcade account
-              </Button>
-            </div>
-          )}
+              <div>
+                <p className="my-2 text-sm sm:text-base text-terminal-yellow p-2 border border-terminal-yellow">
+                  Note: This will initiate a transfer of 0.001 ETH from your
+                  connected wallet to the arcade account to cover your transaction
+                  costs from normal gameplay.
+                  <br />
+                  You may need to refresh after the account has been created!
+                </p>
+                <Button onClick={() => create()} disabled={isWrongNetwork}>
+                  create arcade account
+                </Button>
+              </div>
+            )}
         </div>
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4 overflow-hidden my-6">
           {arcadeConnectors().map((account, index) => {
@@ -179,13 +179,13 @@ export const ArcadeAccountCard = ({
         {!arcadeConnectors.some(
           (conn) => conn.options.options.id == masterAccount.address
         ) && (
-          <Button
-            variant={connected ? "default" : "ghost"}
-            onClick={() => transfer(account.name, masterAccount)}
-          >
-            Top Up 0.001Eth
-          </Button>
-        )}
+            <Button
+              variant={connected ? "default" : "ghost"}
+              onClick={() => transfer(account.name, masterAccount)}
+            >
+              Top Up 0.001Eth
+            </Button>
+          )}
       </div>
 
       {isCopied && <span>Copied!</span>}

ui/src/app/components/CountDown.tsx

@@ -88,11 +88,11 @@ export const PenaltyCountDown = ({
   };
 
   return (
-    <div className="text-xs sm:text-lg mt-2 sm:mt-4">
+    <div className="text-xs sm:text-lg self-center border px-1 border border-terminal-green">
       {!dataLoading ? (
         seconds > 0 ? (
           <span className="flex flex-row gap-1 items-center">
-            <p>{countingMessage}</p>
+            <p className="hidden sm:block">{countingMessage}</p>
             <p className="animate-pulse">{formatTime(seconds)}</p>
           </span>
         ) : (

ui/src/app/components/KeyboardControls.tsx

@@ -49,15 +49,15 @@ const KeyboardControl = ({ buttonsData, size, direction }: ButtonProps) => {
 
   return (
     <div
-      className={`flex ${direction === "row" ? "flex-row" : "flex-col"} w-full`}
+      className={`flex ${direction === "row" ? "flex-row" : "flex-col"} w-full justify-between`}
     >
       {buttonsData.map((buttonData, index) => (
         <Button
           onMouseEnter={buttonData.mouseEnter}
           onMouseLeave={buttonData.mouseLeave}
           key={buttonData.id}
           ref={(ref) => (buttonRefs.current[index] = ref)}
-          className={selectedIndex === index ? "animate-pulse" : ""}
+          className={`w-full ${selectedIndex === index ? "animate-pulse" : ""}`}
           variant={selectedIndex === index ? "default" : "outline"}
           onClick={() => {
             buttonData.action();

ui/src/app/components/beast/BeastDisplay.tsx

@@ -22,26 +22,24 @@ export const BeastDisplay = ({ beastData }: BeastDisplayProps) => {
 
   return (
     <div className="relative flex flex-col items-center h-full xl:h-[500px] 2xl:h-full  border-2 border-terminal-green">
-      <div className="flex flex-col w-full h-full p-1 sm:p-3 uppercase">
-        <div className="flex justify-between py-1 sm:py-3 text-xl sm:text-4xl border-b border-terminal-green">
+      <div className="flex flex-col w-full h-full sm:p-3 uppercase">
+        <div className="flex justify-between py-1 sm:py-3 text-2xl sm:text-4xl border-b border-terminal-green  px-2 ">
           {beastName}
           <div
-            className={`text-4xl flex ${
-              beastData?.health === 0 ? "text-red-600" : "text-terminal-green"
-            }`}
+            className={`text-4xl flex ${beastData?.health === 0 ? "text-red-600" : "text-terminal-green"
+              }`}
           >
-            <HeartIcon className="self-center w-6 h-6 fill-current" />{" "}
+            <HeartIcon className="self-center w-4 h-4 fill-current mr-1" />{" "}
             <div className="self-center text-xl sm:text-4xl">
               <HealthCountDown health={beastData?.health || 0} />
             </div>
           </div>
         </div>
-        <div className="flex justify-between w-full sm:py-2 ">
-          <p className="text-xl sm:text-3xl text-terminal-yellow">
+        <div className="flex justify-between w-full p-2 text-lg sm:text-3xl text-terminal-yellow">
+          <p>
             Level {beastData?.level}
           </p>
-          {/* <p className="text-3xl text-terminal-yellow">XP {beastData?.xp}</p> */}
-          <p className="text-xl sm:text-3xl text-terminal-yellow">
+          <p>
             Tier {tier}
           </p>
         </div>

ui/src/app/components/buttons/Button.tsx

@@ -27,12 +27,13 @@ const buttonVariants = cva(
       },
       size: {
         default: "sm:h-10 px-2 py-1 sm:py-2 sm:px-4 text-xs sm:text-sm",
-        xxs: "h-4 px-1 text-xs",
-        xs: "h-6 px-3 text-xs",
-        sm: "h-9 px-3 text-sm ",
-        md: "h-8 px-2 text-sm",
-        lg: "h-11 px-8 text-lg",
-        xl: "h-12 px-10 text-xl",
+        xxs: "h-4 px-1 text-xs sm:h-5 sm:px-2 sm:text-xs md:h-6 md:px-3 md:text-xs lg:h-7 lg:px-4 lg:text-xs xl:h-8 xl:px-5 xl:text-xs",
+        xs: "h-6 px-3 text-xs sm:h-7 sm:px-4 sm:text-sm md:h-8 md:px-5 md:text-sm lg:h-9 lg:px-6 lg:text-sm xl:h-10 xl:px-7 xl:text-sm",
+        sm: "h-9 px-3 text-sm sm:h-10 sm:px-4 sm:text-base md:h-11 md:px-5 md:text-base lg:h-12 lg:px-6 lg:text-base xl:h-13 xl:px-7 xl:text-base",
+        md: "h-8 px-2 text-sm sm:h-9 sm:px-3 sm:text-base md:h-10 md:px-4 md:text-base lg:h-11 lg:px-5 lg:text-lg xl:h-12 xl:px-6 xl:text-lg",
+        lg: "h-11 px-8 text-lg sm:h-12 sm:px-9 sm:text-lg md:h-13 md:px-10 md:text-lg lg:h-14 lg:px-11 lg:text-xl xl:h-15 xl:px-12 xl:text-xl",
+        xl: "h-12 px-10 text-xl sm:h-13 sm:px-11 sm:text-2xl md:h-14 md:px-12 md:text-2xl lg:h-15 lg:px-13 lg:text-2xl xl:h-16 xl:px-14 xl:text-2xl"
+
       },
     },
     defaultVariants: {
@@ -44,7 +45,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
   children: React.ReactNode;
   href?: string;
   loading?: boolean;

ui/src/app/components/icons/Icons.tsx

@@ -25,6 +25,8 @@ import { GiPowderBag } from "react-icons/gi";
 import { RiShoppingCartFill } from "react-icons/ri";
 import { TbArrowBigRight } from "react-icons/tb";
 import { TbArrowBigDownFilled } from "react-icons/tb";
+import { MdToken } from "react-icons/md";
+
 import HealthPotions from "../../../../public/icons/health-potions.svg";
 import Twitter from "../../../../public/icons/twitter.svg";
 import Trophy from "../../../../public/icons/trophy.svg";
@@ -117,6 +119,8 @@ const GithubIcon = Github;
 const ArcadeIcon = Arcade;
 const QuestionMarkIcon = QuestionMark;
 
+const MdTokenIcon = MdToken;
+
 export {
   ClothIcon,
   HideIcon,
@@ -176,4 +180,5 @@ export {
   GithubIcon,
   ArcadeIcon,
   QuestionMarkIcon,
+  MdTokenIcon,
 };

ui/src/app/components/intro/Intro.tsx

@@ -58,9 +58,9 @@ const Intro: React.FC<IntroProps> = ({ onIntroComplete }) => {
   }, [screen]);
 
   const renderScreen = (src: string, alt: string, sequence: any) => (
-    <div className="flex w-full h-full">
+    <div className="flex w-full h-full p-2">
       <Image
-        className=" absolute object-cover animate-pulse"
+        className="absolute object-cover animate-pulse"
         src={src}
         alt={alt}
         fill

ui/src/app/components/menu/HorizontalMenu.tsx

@@ -83,7 +83,7 @@ const HorizontalKeyboardControl: React.FC<HorizontalKeyboardControlProps> = ({
   }, [selectedIndex, handleKeyDown]);
 
   return (
-    <div>
+    <div className="flex justify-between sm:justify-start w-full">
       {buttonsData.map((buttonData, index) => (
         <Button
           className="px-2.5 sm:px-3"

ui/src/app/components/menu/VerticalMenu.tsx

@@ -16,6 +16,7 @@ interface VerticalKeyboardControlProps {
   isActive?: boolean;
   setActiveMenu?: (value: number) => void;
   size?: "default" | "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
 }
 
 const VerticalKeyboardControl: React.FC<VerticalKeyboardControlProps> = ({
@@ -25,6 +26,7 @@ const VerticalKeyboardControl: React.FC<VerticalKeyboardControlProps> = ({
   isActive = true,
   setActiveMenu,
   size,
+  className
 }) => {
   const { play } = useUiSounds(soundSelector.click);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -84,7 +86,7 @@ const VerticalKeyboardControl: React.FC<VerticalKeyboardControlProps> = ({
   }, [selectedIndex, handleKeyDown]);
 
   return (
-    <div className="flex flex-col w-full">
+    <div className={`${className} flex  w-full`}>
       {buttonsData.map((buttonData, index) => (
         <Button
           key={buttonData.id}
@@ -98,8 +100,8 @@ const VerticalKeyboardControl: React.FC<VerticalKeyboardControlProps> = ({
             buttonData.variant
               ? buttonData.variant
               : selectedIndex === index
-              ? "default"
-              : "outline"
+                ? "default"
+                : "outline"
           }
           size={size}
           onClick={() => {

ui/src/app/components/navigation/TxActivity.tsx

@@ -1,49 +1,19 @@
 import { useEffect, useState } from "react";
 import { useWaitForTransaction } from "@starknet-react/core";
 import { displayAddress, padAddress } from "../../lib/utils";
-import { useQueriesStore } from "../../hooks/useQueryStore";
 import useLoadingStore from "../../hooks/useLoadingStore";
 import LootIconLoader from "../icons/Loader";
 import useTransactionCartStore from "../../hooks/useTransactionCartStore";
-import { useMediaQuery } from "react-responsive";
-import { processNotifications } from "../notifications/NotificationHandler";
-import useUIStore from "@/app/hooks/useUIStore";
-import useAdventurerStore from "@/app/hooks/useAdventurerStore";
-import { DiscoveryDisplay } from "../actions/DiscoveryDisplay";
-import { NotificationBattleDisplay } from "../beast/BattleDisplay";
-import { NullAdventurer } from "@/app/types";
-import useCustomQuery from "@/app/hooks/useCustomQuery";
-import {
-  getBattleByTxHash,
-  getDiscoveryByTxHash,
-  getAdventurerById,
-} from "@/app/hooks/graphql/queries";
-import { parseEvents } from "@/app/lib/utils/parseEvents";
 import { InvokeTransactionReceiptResponse } from "starknet";
 
 export const TxActivity = () => {
-  const notificationData = useLoadingStore((state) => state.notificationData);
   const stopLoading = useLoadingStore((state) => state.stopLoading);
   const loading = useLoadingStore((state) => state.loading);
   const hash = useLoadingStore((state) => state.hash);
   const pendingMessage = useLoadingStore((state) => state.pendingMessage);
-  const txAccepted = useLoadingStore((state) => state.txAccepted);
   const setTxAccepted = useLoadingStore((state) => state.setTxAccepted);
-  const type = useLoadingStore((state) => state.type);
   const error = useTransactionCartStore((state) => state.error);
   const setError = useTransactionCartStore((state) => state.setError);
-  const hasBeast = useAdventurerStore((state) => state.computed.hasBeast);
-  const isAlive = useAdventurerStore((state) => state.computed.isAlive);
-  const adventurer = useAdventurerStore((state) => state.adventurer);
-  const setAdventurer = useAdventurerStore((state) => state.setAdventurer);
-  const deathMessage = useLoadingStore((state) => state.deathMessage);
-  const setDeathMessage = useLoadingStore((state) => state.setDeathMessage);
-  const showDeathDialog = useUIStore((state) => state.showDeathDialog);
-  const setScreen = useUIStore((state) => state.setScreen);
-  const hasStatUpgrades = useAdventurerStore(
-    (state) => state.computed.hasStatUpgrades
-  );
-  const { data: queryData, refetch, setData, resetData } = useQueriesStore();
   const { data } = useWaitForTransaction({
     hash,
     watch: true,
@@ -57,24 +27,6 @@ export const TxActivity = () => {
   const pendingArray = Array.isArray(pendingMessage);
   const [messageIndex, setMessageIndex] = useState(0);
 
-  // useCustomQuery(
-  //   "battlesByTxHashQuery",
-  //   getBattleByTxHash,
-  //   {
-  //     txHash: padAddress(hash),
-  //   },
-  //   !hash
-  // );
-
-  // useCustomQuery(
-  //   "discoveryByTxHashQuery",
-  //   getDiscoveryByTxHash,
-  //   {
-  //     txHash: padAddress(hash),
-  //   },
-  //   !hash
-  // );
-
   // stop loading when an error is caught
   useEffect(() => {
     if (error === true) {
@@ -95,7 +47,7 @@ export const TxActivity = () => {
   return (
     <>
       {loading ? (
-        <div className="flex flex-row absolute top-3 sm:top-0 sm:relative items-center gap-5 justify-between text-xs sm:text-base">
+        <div className="flex flex-row absolute sm:top-0 sm:relative items-center gap-5 justify-between text-xs sm:text-base p-2 w-full bg-terminal-black z-40">
           {hash && (
             <div className="flex flex-row gap-2">
               <span className="hidden sm:block">Hash:</span>

ui/src/app/components/start/Spawn.tsx

@@ -63,9 +63,9 @@ export const Spawn = ({ formData, spawn, handleBack }: SpawnProps) => {
           <WalletTutorial />
         </div>
       )}
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full p-2">
         <Image
-          className="mx-auto border border-terminal-green absolute  object-cover sm:py-4 sm:px-8"
+          className="mx-auto border border-terminal-green absolute object-cover sm:py-4 sm:px-8"
           src={"/scenes/intro/beast.png"}
           alt="adventurer facing beast"
           fill

ui/src/app/components/start/WeaponSelect.tsx

@@ -49,8 +49,8 @@ export const WeaponSelect = ({
     setStep(step + 1);
   };
   return (
-    <div className="w-full sm:p-8 md:p-4 2xl:flex 2xl:flex-col 2xl:gap-20 2xl:h-[700px]">
-      <h3 className="uppercase text-center 2xl:text-5xl">Choose your weapon</h3>
+    <div className="w-full p-4 sm:p-8 md:p-4 2xl:flex 2xl:flex-col 2xl:gap-20 2xl:h-[700px]">
+      <h3 className="uppercase text-center 2xl:text-5xl mb-3">Choose your weapon</h3>
       <div className="grid grid-cols-2 sm:flex flex-wrap sm:flex-row sm:justify-between gap-2 sm:gap-20 md:gap-5">
         {weapons.map((weapon) => (
           <div

ui/src/app/containers/AdventurerScreen.tsx

@@ -99,7 +99,7 @@ export default function AdventurerScreen({
           onSelected={(value) => setStartOption(value)}
           isActive={activeMenu == 0}
           setActiveMenu={setActiveMenu}
-          size={"lg"}
+          size={"xs"}
         />
       </div>
 

ui/src/app/containers/BeastScreen.tsx

@@ -164,17 +164,17 @@ export default function BeastScreen({ attack, flee }: BeastScreenProps) {
       <div className="flex flex-col gap-1 sm:gap-0 items-center sm:w-1/2 sm:p-4 order-1 text-lg">
         {isAlive && (
           <>
-            <div className="sm:hidden flex flex-row gap-2 sm:flex-col items-center justify-center">
-              <div className="flex flex-col items-center">
-                <p className="uppercase sm:text-2xl">Attack</p>
+            <div className="sm:hidden flex flex-row sm:flex-col items-center w-full">
+              <div className="flex flex-col items-center border border-terminal-green w-full">
+                <p className="uppercase sm:text-2xl mb-2">Attack</p>
                 <KeyboardControl
                   buttonsData={attackButtonsData}
                   size={"sm"}
                   direction="row"
                 />
               </div>
-              <div className="flex flex-col items-center">
-                <p className="uppercase sm:text-2xl">Flee</p>
+              <div className="flex flex-col items-center border border-terminal-green w-full">
+                <p className="uppercase sm:text-2xl mb-2">Flee</p>
                 <KeyboardControl
                   buttonsData={fleeButtonsData}
                   size={"sm"}