From 6229e6a3a102e2923d325f18fbe2e31471abd563 Mon Sep 17 00:00:00 2001
From: zmagod <zmago_devetak@yahoo.com>
Date: Tue, 4 Oct 2016 16:12:56 +0200
Subject: [PATCH] styled notification settings button [fixes SCI-529]

---
 app/assets/stylesheets/themes/scinote.scss    | 37 ++++++++++++++++++-
 app/views/users/settings/preferences.html.erb |  8 ++--
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index c38e2637e..72c881acf 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -550,9 +550,42 @@ a[data-toggle="tooltip"] {
 }
 
 .notification-settings-labels {
-  line-height: 2em;
-  margin-top: 40px;  
+  line-height: 3em;
+  margin-top: 40px;
 }
+
+.notification-settings-container {
+  margin-top: 50px;
+  margin-bottom: 50px;
+
+  .col-xs-2 {
+    padding-top: 20px;
+  }
+
+  .col-xs-3 {
+    padding-top: 30px;
+  }
+
+  .btn-group {
+    margin-top: 15px;
+  }
+
+  .assignment {
+    background-color: $color-theme-primary;
+    border-radius: 50%;
+    color: $color-wild-sand;
+    font-size: 15px;
+    margin-left: 20px;
+    margin-right: 15px;
+    padding: 7px;
+  }
+
+  .img-circle {
+    margin-left: 20px;
+    margin-right: 15px;
+  }
+}
+
 // Help link
 #help-link {
   padding: 13px;
diff --git a/app/views/users/settings/preferences.html.erb b/app/views/users/settings/preferences.html.erb
index 1f0ea1b6e..62b61e9e0 100644
--- a/app/views/users/settings/preferences.html.erb
+++ b/app/views/users/settings/preferences.html.erb
@@ -35,20 +35,22 @@
       <%= link_to t('users.settings.preferences.tutorial.repeat_tutorial'), tutorial_path(format: :json), remote: true, class: "btn btn-primary", id: "reset-tutorial-btn" %>
     <% end %>
 
-    <div class="container">
+    <div class="container notification-settings-container">
       <h4><%= t('notifications.title') %></h4>
       <%= form_for(@user,
                    url: notifications_settings_path(format: :json),
                    html: { method: :post, id: 'notifications-settings-panel' },
                    remote: true) do |f| %>
       <div class="row">
-        <div class="col-xs-4 text-right">
+        <div class="col-xs-3">
           <div class="notification-settings-labels">
+            <%= image_tag 'icon_small/missing.png', class: 'img-circle' %>
             <%= f.label t('notifications.form.recent_notification') %> <br>
+            <span class="assignment"><%= fa_icon 'newspaper-o' %></span>
             <%= f.label t('notifications.form.assignments') %>
           </div>
         </div>
-        <div class="col-xs-8">
+        <div class="col-xs-2 text-center">
             <h5><%= t('notifications.title') %></h5>
               <%= check_box_tag :recent_notification, @user.recent_notification %> <br>
               <%= check_box_tag :assignments_notification, @user.assignments_notification %>