chore(nft-quest): ui improvements (#22)

* chore(nft-quest): ui improvements * chore(nft-quest): fix auth popup sizing * chore(nft-quest): ui fixes * chore: submodule update * chore: cleanup tailwindconfig
matter-labs · Dec 2, 2024 · f344b27 · f344b27
1 parent d8d1901
commit f344b27
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 58 deletions.
diff --git 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
@@ -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/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
@@ -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
@@ -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
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col justify-center px-4">
+  <div class="h-full flex flex-col justify-center items-center px-4 max-h-[550px] max-w-[300px] m-auto">
     <SessionMetadata
       :app-meta="appMeta"
       :connect="true"
@@ -29,7 +29,7 @@
       </p>
     </CommonHeightTransition>
 
-    <div class="flex flex-col gap-5 mt-8 py-8">
+    <div class="flex flex-col gap-5 py-8 w-full">
       <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
@@ -32,9 +32,10 @@
         </CommonLine>
       </div>
     </div>
+
     <SessionTokens
+      class="mt-2"
       :session="sessionConfig"
-      class="mt-1"
     />
 
     <SessionAdvancedInfo :session-config="sessionConfig" />
@@ -65,7 +66,7 @@
             data-testid="connect"
             @click="confirmConnection()"
           >
-            Connect
+            {{ isLoggedIn ? "Connect" : "Create" }}
           </ZkButton>
         </ZkHighlightWrapper>
       </div>

diff --git a/packages/auth-server/tailwind.config.js b/packages/auth-server/tailwind.config.js
@@ -15,10 +15,6 @@ export default {
   ],
   theme: {
     extend: {
-      spacing: {
-        dashboard: "1100px",
-        panel: "620px",
-      },
       fontFamily: {
         sans: ["Inter", ...defaultTheme.fontFamily.sans],
       },