demo app style changes

Web3Auth · Sep 19, 2024 · 3e69836 · 3e69836
1 parent cc1efac
commit 3e69836
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 29 deletions.
diff --git a/demo/vue-app-new/src/MainView.vue b/demo/vue-app-new/src/MainView.vue
@@ -178,11 +178,9 @@ const configs = computed(() => {
 <template>
   <Web3AuthProvider :config="configs">
     <AppHeader />
-    <main class="flex-1 p-1">
-      <div class="relative">
-        <AppSettings />
-        <AppDashboard />
-      </div>
+    <main class="relative flex flex-col lg:h-[calc(100dvh_-_110px)]">
+      <AppSettings />
+      <AppDashboard />
     </main>
   </Web3AuthProvider>
 </template>
diff --git a/demo/vue-app-new/src/components/AppDashboard.vue b/demo/vue-app-new/src/components/AppDashboard.vue
@@ -218,12 +218,11 @@ const onSignPersonalMsg = async () => {
 </script>
 
 <template>
-  <div v-if="isDisplay('dashboard')" class="grid gap-0">
-    <div class="grid grid-cols-8 gap-0">
-      <div class="col-span-1"></div>
-      <Card class="px-4 py-4 gird col-span-2">
+  <div v-if="isDisplay('dashboard')" class="w-full h-full px-10">
+    <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 h-full">
+      <Card class="px-4 py-4 gird col-span-1 lg:col-span-2 h-full !rounded-3xl md:!rounded-r-none !shadow-none">
         <div class="mb-2">
-          <Button block size="xs" pill variant="secondary" data-testid="btnClearConsole" @click="clearConsole">
+          <Button block size="xs" pill variant="tertiary" data-testid="btnClearConsole" @click="clearConsole">
             {{ $t("app.buttons.btnClearConsole") }}
           </Button>
         </div>
@@ -244,7 +243,7 @@ const onSignPersonalMsg = async () => {
             {{ $t("app.buttons.btnShowCheckout") }}
           </Button>
         </Card>
-        <Card v-if="isDisplay('ethServices')" class="px-4 py-4 gap-4 h-auto mb-2" :shadow="false">
+        <Card v-if="isDisplay('ethServices')" class="px-4 py-4 gap-4 !h-auto lg:!h-[calc(100dvh_-_240px)]" :shadow="false">
           <div class="text-xl font-bold leading-tight text-left mb-2">Sample Transaction</div>
           <Button block size="xs" pill class="mb-2" @click="onGetAccounts">
             {{ t("app.buttons.btnGetAccounts") }}
@@ -280,7 +279,10 @@ const onSignPersonalMsg = async () => {
           </Button>
         </Card>
       </Card>
-      <Card id="console" class="px-4 py-4 col-span-4 overflow-y-auto">
+      <Card
+        id="console"
+        class="px-4 py-4 col-span-1 md:col-span-3 lg:col-span-4 overflow-y-auto h-full !rounded-3xl md:!rounded-l-none md:!border-l-0 !shadow-none"
+      >
         <pre class="whitespace-pre-line overflow-x-auto font-normal text-base leading-6 text-black break-words overflow-y-auto max-h-screen"></pre>
       </Card>
     </div>

diff --git a/demo/vue-app-new/src/components/AppHeader.vue b/demo/vue-app-new/src/components/AppHeader.vue
@@ -33,23 +33,23 @@ watch(status, () => {
 </script>
 
 <template>
-  <nav class="bg-white sticky top-0 z-50 w-full z-20 top-0 start-0 border-gray-200 dark:border-gray-600">
+  <nav class="bg-white sticky w-full z-20 top-0 start-0 border-gray-200 dark:border-gray-600">
     <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
       <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
         <img :src="`/web3auth.svg`" class="h-8" alt="W3A Logo" />
       </a>
       <div class="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
-        <Button v-if="isDisplay('btnLogout')" block size="xs" pill variant="secondary" @click="onLogout">
+        <Button v-if="isDisplay('btnLogout')" block size="xs" pill variant="tertiary" @click="onLogout">
           {{ t("app.btnLogout") }}
         </Button>
         <Button v-else block size="xs" pill variant="secondary" @click="() => {}">
           {{ t("app.documentation") }}
         </Button>
       </div>
-      <div id="navbar-sticky" class="items-center justify-between w-full md:flex md:w-auto md:order-1">
-        <div v-if="isDisplay('appHeading')" class="max-sm:w-full">
-          <h1 class="leading-tight text-3xl font-extrabold">{{ $t("app.title") }}</h1>
-          <p class="leading-tight text-1xl">{{ $t("app.description") }}</p>
+      <div id="navbar-sticky" class="items-center justify-between w-full md:flex md:w-auto md:order-1 text-center">
+        <div v-if="isDisplay('appHeading')" class="max-sm:w-full max-sm:mt-4">
+          <h1 class="leading-tight text-2xl sm:text-3xl font-bold">{{ $t("app.title") }}</h1>
+          <p class="leading-tight text-lg sm:text-xl">{{ $t("app.description") }}</p>
         </div>
       </div>
     </div>

diff --git a/demo/vue-app-new/src/components/AppSettings.vue b/demo/vue-app-new/src/components/AppSettings.vue
@@ -64,18 +64,20 @@ const isActiveTab = (index: number) => activeTab.value === index;
 <template>
   <div v-if="isDisplay('form')" class="grid grid-cols-8 gap-0">
     <div class="col-span-0 sm:col-span-1 lg:col-span-2"></div>
-    <Card class="h-auto px-8 py-8 col-span-8 sm:col-span-6 lg:col-span-4">
-      <div class="text-3xl font-bold leading-tight text-center">{{ $t("app.greeting") }}</div>
-      <div class="leading-tight font-extrabold text-center mb-12">
-        <Tag v-bind="{ minWidth: 'inherit' }">{{ status }}</Tag>
+    <Card class="h-auto p-4 sm:p-8 col-span-8 sm:col-span-6 lg:col-span-4 max-sm:!shadow-none max-sm:!border-0">
+      <div class="text-2xl sm:text-3xl font-bold leading-tight text-center">{{ $t("app.greeting") }}</div>
+      <div class="leading-tight font-extrabold text-center my-4">
+        <Tag v-bind="{ minWidth: 'inherit' }" :class="['uppercase', { '!bg-blue-400 text-white': status === 'ready' }]">{{ status }}</Tag>
         &nbsp;
-        <Tag v-bind="{ minWidth: 'inherit' }">{{ isInitialized ? "INITIALIZED" : "NOT_INITIALIZE_YET" }}</Tag>
+        <Tag v-bind="{ minWidth: 'inherit' }" :class="['uppercase', { '!bg-blue-400 text-white': isInitialized }]">
+          {{ isInitialized ? "INITIALIZED" : "NOT_INITIALIZE_YET" }}
+        </Tag>
       </div>
-      <Tabs>
-        <Tab variant="button" :active="isActiveTab(0)" @click="onTabChange(0)">General</Tab>
-        <Tab variant="button" :active="isActiveTab(1)" @click="onTabChange(1)">WhiteLabel</Tab>
-        <Tab variant="button" :active="isActiveTab(2)" @click="onTabChange(2)">Login Provider</Tab>
-        <Tab variant="button" :active="isActiveTab(3)" @click="onTabChange(3)">Wallet Plugin</Tab>
+      <Tabs class="mb-4">
+        <Tab variant="underline" :active="isActiveTab(0)" @click="onTabChange(0)">General</Tab>
+        <Tab variant="underline" :active="isActiveTab(1)" @click="onTabChange(1)">WhiteLabel</Tab>
+        <Tab variant="underline" :active="isActiveTab(2)" @click="onTabChange(2)">Login Provider</Tab>
+        <Tab variant="underline" :active="isActiveTab(3)" @click="onTabChange(3)">Wallet Plugin</Tab>
       </Tabs>
       <Card v-if="isActiveTab(0)" class="grid grid-cols-1 gap-2 py-4 px-4" :shadow="false">
         <Select
@@ -330,7 +332,7 @@ const isActiveTab = (index: number) => activeTab.value === index;
           Connect
         </Button>
       </div>
-      <div class="text-base text-app-gray-900 dark:text-app-gray-200 font-medium mt-4 mb-5 px-0">
+      <div class="text-sm text-app-gray-900 dark:text-app-gray-200 font-normal mt-4 mb-5 px-0">
         Reach out to us at
         <a class="text-app-primary-600 dark:text-app-primary-500 underline" href="mailto:hello@tor.us">hello@tor.us</a>
         or

diff --git a/demo/vue-app-new/src/style.css b/demo/vue-app-new/src/style.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  @apply h-dvh min-h-dvh w-full flex flex-col;
+}
+ #app {
+  @apply h-full w-full;
+ }