From a029c7ccae9353f8ad07fb8b9bc64d0545b41c15 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 18 Dec 2022 20:53:32 +0800
Subject: [PATCH] Change from 'x' to '<' on Status page

---
 src/app.css               | 1 -
 src/components/icon.jsx   | 1 +
 src/components/loader.css | 5 +++--
 src/pages/status.jsx      | 8 +++++---
 4 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index 63e0568..96d7bbe 100644
--- a/src/app.css
+++ b/src/app.css
@@ -72,7 +72,6 @@ a.mention span {
 
 .deck header {
   min-height: 3em;
-  padding: 0 8px;
   position: sticky;
   top: 0;
   background-color: var(--bg-blur-color);
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index b16af64..7693aea 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -41,6 +41,7 @@ const ICONS = {
   popout: 'mingcute:external-link-line',
   popin: ['mingcute:external-link-line', '180deg'],
   plus: 'mingcute:add-circle-line',
+  'chevron-left': 'mingcute:left-line',
 };
 
 function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
diff --git a/src/components/loader.css b/src/components/loader.css
index 71933a2..09f827b 100644
--- a/src/components/loader.css
+++ b/src/components/loader.css
@@ -3,8 +3,9 @@
   width: 16px;
   height: 16px;
   pointer-events: none;
-  animation: slow-appear .3s ease-in-out 1s both;
+  animation: slow-appear 0.3s ease-in-out 1s both;
   vertical-align: middle;
+  margin: 8px;
 }
 @keyframes slow-appear {
   0% {
@@ -40,4 +41,4 @@
 }
 .loader-container.hidden .loader {
   animation: none;
-}
\ No newline at end of file
+}
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index cee847f..b9d7366 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -167,12 +167,14 @@ function StatusPage({ id }) {
         }`}
       >
         <header>
+          <div>
+            <Link class="button plain deck-close" href={closeLink}>
+              <Icon icon="chevron-left" size="xl" />
+            </Link>
+          </div>
           <h1>Status</h1>
           <div class="header-side">
             <Loader hidden={uiState !== 'loading'} />
-            <Link class="button plain deck-close" href={closeLink}>
-              <Icon icon="x" size="xl" />
-            </Link>
           </div>
         </header>
         <ul class="timeline flat contextual">