From e7c82a5d81e19e85ae7fb46a628eaa1be99906a8 Mon Sep 17 00:00:00 2001
From: "tai.nguyen" <tai.tan849@gmail.com>
Date: Fri, 14 Jan 2022 10:54:10 +0700
Subject: [PATCH 1/4] Improve UI for example sidebar

---
 examples/vue-app/src/home.vue | 105 +++++++++++++++++++++-------------
 1 file changed, 64 insertions(+), 41 deletions(-)

diff --git a/examples/vue-app/src/home.vue b/examples/vue-app/src/home.vue
index fe9eaf6b2..d252d51c6 100644
--- a/examples/vue-app/src/home.vue
+++ b/examples/vue-app/src/home.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="container">
     <div class="sidebar">
-      <h2>Configuration</h2>
+      <h2>Demo Settings</h2>
       <div class="flex chain">
-        <label class="flex-20 fw-500" for="chain">Chain</label>
-        <select class="flex-60 dropdown" name="chain" id="chain" v-model="form.chain" @change="onChainSelect">
+        <label class="form-label" for="chain">Chain</label>
+        <select class="form-control dropdown" name="chain" id="chain" v-model="form.chain" @change="onChainSelect">
           <option value="ethereum">Ethereum</option>
           <option value="binance">Binance</option>
           <!-- <option value="polygon">matic</option> -->
@@ -14,14 +14,20 @@
 
       <div class="ui-mode">
         <div class="flex ui-mode">
-          <span class="flex-20 fw-500">UI Mode</span>
-          <span class="flex-60">
-            <input type="radio" id="default" value="default" v-model="form.selectedUiMode" />
-            <label for="default" class="mr-10">Default</label>
-            <input type="radio" id="customUi" value="customUi" v-model="form.selectedUiMode" />
-            <label for="customUi" class="mr-10">Custom UI</label>
-            <input type="radio" id="whitelabel" value="whitelabel" v-model="form.selectedUiMode" />
-            <label for="whitelabel">WhiteLabel</label>
+          <span class="form-label">UI Mode</span>
+          <span class="form-control radio-group">
+            <label for="default" class="radio-button">
+              <input type="radio" id="default" value="default" v-model="form.selectedUiMode" />
+              Default
+            </label>
+            <label for="customUi" class="radio-button">
+              <input type="radio" id="customUi" value="customUi" v-model="form.selectedUiMode" />
+              CustomUI
+            </label>
+            <label for="whitelabel" class="radio-button">
+              <input type="radio" id="whitelabel" value="whitelabel" v-model="form.selectedUiMode" />
+              WhiteLabel
+            </label>
           </span>
         </div>
         <br />
@@ -29,8 +35,8 @@
         <!-- UI MODE DEFAULT -->
         <div v-if="form.selectedUiMode == 'default'">
           <div class="flex">
-            <span class="flex-20 fw-500">Login</span>
-            <div class="flex-60">
+            <span class="form-label">Login</span>
+            <div class="form-control">
               <li v-for="loginType in form.uiMode.default.login" :key="loginType.id" class="list-style-none">
                 <label :for="loginType.id">
                   <input v-if="loginType.name !== 'Facebook'" type="checkbox" v-model="loginType.checked" v-bind:id="loginType.id" />
@@ -41,8 +47,8 @@
           </div>
           <br />
           <div class="flex">
-            <span class="flex-20 fw-500">Wallet</span>
-            <div class="flex-60">
+            <span class="form-label">Wallet</span>
+            <div class="form-control">
               <li v-for="walletType in form.uiMode.default.adapter" :key="walletType.id" class="list-style-none">
                 <label :for="walletType.id">
                   <input type="checkbox" v-model="walletType.checked" v-bind:id="walletType.id" />
@@ -56,13 +62,13 @@
         <!-- UI MODE YOUR OWN MODAL -->
         <div v-if="form.selectedUiMode == 'customUi'">
           <div class="flex">
-            <span class="flex-20 fw-500">Type</span>
-            <span class="flex-60">
+            <span class="form-label">Type</span>
+            <span class="form-control">
               <input type="radio" id="openlogin" name="openlogin" value="openlogin" v-model="form.uiMode.customUi.type" />
               <label for="openlogin">OpenLogin</label>
               <br />
               <input type="radio" id="customAuth" name="customAuth" value="customAuth" v-model="form.uiMode.customUi.type" />
-              <label for="customauth">CustomAuth</label>
+              <label for="customAuth">CustomAuth</label>
               <br />
             </span>
           </div>
@@ -72,15 +78,15 @@
         <!-- UI MODE WHITELABEL -->
         <div v-if="form.selectedUiMode == 'whitelabel'">
           <div class="flex">
-            <span class="flex-20 fw-500">Logo URL</span>
-            <span class="flex-60">
+            <span class="form-label">Logo URL</span>
+            <span class="form-control">
               <input type="text" class="text" v-model="form.uiMode.whitelabel.logoUrl" />
             </span>
           </div>
           <br />
           <div class="flex">
-            <span class="flex-20 fw-500">theme</span>
-            <span class="flex-60">
+            <span class="form-label">Theme</span>
+            <span class="form-control">
               <input type="radio" id="light" name="light" value="light" v-model="form.uiMode.whitelabel.theme" />
               <label for="light">Light</label>
               <br />
@@ -92,8 +98,8 @@
         </div>
       </div>
       <div class="flex">
-        <span class="flex-20" />
-        <button class="btn flex-60" @click="saveConfig">Submit</button>
+        <span class="form-label" />
+        <button class="btn form-control" @click="saveConfig">Submit</button>
       </div>
     </div>
     <div class="content">
@@ -245,39 +251,53 @@ export default Vue.extend({
 </script>
 
 <style>
+html,
 body {
   margin: 0;
+  height: 100%;
+}
+
+#app {
+  height: 100%;
 }
 
 .container {
   display: flex;
-  height: 100vh;
+  flex-wrap: wrap;
+  height: 100%;
+  align-items: stretch;
 }
 
 .sidebar {
-  min-width: 40%;
+  flex-grow: 1;
+  flex-basis: 25rem;
   border-right: 1px solid #ebecf0;
   background-color: #f4f5f7;
-  height: 100%;
+  padding: 20px;
 }
 
 .content {
-  width: 70%;
+  flex-basis: 0;
+  min-width: 40%;
+  flex-grow: 999;
 }
 
 .flex {
   display: flex;
 }
 
-.flex-20 {
-  flex-basis: 20%;
+.form-label {
+  flex-basis: 5rem;
   text-align: right;
-  margin-right: 20px;
+  margin-right: 10px;
+  font-weight: 500;
 }
-.flex-60 {
+
+.form-control {
   flex-basis: 60%;
   text-align: left;
 }
+
 .dropdown {
   width: 100%;
   font-size: 16px;
@@ -287,12 +307,19 @@ body {
   box-sizing: border-box;
 }
 
-.mr-10 {
+.radio-group {
+  flex-basis: 70%;
+  flex-grow: 1;
+}
+
+.radio-button {
+  display: inline-block;
   margin-right: 10px;
 }
-.fw-500 {
-  font-weight: 500;
+.radio-button:last-child {
+  margin-right: 0;
 }
+
 .btn {
   padding: 9px 16px;
   max-height: 40px;
@@ -302,7 +329,7 @@ body {
   font-weight: 500;
   cursor: pointer;
   min-width: 60%;
-  margin-top: 10px;
+  margin: 20px 0;
   height: 40px;
   color: #0364ff;
   background-color: #fff;
@@ -343,12 +370,8 @@ body {
   box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 50%);
 }
 
-.ui-mode {
-  padding: 20px 0;
-}
-
 .chain {
-  padding: 20px 0;
+  margin-bottom: 20px;
 }
 
 .text {

From ff02d7dda29754b35d8a4960316017ba5ea07ba0 Mon Sep 17 00:00:00 2001
From: "tai.nguyen" <tai.tan849@gmail.com>
Date: Fri, 14 Jan 2022 14:51:05 +0700
Subject: [PATCH 2/4] Set font-size for example headers

---
 examples/vue-app/src/chains/binance.vue        |  8 ++------
 examples/vue-app/src/chains/ethereum.vue       |  2 +-
 examples/vue-app/src/chains/matic.vue          |  2 +-
 examples/vue-app/src/chains/solana.vue         |  2 +-
 examples/vue-app/src/customUi/openlogin.vue    |  2 +-
 .../vue-app/src/default/configurableModal.vue  | 16 ++--------------
 examples/vue-app/src/default/defaultModal.vue  | 15 ++++-----------
 examples/vue-app/src/home.vue                  | 18 +++++++++++-------
 examples/vue-app/src/whitelabel/whitelabel.vue |  2 +-
 9 files changed, 24 insertions(+), 43 deletions(-)

diff --git a/examples/vue-app/src/chains/binance.vue b/examples/vue-app/src/chains/binance.vue
index 652f9b8f3..0f4ec78db 100644
--- a/examples/vue-app/src/chains/binance.vue
+++ b/examples/vue-app/src/chains/binance.vue
@@ -1,12 +1,8 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth X Binance Smart Chain</h3>
+    <h2>Login with Web3Auth and Binance Smart Chain</h2>
     <Loader :isLoading="loading"></Loader>
-    <section
-      :style="{
-        fontSize: '12px',
-      }"
-    >
+    <section>
       <button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
       <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
       <EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
diff --git a/examples/vue-app/src/chains/ethereum.vue b/examples/vue-app/src/chains/ethereum.vue
index a37acf9c5..5d4f82fa5 100644
--- a/examples/vue-app/src/chains/ethereum.vue
+++ b/examples/vue-app/src/chains/ethereum.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth X Ethereum</h3>
+    <h2>Login with Web3Auth and Ethereum</h2>
     <Loader :isLoading="loading"></Loader>
 
     <section
diff --git a/examples/vue-app/src/chains/matic.vue b/examples/vue-app/src/chains/matic.vue
index acee3e8d1..2de4a4a6b 100644
--- a/examples/vue-app/src/chains/matic.vue
+++ b/examples/vue-app/src/chains/matic.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth X Polygon</h3>
+    <h2>Login with Web3Auth and Polygon</h2>
     <Loader :isLoading="loading"></Loader>
 
     <section
diff --git a/examples/vue-app/src/chains/solana.vue b/examples/vue-app/src/chains/solana.vue
index 3102076aa..39d974e5a 100644
--- a/examples/vue-app/src/chains/solana.vue
+++ b/examples/vue-app/src/chains/solana.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth X Solana</h3>
+    <h2>Login with Web3Auth and Solana</h2>
     <Loader :isLoading="loading"></Loader>
     <section
       :style="{
diff --git a/examples/vue-app/src/customUi/openlogin.vue b/examples/vue-app/src/customUi/openlogin.vue
index 3ed867e10..c5faba33f 100644
--- a/examples/vue-app/src/customUi/openlogin.vue
+++ b/examples/vue-app/src/customUi/openlogin.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth</h3>
+    <h2>Login With Web3Auth</h2>
     <Loader :isLoading="loading"></Loader>
     <section
       :style="{
diff --git a/examples/vue-app/src/default/configurableModal.vue b/examples/vue-app/src/default/configurableModal.vue
index 3bee388c4..f5e161afb 100644
--- a/examples/vue-app/src/default/configurableModal.vue
+++ b/examples/vue-app/src/default/configurableModal.vue
@@ -1,20 +1,8 @@
 <template>
   <div id="app">
-    <!-- <h3>Login With Web3Auth</h3> -->
-    <section
-      :style="{
-        fontSize: '12px',
-      }"
-    ></section>
-    <section
-      :style="{
-        fontSize: '12px',
-      }"
-    >
-      <ChainContainer :adapterConfig="adapterConfig" :chain="chain"></ChainContainer>
-    </section>
+    <ChainContainer :adapterConfig="adapterConfig" :chain="chain"></ChainContainer>
     <div id="console" style="white-space: pre-line">
-      <p style="white-space: pre-line"></p>
+      <code style="white-space: pre-line"></code>
     </div>
   </div>
 </template>
diff --git a/examples/vue-app/src/default/defaultModal.vue b/examples/vue-app/src/default/defaultModal.vue
index cbe1a3c8f..a87ed95b6 100644
--- a/examples/vue-app/src/default/defaultModal.vue
+++ b/examples/vue-app/src/default/defaultModal.vue
@@ -1,17 +1,10 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth</h3>
-    <h3>Connect with {{ web3auth.options.chainConfig.chainNamespace }} web3auth</h3>
+    <h2>Login with Web3Auth and {{ web3auth.options.chainConfig.chainNamespace }}</h2>
     <Loader :isLoading="loading"></Loader>
-    <section
-      :style="{
-        fontSize: '12px',
-      }"
-    >
-      <button v-if="!connected" @click="switchChain" style="cursor: pointer">
-        Switch To {{ web3auth.options.chainConfig.chainNamespace === "solana" ? "Ethereum" : "solana" }}
-      </button>
-    </section>
+    <button v-if="!connected" @click="switchChain" style="cursor: pointer">
+      Switch To {{ web3auth.options.chainConfig.chainNamespace === "solana" ? "Ethereum" : "solana" }}
+    </button>
     <section
       :style="{
         fontSize: '12px',
diff --git a/examples/vue-app/src/home.vue b/examples/vue-app/src/home.vue
index d252d51c6..59948ba6c 100644
--- a/examples/vue-app/src/home.vue
+++ b/examples/vue-app/src/home.vue
@@ -97,9 +97,8 @@
           </div>
         </div>
       </div>
-      <div class="flex">
-        <span class="form-label" />
-        <button class="btn form-control" @click="saveConfig">Submit</button>
+      <div class="btn-group">
+        <button class="btn" @click="saveConfig">Submit</button>
       </div>
     </div>
     <div class="content">
@@ -264,8 +263,8 @@ body {
 .container {
   display: flex;
   flex-wrap: wrap;
-  height: 100%;
   align-items: stretch;
+  height: 100%;
 }
 
 .sidebar {
@@ -278,8 +277,9 @@ body {
 
 .content {
   flex-basis: 0;
-  min-width: 40%;
   flex-grow: 999;
+  min-width: 40%;
+  padding: 20px;
 }
 
 .flex {
@@ -320,6 +320,10 @@ body {
   margin-right: 0;
 }
 
+.btn-group {
+  text-align: center;
+}
+
 .btn {
   padding: 9px 16px;
   max-height: 40px;
@@ -328,8 +332,8 @@ body {
   text-align: center;
   font-weight: 500;
   cursor: pointer;
-  min-width: 60%;
-  margin: 20px 0;
+  min-width: 70%;
+  margin: 30px 0 10px;
   height: 40px;
   color: #0364ff;
   background-color: #fff;
diff --git a/examples/vue-app/src/whitelabel/whitelabel.vue b/examples/vue-app/src/whitelabel/whitelabel.vue
index 946493a5c..9d3ba7847 100644
--- a/examples/vue-app/src/whitelabel/whitelabel.vue
+++ b/examples/vue-app/src/whitelabel/whitelabel.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth</h3>
+    <h2>Login with Web3Auth</h2>
     <h3>Connect with {{ web3auth.options.chainConfig.chainNamespace }} web3auth</h3>
     <section
       :style="{

From f597166067038dfeffcc0f6928d8f74cd81b931b Mon Sep 17 00:00:00 2001
From: "tai.nguyen" <tai.tan849@gmail.com>
Date: Fri, 14 Jan 2022 14:51:22 +0700
Subject: [PATCH 3/4] Update title

---
 examples/vue-app/public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/vue-app/public/index.html b/examples/vue-app/public/index.html
index c15a64690..6c1f9c5d7 100644
--- a/examples/vue-app/public/index.html
+++ b/examples/vue-app/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <title>helloworld</title>
+    <title>Web3Auth Demo</title>
   </head>
   <body>
     <!-- <script

From 3e3ad84f7eabd0ee63952ba8ee9ae6b9702d4328 Mon Sep 17 00:00:00 2001
From: "tai.nguyen" <tai.tan849@gmail.com>
Date: Mon, 17 Jan 2022 11:35:23 +0700
Subject: [PATCH 4/4] Capitalize logout text button

---
 examples/vue-app/src/chains/binance.vue        | 2 +-
 examples/vue-app/src/chains/ethereum.vue       | 2 +-
 examples/vue-app/src/chains/matic.vue          | 2 +-
 examples/vue-app/src/chains/solana.vue         | 2 +-
 examples/vue-app/src/customUi/customAuth.vue   | 4 ++--
 examples/vue-app/src/customUi/openlogin.vue    | 2 +-
 examples/vue-app/src/default/defaultModal.vue  | 2 +-
 examples/vue-app/src/whitelabel/whitelabel.vue | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/examples/vue-app/src/chains/binance.vue b/examples/vue-app/src/chains/binance.vue
index 0f4ec78db..998a9185e 100644
--- a/examples/vue-app/src/chains/binance.vue
+++ b/examples/vue-app/src/chains/binance.vue
@@ -4,7 +4,7 @@
     <Loader :isLoading="loading"></Loader>
     <section>
       <button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
-      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
+      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
       <EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
       <button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
       <!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
diff --git a/examples/vue-app/src/chains/ethereum.vue b/examples/vue-app/src/chains/ethereum.vue
index 5d4f82fa5..33ce2c04b 100644
--- a/examples/vue-app/src/chains/ethereum.vue
+++ b/examples/vue-app/src/chains/ethereum.vue
@@ -9,7 +9,7 @@
       }"
     >
       <button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
-      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
+      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
       <EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
       <button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
       <!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
diff --git a/examples/vue-app/src/chains/matic.vue b/examples/vue-app/src/chains/matic.vue
index 2de4a4a6b..aac2071e5 100644
--- a/examples/vue-app/src/chains/matic.vue
+++ b/examples/vue-app/src/chains/matic.vue
@@ -9,7 +9,7 @@
       }"
     >
       <button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
-      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
+      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
       <PolygonRpc v-if="connected && provider" :provider="provider" :console="console"></PolygonRpc>
       <button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
       <!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
diff --git a/examples/vue-app/src/chains/solana.vue b/examples/vue-app/src/chains/solana.vue
index 39d974e5a..d0ba47a8a 100644
--- a/examples/vue-app/src/chains/solana.vue
+++ b/examples/vue-app/src/chains/solana.vue
@@ -8,7 +8,7 @@
       }"
     >
       <button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
-      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
+      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
       <SolanaRpc v-if="connected && provider" :provider="provider" :console="console"></SolanaRpc>
       <button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
       <!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
diff --git a/examples/vue-app/src/customUi/customAuth.vue b/examples/vue-app/src/customUi/customAuth.vue
index 8de9f8fb1..5878d8c90 100644
--- a/examples/vue-app/src/customUi/customAuth.vue
+++ b/examples/vue-app/src/customUi/customAuth.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h3>Web3Auth X CustomAuth</h3>
+    <h3>Web3Auth and CustomAuth</h3>
     <Loader :isLoading="loading"></Loader>
     <section
       :style="{
@@ -18,7 +18,7 @@
       <button class="rpcBtn" v-if="!connected" name="twitter" @click="connect" style="cursor: pointer">
         {{ loginButtonStatus }} Login With twitter
       </button>
-      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
+      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
       <EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
       <button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
       <!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
diff --git a/examples/vue-app/src/customUi/openlogin.vue b/examples/vue-app/src/customUi/openlogin.vue
index c5faba33f..18ef77357 100644
--- a/examples/vue-app/src/customUi/openlogin.vue
+++ b/examples/vue-app/src/customUi/openlogin.vue
@@ -18,7 +18,7 @@
       <button class="rpcBtn" v-if="!connected" name="facebook" @click="connect" style="cursor: pointer">
         {{ loginButtonStatus }} Login With facebook
       </button>
-      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
+      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
       <EthRpc v-if="connected && provider" :provider="provider" :console="console"></EthRpc>
       <button class="rpcBtn" v-if="connected" @click="getUserInfo" style="cursor: pointer">Get User Info</button>
       <!-- <button @click="showError" style="cursor: pointer">Show Error</button> -->
diff --git a/examples/vue-app/src/default/defaultModal.vue b/examples/vue-app/src/default/defaultModal.vue
index a87ed95b6..587db0c3e 100644
--- a/examples/vue-app/src/default/defaultModal.vue
+++ b/examples/vue-app/src/default/defaultModal.vue
@@ -11,7 +11,7 @@
       }"
     >
       <button v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
-      <button v-if="connected" @click="logout" style="cursor: pointer">logout</button>
+      <button v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
       <SolRpc
         v-if="connected && provider && web3auth.options.chainConfig.chainNamespace === 'solana'"
         :provider="provider"
diff --git a/examples/vue-app/src/whitelabel/whitelabel.vue b/examples/vue-app/src/whitelabel/whitelabel.vue
index 9d3ba7847..d6d31de8b 100644
--- a/examples/vue-app/src/whitelabel/whitelabel.vue
+++ b/examples/vue-app/src/whitelabel/whitelabel.vue
@@ -15,7 +15,7 @@
       }"
     >
       <button class="rpcBtn" v-if="!connected" @click="connect" style="cursor: pointer">{{ loginButtonStatus }} Connect</button>
-      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">logout</button>
+      <button class="rpcBtn" v-if="connected" @click="logout" style="cursor: pointer">Logout</button>
       <EthRpc
         v-if="connected && provider && web3auth.options.chainConfig.chainNamespace === 'eip155'"
         :provider="provider"