From 95a0ccab3a41a555a28b0aa9b69d8deb238656e9 Mon Sep 17 00:00:00 2001
From: Alain Brenzikofer <alain@integritee.network>
Date: Thu, 2 May 2024 17:35:27 +0200
Subject: [PATCH] make usable with mobile

---
 app.vue                        |  2 +-
 components/CheckWalletTab.vue  | 40 +++++++++++------------
 components/Header/index.vue    | 14 ++++++--
 components/InviteFriendTab.vue | 60 +++++++++++++++++-----------------
 components/PublishonxTab.vue   |  4 +--
 5 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/app.vue b/app.vue
index c4422a6..1582f16 100644
--- a/app.vue
+++ b/app.vue
@@ -28,7 +28,7 @@ const Header = defineAsyncComponent(() => import('@/components/Header'))
 <style lang="scss">
 .page-wrapper {
   position: relative;
-  padding-top: 91px;
+  padding-top: 200px;
 }
 
 .wrapper {
diff --git a/components/CheckWalletTab.vue b/components/CheckWalletTab.vue
index 56c51f7..1cf2b14 100644
--- a/components/CheckWalletTab.vue
+++ b/components/CheckWalletTab.vue
@@ -5,29 +5,27 @@
       <div class="container">
         <div class='grid grid-rows-3 grid-flow-col gap-4'>
           <div class='text-4xl mt-10'>Shield PAS tokens to Incognitee</div>
-          <div class="grid grid-cols-2 gap-4 ">
-            <div class='text-lg'>
-              <template v-if="accountStore.paseoBalance > 0">
-                Shielding your tokens means that you send them from Paseo to Incognitee where you can then trandfer them
-                privately
+          <div class='text-lg'>
+            <template v-if="accountStore.paseoBalance > 0">
+              Shielding your tokens means that you send them from Paseo to Incognitee where you can then trandfer them
+              privately
 
-                <div class='mt-4'>
-                  <UButton class="btn btn_gradient" @click="shield">Shield PAS to Incognitee</UButton>
-                  <div>{{ txStatus }}</div>
-                </div>
-              </template>
-              <template v-else>
-                You don’t have any PAS on your new account yet. Follow the link below to obtain some PAS for free
-                from the Polkadot faucet. Use your address to claim tokens:
-                <code>{{ accountStore.getAddress }}</code>.
+              <div class='mt-4'>
+                <UButton class="btn btn_gradient" @click="shield">Shield PAS to Incognitee</UButton>
+                <div>{{ txStatus }}</div>
+              </div>
+            </template>
+            <template v-else>
+              You don’t have any PAS on your new account yet. Follow the link below to obtain some PAS for free
+              from the Polkadot faucet. Use your address to claim tokens:
+              <code>{{ accountStore.getAddress }}</code>.
 
-                <div class='mt-4'>
-                  <NuxtLink to="https://faucet.polkadot.io/paseo" target="blank" class="btn btn_gradient">Get free PAS
-                    tokens
-                  </NuxtLink>
-                </div>
-              </template>
-            </div>
+              <div class='mt-4'>
+                <NuxtLink to="https://faucet.polkadot.io/paseo" target="blank" class="btn btn_gradient">Get free PAS
+                  tokens
+                </NuxtLink>
+              </div>
+            </template>
           </div>
         </div>
       </div>
diff --git a/components/Header/index.vue b/components/Header/index.vue
index 215ceaa..122a469 100644
--- a/components/Header/index.vue
+++ b/components/Header/index.vue
@@ -4,7 +4,7 @@
       <NuxtLink to="/" class="header__logo">
         <Logo />
       </NuxtLink>
-      <div v-if="width > breakpoints.slg" class="header__nav grid grid-cols-4 gap-8 content-start ">
+      <div class="header__nav grid grid-cols-4 gap-8 content-start ">
 
 				<NuxtLink class="text-link paragraph_smll">
           <span class="gradient gradient_one">Wallet Address
@@ -18,7 +18,7 @@
           <span class="gradient gradient_one">Incognitee Balance
         </span><p>{{ accountStore.getIncogniteeHumanBalance}}</p></NuxtLink>
 
-				<NuxtLink class="text-link paragraph_smll">
+				<NuxtLink v-if="width > breakpoints.slg" class="text-link paragraph_smll">
           <span class="gradient gradient_two">Incognitee Status
         </span>
           <template v-if="incogniteeStore.apiReady">
@@ -30,7 +30,7 @@
         </NuxtLink>
 
       </div>
-      <div  class="header__nav-right">
+      <div  v-if="width > breakpoints.slg" class="header__nav-right">
         <Socials />
 
         <button v-if="width <= breakpoints.slg" class="header__burger" :class="{
@@ -261,4 +261,12 @@ onMounted(() => {
     background: rgba(81, 81, 81, 0) !important;
   }
 }
+.header__nav {
+  display: flex;
+  flex-direction: row; // default to horizontal layout
+
+  @media screen and (max-width: 660px) {
+    flex-direction: column; // switch to vertical layout on mobile
+  }
+}
 </style>
diff --git a/components/InviteFriendTab.vue b/components/InviteFriendTab.vue
index a51288d..f23401b 100644
--- a/components/InviteFriendTab.vue
+++ b/components/InviteFriendTab.vue
@@ -10,19 +10,18 @@
             available ROC from your Incognitee wallet to another wallet with an invite link. You can share this with
             your friends and let them participate.
           </div>
-          <div class="flex flex-cols-2 ">
-            <div class='mt-10 mr-8'>
-              <UButton class="btn btn_gradient" @click="inviteFriend">Invite Friend</UButton>
-            </div>
-            <div class='mt-10'>
-              <div class="flex items-center">
-                <input type="text" ref="urlToShareWithFriend" class="dynamic-width border-2 border-gray-200 p-2"
-                       style="color: black;" :value="inviteUrl" readonly>
-                <button @click="copyToClipboard" class="button ml-10">
-                  Copy
-                </button>
-              </div>
-            </div>
+
+          <div class='mt-10 mb-8'>
+            <UButton class="btn btn_gradient" @click="inviteFriend">Invite Friend</UButton>
+          </div>
+          <div class='mt-10 mb-3'>
+            <input type="text" ref="urlToShareWithFriend" class="dynamic-width border-2 border-gray-200 p-2"
+                   style="color: black;" :value="inviteUrl" readonly>
+          </div>
+          <div class='mt-3 mb-8'>
+            <button @click="copyToClipboard" class="button">
+              Copy
+            </button>
           </div>
         </div>
       </div>
@@ -34,10 +33,11 @@
 import {Keyring} from '@polkadot/keyring'
 import {mnemonicGenerate, mnemonicToMiniSecret} from '@polkadot/util-crypto'
 import {formatBalance, u8aToHex} from "@polkadot/util";
-import { ref } from 'vue';
+import {ref} from 'vue';
+
+import {useAccount} from '@/store/account.ts'
+import {useIncognitee} from '@/store/incognitee.ts'
 
-import { useAccount } from '@/store/account.ts'
-import { useIncognitee } from '@/store/incognitee.ts'
 const accountStore = useAccount()
 const incogniteeStore = useIncognitee()
 
@@ -81,27 +81,27 @@ const inviteFriend = () => {
 <style>
 .button {
   display: flex;
-padding: 14px 24px;
-align-items: flex-start;
-gap: 10px;
-border-radius: 12px;
-border: 2px solid var(--Transparent-White-20, rgba(255, 255, 255, 0.20));
-backdrop-filter: blur(30px);
+  padding: 14px 24px;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 12px;
+  border: 2px solid var(--Transparent-White-20, rgba(255, 255, 255, 0.20));
+  backdrop-filter: blur(30px);
 }
 
 .dynamic-width::after {
   width: 500px;
-    border-radius: 8px;
-    border-color: #24ad7c;
-    height: 55px;
+  border-radius: 8px;
+  border-color: #24ad7c;
+  height: 55px;
 }
 
 
-  .dynamic-width {
-    width: 500px;
-    border-radius: 8px;
-    border-color: #24ad7c;
-    height: 55px;
+.dynamic-width {
+  width: 500px;
+  border-radius: 8px;
+  border-color: #24ad7c;
+  height: 55px;
 }
 
 </style>
diff --git a/components/PublishonxTab.vue b/components/PublishonxTab.vue
index 5d9bc6f..53692e9 100644
--- a/components/PublishonxTab.vue
+++ b/components/PublishonxTab.vue
@@ -2,8 +2,8 @@
   <section id="steps">
     <div class="block steps">
       <div class="container">
-        <div class='grid grid-rows-3 grid-flow-col gap-4'>
-          <div class='text-4xl mt-10'>Publish on X</div>
+        <div class=''>
+          <div class='text-4xl mt-10 mb-10'>Publish on X</div>
           <div class='text-lg'>
             By clicking the ”Check” button, you will be redirected to the Paseo Subscan Portal,
             where you have to check for your unshielding event.