Change UI

resources/base.scss

@@ -181,7 +181,7 @@ header {
     }
 
     a {
-        color: #9c3706;
+        color: lightcoral;
     }
 
     li {
@@ -291,7 +291,7 @@ nav {
 
                 &:hover {
                     border-top: 2px solid #9c3706;
-                    color: #9c3706;
+                    color: lightcoral;
                     background: rgba(255, 255, 255, 0.25);
                     margin: 0;
                 }
@@ -314,7 +314,7 @@ nav {
                 left: 5px;
                 display: none;
                 color: #fff;
-                background: #00c4cc;
+                background: darkcyan;
                 margin: 0 !important;
                 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
 
@@ -329,6 +329,10 @@ nav {
                 li {
                     display: block;
 
+                    a {
+                        color: white !important;
+                    }
+                    
                     a, button {
                         padding: 8px 20px 8px 8px !important;
                         font-size: 0.8em;
@@ -680,12 +684,31 @@ math {
 }
 
 #notification {
-    color: gray;
+    color: lightsteelblue;
     float: left;
-    margin-top: 0.8em;
+    margin-top: 0.6em;
     margin-right: 0.8em;
     font-size: 1.3em;
 }
+
+#chat-icon {
+    color: lightseagreen;
+    float: left;
+    margin-top: 0.6em;
+    margin-right: 0.5em;
+    font-size: 1.3em;
+}
+
+.unread_boxes {
+    background-color: red;
+    color: white;
+    border-radius: 50%;
+    padding: 1px 4px;
+    margin-left: -12px;
+    font-size: x-small;
+    font-family: monospace;
+}
+
 @media (max-width: 500px) {
     #notification {
         margin-top: 0.6em;

resources/chatbox.scss

@@ -171,13 +171,7 @@
     cursor: pointer;
     margin-top: 0.5em;
 }
-.unread_boxes {
-    background-color: darkcyan;
-    color: white;
-    border-radius: 50%;
-    padding: 0 3px;
-    margin-left: -4px;
-}
+
 @media (max-width: 799px) {
     #chat-area {
         height: 500px;

templates/base.html

@@ -151,12 +151,12 @@
                 name: '{{ request.user.username|escapejs }}'
             };
             $(function() {
-                if ($('.nav-chat').length) {
+                if ($('#chat-icon').length) {
                     $.get("{{url('get_unread_boxes')}}")
                         .done(function(data) {
                             if (data.unread_boxes) {
                                 var html = `<sub class="unread_boxes">${data.unread_boxes}</sub>`;
-                                $('.nav-chat').append(html);        
+                                $('#chat-icon').append(html);        
                             }
                         })
                         .fail(function(data) {
@@ -219,15 +219,18 @@
                 </li>
             {% endfor %}
         </ul>
-        <div style="float: right; display: inline;">
+        <div style="float: right; display: inline; font-size: larger;">
             {% if request.user.is_authenticated %}
+            <span title="{{_('Chat')}}">
+                <a id="chat-icon" href="{{ url('chat', '') }}" class="icofont-wechat" aria-hidden="true">
+                </a>
+            </span>
+
             {% set unseen_cnt = request.profile.count_unseen_notifications %}
-            <span class="{{ 'notification-open' if unseen_cnt > 0 }}">
-                <a href="{{ url('notification') }}" class="fa fa-bell" id="notification" aria-hidden="true">
+            <span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}">
+                <a href="{{ url('notification') }}" class="icofont-alarm" id="notification" aria-hidden="true">
                 {% if unseen_cnt > 0 %}    
-                <span>
-                    {{ unseen_cnt }}
-                </span>
+                <sub class="unread_boxes">{{unseen_cnt}}</sub>
                 {% endif %}
                 </a>
             </span>
@@ -258,7 +261,7 @@
                                     <li>
                                         <form action="{{ url('auth_logout') }}" method="POST">
                                             {% csrf_token %}
-                                            <button type="submit">{{ _('Log out') }}</button>
+                                            <button type="submit" style="color: red !important">{{ _('Log out') }}</button>
                                         </form>
                                     </li>
                                 {% endif %}