From 37c784dad27ec300a96b56726931ee7e045edc0d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 16 Jan 2024 15:45:57 +0800
Subject: [PATCH] Make refresh button more prominent

---
 src/pages/status.css | 40 ++++++++++++++++++++++++++++------------
 src/pages/status.jsx |  2 +-
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/pages/status.css b/src/pages/status.css
index 67c38ba8..b971c76e 100644
--- a/src/pages/status.css
+++ b/src/pages/status.css
@@ -1,16 +1,32 @@
-.status-deck header {
-  white-space: nowrap;
+.status-deck {
+  header {
+    white-space: nowrap;
+  }
+  header h1 {
+    min-width: 0;
+    flex-grow: 1;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    align-self: stretch;
+  }
+  header h1 .deck-back {
+    margin-left: -16px;
+  }
+
+  .button-refresh .icon {
+    animation: spin 1s linear;
+  }
+  .button-refresh:is(:hover, :focus) .icon {
+    transition: transform 1s linear;
+    transform: rotate(360deg);
+  }
 }
-.status-deck header h1 {
-  min-width: 0;
-  flex-grow: 1;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  align-self: stretch;
-}
-.status-deck header h1 .deck-back {
-  margin-left: -16px;
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .hero-heading {
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 7a18c3fd..34de3b52 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -1118,7 +1118,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
             {showRefresh && (
               <button
                 type="button"
-                class="plain4"
+                class="plain button-refresh"
                 onClick={() => {
                   states.reloadStatusPage++;
                   setShowRefresh(false);