fixed some css

src/App.vue

@@ -80,7 +80,7 @@ export default {
           name: 'Proofs Generation',
           previous: 4,
           isEnabled: false,
-          stepTitle: 'Generate Zero Knowledge Proof(s) & Mint your on-chain Identity',
+          stepTitle: 'Generate ZK Proof(s) & Mint your on-chain Identity',
           logo: 'proof.png',
           requiredCredentialTypes: ['zkProofOfKYC', 'zkProofOfAge', 'zkProofOfPersonHood'],
           hasDone: false,

src/components/AppInstructions.vue

@@ -29,18 +29,6 @@
 .checkbox-item input {
   margin-right: 5px;
 }
-
-.widget-card-width {
-  width: 70%;
-  margin: auto;
-}
-
-@media (max-width: 768px) {
-  .widget-card-width {
-    margin: auto;
-    width: 100%;
-  }
-}
 </style>
 
 <template>
@@ -75,7 +63,7 @@
       </v-card>
 
       <div class="mt-3">
-        <div class="d-grid gap-1" style="margin: auto">
+        <div class="d-grid gap-1 widget-card-width" style="margin: auto">
           <v-btn block color="secondary" @click="nextStep(nextStepNumeber)">Let's go!</v-btn>
         </div>
       </div>
@@ -193,11 +181,11 @@ export default {
 </script>
 <style lang="css">
 .btn-width {
-  width: 50%;
+  width: 70%;
 }
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .btn-width {
-    width: 100%;
+    width: 70%;
   }
 }
 </style>

src/components/MainPage.vue

@@ -19,7 +19,7 @@
   max-height: 100dvh;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .main-container-height {
     height: 100dvh;
   }

src/components/commons/AppInstructionStep.vue

@@ -9,7 +9,7 @@
       </div> -->
     </div>
     <div class="col-8" style="text-align: left">
-      <span style="font-size: medium; font-weight: bold; word-wrap: break-word">
+      <span class="app-font" style="font-weight: bold; word-wrap: break-word">
         {{ stepTitle }}
       </span>
     </div>

src/components/commons/AskPIN.vue

@@ -25,7 +25,7 @@
   width: 70%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .width {
     width: 100%;
   }

src/components/commons/ChooseDocumentType.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="kyc-container">
-    <v-card class="mx-auto" tile>
-      <v-list shaped>
+    <v-card class="mx-auto widget-card-width" tile>
+      <v-list flat>
         <!-- <v-subheader>Choose Document Type</v-subheader> -->
         <v-list-item-group color="secondary">
           <v-list-item v-for="(item, i) in items" :key="i" @click="chooseDoc(item.type)">

src/components/commons/NavBar.vue

@@ -84,7 +84,7 @@ export default {
   font-size: smaller;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .stepper {
     font-size: x-small;
   }

src/components/commons/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="kyc-container">
+  <div class="kyc-container widget-card-width">
     <!-- <v-row>
       <v-col>
         <InfoMessage message="Please verify if your informations are correct" class="notShowOnMobile" />
@@ -21,7 +21,7 @@
             </v-avatar>
           </div>
           <div class="profile-details">
-            <v-simple-table style="text-align: left">
+            <v-simple-table style="text-align: left" dense>
               <template v-slot:default>
                 <tbody>
                   <tr v-for="(data, idx) in Object.entries(extractedData)" v-bind:key="idx">
@@ -167,7 +167,7 @@ export default {
 .notShowOnMobile {
   display: block;
 }
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .preview {
     max-height: 458px;
   }

src/components/commons/RegisterPIN.vue

@@ -54,7 +54,7 @@
   width: 70%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .width {
     width: 100%;
   }

src/components/e-kyc/Liveliness.vue

@@ -257,8 +257,8 @@ export default {
     </div>
     <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" block color="secondary" :disabled="isWidgetStarted" title="Start Capture" @click="enableWidget()"><i class="bi bi-play-circle"></i> Start Capture</v-btn>
+        <div class="col-md-4 d-flex flex-column widget-card-width">
+          <v-btn type="v-btn" id="btnStartCapture" block color="secondary" :disabled="isWidgetStarted" title="Start Capture" @click="enableWidget()"><i class="bi bi-play-circle mx-1"></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>

src/components/e-kyc/SignIn.vue

@@ -3,7 +3,7 @@
     <div class="card-body min-h-36">
       <load-ing :active.sync="isLoading" :can-cancel="true" :is-full-page="fullPage"></load-ing>
       <PageHeading :header="'Login'" :subHeader="'Create/Retrive your decentralized identity'" />
-      <div class="mt-4 p-4 width" style="margin: auto">
+      <div class="mt-4 p-4 widget-card-width" style="margin: auto">
         <!-- <ConnectWalletButton @authEvent="myEventListener" :is-disable="error" /> -->
         <GoogleButton :is-disable="error" />
         <ConsentBox />
@@ -12,18 +12,6 @@
   </div>
 </template>
 
-<style scoped>
-.width {
-  width: 70%;
-}
-
-@media (max-width: 768px) {
-  .width {
-    width: 100%;
-  }
-}
-</style>
-
 <script>
 import { mapMutations, mapActions, mapGetters, mapState } from 'vuex'
 // import ConnectWalletButton from '../commons/authButtons/ConnectWalletButton.vue';
@@ -121,7 +109,7 @@ export default {
           masterWalletAddress: onchainconfig?.options?.masterWalletAddress,
         })
       } else {
-        this.toast(MESSAGE.SIGN.ONCHAIN_CONFIG_NOT_FOUND_ERR, 'warning')
+        this.toast(MESSAGE.SIGN.ONCHAIN_CONFIG_NOT_FOUND_ERR, 'success')
       }
     },
     preparePresentationRequest() {

src/components/e-kyc/UserConsent.vue

@@ -226,7 +226,7 @@ export default {
   margin: auto;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .widget-card-width {
     margin: auto;
     width: 100%;

src/components/e-kyc/VaultPIN.vue

@@ -23,7 +23,7 @@
   width: 70%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .width {
     width: 100%;
   }

src/components/e-kyc/ZKProofs.vue

@@ -31,7 +31,7 @@
 .center-footer {
   color: green;
 }
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .proofCard {
     /* margin: auto;
     min-height: 150px;
@@ -76,6 +76,10 @@
   .show-verified {
     display: block;
   }
+
+  .title-font-size {
+    font-size: 0.6rem !important;
+  }
 }
 
 .proof-card:hover {
@@ -134,13 +138,13 @@
           </v-btn>
         </div>
       </div> -->
-      <v-row dense>
-        <v-col cols="12" md="6">
+      <v-row dense class="kyc-container">
+        <v-col cols="12">
           <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">
-                  {{ hypersign_proof.proofType }}
+                <div class="text-overline mb-4 title-font-size">
+                  {{ hypersign_proof.proofType.replace(/([a-z])([A-Z])/g, '$1 $2') }}
                   <v-chip v-if="hypersign_proof.proofType == 'zkProofOfAge'">
                     <span>{{ getCriteria(hypersign_proof) }} +</span>
                   </v-chip>

src/components/utils/lang/en.js

@@ -4,7 +4,7 @@ export default {
     WIDGET_CONFIG_ERR: 'Widget configuration is not available',
     INVALID_ACCESS_TOKEN: 'Error initalization of widget, invalid token',
     AUTH_PROVIDER_ERR: 'Could not authenticate with provider ',
-    ONCHAIN_CONFIG_NOT_FOUND_ERR: '',
+    ONCHAIN_CONFIG_NOT_FOUND_ERR: 'No on-chain config found, proceeding with offchain verification',
     SESSION_NOT_FOUND_ERR: 'Session not found, proceeding to generate one',
     SESSION_ID_INVALID: 'Session ID is invalid or missing, close this window and try again from service provider app',
   },

src/style/global.css

@@ -21,11 +21,32 @@ body {
   color: black;
 }
 
+.widget-card-width {
+  width: 70%;
+  margin: auto;
+}
+
+@media (max-width: 400px) {
+  .widget-card-width {
+    margin: auto;
+    width: 100%;
+  }
+}
+
+.app-font {
+  font-size: medium
+}
+
+@media (max-width: 400px) {
+  .app-font {
+    font-size: small
+  }
+}
 /* h1 {
   font-size: revert;
 } */
 
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   h1 {
     font-size: 1.5rem;
   }
@@ -52,7 +73,7 @@ body {
   margin-top: 5%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 400px) {
   .widget-card {
     /* border: 1px solid #8080801a; */
     box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);