From 0a4ffc36249780f1f9ad124b11d1b16ea0b54a0e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 2 Oct 2021 15:02:07 -0500
Subject: [PATCH] Card: fix icons in embedded video player

---
 app/soapbox/features/status/components/card.js | 10 +++++-----
 app/styles/components/status.scss              | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/status/components/card.js b/app/soapbox/features/status/components/card.js
index d2e349bca..6dc2ef963 100644
--- a/app/soapbox/features/status/components/card.js
+++ b/app/soapbox/features/status/components/card.js
@@ -173,7 +173,7 @@ export default class Card extends React.PureComponent {
       <div className='status-card__content'>
         {title}
         <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>
-        <span className='status-card__host'><Icon id='link' /> {provider}</span>
+        <span className='status-card__host'><Icon src={require('@tabler/icons/icons/link.svg')} /> {provider}</span>
       </div>
     );
 
@@ -185,10 +185,10 @@ export default class Card extends React.PureComponent {
       if (embedded) {
         embed = this.renderVideo();
       } else {
-        let iconVariant = 'play';
+        let iconVariant = require('@tabler/icons/icons/player-play.svg');
 
         if (card.get('type') === 'photo') {
-          iconVariant = 'search-plus';
+          iconVariant = require('@tabler/icons/icons/zoom-in.svg');
         }
 
         embed = (
@@ -197,8 +197,8 @@ export default class Card extends React.PureComponent {
 
             <div className='status-card__actions'>
               <div>
-                <button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
-                {horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><Icon id='external-link' /></a>}
+                <button onClick={this.handleEmbedClick}><Icon src={iconVariant} /></button>
+                {horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><Icon src={require('@tabler/icons/icons/external-link.svg')} /></a>}
               </div>
             </div>
           </div>
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index cde3ed686..7fbb7af2f 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -544,6 +544,11 @@
       position: relative;
       bottom: -1px;
     }
+
+    .svg-icon {
+      width: 20px;
+      height: 20px;
+    }
   }
 }
 
@@ -592,12 +597,19 @@ a.status-card {
 }
 
 .status-card__host {
-  display: block;
+  display: flex;
   margin-top: 10px;
   font-size: 13px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  align-items: center;
+
+  .svg-icon {
+    height: 15px;
+    width: 15px;
+    margin-right: 3px;
+  }
 }
 
 .status-card__image {