Add icon to the left pane archive button

signalapp · Oct 6, 2021 · 0f9608d · 0f9608d
1 parent 6f7e5d6
commit 0f9608d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git 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
@@ -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>