Make refresh button more prominent

src/pages/status.css

@@ -1,16 +1,32 @@
-.status-deck header {
+.status-deck {
-  white-space: nowrap;
+  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;
+@keyframes spin {
-  flex-grow: 1;
+  to {
-  text-overflow: ellipsis;
+    transform: rotate(360deg);
-  overflow: hidden;
+  }
-  white-space: nowrap;
-  align-self: stretch;
-}
-.status-deck header h1 .deck-back {
-  margin-left: -16px;
 }
 
 .hero-heading {

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);