Redesign refresh button

dmoj/urls.py

@@ -391,7 +391,7 @@ favicon_paths = ['apple-touch-icon-180x180.png', 'apple-touch-icon-114x114.png',
                  'favicon-96x96.png',
                  'favicon-32x32.png', 'favicon-16x16.png', 'android-chrome-192x192.png', 'android-chrome-48x48.png',
                  'mstile-310x150.png', 'apple-touch-icon-144x144.png', 'browserconfig.xml', 'manifest.json',
-                 'apple-touch-icon-120x120.png', 'mstile-310x310.png']
+                 'apple-touch-icon-120x120.png', 'mstile-310x310.png', 'reload.png']
 
 for favicon in favicon_paths:
     urlpatterns.append(url(r'^%s$' % favicon, RedirectView.as_view(

templates/chat/chat.html

@@ -217,14 +217,19 @@
             margin-top: -0.5em;
         }
         #refresh-button {
-            padding: 0 0.1em 0 0.1em;
-            margin: 0.1em;
-            border-radius: 0.1em;
-            background: goldenrod;
+            padding: 0;
+            margin-left: auto;
+            margin-right: 0.3em;
+            background: transparent;
+            border: none;
+            height: 1.5em;
+            width: 1.5em;
         }
         #refresh-button:hover {
             background: lightgreen;
-            color: grey !important;
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+            transition: 1.5s ease-in-out;
         }
         .status-pic {
             height: 1.3em;
@@ -255,6 +260,7 @@
         }
         .status-section-title {
             cursor: pointer;
+            margin-top: 0.5em;
         }
         ::-webkit-scrollbar {
             width: 20px;
@@ -274,6 +280,13 @@
         ::-webkit-scrollbar-thumb:hover {
             background-color: #a8bbbf;
         }
+
+        @media (min-width: 800px) {
+            #page-container {
+                position:fixed;
+                overflow:hidden;
+            }
+        }
     </style>
 {% endblock media %}
 
@@ -301,9 +314,13 @@
         </div>
         <button id="chat-submit" style="display:none;"> Send </button>
         <div id="chat-online" class="chat-right-panel sidebox">
-            <h3>
+            <h3 style="display:flex">
                 {{_('Online Users')}}
-                <button id="refresh-button" class="fa fa-rotate-right" title="{{_('Refresh')}}"></button> 
+                <button id="refresh-button" title="{{_('Refresh')}}">
+                    <img src="/reload.png"
+                         width="100%"
+                    >
+                </button> 
             </h3>
             <div id="chat-online-content">
                 {% include "chat/online_status.html" %}

templates/chat/online_status.html

@@ -22,6 +22,5 @@
             </li>
         {% endfor %}
         </ul>
-        <br>
     {% endif %}
 {% endfor %}