Toast better styling

Author: nikitaeverywhere

source/client/scss/toast/toast.scss

@@ -1,6 +1,8 @@
 @import "../mixins";
 @import "../const";
 
+$messagesAlpha: .8;
+
 .toast {
 
     position: fixed;
@@ -11,23 +13,20 @@
 
     > .body {
 
-        font-size: 12pt;
-        margin: 3px;
-        padding: .3em;
+        font-size: $fontNormal;
+        margin: 1em;
+        padding: .5em;
+        border-radius: $defaultPadding/2;;
         background: rgba(255, 255, 255, 0.8);
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 
         &.info {
-            background: #fffcc8;
-        }
-
-        &.info:before {
-            content: "[INFO] ";
+            background: rgba($colorP1, $messagesAlpha);
         }
 
         &.warning {
 
-            background: #e8ab1f;
+            background: rgba($colorP4, $messagesAlpha);
 
             > .icon {
                 color: white;
@@ -38,11 +37,11 @@
         &.error {
             color: white;
             text-shadow: 0 0 1px black;
-            background: #ff4300;
+            background: rgba($colorP2, $messagesAlpha);
         }
 
         &.done {
-            background: $colorP3;
+            background: rgba($colorP3, $messagesAlpha);
         }
 
     }