better snackbars

public/css/chat.css

@@ -164,7 +164,7 @@ a {
 }
 
 /*Neomorphic buttons*/
-button {
+.multi-button button {
   border: none;
   font-size: 1.5rem;
   transition: all 0.3s ease-in-out;
@@ -172,6 +172,7 @@ button {
   background: transparent;
   cursor: pointer;
   padding: 7px;
+  border-radius: 5px;
 }
 
 button:focus {
@@ -180,8 +181,8 @@ button:focus {
 
 button:hover {
   color: white;
-  border-radius: 100px;
-  background: #16171a;
+  /*border-radius: 100px;*/
+  /*background: #16171a;*/
 }
 
 .multi-button {
@@ -307,8 +308,11 @@ button:hover {
   padding-left: 40px;
 }
 
-/*Your messages*/
+/*recieved messages*/
 #chat-zone .message-item.moderator .message-bloc {
+  /*background-color: #376df9;*/
+  /*background: linear-gradient(100deg, #376df9 0, #ff5fa0 75%, #ffc55a 100%);*/
+
   background-color: rgb(29, 30, 33);
   color: #fff;
   position: relative;
@@ -321,7 +325,7 @@ button:hover {
   box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a;
 }
 
-/*Recieved messages*/
+/*sent messages*/
 #chat-zone .message-item.customer .message-bloc {
   background-color: rgb(47, 48, 52);
   color: #fff;

public/css/snackbar.css

@@ -16,17 +16,22 @@
   top: -100px;
   opacity: 0;
   z-index: 9999;
+
+  background-color: #376df9;
+  background: linear-gradient(100deg, #376df9 0, #ff5fa0 75%, #ffc55a 100%);
 }
 
 .snackbar-container .action {
-  background: inherit;
+  background: white;
+  padding: 7px;
+  border-radius: 3px;
   display: inline-block;
   border: none;
   font-size: inherit;
   text-transform: uppercase;
-  color: #4caf50;
+  color: #000000;
   margin: 0 0 0 24px;
-  padding: 0;
+  /*padding: 0;*/
   min-width: min-content;
   cursor: pointer;
 }

public/js/chat.js

@@ -63,11 +63,11 @@ var VideoChat = {
     VideoChat.localStream = stream;
     // Add the stream as video's srcObject.
     Snackbar.show({
-      text: "Share this URL with a friend to get started",
+      text: "Share this URL with a friend to get started!",
       actionText: "Copy Link",
-      width: "355px",
+      width: "400px",
       pos: "top-center",
-      actionTextColor: "#8688ff",
+      actionTextColor: "#616161",
       duration: 500000,
       backgroundColor: "#16171a",
       onActionClick: function (element) {
@@ -501,11 +501,11 @@ function swap() {
       text:
         "Please allow screen share. Click the middle of the picture above and then press share.",
       // actionText: "Show Me How",
-      width: "455px",
+      width: "400px",
       pos: "bottom-center",
-      actionTextColor: "#8688ff",
+      actionTextColor: "#616161",
       duration: 50000,
-      backgroundColor: "#292B32",
+
       // onActionClick: function (element) {
       //   window.open(
       //     "https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser",
@@ -529,6 +529,11 @@ function swap() {
           pauseVideo();
         }
         switchStreamHelper(stream);
+      })
+      .catch(function (err) {
+        logIt(err);
+        logIt("Error sharing screen");
+        Snackbar.close();
       });
   } else {
     VideoChat.localVideo.srcObject.getTracks().forEach((track) => track.stop());
@@ -869,9 +874,8 @@ function startUp() {
     actionText: "Show Me How",
     width: "455px",
     pos: "top-right",
-    actionTextColor: "#8688ff",
+    actionTextColor: "#616161",
     duration: 50000,
-    backgroundColor: "#292B32",
     onActionClick: function (element) {
       window.open(
         "https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser",

public/js/snackbar.js

@@ -36,7 +36,7 @@
     secondButtonText: "",
     secondButtonAria: "Description for Screen Readers",
     secondButtonTextColor: "#4CAF50",
-    backgroundColor: "#323232",
+    // backgroundColor: "#323232",
     pos: "bottom-left",
     duration: 5000,
     customClass: "",
@@ -75,7 +75,7 @@
     $p.style.lineHeight = "1em";
     $p.innerHTML = options.text;
     Snackbar.snackbar.appendChild($p);
-    Snackbar.snackbar.style.background = options.backgroundColor;
+    // Snackbar.snackbar.style.background = options.backgroundColor;
 
     if (options.showSecondButton) {
       var secondButton = document.createElement("button");