Change from 'x' to '<' on Status page

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

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 = '' }) {

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;
-}
+}

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">