toasts: refedined how notifications looks

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html

@@ -1,25 +1,24 b''
 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../../../../bower_components/paper-toast/paper-toast.html">
 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
         <style include="shared-styles"></style>
         <link rel="stylesheet" href="rhodecode-toast.css">
 
         <paper-toast id="p-toast" duration="0"  horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
             <div class="toast-message-holder">
                 <template is="dom-repeat" items="{{toasts}}">
-                    <div class="toast-notification">
-                    <span class$="toast-level {{item.level}}">{{item.level}}</span>
+                    <div class$="alert alert-{{item.level}}">
                     <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html>
                     </div>
                 </template>
             </div>
             <div class="toast-close">
-                <paper-button on-tap="dismissNotifications" class="btn btn-primary">{{_gettext('Close now')}}</paper-button>
+                <paper-button on-tap="dismissNotifications" class="btn btn-default">{{_gettext('Close now')}}</paper-button>
             </div>
         </paper-toast>
     </template>
 
     <script src="rhodecode-toast.js"></script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less

@@ -1,44 +1,28 b''
 @import '../../../../css/variables';
 
 paper-toast{
     width: 100%;
     min-width: 400px;
-    --paper-toast-background-color: #ffffff;
+    --paper-toast-background-color: transparent;
     --paper-toast-color: #000000;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
 }
 paper-toast a{
     font-weight: bold
 }
 
 .toast-message-holder {
-    width: ~'calc(100% - 150px)';
-    display: inline-block;
 }
 .toast-close {
-    display: inline-block;
-    width: 145px;
     text-align: right;
-    float: right;
-}
-.toast-notification {
-    padding: 10px 0 10px 0;
-}
 
-.toast-level {
-    display: inline-block;
-    min-width: 100px;
-    font-weight: bold;
-    text-transform: uppercase;
-    &.info{
-        color: @alert4;
-    }
-    &.success {
-        color: @alert1;
-    }
-    &.error, &.danger {
-        color: @alert2;
-    }
-    &.warning {
-        color: @alert3;
+    paper-button{
+        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
     }
 }
+paper-toast .alert{
+    margin: 0px 0 15px 0;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
+}