From 0f9608d9a35a98a0e6c052489e436d622c779936 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Wed, 6 Oct 2021 10:45:25 -0500
Subject: [PATCH] Add icon to the left pane archive button

---
 stylesheets/_modules.scss          | 33 ++++++++++++++++++++++++++++--
 ts/components/ConversationList.tsx |  5 ++++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index bb6bfe601c..6089fa9a61 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5656,9 +5656,10 @@ button.module-image__border-overlay:focus {
     &--archive-button {
       @include button-reset;
 
-      @include font-body-1-bold;
-
+      align-items: center;
+      display: flex;
       height: 64px;
+      justify-content: center;
       line-height: 64px;
       text-align: center;
       width: 100%;
@@ -5679,6 +5680,34 @@ button.module-image__border-overlay:focus {
         }
       }
 
+      &__icon {
+        &::before {
+          display: block;
+          content: '';
+          width: 24px;
+          height: 24px;
+
+          @include light-theme {
+            @include color-svg(
+              '../images/icons/v2/archive-outline-16.svg',
+              $color-gray-60
+            );
+          }
+          @include dark-theme {
+            @include color-svg(
+              '../images/icons/v2/archive-solid-16.svg',
+              $color-gray-25
+            );
+          }
+        }
+      }
+
+      &__text {
+        @include font-body-1-bold;
+        margin-left: 8px;
+        margin-right: 8px;
+      }
+
       &__archived-count {
         @include font-body-2-bold;
 
diff --git a/ts/components/ConversationList.tsx b/ts/components/ConversationList.tsx
index 1ad738b302..b23b4dbd87 100644
--- a/ts/components/ConversationList.tsx
+++ b/ts/components/ConversationList.tsx
@@ -197,7 +197,10 @@ export const ConversationList: React.FC<PropsType> = ({
               onClick={onClickArchiveButton}
               type="button"
             >
-              {i18n('archivedConversations')}{' '}
+              <div className="module-conversation-list__item--archive-button__icon" />
+              <span className="module-conversation-list__item--archive-button__text">
+                {i18n('archivedConversations')}
+              </span>
               <span className="module-conversation-list__item--archive-button__archived-count">
                 {row.archivedConversationsCount}
               </span>