From f329964792a52055ab3c54fe825c8a2751451a28 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Mon, 15 Oct 2018 22:45:06 +0200
Subject: [PATCH] Updated lock notif styling.

---
 assets/less/classes/forum/status.less | 19 ++++++++-----------
 templates/forum/macros.twig           | 10 ++++++----
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/assets/less/classes/forum/status.less b/assets/less/classes/forum/status.less
index d55446fb..b142919f 100644
--- a/assets/less/classes/forum/status.less
+++ b/assets/less/classes/forum/status.less
@@ -4,24 +4,21 @@
     align-items: center;
     min-height: 40px;
     margin-bottom: 2px;
-    box-shadow: 0 1px 2px var(--accent-colour);
 
     &__icon {
         height: 40px;
         width: 40px;
-        background-size: 35px;
-        background-image: url('https://static.flash.moe/images/topic-icons/topic-locked-read.png');
-        background-position: center;
-        background-repeat: no-repeat;
-        background-color: var(--accent-colour);
-        flex-grow: 0;
-        flex-shrink: 0;
+        background-image: linear-gradient(90deg, var(--accent-colour), transparent);
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 2em;
     }
 
     &__text {
-        margin: 0 10px;
-        flex-grow: 1;
-        flex-shrink: 1;
+        margin: 0 5px;
+        flex: 1 1 auto;
     }
 
     &__emphasis {
diff --git a/templates/forum/macros.twig b/templates/forum/macros.twig
index 85fe48a7..9887181a 100644
--- a/templates/forum/macros.twig
+++ b/templates/forum/macros.twig
@@ -137,14 +137,16 @@
 
 {% macro forum_topic_locked(locked, archived) %}
     {% if locked is not null or archived %}
-        <div class="forum__status">
-            <div class="forum__status__icon"></div>
+        <div class="container container--new forum__status">
+            <div class="forum__status__icon">
+                <i class="fas fa-{{ archived ? 'archive' : 'lock' }}"></i>
+            </div>
             <div class="forum__status__text">
                 {% if archived %}
                     This topic has been <span class="forum__status__emphasis">archived</span>.
                 {% else %}
-                    This topic was locked <time
-                        class="forum__status__emphasis"
+                    This topic was locked
+                    <time class="forum__status__emphasis"
                         datetime="{{ locked|date('c') }}"
                         title="{{ locked|date('r') }}">{{ locked|time_diff }}</time>.
                 {% endif %}