From 8077bd38c5007e6bd19aa47d57f3715206d1b65a Mon Sep 17 00:00:00 2001
From: Sabrina Ferguson <sf@matterlabs.dev>
Date: Tue, 26 Nov 2024 11:55:44 -0500
Subject: [PATCH] chore(nft-quest): improve styling

---
 .../nft-quest/components/TransferZeek.vue     | 44 ++++++++++---------
 examples/nft-quest/components/zk/button.vue   |  2 +-
 examples/nft-quest/nuxt.config.ts             |  2 +-
 examples/nft-quest/pages/index.vue            | 44 ++++++++++---------
 examples/nft-quest/pages/mint/index.vue       |  8 ++--
 examples/nft-quest/pages/mint/share.vue       |  8 ++--
 .../auth-server/components/views/Auth.vue     |  2 +-
 .../views/confirmation/RequestSession.vue     |  6 ++-
 8 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/examples/nft-quest/components/TransferZeek.vue b/examples/nft-quest/components/TransferZeek.vue
index d3f30110..9b2e5c78 100644
--- a/examples/nft-quest/components/TransferZeek.vue
+++ b/examples/nft-quest/components/TransferZeek.vue
@@ -19,34 +19,38 @@
       </span>
       <span class="text-sm text-neutral-500 leading-3">The NFT is minted and sent using a Paymaster and a Session key.</span>
     </div>
-    <ZkInput
-      v-model="walletAddress"
-      placeholder="Wallet address"
-      required
-    />
-    <div class="flex flex-col lg:flex-row items-center gap-4 pt-3">
-      <ZkLink
-        v-if="successMint"
-        :to="transactionURL"
-        target="_blank"
-        type="secondary"
-        class="w-full lg:mt-0"
-      >
-        Transaction details
-        <ZkIcon
-          icon="open_in_new"
-          class="text-base leading-tight align-text-bottom ml-2 -my-0.5"
+    <div class="flex flex-col xl:flex-row justify-between gap-2">
+      <div class="basis-5/6">
+        <ZkInput
+          v-model="walletAddress"
+          placeholder="Wallet address"
+          required
         />
-      </ZkLink>
+      </div>
       <ZkButton
         type="primary"
-        class="uppercase w-full"
+        class="uppercase min-w-[240px] w-full basis-2/6"
         :loading="status === 'pending'"
         @click="mintForFriend"
       >
-        Mint and send {{ successMint ? "again" : "" }}
+        <div class="w-max">
+          Mint and send {{ successMint ? "again" : "" }}
+        </div>
       </ZkButton>
     </div>
+    <ZkLink
+      v-if="successMint"
+      :to="transactionURL"
+      target="_blank"
+      type="secondary"
+      class="w-full mt-3"
+    >
+      Transaction details
+      <ZkIcon
+        icon="open_in_new"
+        class="text-base leading-tight align-text-bottom ml-2 -my-0.5"
+      />
+    </ZkLink>
   </div>
 </template>
 
diff --git a/examples/nft-quest/components/zk/button.vue b/examples/nft-quest/components/zk/button.vue
index 24d471e1..86acdb0c 100644
--- a/examples/nft-quest/components/zk/button.vue
+++ b/examples/nft-quest/components/zk/button.vue
@@ -9,7 +9,7 @@
     >
       <slot name="prefix" />
     </div>
-    <span :class="twMerge('inline-block py-3', ui?.base)"><slot /></span>
+    <span :class="twMerge('inline-block py-2 w-max', ui?.base)"><slot /></span>
     <div
       v-if="$slots.postfix"
       :class="twMerge('button-fix ml-1 -mr-2', ui?.postfix)"
diff --git a/examples/nft-quest/nuxt.config.ts b/examples/nft-quest/nuxt.config.ts
index 17c970c2..70ae9239 100644
--- a/examples/nft-quest/nuxt.config.ts
+++ b/examples/nft-quest/nuxt.config.ts
@@ -18,7 +18,7 @@ export default defineNuxtConfig({
   colorMode: {
     preference: "dark",
   },
-  devtools: { enabled: false },
+  devtools: { enabled: true },
   // required for dealing with bigInt
   nitro: {
     esbuild: {
diff --git a/examples/nft-quest/pages/index.vue b/examples/nft-quest/pages/index.vue
index 7b60eac4..fdb0f7fc 100644
--- a/examples/nft-quest/pages/index.vue
+++ b/examples/nft-quest/pages/index.vue
@@ -6,35 +6,37 @@
           <BlurFade
             in-view
             :delay="0"
-            class="inline"
+            class="block sm:inline text-center sm:text-pretty"
           >
-            <span class="text-[45px] font-bold tracking-tighter dark:text-white leading-1">
+            <span class="text-[40px] font-bold tracking-tighter dark:text-white leading-1 text-center">
               Smart wallets on the Elastic Chain.
             </span>
           </BlurFade>
 
-          <BlurFade
-            in-view
-            :delay="550"
-            class="inline"
-          >
-            <span class="text-[45px] font-bold tracking-tighter leading-1 text-blue-400">
-              Click.
-            </span>
-          </BlurFade>
-          <BlurFade
-            in-view
-            :delay="950"
-            class="inline"
-          >
-            <span class="text-[45px] font-bold tracking-tighter leading-1 text-blue-700">
-              Connect.
-            </span>
-          </BlurFade>
+          <div class="sm:inline text-center sm:text-pretty">
+            <BlurFade
+              in-view
+              :delay="550"
+              class="inline text-center sm:text-pretty"
+            >
+              <span class="text-[40px] font-bold tracking-tighter leading-1 text-blue-400">
+                Click.
+              </span>
+            </BlurFade>
+            <BlurFade
+              in-view
+              :delay="1050"
+              class="inline text-center sm:text-pretty"
+            >
+              <span class="text-[40px] font-bold tracking-tighter leading-1 text-blue-700">
+                Connect.
+              </span>
+            </BlurFade>
+          </div>
         </div>
         <BlurFade
           in-view
-          :delay="1450"
+          :delay="50"
           class="flex flex-col sm:inline items-center"
         >
           <p class=" mt-8 text-neutral-400 max-w-prose">
diff --git a/examples/nft-quest/pages/mint/index.vue b/examples/nft-quest/pages/mint/index.vue
index 2a176221..43e5ee5f 100644
--- a/examples/nft-quest/pages/mint/index.vue
+++ b/examples/nft-quest/pages/mint/index.vue
@@ -6,24 +6,24 @@
         :delay="0"
         class="block"
       >
-        <span class="text-[45px] font-bold tracking-tighter dark:text-white leading-1">
+        <span class="text-[40px] font-bold tracking-tighter dark:text-white leading-1">
           Mint your NFT.&nbsp;
         </span>
       </BlurFade>
 
       <BlurFade
         in-view
-        :delay="650"
+        :delay="350"
         class="inline"
       >
-        <span class="text-[45px] font-bold tracking-tighter leading-1 text-blue-600">
+        <span class="text-[40px] font-bold tracking-tighter leading-1 text-blue-600">
           For free.
         </span>
       </BlurFade>
     </div>
     <BlurFade
       in-view
-      :delay="650"
+      :delay="50"
       class="inline"
     >
       <p class="mt-8 text-neutral-400 max-w-prose">
diff --git a/examples/nft-quest/pages/mint/share.vue b/examples/nft-quest/pages/mint/share.vue
index b1e77a21..dbb6e9cf 100644
--- a/examples/nft-quest/pages/mint/share.vue
+++ b/examples/nft-quest/pages/mint/share.vue
@@ -16,26 +16,26 @@
         :delay="0"
         class="inline"
       >
-        <span class="text-[45px] font-bold tracking-tighter dark:text-white leading-1">
+        <span class="text-[40px] font-bold tracking-tighter dark:text-white leading-1">
           You've got Zeek.
         </span>
       </BlurFade>
       <GradualSpacing
         v-if="showBanner"
-        class="text-[45px] font-bold tracking-tighter leading-1 text-blue-600"
+        class="text-[40px] font-bold tracking-tighter leading-1 text-blue-600"
         text="SSO Simple."
         :delay-multiple="25"
       />
       <div
         v-else
-        class="text-[45px] font-bold tracking-tighter leading-1 text-neutral-950"
+        class="text-[40px] font-bold tracking-tighter leading-1 text-neutral-950"
       >
         <!-- To prevent the weird bump in spacing when the gradualSpacing runs. -->
         &nbsp;
       </div>
       <BlurFade
         in-view
-        :delay="650"
+        :delay="50"
         class="inline"
       >
         <div class="h-full">
diff --git a/packages/auth-server/components/views/Auth.vue b/packages/auth-server/components/views/Auth.vue
index 2497802e..6acf44bd 100644
--- a/packages/auth-server/components/views/Auth.vue
+++ b/packages/auth-server/components/views/Auth.vue
@@ -29,7 +29,7 @@
       </p>
     </CommonHeightTransition>
 
-    <div class="flex flex-col gap-5 mt-8 py-8">
+    <div class="flex flex-col gap-5 mt-8 py-8 w-[300px] m-auto">
       <ZkHighlightWrapper>
         <ZkButton
           class="w-full"
diff --git a/packages/auth-server/components/views/confirmation/RequestSession.vue b/packages/auth-server/components/views/confirmation/RequestSession.vue
index a7cb3829..f60b663f 100644
--- a/packages/auth-server/components/views/confirmation/RequestSession.vue
+++ b/packages/auth-server/components/views/confirmation/RequestSession.vue
@@ -32,7 +32,11 @@
         </CommonLine>
       </div>
     </div>
-    <SessionTokens :session="sessionConfig" />
+
+    <SessionTokens
+      class="mt-2"
+      :session="sessionConfig"
+    />
 
     <SessionAdvancedInfo :session-config="sessionConfig" />