feat: replace uk-icons with react-icons/go

UI/package-lock.json

@@ -12688,6 +12688,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
       "integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
     },
+    "react-icons": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.10.0.tgz",
+      "integrity": "sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==",
+      "requires": {
+        "camelcase": "^5.0.0"
+      }
+    },
     "react-immutable-proptypes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/react-immutable-proptypes/-/react-immutable-proptypes-2.1.0.tgz",

UI/package.json

@@ -13,6 +13,7 @@
     "react-dnd": "^7.0.0",
     "react-dnd-html5-backend": "^7.0.0",
     "react-dom": "^16.13.1",
+    "react-icons": "^3.10.0",
     "react-immutable-proptypes": "^2.1.0",
     "react-redux": "^7.2.0",
     "react-router": "^5.1.2",

UI/public/index.html

@@ -20,10 +20,6 @@
     defer
     src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.4/js/uikit.min.js"
   ></script>
-  <script
-    defer
-    src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.4/js/uikit-icons.min.js"
-  ></script>
   <style>
     body {
       background-color: #453f3e;

UI/src/components/role-editor/Category.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { DropTarget } from 'react-dnd'
 import Role from '../role/draggable'
 import CategoryEditor from './CategoryEditor'
+import { GoPencil, GoEyeClosed } from 'react-icons/go'
 
 class Category extends Component {
   render() {
@@ -28,17 +29,21 @@ class Category extends Component {
         }`}
       >
         <div className="role-editor__category-header">
-          <h4>{category.get('name')}</h4>
+          <h4>
-          <div
+            {category.get('name')}
-            uk-tooltip=""
+            {category.get('hidden') && (
-            title="Edit"
+              <span uk-tooltip="" title="Hidden" style={{ marginLeft: '0.5em' }}>
-            uk-icon="icon: file-edit"
+                <GoEyeClosed />
-            onClick={onEditOpen}
+              </span>
-          />
+            )}
+          </h4>
+          <div uk-tooltip="" title="Edit" onClick={onEditOpen}>
+            <GoPencil />
+          </div>
         </div>
         {category
           .get('roles_map')
-          .sortBy(r => r.get('position'))
+          .sortBy((r) => r.get('position'))
           .reverse()
           .map((r, k) => <Role key={k} role={r} categoryId={name} />)
           .toArray()}

UI/src/components/role-editor/CategoryEditor.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
+import { GoChevronUp, GoChevronDown, GoTrashcan, GoInfo } from 'react-icons/go'
 
 export default class CategoryEditor extends Component {
-  onKeyPress = e => {
+  onKeyPress = (e) => {
     const { onSave } = this.props
 
     switch (e.key) {
@@ -37,7 +38,7 @@ export default class CategoryEditor extends Component {
                 uk-tooltip="delay: 1s"
                 title="Move category up"
               >
-                <i uk-icon="icon: chevron-up"></i>
+                <GoChevronUp />
               </div>
               <div
                 onClick={this.props.onBump(1)}
@@ -47,7 +48,7 @@ export default class CategoryEditor extends Component {
                 uk-tooltip="delay: 1s"
                 title="Move category down"
               >
-                <i uk-icon="icon: chevron-down"></i>
+                <GoChevronDown />
               </div>
             </div>
           </div>
@@ -70,12 +71,12 @@ export default class CategoryEditor extends Component {
           </div>
           <div style={{ marginTop: 10 }}>
             <div className="uk-form-label">
-              Type{' '}
+              <span
-              <i
-                uk-icon="icon: info; ratio: 0.7"
                 uk-tooltip=""
                 title="Single mode only lets a user pick one role in this category."
-              />
+              >
+                Type <GoInfo />
+              </span>
             </div>
             <div className="uk-form-controls">
               <select
@@ -93,7 +94,7 @@ export default class CategoryEditor extends Component {
               className="uk-button rp-button secondary role-editor__actions_delete"
               onClick={this.props.onDelete}
             >
-              <i uk-icon="icon: trash" />
+              <GoTrashcan />
             </button>
             <button
               className="uk-button rp-button primary role-editor__actions_save"

UI/src/components/role-editor/actions.js

@@ -4,7 +4,7 @@ import { getViewMap, setup } from '../role-picker/actions'
 import uuidv4 from 'uuid/v4'
 import superagent from 'superagent'
 
-export const constructView = id => async (dispatch, getState) => {
+export const constructView = (id) => async (dispatch, getState) => {
   await setup(id)(dispatch)
   const server = getState().servers.get(id)
 
@@ -23,7 +23,7 @@ export const constructView = id => async (dispatch, getState) => {
   dispatch(UIActions.fadeIn)
 }
 
-export const addRoleToCategory = (id, oldId, role, flip = true) => dispatch => {
+export const addRoleToCategory = (id, oldId, role, flip = true) => (dispatch) => {
   dispatch({
     type: Symbol.for('re: add role to category'),
     data: {
@@ -37,7 +37,7 @@ export const addRoleToCategory = (id, oldId, role, flip = true) => dispatch => {
   }
 }
 
-export const removeRoleFromCategory = (id, oldId, role, flip = true) => dispatch => {
+export const removeRoleFromCategory = (id, oldId, role, flip = true) => (dispatch) => {
   dispatch({
     type: Symbol.for('re: remove role from category'),
     data: {
@@ -51,7 +51,7 @@ export const removeRoleFromCategory = (id, oldId, role, flip = true) => dispatch
   }
 }
 
-export const editCategory = ({ id, key, value }) => dispatch => {
+export const editCategory = ({ id, key, value }) => (dispatch) => {
   dispatch({
     type: Symbol.for('re: edit category'),
     data: {
@@ -62,7 +62,7 @@ export const editCategory = ({ id, key, value }) => dispatch => {
   })
 }
 
-export const saveCategory = (id, category) => dispatch => {
+export const saveCategory = (id, category) => (dispatch) => {
   if (category.get('name') === '') {
     return
   }
@@ -76,7 +76,7 @@ export const saveCategory = (id, category) => dispatch => {
   })
 }
 
-export const openEditor = id => ({
+export const openEditor = (id) => ({
   type: Symbol.for('re: switch category mode'),
   data: {
     id,
@@ -115,7 +115,7 @@ export const createCategory = (dispatch, getState) => {
 
   let name = 'New Category'
   let idx = 1
-  const pred = c => c.get('name') === name
+  const pred = (c) => c.get('name') === name
   while (vm.find(pred) !== undefined) {
     idx++
     name = `New Category ${idx}`
@@ -130,7 +130,7 @@ export const createCategory = (dispatch, getState) => {
       name,
       roles: Set([]),
       roles_map: Set([]),
-      hidden: true,
+      hidden: false,
       type: 'multi',
       position: idx,
       mode: Symbol.for('edit'),
@@ -138,14 +138,14 @@ export const createCategory = (dispatch, getState) => {
   })
 }
 
-export const bumpCategory = (category, name) => move => async (dispatch, getState) => {
+export const bumpCategory = (category, name) => (move) => async (dispatch, getState) => {
   const { roleEditor } = getState()
   const vm = roleEditor.get('viewMap')
 
   const position = category.get('position')
   const nextPos = position + move
 
-  const replaceThisOne = vm.findKey(category => category.get('position') === nextPos)
+  const replaceThisOne = vm.findKey((category) => category.get('position') === nextPos)
 
   dispatch({
     type: Symbol.for('re: edit category'),
@@ -168,16 +168,11 @@ export const bumpCategory = (category, name) => move => async (dispatch, getStat
   }
 }
 
-export const saveServer = id => async (dispatch, getState) => {
+export const saveServer = (id) => async (dispatch, getState) => {
   const viewMap = getState()
     .roleEditor.get('viewMap')
     .filterNot((_, k) => k === 'Uncategorized')
-    .map(v =>
+    .map((v) => v.delete('roles_map').delete('mode').delete('id'))
-      v
-        .delete('roles_map')
-        .delete('mode')
-        .delete('id')
-    )
 
   viewMap.map((v, idx) => {
     if (v.has('position')) {

UI/src/components/role-editor/index.js

@@ -2,6 +2,7 @@ import { Set } from 'immutable'
 import React, { Component } from 'react'
 import { Scrollbars } from 'react-custom-scrollbars'
 import { DropTarget } from 'react-dnd'
+import { GoPlus, GoInfo } from 'react-icons/go'
 import { connect } from 'react-redux'
 import { Link, Prompt, Redirect } from 'react-router-dom'
 import * as UIActions from '../../actions/ui'
@@ -81,7 +82,7 @@ class RoleEditor extends Component {
     dispatch(Actions.openEditor(name))
   }
 
-  editCategory = (category, id) => (key, type) => event => {
+  editCategory = (category, id) => (key, type) => (event) => {
     const { dispatch } = this.props
     let value
 
@@ -120,7 +121,7 @@ class RoleEditor extends Component {
     dispatch(Actions.saveServer(server))
   }
 
-  onBump = (category, name) => move => () =>
+  onBump = (category, name) => (move) => () =>
     this.props.dispatch(Actions.bumpCategory(category, name)(move))
 
   get hasChanged() {
@@ -173,7 +174,7 @@ class RoleEditor extends Component {
             <Scrollbars autoHeight autoHeightMax="calc(100vh - 110px)">
               {vm
                 .filter((_, k) => k !== 'Uncategorized')
-                .sortBy(c => c.get('position'))
+                .sortBy((c) => c.get('position'))
                 .map((c, name, arr) => (
                   <Category
                     key={name}
@@ -196,7 +197,7 @@ class RoleEditor extends Component {
                 title="Add new category"
                 className="role-editor__category add-button"
               >
-                <i uk-icon="icon: plus" />
+                <GoPlus />
               </div>
             </Scrollbars>
           </div>
@@ -209,14 +210,14 @@ class RoleEditor extends Component {
               <Scrollbars autoHeight autoHeightMax="calc(100vh - 145px)">
                 <div className="role-editor__uncat-zone">
                   {(vm.getIn(['Uncategorized', 'roles_map']) || Set())
-                    .sortBy(r => r.get('position'))
+                    .sortBy((r) => r.get('position'))
                     .reverse()
                     .map((r, k) => <Role key={k} categoryId="Uncategorized" role={r} />)
                     .toArray()}
                   {this.props.editor.get('hasSafeRoles') !== true ? (
                     <div className="role-editor__alert">
                       <Link to="/help/why-no-roles">
-                        Why are there no roles here? <i uk-icon="icon: info" />
+                        Why are there no roles here? <GoInfo />
                       </Link>
                     </div>
                   ) : null}

UI/src/components/role-picker/index.js

@@ -6,6 +6,7 @@ import { msgToReal } from '../../utils'
 import * as Actions from './actions'
 import Category from './Category'
 import './RolePicker.sass'
+import { GoTrashcan, GoCheck, GoPencil } from 'react-icons/go'
 
 const mapState = ({ rolePicker, servers }, ownProps) => {
   return {
@@ -90,9 +91,10 @@ class RolePicker extends Component {
             <div
               uk-tooltip=""
               title="Edit Server Message"
-              uk-icon="icon: pencil"
               onClick={this.openMessageEditor}
-            />
+            >
+              <GoPencil className="smol-bump" />
+            </div>
           </div>
           <p
             dangerouslySetInnerHTML={{
@@ -112,16 +114,23 @@ class RolePicker extends Component {
               uk-tooltip=""
               title="Save Server Message"
               onClick={this.saveServerMessage}
-              style={{ cursor: 'pointer', color: 'var(--c-green)' }}
+              style={{ cursor: 'pointer', color: 'var(--c-green)', fontSize: '1.4rem' }}
-              uk-icon="icon: check; ratio: 1.4"
+            >
-            />
+              <GoCheck className="smol-bump" />
+            </div>
             <div
               uk-tooltip=""
               title="Discard Edits"
               onClick={this.closeMessageEditor}
-              style={{ cursor: 'pointer', color: 'var(--c-red)', marginLeft: 10 }}
+              style={{
-              uk-icon="icon: trash; ratio: 0.9"
+                cursor: 'pointer',
-            />
+                color: 'var(--c-red)',
+                marginLeft: 10,
+                fontSize: '0.9rem',
+              }}
+            >
+              <GoTrashcan className="smol-bump" />
+            </div>
           </div>
           <textarea
             className="uk-width-1-2 uk-textarea role-picker__msg-editor"
@@ -159,8 +168,10 @@ class RolePicker extends Component {
                 to={`/s/${server.get('id')}/edit`}
                 uk-tooltip=""
                 title="Edit Categories"
-                uk-icon="icon: file-edit"
+                style={{ color: 'var(--c-7)' }}
-              ></Link>
+              >
+                <GoPencil className="smol-bump" />
+              </Link>
             ) : null}
             <div className="role-picker__spacer"></div>
             <div

UI/src/components/servers/Navigation.js

@@ -1,10 +1,11 @@
-import React, { Component, Fragment } from 'react'
-import ImmutablePropTypes from 'react-immutable-proptypes'
 import PropTypes from 'prop-types'
+import React, { Component, Fragment } from 'react'
+import { Scrollbars } from 'react-custom-scrollbars'
+import { GoPlus } from 'react-icons/go'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { NavLink } from 'react-router-dom'
 import ServerCard from './ServerCard'
 import UserCard from './UserCard'
-import { Scrollbars } from 'react-custom-scrollbars'
-import { NavLink } from 'react-router-dom'
 
 class ServersNavigation extends Component {
   static propTypes = {
@@ -29,7 +30,8 @@ class ServersNavigation extends Component {
               to={`/s/add`}
             >
               <div className="server-list__item__info">
-                <i uk-icon="icon: plus; ratio: 0.9"></i>&nbsp; Add to your server
+                <GoPlus className="smol-bump" />
+                &nbsp; Add to your server
               </div>
             </NavLink>
           </Scrollbars>

UI/src/components/servers/ServerCard.js

@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import { NavLink } from 'react-router-dom'
 import { colorToCSS } from '../../utils'
 import './ServerCard.sass'
+import { GoZap, GoStar } from 'react-icons/go'
 
 class ServerCard extends Component {
   static propTypes = {
@@ -27,8 +28,9 @@ class ServerCard extends Component {
           role="img"
           aria-label="Role Manager"
           className="server-list__item__tag"
-          uk-icon="icon: bolt; ratio: 0.7"
+        >
-        />
+          <GoZap />
+        </span>
       )
     }
 
@@ -40,8 +42,9 @@ class ServerCard extends Component {
           role="img"
           aria-label="Server Admin"
           className="server-list__item__tag"
-          uk-icon="icon: star; ratio: 0.7"
+        >
-        />
+          <GoStar />
+        </span>
       )
     }
 

UI/src/components/servers/UserCard.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { connect } from 'react-redux'
 import { NavLink } from 'react-router-dom'
+import { GoSignOut } from 'react-icons/go'
+import { connect } from 'react-redux'
 import * as Actions from '../../actions'
 import './UserCard.sass'
 
@@ -15,8 +16,9 @@ class UserCard extends Component {
     const avatar = user.get('avatar')
 
     if (avatar === '' || avatar == null) {
-      return `https://cdn.discordapp.com/embed/avatars/${Math.ceil(Math.random() * 9999) %
+      return `https://cdn.discordapp.com/embed/avatars/${
-        5}.png`
+        Math.ceil(Math.random() * 9999) % 5
+      }.png`
     }
 
     return `https://cdn.discordapp.com/avatars/${user.get('id')}/${avatar}.png`
@@ -40,23 +42,13 @@ class UserCard extends Component {
               <a
                 uk-tooltip=""
                 title="Sign out"
-                uk-icon="icon: sign-out"
                 onClick={() => {
                   this.props.dispatch(Actions.userLogout)
                 }}
-              />
+              >
+                <GoSignOut className="smol-bump" />
+              </a>
             </li>
-            {this.props.user.isRoot === true ? (
-              <li>
-                <NavLink
-                  uk-tooltip=""
-                  title="Root"
-                  uk-icon="icon: bolt"
-                  to="/root/"
-                  activeClassName="uk-active"
-                />
-              </li>
-            ) : null}
           </ul>
         </div>
       </div>

UI/src/generic.sass

@@ -61,3 +61,7 @@
 .rp-discord
   border: 1px solid var(--c-discord-dark)
   box-shadow: 0 0 1px rgba(0,0,0,0.3)
+
+svg.smol-bump
+  position: relative
+  top: -0.125rem

UI/src/pages/WhyNoRoles.js

@@ -1,18 +1,18 @@
-import React, { Fragment } from 'react'
+import * as React from 'react'
-
+import { GoX, GoThumbsup } from 'react-icons/go'
 import goodImg from './images/whynoroles-good.png'
 import badImg from './images/whynoroles-bad.png'
 
-const WhyNoRoles = props => {
+const WhyNoRoles = (props) => {
   return (
-    <Fragment>
+    <>
       <h2>Why don't I see any roles in my editor?</h2>
       <p>
         Roleypoly needs to be a higher role position than other roles in order to assign
         them to anyone.
       </p>
       <h3 className="pages__bad">
-        Bad <i uk-icon="icon: ban"></i>
+        Bad <GoX className="smol-bump" />
       </h3>
       <img src={badImg} className="rp-discord" alt="Bad example" />
       <p>
@@ -20,13 +20,13 @@ const WhyNoRoles = props => {
         any roles above it.
       </p>
       <h3 className="pages__good">
-        Good <i uk-icon="icon: check"></i>
+        Good <GoThumbsup className="smol-bump" />
       </h3>
       <img src={goodImg} className="rp-discord" alt="Good example" />
       <p>
         In this example, Roleypoly is above other roles, and will be able to assign them.
       </p>
-    </Fragment>
+    </>
   )
 }