Add snackbar update and fix overflow (#203)

VictorWinberg · Jul 15, 2021 · fb5eeaa · fb5eeaa
1 parent 4790e29
commit fb5eeaa
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 23 deletions.
diff --git a/client/src/assets/qr-scanner-button.svg b/client/src/assets/qr-scanner-button.svg
diff --git a/client/src/assets/scss/_style.scss b/client/src/assets/scss/_style.scss
@@ -7,10 +7,11 @@
   z-index: 1;
   margin: 0;
   text-align: center;
-}
 
-.snackbar-container .action {
-  outline: none;
+  .action {
+    color: $light-brand-color;
+    outline: none;
+  }
 }
 
 .snackbar-pos.top-center,

diff --git a/client/src/components/Footer.vue b/client/src/components/Footer.vue
@@ -67,11 +67,9 @@ footer {
 
 #qrcode {
   position: absolute;
-  top: -50px;
-  width: 130px;
+  bottom: 1rem;
+  width: 100px;
   cursor: pointer;
   filter: drop-shadow(0 -4px 4px rgba($black, 0.75));
-  // border: solid $dark-brand-color 10px;
-  border-radius: 50%;
 }
 </style>
diff --git a/client/src/plugins/achievements.ts b/client/src/plugins/achievements.ts
@@ -24,7 +24,7 @@ export const newAchievements = async () => {
       textColor: "black",
       actionText: "ok",
       actionTextColor: "white",
-      backgroundColor: "rgba(100,100,0,0.3)",
+      backgroundColor: "rgba(36,36,36,0.9)",
       duration: 0,
       pos: undefined,
       customClass: "achievement-popup",
@@ -62,21 +62,10 @@ const isThankful = async () => {
   if (!thankful.err && !thankful.data) {
     Snackbar.show({
       text: "Do you enjoy QR-Hunt?",
-      actionText: "Yes! <i class='fas fa-comment'></i>",
-      actionTextColor: "#f66496",
       pos: "top-center",
-      onActionClick: async () => {
-        Snackbar.show({
-          text: `<b>Thanks,</b><br/> you are so kind!`,
-          textColor: "#f66496",
-          actionText: "<i class='fas fa-heart fa-2x'></i>",
-          actionTextColor: "#f66496",
-          pos: "top-center"
-        });
-        await api.post("/api/achievements/thankful");
-
-        setTimeout(newAchievements, 5 * 1000);
-      }
+      actionText: "Yes! <i class='fas fa-thumbs-up'></i>",
+      actionTextColor: "",
+      onActionClick: () => api.post("/api/achievements/thankful")
     });
   }
 };

diff --git a/client/src/registerServiceWorker.ts b/client/src/registerServiceWorker.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 
 import { register } from "register-service-worker";
+import Snackbar from "node-snackbar";
 
 if (process.env.NODE_ENV === "production") {
   register(`${process.env.BASE_URL}service-worker.js`, {
@@ -21,6 +22,12 @@ if (process.env.NODE_ENV === "production") {
     },
     updated(): void {
       console.log("New content is available; please refresh.");
+      Snackbar.show({
+        text: "An update is available, please log out and in again!",
+        pos: "top-center",
+        actionText: "<i class='fas fa-times-circle'></i>",
+        actionTextColor: ""
+      });
     },
     offline(): void {
       console.log(