Use forked Emoji Mart picker to do the font icon picker instead

app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js

@@ -11,7 +11,7 @@ import Icon from 'soapbox/components/icon';
 const messages = defineMessages({
   emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
-  emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emojos!! (╯°□°）╯︵ ┻━┻' },
+  emoji_not_found: { id: 'icon_button.not_found', defaultMessage: 'No icons!! (╯°□°）╯︵ ┻━┻' },
   custom: { id: 'icon_button.icons', defaultMessage: 'Icons' },
   search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
 });
@@ -101,7 +101,7 @@ class IconPickerMenu extends React.PureComponent {
           emoticons: [],
           keywords: [name],
           imageUrl: '',
-          custom: true,
+          render: <Icon id={name} />,
         });
       });
     });
@@ -124,12 +124,12 @@ class IconPickerMenu extends React.PureComponent {
         <IconPicker
           perLine={8}
           emojiSize={22}
+          include={categoriesSort}
           sheetSize={32}
           custom={this.buildIcons(custom_emojis)}
-          include={categoriesSort}
           color=''
           emoji=''
-          set='twitter'
+          set=''
           title={title}
           i18n={this.getI18n()}
           onClick={this.handleClick}
@@ -137,6 +137,8 @@ class IconPickerMenu extends React.PureComponent {
           backgroundImageFn={backgroundImageFn}
           autoFocus
           emojiTooltip
+          overwriteRender
+          noShowAnchors
         />
       </div>
     );

app/soapbox/features/soapbox_config/forkawesome.json

@@ -392,25 +392,7 @@
     "fa fa-spell-check",
     "fa fa-moon",
     "fa fa-sun",
-    "fa fa-biometric",
+    "fa fa-biometric"
-    "fa fa-volume-mute",
-    "fa fa-bell-ringing",
-    "fa fa-bell-ringing-o",
-    "fa fa-bunny",
-    "fa fa-cc-by",
-    "fa fa-cc-cc",
-    "fa fa-cc-nc-eu",
-    "fa fa-cc-nc-jp",
-    "fa fa-cc-nc",
-    "fa fa-cc-nd",
-    "fa fa-cc-pd",
-    "fa fa-cc-remix",
-    "fa fa-cc-sa",
-    "fa fa-cc-share",
-    "fa fa-cc-zero",
-    "fa fa-email-bulk",
-    "fa fa-email-bulk-o",
-    "fa fa-skate"
   ],
   "Text Editor Icons": [
     "fa fa-th-large",
@@ -730,41 +712,7 @@
     "fa fa-unsplash",
     "fa fa-hackster",
     "fa fa-f-droid",
-    "fa fa-wire",
+    "fa fa-signalapp"
-    "fa fa-tor-onion",
-    "fa fa-hal",
-    "fa fa-jupyter",
-    "fa fa-julia",
-    "fa fa-classicpress",
-    "fa fa-classicpress-circle",
-    "fa fa-open-collective",
-    "fa fa-orcid",
-    "fa fa-researchgate",
-    "fa fa-funkwhale",
-    "fa fa-boardgamegeek",
-    "fa fa-buymeacoffee",
-    "fa fa-conway-glider",
-    "fa fa-csharp",
-    "fa fa-gnu",
-    "fa fa-google-play",
-    "fa fa-heroku",
-    "fa fa-home-assistant",
-    "fa fa-java",
-    "fa fa-mariadb",
-    "fa fa-markdown",
-    "fa fa-mysql",
-    "fa fa-nordcast",
-    "fa fa-plume",
-    "fa fa-postgresql",
-    "fa fa-sass-alt",
-    "fa fa-sass",
-    "fa fa-sketchfab",
-    "fa fa-tex",
-    "fa fa-textpattern",
-    "fa fa-unity",
-    "fa fa-signalapp",
-    "fa fa-askfm",
-    "fa fa-blockstack"
   ],
   "Medical Icons": [
     "fa fa-user-md",

app/soapbox/features/soapbox_config/index.js

@@ -26,7 +26,6 @@ import Accordion from '../ui/components/accordion';
 import SitePreview from './components/site_preview';
 import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
 import { defaultSettings } from 'soapbox/actions/settings';
-import forkAwesomeIcons from './forkawesome.json';
 import IconPickerDropdown from './components/icon_picker_dropdown';
 
 const messages = defineMessages({
@@ -438,10 +437,6 @@ export class IconPicker extends ImmutablePureComponent {
     onChange: PropTypes.func.isRequired,
   }
 
-  static defaultProps = {
-    icons: forkAwesomeIcons,
-  };
-
   render() {
     const { onChange, value, label } = this.props;
 

app/styles/emoji_picker.scss

@@ -173,6 +173,13 @@
   display: inline-block;
   font-size: 0;
 
+  .fa {
+    font-size: 18px;
+    width: 22px;
+    height: 22px;
+    text-align: center;
+  }
+
   span {
     width: 22px;
     height: 22px;

app/styles/forms.scss

@@ -518,6 +518,7 @@ code {
         padding: 9px;
         border: 1px solid var(--highlight-text-color);
         border-radius: 4px;
+        cursor: pointer;
 
         .fa {
           font-size: 18px;

package.json

@@ -62,7 +62,7 @@
     "cssnano": "^4.1.10",
     "detect-passive-events": "^1.0.2",
     "dotenv": "^8.0.0",
-    "emoji-mart": "Gargron/emoji-mart#build",
+    "emoji-mart": "https://gitlab.com/seanking2919/emoji-mart#build",
     "es6-symbol": "^3.1.1",
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",

yarn.lock

@@ -4473,9 +4473,9 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-emoji-mart@Gargron/emoji-mart#build:
+"emoji-mart@https://gitlab.com/seanking2919/emoji-mart#build":
-  version "2.6.2"
+  version "2.6.3"
-  resolved "https://codeload.github.com/Gargron/emoji-mart/tar.gz/ff00dc470b5b2d9f145a6d6e977a54de5df2b4c9"
+  resolved "https://gitlab.com/seanking2919/emoji-mart#c2d4dc6232e1cb1fd9541a12d2748015cddb14b1"
 
 emoji-regex@^7.0.1:
   version "7.0.3"