From 30bc5889cdab5b99651e691a6237304960f10753 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 16 Dec 2021 23:33:22 +0100
Subject: [PATCH] Change icons for federation restrictions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/instance_restrictions.js                   | 8 ++++----
 .../components/restricted_instance.js                     | 2 +-
 app/styles/components/federation-restrictions.scss        | 4 ++++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
index 41215fc15..85ef52a30 100644
--- a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
+++ b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
@@ -50,7 +50,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
       items.push((
         <div className='federation-restriction' key='followers_only'>
           <div className='federation-restriction__icon'>
-            <Icon id='lock' />
+            <Icon src={require('@tabler/icons/icons/lock.svg')} />
           </div>
           <div className='federation-restriction__message'>
             <FormattedMessage
@@ -64,7 +64,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
       items.push((
         <div className='federation-restriction' key='federated_timeline_removal'>
           <div className='federation-restriction__icon'>
-            <Icon id='unlock' />
+            <Icon src={require('@tabler/icons/icons/lock-open.svg')} />
           </div>
           <div className='federation-restriction__message'>
             <FormattedMessage
@@ -80,7 +80,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
       items.push((
         <div className='federation-restriction' key='full_media_removal'>
           <div className='federation-restriction__icon'>
-            <Icon id='photo' />
+            <Icon src={require('@tabler/icons/icons/photo-off.svg')} />
           </div>
           <div className='federation-restriction__message'>
             <FormattedMessage
@@ -94,7 +94,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
       items.push((
         <div className='federation-restriction' key='partial_media_removal'>
           <div className='federation-restriction__icon'>
-            <Icon id='photo' />
+            <Icon src={require('@tabler/icons/icons/photo-off.svg')} />
           </div>
           <div className='federation-restriction__message'>
             <FormattedMessage
diff --git a/app/soapbox/features/federation_restrictions/components/restricted_instance.js b/app/soapbox/features/federation_restrictions/components/restricted_instance.js
index cc62f0d7d..a725aacfb 100644
--- a/app/soapbox/features/federation_restrictions/components/restricted_instance.js
+++ b/app/soapbox/features/federation_restrictions/components/restricted_instance.js
@@ -43,7 +43,7 @@ class RestrictedInstance extends ImmutablePureComponent {
       >
         <a href='#' className='restricted-instance__header' onClick={this.toggleExpanded}>
           <div className='restricted-instance__icon'>
-            <Icon id={expanded ? 'caret-down' : 'caret-right'} />
+            <Icon src={expanded ? require('@tabler/icons/icons/caret-down.svg') : require('@tabler/icons/icons/caret-right.svg')} />
           </div>
           <div className='restricted-instance__host'>
             {remoteInstance.get('host')}
diff --git a/app/styles/components/federation-restrictions.scss b/app/styles/components/federation-restrictions.scss
index 72dacc118..1b60e01cb 100644
--- a/app/styles/components/federation-restrictions.scss
+++ b/app/styles/components/federation-restrictions.scss
@@ -20,6 +20,10 @@
 
   &__icon {
     width: 16px;
+
+    .svg-icon svg {
+      stroke-width: 1.3;
+    }
   }
 
   &--expanded &__icon i.fa {