From 4464a7f19ee41c0ab705dcf52e6d49a395738e93 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 14 Oct 2021 14:14:13 -0500
Subject: [PATCH] Swap out a few more icons for svg icons

---
 .../status/components/detailed_status.js      | 17 ++++++-------
 .../ui/components/profile_info_panel.js       |  8 +++++--
 app/styles/components/detailed-status.scss    | 24 +++++++++++++------
 app/styles/components/profile-info-panel.scss |  8 ++++++-
 4 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index c19d092e8..91f0376e7 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/app/soapbox/features/status/components/detailed_status.js
@@ -94,9 +94,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
       return null;
     }
 
-    let media           = '';
-    const poll = '';
-    let statusTypeIcon = '';
+    let media = null;
+    let statusTypeIcon = null;
 
     if (this.props.measureHeight) {
       outerStyle.height = `${this.state.height}px`;
@@ -155,9 +154,9 @@ export default class DetailedStatus extends ImmutablePureComponent {
     }
 
     if (status.get('visibility') === 'direct') {
-      statusTypeIcon = <Icon id='envelope' />;
+      statusTypeIcon = <Icon src={require('@tabler/icons/icons/mail.svg')} />;
     } else if (status.get('visibility') === 'private') {
-      statusTypeIcon = <Icon id='lock' />;
+      statusTypeIcon = <Icon src={require('@tabler/icons/icons/lock.svg')} />;
     }
 
     return (
@@ -193,11 +192,11 @@ export default class DetailedStatus extends ImmutablePureComponent {
           />
 
           {media}
-          {poll}
 
           <div className='detailed-status__meta'>
             <StatusInteractionBar status={status} />
-            <div>
+
+            <div className='detailed-status__timestamp'>
               {favicon &&
                 <div className='status__favicon'>
                   <Link to={`/timeline/${domain}`}>
@@ -205,7 +204,9 @@ export default class DetailedStatus extends ImmutablePureComponent {
                   </Link>
                 </div>}
 
-              {statusTypeIcon}<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
+              {statusTypeIcon}
+
+              <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
                 <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
               </a>
             </div>
diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js
index e123b185e..9a42a9a27 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.js
+++ b/app/soapbox/features/ui/components/profile_info_panel.js
@@ -96,7 +96,6 @@ class ProfileInfoPanel extends ImmutablePureComponent {
       );
     }
 
-    const lockedIcon = account.get('locked') ? (<Icon id='lock' title={intl.formatMessage(messages.account_locked)} />) : '';
     const content = { __html: account.get('note_emojified') };
     const fields = account.get('fields');
     const deactivated = !account.getIn(['pleroma', 'is_active'], true);
@@ -114,7 +113,12 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               <span dangerouslySetInnerHTML={displayNameHtml} className='profile-info-panel__name-content' />
               {verified && <VerificationBadge />}
               {account.get('bot') && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
-              { <small>@{getAcct(account, displayFqn)} {lockedIcon}</small> }
+              <small>
+                @{getAcct(account, displayFqn)}
+                {account.get('locked') && (
+                  <Icon src={require('@tabler/icons/icons/lock.svg')} title={intl.formatMessage(messages.account_locked)} />
+                )}
+              </small>
             </h1>
           </div>
 
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 9178f4160..3189b6e60 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -56,9 +56,24 @@
   font-size: 14px;
   line-height: 18px;
   display: flex;
+}
 
-  i {
-    margin-right: 0.4em;
+.detailed-status__timestamp {
+  display: flex;
+  align-items: center;
+
+  .svg-icon {
+    width: 20px;
+    height: 20px;
+
+    svg {
+      stroke-width: 1.3px;
+    }
+  }
+
+  .svg-icon,
+  .status__favicon {
+    margin-right: 5px;
   }
 }
 
@@ -152,11 +167,6 @@
   margin-right: 10px;
 }
 
-.detailed-status .status__favicon {
-  float: left;
-  margin-right: 5px;
-}
-
 .thread {
   @include standard-panel;
   border-top-left-radius: 0;
diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss
index 4be0aff6c..2bee4e368 100644
--- a/app/styles/components/profile-info-panel.scss
+++ b/app/styles/components/profile-info-panel.scss
@@ -53,6 +53,12 @@
         height: 22px;
       }
 
+      .svg-icon {
+        width: 20px;
+        height: 20px;
+        margin-left: 3px;
+      }
+
       h1 {
         span:first-of-type {
           font-size: 20px !important;
@@ -63,7 +69,7 @@
         }
 
         small {
-          display: block;
+          display: flex;
           font-size: 15px;
           line-height: 1.5;
           color: var(--primary-text-color--faint);