From f4be2e87a2fe5f85dbde4ba5f087fb3a8b926881 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 21 Sep 2021 13:52:45 -0500
Subject: [PATCH] Status: use svg icon for h-menu

---
 app/soapbox/components/dropdown_menu.js              | 6 ++++--
 app/soapbox/components/status_action_bar.js          | 2 +-
 app/soapbox/features/status/components/action_bar.js | 2 +-
 app/styles/components/emoji-reacts.scss              | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.js
index 37f1a8c2b..699e28de5 100644
--- a/app/soapbox/components/dropdown_menu.js
+++ b/app/soapbox/components/dropdown_menu.js
@@ -197,7 +197,8 @@ export default class Dropdown extends React.PureComponent {
   };
 
   static propTypes = {
-    icon: PropTypes.string.isRequired,
+    icon: PropTypes.string,
+    src: PropTypes.string,
     items: PropTypes.array.isRequired,
     size: PropTypes.number.isRequired,
     title: PropTypes.string,
@@ -295,13 +296,14 @@ export default class Dropdown extends React.PureComponent {
   }
 
   render() {
-    const { icon, items, size, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard } = this.props;
+    const { icon, src, items, size, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
       <div>
         <IconButton
           icon={icon}
+          src={src}
           title={title}
           active={open}
           disabled={disabled}
diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index d9fed78e5..09a38620b 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -456,7 +456,7 @@ class StatusActionBar extends ImmutablePureComponent {
         {shareButton}
 
         <div className='status__action-bar-dropdown'>
-          <DropdownMenuContainer status={status} items={menu} icon='ellipsis-h' size={18} direction='right' title={intl.formatMessage(messages.more)} />
+          <DropdownMenuContainer status={status} items={menu} src={require('@tabler/icons/icons/dots.svg')} direction='right' title={intl.formatMessage(messages.more)} />
         </div>
       </div>
     );
diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js
index d82e6b952..83dc47228 100644
--- a/app/soapbox/features/status/components/action_bar.js
+++ b/app/soapbox/features/status/components/action_bar.js
@@ -429,7 +429,7 @@ class ActionBar extends React.PureComponent {
         {shareButton}
 
         <div className='detailed-status__action-bar-dropdown'>
-          <DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' title='More' />
+          <DropdownMenuContainer src={require('@tabler/icons/icons/dots.svg')} items={menu} direction='left' title='More' />
         </div>
       </div>
     );
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index aabcb684e..43fda752d 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -134,7 +134,7 @@
   }
 }
 
-.detailed-status__button {
+.detailed-status__action-bar {
   .svg-icon {
     width: 24px;
     height: 20px;