From 4f7c3e8d4fb3f0642f9574085f6594f96365f0e9 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Tue, 29 Oct 2024 20:27:00 +0100
Subject: [PATCH] reduce margins globally to compress mobile appearance on
 small displays

---
 components/ui/NetworkSelector.vue              |  6 +++---
 components/ui/PublicPrivateBalanceSwitcher.vue |  2 +-
 layouts/default.vue                            |  4 ++--
 pages/index.vue                                | 13 +++++++------
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/ui/NetworkSelector.vue b/components/ui/NetworkSelector.vue
index 96e41ae..a5562f7 100644
--- a/components/ui/NetworkSelector.vue
+++ b/components/ui/NetworkSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-row justify-between w-full text-center gap-4 container mb-10"
+    class="flex flex-row justify-between w-full text-center gap-4 container mb-4"
   >
     <!-- TEER Box -->
     <div
@@ -17,7 +17,7 @@
       <p class="text-xs">TEER</p>
       <span
         class="inline-flex items-center rounded-lg bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600"
-        >coming soon</span
+        >soon</span
       >
       <div class="ribbon red"><span>beta</span></div>
     </div>
@@ -47,7 +47,7 @@
       <p class="text-xs">USDC</p>
       <span
         class="inline-flex items-center rounded-lg bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600"
-        >coming soon</span
+        >soon</span
       >
     </div>
   </div>
diff --git a/components/ui/PublicPrivateBalanceSwitcher.vue b/components/ui/PublicPrivateBalanceSwitcher.vue
index 54bd711..d44c51d 100644
--- a/components/ui/PublicPrivateBalanceSwitcher.vue
+++ b/components/ui/PublicPrivateBalanceSwitcher.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-incognitee-blue mt-10">
+  <div class="w-full bg-incognitee-blue mt-4">
     <div
       class="border bg-incognitee-blue border-incognitee-green rounded-lg p-1"
     >
diff --git a/layouts/default.vue b/layouts/default.vue
index 113d757..e96cd51 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <header class="header bg-gray-800 text-white py-4">
+    <header class="header bg-gray-800 text-white py-1">
       <div class="header-content mx-auto flex items-center justify-between">
         <!-- Logo -->
         <Incognitee class="logo" />
@@ -60,7 +60,7 @@
       <nav class="footer-content container mx-auto">
         <div class="container">
           <div
-            class="flex mt-10 fixed left-0 right-0 bottom-10 mb-2 w-full px-4 rounded justify-around z-30"
+            class="flex mt-10 fixed left-0 right-0 bottom-10 mb-2 w-full px-4 rounded justify-around z-5"
           >
             <div class="container custom-border-gradient">
               <div class="inner-box">
diff --git a/pages/index.vue b/pages/index.vue
index 302549a..8cec7c8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,21 +3,21 @@
     v-if="enableActions"
     :onClick="openGuessTheNumberOverlay"
     :isMobile="isMobile"
-    textMobile="Guess-The-Number Campaign."
+    textMobile="Guess-The-Number"
     textDesktop="Join the Guess-The-Number Campaign and win some juicy prizes."
   />
 
   <InfoBanner
     v-if="!enableActions"
     :isMobile="isMobile"
-    textMobile="This page is not yet live for mainnet. please visit <a href='https://try.incognitee.io'>try.incognitee.io</a> for the latest version of our paseo testnet wallet"
+    textMobile="This page is not yet live for mainnet"
     textDesktop="This page is not yet live for mainnet. please visit <a href='https://try.incognitee.io'>try.incognitee.io</a> for the latest version of our paseo testnet wallet"
   />
 
   <InfoBanner
     v-if="!enableActions"
     :isMobile="isMobile"
-    textMobile="If you are looking for our TEERDAYS page, please follow <a href='/teerdays'>this link</a>"
+    textMobile="Looking for <a href='/teerdays'>TEERdays</a>?"
     textDesktop="If you are looking for our TEERDAYS page, please follow <a href='/teerdays'>this link</a>"
   />
 
@@ -54,7 +54,7 @@
             </div>
           </div>
         </div>
-        <div class="mt-10">
+        <div class="mt-5">
           <div
             class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
           >
@@ -144,7 +144,7 @@
             }}</span>
           </div>
         </div>
-        <div class="mt-10">
+        <div class="mt-5">
           <div
             class="inner-box flex justify-around text-white py-2 bg-gray-800 rounded-md"
           >
@@ -859,6 +859,7 @@
         accountStore.getDecimalBalanceTransferable(incogniteeSidechain) >
         INCOGNITEE_GTN_GUESS_FEE
       "
+      class="mb-4"
     >
       <form class="" @submit.prevent="submitGuessForm">
         <!-- Label for the input -->
@@ -886,7 +887,7 @@
             />
 
             <!-- Fee description below input, right-aligned -->
-            <div class="absolute right-0 -bottom-5">
+            <div class="text-left right-0">
               <span class="text-xs text-gray-400"
                 >Fee: {{ formatDecimalBalance(INCOGNITEE_GTN_GUESS_FEE) }}
                 {{ accountStore.getSymbol }} for Incognitee</span