From 164948c75ea19c566e7086acd8fea4d3be9b013e Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Mon, 22 Aug 2016 18:03:46 +0530
Subject: [PATCH] tor: Refactor showing loader icon

- So that it can be used for other applications also.

- Also remove second status icon in green and use the status loading in
  it's place.  This is more consistent placement of status icon.

- Also reduce the size of the icon as it is not indication for page
  loading (page loading icons are large because they substitute page
  content until it is loaded).  This makes it consistent with other
  status icon.
---
 plinth/modules/tor/templates/tor.html | 19 +------------------
 static/themes/default/css/plinth.css  | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/plinth/modules/tor/templates/tor.html b/plinth/modules/tor/templates/tor.html
index f68a0f312..5c55aff07 100644
--- a/plinth/modules/tor/templates/tor.html
+++ b/plinth/modules/tor/templates/tor.html
@@ -27,22 +27,6 @@
     <meta http-equiv="refresh" content="3" />
   {% endif %}
 
-  <style type="text/css">
-    .loader {
-      border: 16px solid #f3f3f3; /* Light grey */
-      border-top: 16px solid #3498db; /* Blue */
-      border-radius: 50%;
-      width: 80px;
-      height: 80px;
-      animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
-    }
-  </style>
-
 {% endblock %}
 
 
@@ -53,10 +37,9 @@
   {% if config_running %}
 
     <p class="running-status-parent">
-      <span class="running-status active"></span>
+      <span class="running-status loading"></span>
       {% trans "Tor configuration is being updated" %}
     </p>
-    <div class="loader"></div>
 
   {% else %}
 
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index 797316777..1d7e5ae9c 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -37,6 +37,21 @@ body {
     background-color: rgb(228, 66, 66);
 }
 
+.running-status.loading {
+    border: 4px solid #f3f3f3; /* Light grey */
+    border-top: 4px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 .form-diagnostics-button {
     display: inline-block;
 }