notifications: make styling match the design

rhodecode/public/css/polymer.less

@@ -1,15 +1,9 b''
 //Primary CSS
 //--- IMPORTS ------------------//
 @import 'helpers';
 @import 'mixins';
 @import 'rcicons';
 @import 'fonts';
 @import 'variables';
-@import 'legacy_code_styles';
 @import 'type';
-@import 'alerts';
 @import 'buttons';
-@import 'tags';
-@import 'examples';
-@import 'login';
-@import 'comments';

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

@@ -1,23 +1,24 b''
 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.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>
                     <rhodecode-unsafe-html text="{{item.message}}"></rhodecode-unsafe-html>
                     </div>
                 </template>
             </div>
             <div class="toast-close">
-                <paper-button on-tap="dismissNotifications" class="btn btn-info">{{_gettext('Close now')}}</paper-button>
+                <paper-button on-tap="dismissNotifications" class="btn btn-primary">{{_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,39 +1,44 b''
+@import '../../../../css/variables';
+
 paper-toast{
     width: 100%;
     min-width: 400px;
     --paper-toast-background-color: #ffffff;
     --paper-toast-color: #000000;
 }
 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, &.success {
-        color: #0ac878;
+    &.info{
+        color: @alert4;
+    }
+    &.success {
+        color: @alert1;
     }
     &.error, &.danger {
-        color: #e85e4d;
+        color: @alert2;
     }
     &.warning {
-        color: #ffc854;
+        color: @alert3;
     }
 }

rhodecode/templates/admin/my_account/my_account_notifications.html

@@ -1,96 +1,96 b''
 <template is="dom-bind" id="notificationsPage">
 <style include="shared-styles"></style>
 <iron-ajax id="toggleNotifications"
            method="post"
            url="${url('my_account_notifications_toggle_visibility')}"
            content-type="application/json"
            loading="{{changeNotificationsLoading}}"
            on-response="handleNotifications"
            handle-as="json"></iron-ajax>
 
 <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">${_('Your live notification settings')}</h3>
   </div>
     <div class="panel-body">
 
         <p><strong>IMPORTANT:</strong> This feature requires enabled channelstream websocket server to function correctly.</p>
 
         <p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
 
         <div class="form">
             <!-- fields -->
             <div class="fields">
                 <div class="field">
                     <div class="label">
                         <label for="new_email">${_('Notifications status')}:</label>
                     </div>
                     <div class="checkboxes">
                         <div style="display: inline-block">
                         <paper-toggle-button on-change="toggleNotifications"  ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></paper-toggle-button>
                         <paper-tooltip>Toggle your notifications on/off globally.</paper-tooltip>
                         </div>
                         <template is="dom-if" if="{{changeNotificationsLoading}}">
                         <paper-spinner active class="toggle-ajax-spinner"></paper-spinner>
                         </template>
                     </div>
                 </div>
                 <div class="buttons">
-                    <a class="btn btn-info" id="test-notification">Test notification</a>
+                    <a class="btn btn-default" id="test-notification">Test notification</a>
                 </div>
             </div>
         </div>
 
     </div>
 </div>
 
 <script type="application/javascript">
     /** because im not creating a custom element for this page
      * we need to push the function onto the dom-template
      * ideally we turn this into notification-settings elements
      * then it will be cleaner
      */
     var ctrlr = $('#notificationsPage')[0];
     ctrlr.toggleNotifications = function(event){
         var ajax = $('#toggleNotifications')[0];
         ajax.headers = {"X-CSRF-Token": CSRF_TOKEN}
         ajax.body = {notification_status:event.target.active};
         ajax.generateRequest();
     };
     ctrlr.handleNotifications = function(event){
         $('paper-toggle-button')[0].active = event.detail.response;
     };
 
     function checkBrowserStatus(){
         var browserStatus = 'Unknown';
 
         if (!("Notification" in window)) {
             browserStatus = 'Not supported'
         }
         else if(Notification.permission === 'denied'){
             browserStatus = 'Denied';
             $('.flash_msg').append('<div class="alert alert-error">Notifications are blocked on browser level - you need to enable them in your browser settings.</div>')
         }
         else if(Notification.permission === 'granted'){
             browserStatus = 'Allowed';
         }
 
         $('#browser-notification-status').text(browserStatus);
     };
 
     checkBrowserStatus();
 
 $('#test-notification').on('click', function(e){
     var levels = ['info', 'error', 'warning', 'success'];
     var level = levels[Math.floor(Math.random()*levels.length)];
     var payload = {
         message: {
             message: 'This is a test notification.',
             level: level,
             testMessage: true
         }
     };
     $.Topic('/notifications').publish(payload);
 })
 </script>
 </template>