Merge pull request #15 from Web3Auth/improve-ui

Improve demo app UI
Web3Auth · Jan 17, 2022 · 3d9fcbb · 3d9fcbb
2 parents 25836f1 + 3e3ad84
commit 3d9fcbb
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 89 deletions.
diff --git 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

diff --git a/examples/vue-app/src/chains/binance.vue b/examples/vue-app/src/chains/binance.vue
@@ -1,14 +1,10 @@
 <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>
+      <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,14 +1,14 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth X Solana</h3>
+    <h2>Login with Web3Auth and Solana</h2>
     <Loader :isLoading="loading"></Loader>
     <section
       :style="{
         fontSize: '12px',
       }"
     >
       <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
@@ -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
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <h3>Login With Web3Auth</h3>
+    <h2>Login With Web3Auth</h2>
     <Loader :isLoading="loading"></Loader>
     <section
       :style="{
@@ -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/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
@@ -1,24 +1,17 @@
 <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',
       }"
     >
       <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/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,23 +14,29 @@
 
       <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 />
 
         <!-- 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 />
@@ -91,9 +97,8 @@
           </div>
         </div>
       </div>
-      <div class="flex">
-        <span class="flex-20" />
-        <button class="btn flex-60" @click="saveConfig">Submit</button>
+      <div class="btn-group">
+        <button class="btn" @click="saveConfig">Submit</button>
       </div>
     </div>
     <div class="content">
@@ -245,39 +250,54 @@ export default Vue.extend({
 </script>
 
 <style>
+html,
 body {
   margin: 0;
+  height: 100%;
+}
+
+#app {
+  height: 100%;
 }
 
 .container {
   display: flex;
-  height: 100vh;
+  flex-wrap: wrap;
+  align-items: stretch;
+  height: 100%;
 }
 
 .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;
+  flex-grow: 999;
+  min-width: 40%;
+  padding: 20px;
 }
 
 .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,23 @@ 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-group {
+  text-align: center;
 }
+
 .btn {
   padding: 9px 16px;
   max-height: 40px;
@@ -301,8 +332,8 @@ body {
   text-align: center;
   font-weight: 500;
   cursor: pointer;
-  min-width: 60%;
-  margin-top: 10px;
+  min-width: 70%;
+  margin: 30px 0 10px;
   height: 40px;
   color: #0364ff;
   background-color: #fff;
@@ -343,12 +374,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 {