updated design

hypersign-protocol · Dec 15, 2024 · 402b599 · 402b599
1 parent 7adbe25
commit 402b599
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 59 deletions.
diff --git a/src/components/AppInstructions.vue b/src/components/AppInstructions.vue
@@ -76,7 +76,7 @@
 
       <div class="mt-3">
         <div class="d-grid gap-1" style="margin: auto">
-          <v-btn class="btn btn-outline-dark btn-lg btn-width" @click="nextStep(nextStepNumeber)">Let's go!</v-btn>
+          <v-btn block color="secondary" @click="nextStep(nextStepNumeber)">Let's go!</v-btn>
         </div>
       </div>
     </div>

diff --git a/src/components/commons/AskPIN.vue b/src/components/commons/AskPIN.vue
@@ -11,10 +11,10 @@
     </v-card>
     <div class="container">
       <div class="row center mt-3">
-        <v-btn class="btn btn-outline-dark width" @click="submit()"><i class="bi bi-unlock"></i> Unlock Vault</v-btn>
+        <v-btn block color="secondary" @click="submit()"><i class="bi bi-unlock mx-1"></i> Unlock Vault</v-btn>
       </div>
-      <div class="row center mt-3">
-        <ForgotPIN @proceedWithAccountDeletion="proceedWithAccountDeletion()" />
+      <div class="row">
+        <ForgotPIN @proceedWithAccountDeletion="proceedWithAccountDeletion()" style="width: 100%" class="mt-1" />
       </div>
     </div>
   </div>

diff --git a/src/components/commons/ForgotPIN.vue b/src/components/commons/ForgotPIN.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a href="javascript:;" v-on:click="deleteAccountConfirmation()">Forgot PIN?</a>
+    <v-btn outlined block color="secondary" @click="deleteAccountConfirmation()">Forgot PIN?</v-btn>
     <v-row justify="center">
       <v-dialog v-model="confirmationDialog" max-width="310">
         <v-card>

diff --git a/src/components/commons/Preview.vue b/src/components/commons/Preview.vue
@@ -38,12 +38,30 @@
       </div>
     </div>
 
-    <div class="row mt-2">
-      <div class="col-md-12">
-        <v-btn class="btn btn-light" @click="rescan()">Rescan</v-btn>
-        <v-btn class="btn btn-outline-dark" @click="submit()">Continue</v-btn>
+    <div class="container">
+      <div class="row center mt-1">
+        <v-btn block color="secondary" @click="submit()">Continue</v-btn>
+        <v-btn outlined class="mt-1" block color="secondary" @click="rescan()">Rescan</v-btn>
       </div>
     </div>
+
+    <!-- <v-row>
+      <v-col>
+        <v-btn block color="secondary" @click="submit()">Continue</v-btn>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-btn text color="secondary" @click="rescan()">Rescan</v-btn>
+      </v-col>
+    </v-row> -->
+
+    <!-- <div class="row mt-2">
+      <div class="col-md-12">
+        
+      </div>
+      <div class="col-md"></div>
+    </div> -->
   </div>
 </template>
 
@@ -151,7 +169,7 @@ export default {
 }
 @media (max-width: 768px) {
   .preview {
-    max-height: 500px;
+    max-height: 458px;
   }
   .showOnMobile {
     display: block;
@@ -178,8 +196,8 @@ export default {
 }
 
 .profile-details p {
-  margin: 8px 0;
-  font-size: 14px;
+  margin: 5px 0;
+  font-size: 12px;
   color: #333;
 }
 </style>
diff --git a/src/components/commons/RegisterPIN.vue b/src/components/commons/RegisterPIN.vue
@@ -17,7 +17,7 @@
     </v-card>
     <div class="container">
       <div class="row center mt-3">
-        <v-btn class="btn btn-outline-dark width" @click="submit()"><i class="bi bi-safe"></i> Setup Vault</v-btn>
+        <v-btn block color="secondary" @click="submit()"><i class="bi bi-safe mx-1"></i> Setup Vault</v-btn>
       </div>
     </div>
     <v-row justify="center">

diff --git a/src/components/commons/authButtons/GoogleButton.vue b/src/components/commons/authButtons/GoogleButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-btn class="btn btn-outline-dark btn-lg" style="width: 100%" @click="loginWithGoogle()" :disabled="isDisable"><i class="bi bi-google"></i> Continue with Google</v-btn>
+    <v-btn block color="secondary" @click="loginWithGoogle()" :disabled="isDisable"><i class="bi bi-google mx-1"></i> Continue with Google</v-btn>
   </div>
 </template>
 

diff --git a/src/components/e-kyc/Liveliness.vue b/src/components/e-kyc/Liveliness.vue
@@ -46,7 +46,6 @@ export default {
       widgetVersion: FPhi.Selphi.Version,
       FPhiSelphiConstants: FPhi.Selphi,
       widgetResult: '',
-
       toastMessage: '',
       toastType: 'success',
       isToast: false,
@@ -161,14 +160,14 @@ export default {
       }
 
       this.isWidgetStarted = false
-      this.toast('Error! Something went wrong', 'error')
+      this.toast('Error: Something went wrong', 'error')
     },
 
     onUserCancel: function () {
       // console.warn("[Selphi] onUserCancel");
 
       this.isWidgetStarted = false
-      this.toast('Error! The extraction has been cancelled', 'error')
+      this.toast('Error: The extraction has been cancelled', 'error')
     },
 
     onExtractionTimeout: function () {
@@ -259,7 +258,7 @@ export default {
     <div class="row" v-if="!isWidgetStarted && !isLoading">
       <div class="col-12 center">
         <div class="col-md-4 d-flex flex-column">
-          <v-btn type="v-btn" id="btnStartCapture" class="btn btn-outline-dark" :disabled="isWidgetStarted" title="Start Capture" @click="enableWidget()"><i class="bi bi-play-circle"></i> Start Capture</v-btn>
+          <v-btn type="v-btn" id="btnStartCapture" block color="secondary" :disabled="isWidgetStarted" title="Start Capture" @click="enableWidget()"><i class="bi bi-play-circle"></i> Start Capture</v-btn>
           <!-- <button type="button" id="btnStopCapture" class="btn btn-link" :disabled="!isWidgetStarted" @click="disableWidget()" title="Stop Capture"><i class="bi bi-stop-circle"></i> Stop Capture</button> -->
         </div>
       </div>

diff --git a/src/components/e-kyc/UserConsent.vue b/src/components/e-kyc/UserConsent.vue
@@ -17,36 +17,38 @@
           </v-list-item>
         </v-card>
       </div>
-      <div class="mt-1" style="overflow-y: auto; max-height: 335px; text-align: left">
-        <v-list two-line subheader>
-          <v-list-item link v-for="eachCredential in getTrustedIssuersCredentials" v-bind:key="eachCredential.id">
-            <v-list-item-avatar style="border: 1px solid lightgrey">
-              <v-avatar>
-                <i class="bi bi-person-bounding-box" v-if="eachCredential.type[1] == 'PersonhoodCredential'"></i>
-                <i class="bi bi-calendar3-week" v-if="eachCredential.type[1] == 'DateOfBirthCredential'"></i>
-                <i class="bi bi-globe" v-if="eachCredential.type[1] == 'CitizenshipCredential'"></i>
-                <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'PassportCredential'"></i>
-                <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'GovernmentIdCredential'"></i>
-                <i class="bi bi-person-vcard" v-if="eachCredential.type[1].includes('zkProof') && !eachCredential.type[1].includes('SbtCredential') && listOfEnabledZkCredential"></i>
-                <i class="bi bi-person-badge" v-if="eachCredential.type[1].includes('SbtCredential')"></i>
-              </v-avatar>
-            </v-list-item-avatar>
+      <div class="mt-1 kyc-container" style="overflow-y: auto; max-height: 335px; text-align: left">
+        <v-card>
+          <v-list two-line subheader>
+            <v-list-item link v-for="eachCredential in getTrustedIssuersCredentials" v-bind:key="eachCredential.id">
+              <v-list-item-avatar style="border: 1px solid lightgrey">
+                <v-avatar>
+                  <i class="bi bi-person-bounding-box" v-if="eachCredential.type[1] == 'PersonhoodCredential'"></i>
+                  <i class="bi bi-calendar3-week" v-if="eachCredential.type[1] == 'DateOfBirthCredential'"></i>
+                  <i class="bi bi-globe" v-if="eachCredential.type[1] == 'CitizenshipCredential'"></i>
+                  <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'PassportCredential'"></i>
+                  <i class="bi bi-person-vcard" v-if="eachCredential.type[1] == 'GovernmentIdCredential'"></i>
+                  <i class="bi bi-person-vcard" v-if="eachCredential.type[1].includes('zkProof') && !eachCredential.type[1].includes('SbtCredential') && listOfEnabledZkCredential"></i>
+                  <i class="bi bi-person-badge" v-if="eachCredential.type[1].includes('SbtCredential')"></i>
+                </v-avatar>
+              </v-list-item-avatar>
 
-            <v-list-item-content>
-              <v-list-item-title class="text-overline">{{ eachCredential.type[1] }}</v-list-item-title>
-              <v-list-item-subtitle>{{ shorten(eachCredential.id) }}</v-list-item-subtitle>
-            </v-list-item-content>
+              <v-list-item-content>
+                <v-list-item-title class="text-overline">{{ eachCredential.type[1] }}</v-list-item-title>
+                <v-list-item-subtitle>{{ shorten(eachCredential.id) }}</v-list-item-subtitle>
+              </v-list-item-content>
 
-            <v-list-item-action>
-              <v-btn icon ripple>
-                <v-switch :input-value="shouldShare(eachCredential)" flat disabled></v-switch>
-              </v-btn>
-            </v-list-item-action>
-          </v-list-item>
-        </v-list>
+              <v-list-item-action>
+                <v-btn icon ripple>
+                  <v-switch :input-value="shouldShare(eachCredential)" flat disabled></v-switch>
+                </v-btn>
+              </v-list-item-action>
+            </v-list-item>
+          </v-list>
+        </v-card>
       </div>
-      <div class="mt-1">
-        <v-btn class="btn btn-outline-dark" @click="submit()"><i class="bi bi-check-circle"></i> Authorize</v-btn>
+      <div class="mt-1 kyc-container">
+        <v-btn block color="secondary" @click="submit()"><i class="bi bi-check-circle mx-1"></i> Authorize</v-btn>
       </div>
     </div>
   </div>

diff --git a/src/components/e-kyc/ZKProofs.vue b/src/components/e-kyc/ZKProofs.vue
@@ -136,7 +136,7 @@
       </div> -->
       <v-row dense>
         <v-col cols="12" md="6">
-          <v-card class="mx-auto mb-1" style="text-align: start" v-for="hypersign_proof in hypersign_proofs" v-bind:key="hypersign_proof.type" :style="`background-image: linear-gradient(to bottom right, ${hypersign_proof.bgColor} , lightgrey)`">
+          <v-card class="mx-auto mb-2" style="text-align: start" v-for="hypersign_proof in hypersign_proofs" v-bind:key="hypersign_proof.type" :style="`background-image: linear-gradient(to bottom right, ${hypersign_proof.bgColor} , lightgrey)`">
             <v-list-item three-line>
               <v-list-item-content>
                 <div class="text-overline mb-4">
@@ -157,15 +157,15 @@
 
             <v-card-actions>
               <template v-if="!hypersign_proof.zkProof && getWidgetConfigFromDb.zkProof.enabled">
-                <v-btn text class="btn btn-outline-dark" @click="getProof(hypersign_proof)" :disabled="hypersign_proof.isLoading">
+                <v-btn outlined color="secondary" @click="getProof(hypersign_proof)" :disabled="hypersign_proof.isLoading">
                   <i v-if="!hypersign_proof.isLoading" class="bi bi-shield-lock"></i>
                   <span v-if="!hypersign_proof.isLoading" class="sr-only">Get Proof</span>
                   <span v-if="hypersign_proof.isLoading" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                   <span v-if="hypersign_proof.isLoading" class="sr-only">Generating Proof...</span>
                 </v-btn>
               </template>
               <template v-else-if="!hypersign_proof.zkSBT && getWidgetConfigFromDb.onChainId.enabled">
-                <v-btn text class="btn btn-outline-dark" @click="mint(hypersign_proof)" :disabled="hypersign_proof.isLoading">
+                <v-btn outlined color="secondary" @click="mint(hypersign_proof)" :disabled="hypersign_proof.isLoading">
                   <i v-if="!hypersign_proof.isLoading" class="bi bi-hammer"></i>
                   <span v-if="!hypersign_proof.isLoading" class="sr-only">Mint ID Token</span>
                   <span v-if="hypersign_proof.isLoading" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
@@ -174,15 +174,20 @@
               </template>
               <v-list-item>
                 <v-row align="center" justify="end">
-                  <!-- <v-chip draggable>Default</v-chip> -->
-                  <!-- <i class="bi bi-check2-circle" style="font-size: medium"></i> -->
                   <span v-if="checkIfOncainIdIsEnabled">
-                    <span v-if="hypersign_proof.zkProof && hypersign_proof.zkSBT" class="center-footer"><i class="bi bi-check2-circle" style="font-size: large"></i></span>
+                    <span v-if="hypersign_proof.zkProof && hypersign_proof.zkSBT" class="center-footer">
+                      <i class="bi bi-check2-circle" style="font-size: large"></i>
+                    </span>
+                    <span v-else-if="hypersign_proof.isLoading">
+                      <v-progress-circular size="15" :width="1" color="green" indeterminate></v-progress-circular>
+                    </span>
                   </span>
                   <span v-else>
                     <span v-if="hypersign_proof.zkProof" class="center-footer">
                       <i class="bi bi-check2-circle" style="font-size: large"></i>
-                      <!-- <span class="show-verified">Verified!</span> -->
+                    </span>
+                    <span v-else-if="hypersign_proof.isLoading">
+                      <v-progress-circular size="15" :width="1" color="green" indeterminate></v-progress-circular>
                     </span>
                   </span>
                 </v-row>
@@ -191,18 +196,22 @@
           </v-card>
         </v-col>
       </v-row>
-      <div class="d-grid gap-1" style="margin: auto" v-if="!getWidgetConfigFromDb.onChainId.enabled && isAllZkProofVerified()">
-        <v-btn class="btn btn-outline-dark" @click="goToUserConsentStep()">Next</v-btn>
-      </div>
+      <v-row v-if="!getWidgetConfigFromDb.onChainId.enabled && isAllZkProofVerified() && !isLoading">
+        <v-col>
+          <v-btn block color="secondary" @click="goToUserConsentStep()">Continue</v-btn>
+        </v-col>
+      </v-row>
 
-      <div class="d-grid gap-1" style="margin: auto" v-if="isAllZkProofVerified() && isAllZkProofSBTMinted() && getWidgetConfigFromDb.onChainId.enabled">
-        <v-btn class="btn btn-outline-dark" @click="goToUserConsentStep()">Next</v-btn>
-      </div>
+      <v-row v-if="isAllZkProofVerified() && isAllZkProofSBTMinted() && getWidgetConfigFromDb.onChainId.enabled && !isLoading">
+        <v-col>
+          <v-btn block color="secondary" @click="goToUserConsentStep()">Continue</v-btn>
+        </v-col>
+      </v-row>
       <div class="container" style="display: none">
         <div class="row mt-2">
           <div class="col-md-12 center">
             <template v-if="showConnectWallet">
-              <v-btn class="btn btn-outline-dark" @click="mint()">
+              <v-btn outlined color="secondary" @click="mint()">
                 <i class="bi bi-shield-lock"></i>
                 Generate Proof (s)
               </v-btn>