Update

Author: Gruce

package.json

@@ -1,6 +1,6 @@
 {
   "name": "enab",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Enab System",
   "main": "./dist/main/index.js",
   "scripts": {

src/renderer/assets/scss/style.scss

@@ -9,7 +9,7 @@ body{
     // background: linear-gradient(45deg, #4d20d4 30%, #20d4a7 100%) !important;
 
 
-    background: #4776E6;  /* fallback for old browsers */
+    background-color: #4776E6;  /* fallback for old browsers */
 
     // background: -webkit-linear-gradient(to right, #5688ff, #4776E6);  /* Chrome 10-25, Safari 5.1-6 */
     // background: linear-gradient(to right, #5688ff, #4776E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
@@ -31,6 +31,7 @@ body{
     max-height: calc(100vh - 6rem) !important;
     border-radius: $border-radius-lg !important;
     padding: $spacer * 1.75;
+
 }
 
 

src/renderer/components/supermarket/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="position-absolute" style="top: 0px; left: 0%; width: 100%;z-index:1">
+    <div class="position-absolute" style="top: 0%; left: 0%; width: 100%;z-index:1">
       <div class="navbar p-2">
         <div class="row w-100">
           <div class="col-6 d-flex align-items-center">

src/renderer/layouts/supermarket.vue

@@ -2,6 +2,7 @@
   <CThemeProvider>
     <CReset />
     <div class="main-container">
+      <div class="bg" />
       <SupermarketNavbar />
       <client-only>
         <UtilitiesKeyup @keyup="keyboardEvent"></UtilitiesKeyup>
@@ -15,11 +16,11 @@
 </template>
 
 <script>
-import { CThemeProvider, CReset } from '@chakra-ui/vue'
+import { CThemeProvider, CReset } from "@chakra-ui/vue";
 import { mapMutations, mapGetters, mapActions, mapState } from "vuex";
 
 export default {
-  components: {CThemeProvider},
+  components: { CThemeProvider },
 
   computed: {
     showMenu() {
@@ -29,16 +30,18 @@ export default {
       backgroundColor: "supermarket/utilities/backgroundColor",
     }),
   },
-  mounted(){
+  mounted() {
     // Recharge Notification
-    this.$echo.channel("recharge-" + this.$auth.user.id).listen("RechargeRequestEvent", (data) => {
-      this.$toast({
-        title: data.message,
-        status: "info",
-        duration: 10000,
+    this.$echo
+      .channel("recharge-" + this.$auth.user.id)
+      .listen("RechargeRequestEvent", (data) => {
+        this.$toast({
+          title: data.message,
+          status: "info",
+          duration: 10000,
+        });
+        this.$auth.fetchUser();
       });
-      this.$auth.fetchUser();
-    });
   },
   created() {
     this.fetchServices();
@@ -111,5 +114,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-//
+.bg {
+  background: #5415e7;  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #6A82FB, #5415e7);  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #6A82FB, #5415e7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+
+
+
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  right: 0;
+  position: absolute;
+  opacity: 0.4;
+  // filter: blur(25px);
+  overflow: hidden;
+  z-index: -1;
+
+  background-size: 300% 100%;
+  animation: gradient 3s linear infinite;
+  animation-direction: alternate;
+}
+@keyframes gradient {
+  0% {
+    background-position: 0%;
+  }
+  100% {
+    background-position: 100%;
+  }
+}
 </style>