Moved snackbar to center. Reduced snackbar timeout by 3sec. #573

client/core/src/components/snackbar/snackbar.js

@@ -66,7 +66,7 @@ export default class Controller extends Component {
         let shape = this.createShape(data);
 
         setTimeout(() =>
-            this.hide(shape), data.timeout || 6000);
+            this.hide(shape), data.timeout || 3000);
 
         setTimeout(() =>
             shape.classList.add('shown'), 30);

client/core/src/components/snackbar/style.scss

@@ -1,31 +1,32 @@
 @import "colors";
 
 vn-snackbar #shapes {
-    position: fixed;
-    bottom: 0;
-    right: 15px;
-    width: 20em;
     max-height: 20.625em;
+    margin-left: -12.5em;
+    position: fixed;
     z-index: 100;
+    width: 25em;
+    left: 50%;
+    bottom: 0
 }
 
 vn-snackbar .shape {
-    box-sizing: border-box;
     background-color: rgba(1, 1, 1, 0.8);
+    box-shadow: 0 0 .4em rgba(1,1,1,.4);
+    transition: transform 300ms ease-in-out;
+    transform: translateY(20em);
+    box-sizing: border-box;
+    border-radius: .2em;
+    margin-bottom: 15px;
     color: white;
     padding: 1em;
-    border-radius: .2em;
-    box-shadow: 0 0 .4em rgba(1,1,1,.4);
-    margin-bottom: 15px;
-    transform: translateX(20em);
-    transition: transform 300ms ease-in-out;
-
+    
     &.text {
         text-align: center
     }
 
     &.shown {
-        transform: translateX(0);
+        transform: translateY(0);
     }
 
     &.success {
@@ -46,15 +47,15 @@ vn-snackbar .shape {
     }
 
     & > button {
-        cursor: pointer;
-        float: right;
-        text-transform: uppercase;
-        border: none;
         background-color: transparent;
-        font-weight: bold;
-        color: $main-01;
-        padding: .5em;
-        margin: -.5em;
+        text-transform: uppercase;
         margin-left: .5em;
+        font-weight: bold;
+        cursor: pointer;
+        color: $main-01;
+        float: right;
+        border: none;
+        padding: .5em;
+        margin: -.5em
     }
 }