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 {
{title}
{trim(card.get('description') || '', maxDescription)}
-
{provider}
+
{provider}
);
@@ -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 {
-
- {horizontal &&
}
+
+ {horizontal &&
}
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 {