Work on using Emoji Mart picker

app/styles/forms.scss

@@ -179,6 +179,10 @@ code {
     }
   }
 
+  .input.font_icon_picker {
+    width: 52px;
+  }
+
   .input.with_block_label {
     max-width: none;
 
@@ -255,10 +259,6 @@ code {
     }
   }
 
-  .input.popup {
-    overflow: visible;
-  }
-
   .input.radio_buttons .radio label {
     margin-bottom: 5px;
     font-family: inherit;
@@ -511,92 +511,18 @@ code {
       }
     }
 
-    &__icon_picker {
+    &__font_icon_picker {
       font-size: 14px;
 
-      .rfipbtn {
+      .font-icon-button {
-        display: inline-flex;
+        padding: 9px;
-        line-height: 19px;
+        border: 1px solid var(--highlight-text-color);
-        min-height: 19px;
+        border-radius: 4px;
-        padding: 0;
 
-        &__icon {
+        .fa {
-          margin: 3.5px 0 3.5px 10px;
+          font-size: 18px;
           color: var(--primary-text-color);
         }
-
-        &--default {
-          .rfipbtn__icon {
-            border-color: var(--primary-text-color);
-          }
-
-          .rfipbtn__del {
-            background-color: var(--primary-text-color--faint);
-            color: var(--foreground-color);
-          }
-
-          .rfipbtn__button {
-            border-left: 1px solid var(--highlight-text-color);
-            background-color: var(--foreground-color);
-            color: var(--primary-text-color);
-          }
-        }
-
-        &__icon--empty {
-          text-transform: none;
-          font-style: normal;
-          color: var(--primary-text-color--faint);
-          font-size: 16px;
-          line-height: 15px;
-          padding: 10px;
-        }
-
-        &__current {
-          flex: 0;
-        }
-
-        &--default:active,
-        &--default:focus {
-          box-shadow: none;
-        }
-
-        &__button {
-          border-top-right-radius: inherit;
-          border-bottom-right-radius: inherit;
-        }
-      }
-
-      .rfipdropdown {
-        &--default {
-          background-color: var(--background-color);
-          border: none;
-          color: var(--primary-text-color);
-          width: 325px;
-
-          input,
-          select {
-            color: var(--primary-text-color);
-            background-color: var(--foreground-color);
-          }
-
-          .rfipsearch input:focus,
-          .rfipsearch input:active {
-            box-shadow: none;
-          }
-
-          .rfipicons__ibox,
-          .rfipicons__left,
-          .rfipicons__right {
-            border: none;
-            background-color: var(--foreground-color);
-            color: var(--primary-text-color);
-          }
-
-          .rfipicons__cp,
-          .rfipcategory select {
-            border-bottom: 1px solid var(--highlight-text-color);
-          }
-        }
       }
     }
 

package.json

@@ -45,7 +45,6 @@
     "@babel/preset-env": "^7.3.4",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.3.4",
-    "@fonticonpicker/react-fonticonpicker": "^1.2.0",
     "@popperjs/core": "^2.4.4",
     "array-includes": "^3.0.3",
     "autoprefixer": "^10.0.0",
@@ -114,7 +113,6 @@
     "react-swipeable-views": "^0.13.0",
     "react-textarea-autosize": "^8.0.0",
     "react-toggle": "^4.0.1",
-    "react-transition-group": "^2.3.0",
     "redux": "^4.0.5",
     "redux-immutable": "^4.0.0",
     "redux-thunk": "^2.2.0",

yarn.lock

@@ -1345,11 +1345,6 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fonticonpicker/react-fonticonpicker@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@fonticonpicker/react-fonticonpicker/-/react-fonticonpicker-1.2.0.tgz#cbcb898f3d788ef50d7090fe623afe2e8e5eb1d7"
-  integrity sha512-I7U4VNIpwJHnOaWq1v2MSuaUTxPiur/MYG4B1hr+FWI1O7k+tTym1ysdAyfp7YbEdF4Q8TYoY5Q2hbTmhQeTSQ==
-
 "@formatjs/ecma402-abstract@^1.2.3":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.3.tgz#ca94911dd8e9c89eeaabba0f00e2f692979fc27b"
@@ -4342,7 +4337,7 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^3.2.1, dom-helpers@^3.3.1, dom-helpers@^3.4.0:
+dom-helpers@^3.2.1, dom-helpers@^3.3.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
   integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
@@ -10074,16 +10069,6 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react-transition-group@^2.3.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
-  dependencies:
-    dom-helpers "^3.4.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
-
 react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"