Merge pull request #1162 from hypersign-protocol/stage

Stage
hypersign-protocol · May 16, 2022 · f2a9ae5 · f2a9ae5
2 parents 2bab17c + 9c50323
commit f2a9ae5
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 51 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -23,7 +23,9 @@
           <!-- <p class="header-text">{{ $config.app.name }}</p> -->
           <hr class="rule" />
         </div>
-        <span slot="footer" class="text-center">{{ $config.app.version }}</span>
+        <span slot="footer" class="text-center" style="font-size:14px; padding: 7px; border: 1px solid #80808014;">
+        <a href="https://docs.fyre.hypersign.id/" target="_blank" style="text-decoration: none; background-color: transparent;color: #8B8B8B;">Docs</a></span>
+        <span slot="footer" class="text-center" style="font-size: 12px; padding: 7px;">{{ $config.app.version }}</span>
       </sidebar-menu>
       <!-- <div class="content-wrapper"> -->
        <div :class="[
@@ -50,6 +52,7 @@ export default {
   },
   data() {
     return {
+      hover: false,
       authToken: localStorage.getItem("authToken"),
       isSidebarCollapsed: true,
       authRoutes: ["register", "PKIIdLogin"],
@@ -89,7 +92,7 @@ export default {
             },
             {
               href: "/admin/createapp",
-              title: "App",
+              title: "Apps",
               icon: "fa fa-plus",
               exactPath: true,
             },
@@ -257,8 +260,12 @@ export default {
   /* height: 40px; */
   margin-top: 9px;
   margin-left: 5px;
+
 }
 
+.v-sidebar-menu.vsm_white-theme .vsm--mobile-bg{
+  background: #ffc107;
+}
 
 .subtitle {
   padding-left: 10px;

diff --git a/src/components/admin/Charts.vue b/src/components/admin/Charts.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="row">
-    <div class="col-md-12 card chart-container" style="">
+    <div class="col-md-12 card chart-container" 
+    style="height: 98%; position: absolute;font-size:smaller">
       <vc-donut
         background="white"
         foreground="#60c860"
         :size="300"
         unit="px"
         :thickness="30"
         has-legend
-        legend-placement="top"
+        legend-placement="bottom"
         :sections="sections"
         :total="totalAvailable"
         :start-angle="0"
@@ -23,7 +24,7 @@
 
 <style scoped>
 .chart-container {
-  border-radius: 20px;
+  border-radius: 5px;
   border: 0;
   box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
   padding: 35px;
@@ -42,8 +43,8 @@ export default {
       user: {},
       usage: {},
       sections: [
-        { label: "Requests consumed", value: this.totalUsed, color: "#ed5c5c" },
-        { label: "Requests left", value: this.unused, color: "#60c860" },
+        { label: "REQUESTS CONSUMED", value: this.totalUsed, color: "#ed5c5c" },
+        { label: "REQUESTS LEFT", value: this.unused, color: "#60c860" },
       ],
       authToken: localStorage.getItem("authToken"),
       accessToken:localStorage.getItem("accessToken"),

diff --git a/src/components/admin/Profile.vue b/src/components/admin/Profile.vue
@@ -42,7 +42,7 @@
 .tile {
   background: white;
   border: 0;
-  border-radius: 20px;
+  border-radius: 5px;
   box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
   text-align: center;
 }
@@ -55,7 +55,7 @@
   font-size: xxx-large;
 }
 .fVal {
-  font-size: small;
+  font-size: xx-small;
   color: gray;
   word-wrap: break-word;
 }
@@ -73,13 +73,13 @@
       <div class="col-md-6">
         <div class="card tile" >
           <div class="card-body tile-number">{{ projectCount }}</div>
-          <div class="card-header accordion-header-theme" style="font-size:13px">TOTAL EVENTS</div>
+          <div class="card-header accordion-header-theme" style="font-size:13px; border-radius: 0px 0px 0px 5px;">TOTAL EVENTS</div>
         </div>
       </div>
       <div class="col-md-6" >
         <div class="card tile">
           <div class="card-body tile-number">{{ schemaCount }}</div>
-          <div class="card-header accordion-header-theme" style="font-size:13px">TOTAL PARTICIPANTS</div>
+          <div class="card-header accordion-header-theme" style="font-size:13px; border-radius: 0px 0px 0px 5px;">TOTAL PARTICIPANTS</div>
         </div>
       </div>
     </div>
@@ -100,12 +100,11 @@
                 <p>DID</p>
                 <p class="fVal">
                    <a v-if="accessuser.adminDid" target="_blank">{{ accessuser.adminDid }}</a>
-
-                    <a v-else target="_blank">{{ user.id }}</a>
+                   <a v-else target="_blank">{{ user.id }}</a>
                 </p>
                 <p>EMAIL</p>
                 <p v-if="accessuser.adminEmail" class="fVal">{{ accessuser.adminEmail }}</p>
-                 <p v-else class="fVal">{{ user.email }}</p>
+                <p v-else class="fVal">{{ user.email }}</p>
                 <p v-if="user.phoneNumber">
                   Phone Number: {{ user.phoneNumber }}
                 </p>

diff --git a/src/components/admin/createProjectSlider/components/GeneralConfig.vue b/src/components/admin/createProjectSlider/components/GeneralConfig.vue
@@ -101,7 +101,7 @@
 
    <div class="row g-3 align-items-center w-100  mt-4">
             <div class="col-lg-3 col-md-3 text-left">
-                <label for="projectName" class="col-form-label">Event Name<span style="color: red">*</span>: </label>
+                <tool-tips infoMessage="Name of the event"></tool-tips><label for="endDate" class="col-form-label"></label><label for="projectName" class="col-form-label">Event Name<span style="color: red">*</span>: </label>
             </div>
             <div class=" col-lg-9 col-md-9 px-0">
                 <input v-model="project.projectName" type="text" placeholder="Demo Giveaway" id="projectName" class="form-control w-100" >
@@ -110,7 +110,7 @@
 
     <div v-if="isProjectEditing" class="row g-3 align-items-center w-100 mt-4">
             <div class="col-lg-3 col-md-3 text-left">
-                <label for="projectStatus" class="col-form-label">Status: </label>
+                <tool-tips infoMessage="Event status"></tool-tips><label for="projectStatus" class="col-form-label">Status: </label>
             </div>
             <div class="col-lg-9 col-md-9 px-0">
 
@@ -123,7 +123,7 @@
 
     <div class="row g-3 align-items-center w-100 mt-4">
             <div class="col-lg-3 col-md-3 text-left">
-                <label for="logoUrl" class="col-form-label">Banner URL<span style="color: red">*</span>: </label>
+                <tool-tips infoMessage="Url of banner image"></tool-tips><label for="logoUrl" class="col-form-label">Banner URL<span style="color: red">*</span>: </label>
             </div>
             <div class="col-lg-9 col-md-9 px-0">
                 <input v-model="project.logoUrl" type="text" placeholder="of size 600x300" id="logoUrl" class="form-control w-100" >
@@ -133,7 +133,7 @@
 
     <div class="row g-3 align-items-center w-100 mt-4">
             <div class="col-lg-3 col-md-3 text-left">
-                <label for="startDate" class="col-form-label">Start Date<span style="color: red">*</span>: </label>
+                <tool-tips infoMessage="Start date time of the event"></tool-tips><label for="startDate" class="col-form-label">Start Date<span style="color: red">*</span>: </label>
             </div>
 
             <div class="col-lg-9 col-md-9 px-0 datepicker">
@@ -154,7 +154,7 @@
 
     <div class="row g-3 align-items-center w-100 mt-4">
             <div class="col-lg-3 col-md-3 text-left">
-                <label for="endDate" class="col-form-label">End Date<span style="color: red">*</span>: </label>
+                <tool-tips infoMessage="End date time of the event"></tool-tips><label for="endDate" class="col-form-label">End Date<span style="color: red">*</span>: </label>
             </div>
             <div class="col-lg-9 col-md-9 px-0">
                 <Datepicker 
@@ -187,7 +187,7 @@
      <div >
         <div class="row g-3 align-items-center w-100 mt-4">
           <div class=" text-left col-lg-3 col-md-3 text-left">
-              <label for="type" class="col-form-label">Tags<span style="color: red">*</span>: </label>
+              <tool-tips infoMessage="Select one or more tags"></tool-tips><label for="type" class="col-form-label">Tags<span style="color: red">*</span>: </label>
           </div>
           <div class="col-lg-8 col-md-8 px-0" >
             <b-form-select v-model="selected.type" :options="options"></b-form-select>
@@ -200,13 +200,11 @@
 
     <div class="row g-3 align-items-center w-100 mt-4">
       <div class="col-lg-3 col-md-3 text-left">
-          <label for="endDate" class="col-form-label">Notification: </label>
+          <tool-tips infoMessage="Notify participants about your upcoming campaign"></tool-tips><label for="endDate" class="col-form-label">Notification: </label>
       </div>
       <div class="col-lg-9 col-md-9 px-0"> 
         <b-form-checkbox v-model="project.isNotificaionEnabled" name="check-button" switch>
         </b-form-checkbox>
-        <!-- <input  class="largerCheckbox" type="checkbox" v-model="project.isNotificaionEnabled" title="Check to notify all platform users about this event" id=""> -->
-         <p class=" text-left text-info" style="font-size:14px;">Helps to notify participants for upcoming campaign</p> 
       </div>  
 
     </div>
@@ -218,10 +216,11 @@
 <script>
 import Datepicker from 'vuejs-datetimepicker'
 import notificationMixins from "../../../../mixins/notificationMixins"
-import Messages from "../../../../utils/messages/admin/en"
+import Messages from "../../../../utils/messages/admin/en";
+import ToolTips from "../../../basic/toolTips.vue";
 export default {
   name: "GeneralConfig",
-  components: {Datepicker},
+  components: {Datepicker, ToolTips},
   data(){
       return{
         idx:null,

diff --git a/src/components/admin/createProjectSlider/components/ReferralConfig.vue b/src/components/admin/createProjectSlider/components/ReferralConfig.vue
@@ -6,7 +6,7 @@
   <div>
     <div class="row g-3 align-items-center w-100 mt-4">
       <div class=" text-left col-lg-5 col-md-5 text-left">
-        <label for="refereePoint" class="col-form-label">Referee Point<span style="color: red">*</span>: </label>
+        <tool-tips infoMessage="Points the referee earns with each referral"></tool-tips> <label for="refereePoint" class="col-form-label">Referee Points<span style="color: red">*</span>: </label>
       </div>
       <div class="col-lg-7 col-md-7 px-0">
         <input
@@ -20,8 +20,8 @@
 
     <div class="row g-3 align-items-center w-100  mt-4">
       <div class="col-lg-5 col-md-5 text-left">
-        <label for="referralPoint" class="col-form-label"
-          >Referral Point<span style="color: red">*</span>:
+        <tool-tips infoMessage="Points the referred person earns when he/she fills the form using referral link"></tool-tips><label for="referralPoint" class="col-form-label"
+          >Referral Points<span style="color: red">*</span>:
         </label>
       </div>
       <div class=" col-lg-7 col-md-7 px-0">
@@ -38,9 +38,10 @@
 </template>
 
 <script>
+import ToolTips from "../../../basic/toolTips.vue";
 export default {
   name: "ReferralConfig",
-  
+  components: { ToolTips },
   data() {
     return {
       

diff --git a/src/components/basic/toolTips.vue b/src/components/basic/toolTips.vue
@@ -0,0 +1,50 @@
+<template>
+  <span
+    class="info"
+    @mouseover="renderInforMessage(true)"
+    @mouseleave="renderInforMessage(false)"
+    >&#9432;
+    <span v-if="hover" class="infoMsg">{{ this.infoMessage }}</span>
+  </span>
+</template>
+
+<style scoped>
+.info:hover {
+  color: #ffc107;
+  cursor: pointer;
+}
+
+.infoMsg {
+    max-width: 220px;
+  /* background-color: #928f8f; */
+  background-color: rgba(245, 244, 244, 0.976);
+  color: rgb(71, 71, 71);
+  text-align: center;
+  border-radius: 5px;
+  padding: 5px;
+  font-size: 12px;
+  position: absolute;
+  border: 1px solid rgba(255, 193, 7, 0.579);
+  z-index: 9999;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    infoMessage: {
+      type: String,
+    }
+  },
+  data() {
+    return {
+      hover: false,
+    };
+  },
+  methods:{
+      renderInforMessage(isShow){
+          this.hover = isShow
+      }
+  }
+};
+</script>
diff --git a/src/views/admin/CreateApp.vue b/src/views/admin/CreateApp.vue
@@ -60,16 +60,16 @@
     <div class="text-right">
     </div>
 			<div class="col-md-12">
+        <h3 v-if="!isEdit">Create Your App</h3>
+        <h3 v-else>Edit Your App</h3>
 				<div class="card">
-					<div class="card-header">
-						<h4 v-if="!isEdit">Create Your App</h4>
-            <h4 v-else>Edit Your App</h4>
-					</div>
+
 					<div class="card-body">
 						<form>
                <div class="row g-3 align-items-center w-100 mt-4" >
                 <div class="text-left col-lg-3 col-md-3 text-left">
-                 <label for="appId" class="col-form-label">App ID : </label>
+                 <label for="appId" class="col-form-label"> 
+                  <tool-tips infoMessage="Application ID, generated once you create an app"></tool-tips>App ID : </label>
                 </div>
                 <div class="col-lg-9 col-md-9 px-0">
                  <input
@@ -83,7 +83,7 @@
               </div>
               <div class="row g-3 align-items-center w-100 mt-4">
                 <div class="text-left col-lg-3 col-md-3 text-left">
-                 <label for="name" class="col-form-label">App Name
+                 <tool-tips infoMessage="Name of the application"></tool-tips><label for="name" class="col-form-label">App Name
                    <span style="color: red">*</span>: 
                  </label>
                 </div>
@@ -99,7 +99,7 @@
               </div>
             <div class="row g-3 align-items-center w-100 mt-4">
                 <div class="text-left col-lg-3 col-md-3 text-left">
-                 <label for="baseUrl" class="col-form-label">Base URL
+                 <tool-tips infoMessage="Enter base URL of your server. This URL will be whitelisted to access data from Hyperfyre backend. See the docs for more details."></tool-tips><label for="baseUrl" class="col-form-label">Base URL
                    <span style="color: red">*</span>: 
                  </label>
                 </div>
@@ -115,7 +115,7 @@
             </div>
             <div class="row g-3 align-items-center w-100 mt-4" v-if="isEdit">
                 <div class="col-lg-3 col-md-3 text-left">
-                 <label for="endDate" class="col-form-label">Generate new credentials:  
+                 <tool-tips infoMessage="Switch to assign new credentials to your app"></tool-tips><label for="endDate" class="col-form-label">Generate Credentials:  
                 </label>
                 </div>
                <div class="col-lg-9 col-md-9 px-0"> 
@@ -185,6 +185,7 @@
 
 <script>
 import notificationMixins from "../../mixins/notificationMixins";
+import ToolTips from "../../components/basic/toolTips";
 import Web3 from "web3"
 import {mnemonicToSeed,generateMnemonic} from "bip39"
 import HDKey from "hdkey"
@@ -198,7 +199,7 @@ import {
 import Messages from "../../utils/messages/admin/en"
 export default {
   name: "CreateApp",
-  components: {Loading},
+  components: {Loading, ToolTips},
   data() {
     return {
       isEdit:false,

diff --git a/src/views/admin/Dashboard.vue b/src/views/admin/Dashboard.vue
@@ -36,7 +36,7 @@
 <template>
    <div class="home  marginLeft marginRight">
      <h3 v-if="accessuser.adminName && accessuser.adminName!=='Self'"  class="leftAlign">Welcome {{user.name}},  you have logged in as  {{accessuser.adminName}} ! </h3>
-      <h3 v-else class="leftAlign">Welcome {{user.name}} </h3>
+      <h3 v-else class="leftAlign">Welcome {{user.name}}!</h3>
      <div  class="row">
         <div class="col-md-6">
             <Profile/>