improve mobile styles

BibliothecaDAO · Oct 26, 2023 · 279bef7 · 279bef7 · vercel · Oct 26, 2023
1 parent ee30419
commit 279bef7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/ui/src/app/components/upgrade/PurchaseHealth.tsx b/ui/src/app/components/upgrade/PurchaseHealth.tsx
@@ -69,9 +69,11 @@ const PurchaseHealth = ({
 
   return (
     <div className="flex flex-col sm:flex-row gap-5 items-center">
-      <span className="flex flex-row">
-        <CoinIcon className="mt-1 w-5 h-5 fill-current text-terminal-yellow" />
-        <p className="text-terminal-yellow">{potionCost}</p>
+      <span className="flex flex-row items-center">
+        <CoinIcon className="mt-1 w-8 h-8 sm:w-5 sm:h-5 fill-current text-terminal-yellow" />
+        <p className="text-xl sm:text-base text-terminal-yellow">
+          {potionCost}
+        </p>
       </span>
       <QuantityButtons
         amount={potionAmount}
@@ -90,7 +92,19 @@ const PurchaseHealth = ({
         }
         onClick={fillToMax}
         size={"xxs"}
-        className="m-auto"
+        className="hidden sm:block m-auto"
+      >
+        Fill to Max
+      </Button>
+      <Button
+        disabled={
+          !hasBalance ||
+          adventurer?.health === maxHealth ||
+          potionAmount === max
+        }
+        onClick={fillToMax}
+        size={"sm"}
+        className="sm:hidden m-auto"
       >
         Fill to Max
       </Button>

diff --git a/ui/src/app/containers/UpgradeScreen.tsx b/ui/src/app/containers/UpgradeScreen.tsx
@@ -369,7 +369,7 @@ export default function UpgradeScreen({
           {!checkTransacting ? (
             <div className="w-full sm:w-2/3 h-full">
               <div className="flex flex-col gap-2 xl:gap-0 h-full">
-                <div className="justify-center text-terminal-green h-1/4">
+                <div className="flex flex-col gap-2 sm:gap-0 justify-center text-terminal-green h-1/3 sm:h-1/4">
                   <div className="w-full flex flex-row gap-2 mx-auto border border-terminal-green justify-between">
                     <Button
                       variant={"outline"}
@@ -466,7 +466,7 @@ export default function UpgradeScreen({
                         </span>
                       </span>
                     </div>
-                    <div className="sm:hidden flex flex-row gap-3 items-center text-lg">
+                    <div className="sm:hidden flex flex-row gap-3 py-2 items-center text-lg">
                       <span className="flex flex-row">
                         Gold:{" "}
                         <span className="flex flex-row text-terminal-yellow">
@@ -495,7 +495,7 @@ export default function UpgradeScreen({
                   </div>
                 </div>
 
-                <div className="flex flex-col h-3/4">
+                <div className="flex flex-col h-2/3 sm:h-3/4">
                   {upgradeScreen === 1 && (
                     <div className="flex flex-col sm:gap-2 items-center w-full h-full">
                       <div className="flex flex-col gap-0 sm:flex-row w-full border-terminal-green border sm:items-center h-full">
@@ -535,7 +535,7 @@ export default function UpgradeScreen({
                     </div>
                   )}
                   {upgradeScreen === 3 && (
-                    <div className="sm:hidden flex-col items-center sm:gap-2 w-full">
+                    <div className="sm:hidden flex-col items-center sm:gap-2 w-full h-full">
                       <MarketplaceScreen
                         upgradeTotalCost={upgradeTotalCost}
                         purchaseItems={purchaseItems}