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

2025-04-24 19:59:12 +00:00 · 2020-05-07 23:25:58 -04:00 · 2020-05-07 23:25:58 -04:00 · 194cef6abc
commit 194cef6abc
parent 0c321e8b1e
13 changed files with 110 additions and 91 deletions
--- a/UI/package-lock.json
+++ b/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",
--- a/UI/package.json
+++ b/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",
--- a/UI/public/index.html
+++ b/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;
--- a/UI/src/components/role-editor/Category.js
+++ b/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>
-          <div
-            uk-tooltip=""
-            title="Edit"
-            uk-icon="icon: file-edit"
-            onClick={onEditOpen}
-          />
+          <h4>
+            {category.get('name')}
+            {category.get('hidden') && (
+              <span uk-tooltip="" title="Hidden" style={{ marginLeft: '0.5em' }}>
+                <GoEyeClosed />
+              </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()}
--- a/UI/src/components/role-editor/CategoryEditor.js
+++ b/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{' '}
-              <i
-                uk-icon="icon: info; ratio: 0.7"
+              <span
                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"
--- a/UI/src/components/role-editor/actions.js
+++ b/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 =>
-      v
-        .delete('roles_map')
-        .delete('mode')
-        .delete('id')
-    )
+    .map((v) => v.delete('roles_map').delete('mode').delete('id'))

  viewMap.map((v, idx) => {
    if (v.has('position')) {
--- a/UI/src/components/role-editor/index.js
+++ b/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}
--- a/UI/src/components/role-picker/index.js
+++ b/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)' }}
-              uk-icon="icon: check; ratio: 1.4"
-            />
+              style={{ cursor: 'pointer', color: 'var(--c-green)', fontSize: '1.4rem' }}
+            >
+              <GoCheck className="smol-bump" />
+            </div>
            <div
              uk-tooltip=""
              title="Discard Edits"
              onClick={this.closeMessageEditor}
-              style={{ cursor: 'pointer', color: 'var(--c-red)', marginLeft: 10 }}
-              uk-icon="icon: trash; ratio: 0.9"
-            />
+              style={{
+                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"
-              ></Link>
+                style={{ color: 'var(--c-7)' }}
+              >
+                <GoPencil className="smol-bump" />
+              </Link>
            ) : null}
            <div className="role-picker__spacer"></div>
            <div
--- a/UI/src/components/servers/Navigation.js
+++ b/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>
--- a/UI/src/components/servers/ServerCard.js
+++ b/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>
      )
    }

--- a/UI/src/components/servers/UserCard.js
+++ b/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) %
-        5}.png`
+      return `https://cdn.discordapp.com/embed/avatars/${
+        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>
--- a/UI/src/generic.sass
+++ b/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
--- a/UI/src/pages/WhyNoRoles.js
+++ b/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>
+    </>
  )
 }