From e9b5a9cf2e37dfd6c0ebc9a90edde91bbcdc11fb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 8 Oct 2021 16:44:24 -0500
Subject: [PATCH] MediaModal: use Tabler next/prev arrows

---
 app/soapbox/features/ui/components/media_modal.js | 13 +++++++++++--
 app/styles/components/modal.scss                  |  5 +++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index 5cdfabd3b..b93e23edf 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -138,8 +138,17 @@ class MediaModal extends ImmutablePureComponent {
     const index = this.getIndex();
     let pagination = [];
 
-    const leftNav  = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>;
-    const rightNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>;
+    const leftNav  = media.size > 1 && (
+      <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}>
+        <Icon src={require('@tabler/icons/icons/arrow-left.svg')} />
+      </button>
+    );
+
+    const rightNav = media.size > 1 && (
+      <button tabIndex='0' className='media-modal__nav  media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}>
+        <Icon src={require('@tabler/icons/icons/arrow-right.svg')} />
+      </button>
+    );
 
     if (media.size > 1) {
       pagination = media.map((item, i) => {
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index de591da55..ca1bb1698 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -128,8 +128,9 @@
 
   @media screen and (max-width: 600px) { padding: 30px 2px; }
 
-  .fa {
-    margin-right: 0;
+  .svg-icon {
+    width: 24px;
+    height: 24px;
   }
 }