Merge pull request #1456 from hypersign-protocol/feature/customTheme

implemented custom theme
hypersign-protocol · Jul 14, 2022 · 45de44e · 45de44e
2 parents caf03eb + f478e20
commit 45de44e
Show file tree

Hide file tree

Showing 41 changed files with 251 additions and 95 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-   <NavBar :title="name" :show="showUserNav" /> 
+   <NavBar :title="name" :show="showUserNav" :themeData="themeData" /> 
     <!-- <NavBar title="Fyre" :show="showUserNav" /> -->
 
     <!-- <div :class="[
@@ -59,6 +59,10 @@ export default {
   },
   data() {
     return {
+      themeData: {
+        themeColor: "",
+        logoPath: ""
+      },
       name: config.appName,
       hover: false,
       authToken: localStorage.getItem("authToken"),
@@ -159,6 +163,11 @@ export default {
         this.isSubscribed = isSubscribed;
     })
 
+  
+    eventBus.$on("UpdateThemeEvent", (themeData) => {
+      Object.assign(this.themeData, { ...themeData })
+    })
+
     if(this.$route.meta.admin){
       this.showNavbar =
           window.location.pathname.includes("/admin/participants") ||

diff --git a/src/components/participant/Action.vue b/src/components/participant/Action.vue
@@ -6,7 +6,7 @@
     <template v-for="(actionItem, index) in ActionSchema">
       <component v-if="actionItem.type==='INFO_TEXT'" :is="CapitaliseString(actionItem.type)" :key="index"
         :idValue="index" :data="actionItem" :done="actionItem.isDone" :authToken="authToken"
-        @input="updateUserInfo(actionItem, $event)">
+        @input="updateUserInfo(actionItem, $event)" :themeData="themeData">
       </component>
     </template>
 
@@ -16,7 +16,7 @@
 
       <component v-if="actionItem.type!=='INFO_TEXT'" :is="CapitaliseString(actionItem.type)" :key="index"
         :idValue="index" :data="actionItem" :authToken="authToken" :done="actionItem.isDone"
-        @input="updateUserInfo(actionItem, $event)">
+        @input="updateUserInfo(actionItem, $event)"  :themeData="themeData">
       </component>
     </template>
   </div>
@@ -92,6 +92,10 @@ export default {
       required: true,
       type: Array,
     },
+    themeData:{
+      required: true,
+      type: Object,
+    }
   },
   components: {
     BinanceNetwork,

diff --git a/src/components/participant/ActionInputs/BinanceErc20.vue b/src/components/participant/ActionInputs/BinanceErc20.vue
@@ -86,6 +86,9 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
   components: {
@@ -94,8 +97,8 @@ export default {
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BinanceErc721.vue b/src/components/participant/ActionInputs/BinanceErc721.vue
@@ -87,6 +87,9 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
   components: {
@@ -95,8 +98,8 @@ export default {
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BinanceNetwork.vue b/src/components/participant/ActionInputs/BinanceNetwork.vue
@@ -100,6 +100,9 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
   components: {
@@ -108,8 +111,8 @@ export default {
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BlockchainAvax.vue b/src/components/participant/ActionInputs/BlockchainAvax.vue
@@ -79,13 +79,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BlockchainBsc.vue b/src/components/participant/ActionInputs/BlockchainBsc.vue
@@ -79,13 +79,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BlockchainCardano.vue b/src/components/participant/ActionInputs/BlockchainCardano.vue
@@ -79,13 +79,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BlockchainEth.vue b/src/components/participant/ActionInputs/BlockchainEth.vue
@@ -78,13 +78,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BlockchainMatic.vue b/src/components/participant/ActionInputs/BlockchainMatic.vue
@@ -79,13 +79,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BlockchainOne.vue b/src/components/participant/ActionInputs/BlockchainOne.vue
@@ -79,13 +79,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BlockchainReef.vue b/src/components/participant/ActionInputs/BlockchainReef.vue
@@ -79,13 +79,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/BlockchainTez.vue b/src/components/participant/ActionInputs/BlockchainTez.vue
@@ -79,13 +79,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/DiscordJoin.vue b/src/components/participant/ActionInputs/DiscordJoin.vue
@@ -91,13 +91,16 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/EthereumErc20.vue b/src/components/participant/ActionInputs/EthereumErc20.vue
@@ -101,6 +101,9 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
   components: {
@@ -109,8 +112,8 @@ export default {
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/EthereumErc721.vue b/src/components/participant/ActionInputs/EthereumErc721.vue
@@ -85,6 +85,9 @@ export default {
     },
     done: {
       required: true,
+    }, 
+    themeData: {
+      required: true,
     }
   },
   components: {
@@ -93,8 +96,8 @@ export default {
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/EthereumNetwork.vue b/src/components/participant/ActionInputs/EthereumNetwork.vue
@@ -92,6 +92,9 @@ export default {
     },
     done: {
       required: true,
+    },
+    themeData: {
+      required: true,
     }
   },
   components: {
@@ -100,8 +103,8 @@ export default {
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },

diff --git a/src/components/participant/ActionInputs/HyperlinkUrl.vue b/src/components/participant/ActionInputs/HyperlinkUrl.vue
@@ -101,12 +101,15 @@ export default {
     done: {
       required: true,
     },
+    themeData: {
+      required: true,
+    }
   },
   computed: {
     buttonThemeCss() {
       return {
-        "--button-bg-color": config.app.buttonBgColor,
-        "--button-text-color": config.app.buttonTextColor,
+        '--button-bg-color': this.themeData.buttonBGColor,
+        '--button-text-color': this.themeData.buttonTextColor
       };
     },
   },

diff --git a/src/components/participant/ActionInputs/InputDate.vue b/src/components/participant/ActionInputs/InputDate.vue
@@ -58,13 +58,16 @@ export default {
 		},
 		done: {
 			required: true,
+		},
+		themeData: {
+			required: true,
 		}
 	},
 computed:{
  buttonThemeCss() {
       return {
-        '--button-bg-color': config.app.buttonBgColor,
-        '--button-text-color':config.app.buttonTextColor
+		  '--button-bg-color': this.themeData.buttonBGColor,
+		  '--button-text-color': this.themeData.buttonTextColor
       }
      }
   },