Use react-icons

2020-04-29 03:10:13 +02:00 · 2020-04-29 03:10:13 +02:00 · c704ebb042
commit c704ebb042
parent bb66740fd1
13 changed files with 269 additions and 309 deletions
--- a/assets/bindata.go
+++ b/assets/bindata.go
--- a/client/css/fontello.css
+++ b/client/css/fontello.css
@ -1,62 +0,0 @@
-@font-face {
-  font-family: 'fontello';
-  src: url('/font/fontello.woff2?48901973') format('woff2'),
-    url('/font/fontello.woff?48901973') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-[class^='icon-']:before,
-[class*=' icon-']:before {
-  font-family: 'fontello';
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: 0.2em;
-  text-align: center;
-  /* opacity: .8; */
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: 0.2em;
-
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Uncomment for 3D effect */
-  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
-
-.icon-cancel:before {
-  content: '\e800';
-} /* '' */
-.icon-menu:before {
-  content: '\e801';
-} /* '' */
-.icon-cog:before {
-  content: '\e802';
-} /* '' */
-.icon-search:before {
-  content: '\e803';
-} /* '' */
-.icon-user:before {
-  content: '\f061';
-} /* '' */
-.icon-ellipsis:before {
-  content: '\f141';
-} /* '' */
--- a/client/css/style.css
+++ b/client/css/style.css
@ -47,6 +47,9 @@ textarea {
 }

 button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
  width: 100%;
  height: 50px;
  background: #6bb758;
@ -78,6 +81,21 @@ button:active {
  background: #222;
 }

+.icon-button {
+  background: none;
+  width: 40px;
+  color: #222;
+  font-size: 20px;
+}
+
+.icon-button:hover {
+  background: none;
+}
+
+.icon-button:active {
+  background: none;
+}
+
 label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@ -325,20 +343,13 @@ i[class*=' icon-']:before {
  border-top: 1px solid #1d1d1d;
 }

-.side-buttons i {
-  flex: 100%;
-  color: #999;
-  line-height: 50px;
-  cursor: pointer;
-  font-size: 18px;
-  border-left: 1px solid #1d1d1d;
-}
-
 .side-buttons button {
-  font-size: 24px;
+  background: #222;
+  color: #999;
+  flex: 1;
 }

-.side-buttons i:hover {
+.side-buttons button:hover {
  color: #ccc;
  background: #1d1d1d;
 }
@ -372,7 +383,7 @@ i[class*=' icon-']:before {

 .connect-form {
  margin: auto 20px;
-  padding-top: 20px;
+  padding: 20px 0;
  width: 350px;
  text-align: center;
 }
@ -409,11 +420,6 @@ input::-webkit-inner-spin-button {

 .connect-form label {
  user-select: none;
-  cursor: default;
-}
-
-.connect-form button {
-  margin-bottom: 20px;
 }

 .connect-form-address {
@ -442,16 +448,14 @@ input::-webkit-inner-spin-button {
  color: #777;
 }

-.connect-form i {
-  display: block;
-  cursor: pointer;
-  color: #999;
-  text-align: center;
+.connect-form-button-optionals {
  font-size: 24px;
-  padding: 5px 0;
+  color: #999;
+  height: 40px;
+  width: 100%;
 }

-.connect-form i:hover {
+.connect-form-button-optionals:hover {
  color: #666;
 }

@ -466,6 +470,7 @@ input::-webkit-inner-spin-button {
  border-bottom: 1px solid #ddd;
  display: flex;
  font-size: 20px;
+  padding-right: 5px;
 }

 .chat-channel .chat-title-bar {
@ -480,15 +485,6 @@ input::-webkit-inner-spin-button {
  cursor: pointer;
 }

-.chat-title-bar i {
-  padding: 0 15px;
-  cursor: pointer;
-}
-
-.chat-server .icon-search {
-  display: none;
-}
-
 .chat-server .userlist,
 .chat-private .userlist {
  display: none;
@ -499,17 +495,16 @@ input::-webkit-inner-spin-button {
  display: none;
 }

-.button-leave {
-  border-left: 1px solid #ddd;
+.chat-title-bar .icon-button {
+  color: #999;
 }

-.button-leave:hover {
-  background: #ddd;
+.chat-title-bar .icon-button:hover {
+  color: #222;
 }

 .button-userlist {
  display: none;
-  border-left: 1px solid #ddd;
 }

 .chat-server .button-userlist,
@ -544,6 +539,7 @@ input.chat-title {
  flex: 1;
  position: relative;
  margin-left: 15px;
+  margin-right: 5px;
 }

 .chat-topic {
@ -559,6 +555,9 @@ input.chat-title {
 }

 .userlist-bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
@ -566,14 +565,11 @@ input.chat-title {
  height: 50px;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
-  line-height: 50px;
-  text-align: center;
-  padding: 0 15px;
  font-family: Montserrat, sans-serif;
 }

-.userlist-bar i {
-  margin-right: 3px;
+.userlist-bar svg {
+  margin-right: 5px;
 }

 .search {
@ -602,17 +598,19 @@ input.chat-title {
  border-bottom: 1px solid #ddd;
 }

-.search i {
-  padding: 15px;
-  color: #ddd;
-}
-
 .search-input {
  flex: 1;
  padding: 15px;
  padding-left: 0;
 }

+.search-input-icon {
+  font-size: 20px;
+  align-self: center;
+  margin: 0 15px;
+  color: #ddd;
+}
+
 .search-results {
  position: absolute;
  top: 50px;
@ -956,6 +954,7 @@ input.message-input-nick.invalid {

 .modal-header {
  display: flex;
+  align-items: center;
 }

 .modal-header h2 {
@ -965,6 +964,9 @@ input.message-input-nick.invalid {
 .modal-close {
  color: #999;
  cursor: pointer;
+  width: auto !important;
+  height: auto;
+  margin: 0 !important;
 }

 .modal-close:hover {
@ -989,9 +991,8 @@ input.message-input-nick.invalid {

 .modal-channel-button-join {
  margin: 0 !important;
-  width: 50px !important;
-  height: 24px;
-  font-size: 12px;
+  width: 60px !important;
+  height: 30px;
 }

 .modal-channel-input-wrap {
@ -999,7 +1000,12 @@ input.message-input-nick.invalid {
 }

 .modal-channel-close {
-  padding: 15px;
+  background: #fff;
+  width: 40px !important;
+  margin: 0 !important;
+}
+
+.modal-channel-close:hover {
  background: #fff;
 }

@ -1011,6 +1017,7 @@ input.message-input-nick.invalid {
 .modal-channel-result-header {
  display: flex;
  align-items: center;
+  margin-bottom: 10px;
 }

 .modal-channel-topic {
@ -1020,19 +1027,14 @@ input.message-input-nick.invalid {
 }

 .modal-channel-name {
-  margin-bottom: 5px;
  cursor: pointer;
+  margin-right: 15px;
 }

 .modal-channel-users {
  font-size: 16px;
-  color: #444;
-  margin: 0 15px;
  flex: 1;
-}
-
-.modal-channel-users i {
-  margin-right: 3px;
+  margin-left: 5px;
 }

 .modal-channel-results {
--- a/client/js/components/TabList.js
+++ b/client/js/components/TabList.js
@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import classnames from 'classnames';
 import get from 'lodash/get';
+import { FiPlus, FiUser, FiSettings } from 'react-icons/fi';
 import Button from 'components/ui/Button';
 import TabListItem from 'containers/TabListItem';
 import { count } from 'utils';
@ -113,9 +114,9 @@ export default class TabList extends PureComponent {
      <div className={className}>
        <div className="tab-container">{tabs}</div>
        <div className="side-buttons">
-          <Button onClick={this.handleConnectClick}>+</Button>
-          <i className="icon-user" />
-          <i className="icon-cog" onClick={this.handleSettingsClick} />
+          <Button icon={FiPlus} onClick={this.handleConnectClick} />
+          <Button icon={FiUser} />
+          <Button icon={FiSettings} onClick={this.handleSettingsClick} />
        </div>
      </div>
    );
--- a/client/js/components/modals/AddChannel.js
+++ b/client/js/components/modals/AddChannel.js
@ -1,5 +1,6 @@
 import React, { memo, useState, useEffect, useCallback, useRef } from 'react';
 import get from 'lodash/get';
+import { FiUsers, FiX } from 'react-icons/fi';
 import withModal from 'components/modals/withModal';
 import Button from 'components/ui/Button';
 import { join } from 'state/channels';
@ -16,10 +17,8 @@ const Channel = memo(({ server, name, topic, userCount, joined, ...props }) => {
        <h2 className="modal-channel-name" onClick={handleJoinClick}>
          {name}
        </h2>
-        <span className="modal-channel-users">
-          <i className="icon-user" />
-          {userCount}
-        </span>
+        <FiUsers />
+        <span className="modal-channel-users">{userCount}</span>
        {joined ? (
          <span style={{ color: '#6bb758' }}>Joined</span>
        ) : (
@ -115,8 +114,9 @@ const AddChannel = ({ search, payload: { server }, onClose, ...props }) => {
          onKeyDown={handleKey}
          onChange={handleSearch}
        />
-        <i
-          className="icon-cancel modal-close modal-channel-close"
+        <Button
+          icon={FiX}
+          className="modal-close modal-channel-close"
          onClick={onClose}
        />
      </div>
--- a/client/js/components/modals/Topic.js
+++ b/client/js/components/modals/Topic.js
@ -1,4 +1,6 @@
 import React from 'react';
+import { FiX } from 'react-icons/fi';
+import Button from 'components/ui/Button';
 import withModal from 'components/modals/withModal';
 import { linkify } from 'utils';

@ -7,7 +9,7 @@ const Topic = ({ payload: { topic, channel }, onClose }) => {
    <>
      <div className="modal-header">
        <h2>Topic in {channel}</h2>
-        <i className="icon-cancel modal-close" onClick={onClose} />
+        <Button icon={FiX} className="modal-close" onClick={onClose} />
      </div>
      <p className="modal-content">{linkify(topic)}</p>
    </>
--- a/client/js/components/pages/Chat/ChatTitle.js
+++ b/client/js/components/pages/Chat/ChatTitle.js
@ -1,5 +1,7 @@
 import React, { memo } from 'react';
+import { FiUsers, FiSearch, FiX } from 'react-icons/fi';
 import Navicon from 'containers/Navicon';
+import Button from 'components/ui/Button';
 import Editable from 'components/ui/Editable';
 import { isValidServerName } from 'state/servers';
 import { isChannel } from 'utils';
@ -60,19 +62,19 @@ const ChatTitle = ({
          )}
          {serverError}
        </div>
-        <i className="icon-search" title="Search" onClick={onToggleSearch} />
-        <i
-          className="icon-cancel button-leave"
-          title={closeTitle}
-          onClick={onCloseClick}
+        {tab.name && (
+          <Button icon={FiSearch} title="Search" onClick={onToggleSearch} />
+        )}
+        <Button icon={FiX} title={closeTitle} onClick={onCloseClick} />
+        <Button
+          icon={FiUsers}
+          className="button-userlist"
+          onClick={onToggleUserList}
        />
-        <i className="icon-user button-userlist" onClick={onToggleUserList} />
      </div>
      <div className="userlist-bar">
-        <i className="icon-user" />
-        <span className="chat-usercount">
-          {channel && channel.users.length}
-        </span>
+        <FiUsers />
+        {channel && channel.users.length}
      </div>
    </div>
  );
--- a/client/js/components/pages/Chat/Search.js
+++ b/client/js/components/pages/Chat/Search.js
@ -1,4 +1,5 @@
 import React, { memo, useRef, useEffect } from 'react';
+import { FiSearch } from 'react-icons/fi';
 import SearchResult from './SearchResult';

 const Search = ({ search, onSearch }) => {
@ -22,7 +23,7 @@ const Search = ({ search, onSearch }) => {
  return (
    <div className="search" style={style}>
      <div className="search-input-wrap">
-        <i className="icon-search" />
+        <FiSearch className="search-input-icon" />
        <input
          ref={inputEl}
          className="search-input"
--- a/client/js/components/pages/Connect.js
+++ b/client/js/components/pages/Connect.js
@ -7,6 +7,7 @@ import Checkbox from 'components/ui/formik/Checkbox';
 import TextInput from 'components/ui/TextInput';
 import Error from 'components/ui/formik/Error';
 import { isValidNick, isValidChannel, isValidUsername, isInt } from 'utils';
+import { FiMoreHorizontal } from 'react-icons/fi';

 const getSortedDefaultChannels = createSelector(
  defaults => defaults.channels,
@ -118,7 +119,11 @@ class Connect extends Component {
          <TextInput name="nick" />
          <TextInput name="channels" transform={this.transformChannels} />
          {this.state.showOptionals && this.renderOptionals()}
-          <i className="icon-ellipsis" onClick={this.handleShowClick} />
+          <Button
+            className="connect-form-button-optionals"
+            icon={FiMoreHorizontal}
+            onClick={this.handleShowClick}
+          />
          <Button type="submit">Connect</Button>
        </Form>
      );
--- a/client/js/components/ui/Button.js
+++ b/client/js/components/ui/Button.js
@ -1,12 +1,19 @@
 import React from 'react';
 import cn from 'classnames';

-const Button = ({ children, category, className, ...props }) => (
+const Button = ({ children, category, className, icon: Icon, ...props }) => (
  <button
-    className={cn(`button-${category}`, className)}
+    className={cn(
+      {
+        [`button-${category}`]: category,
+        'icon-button': Icon && !children
+      },
+      className
+    )}
    type="button"
    {...props}
  >
+    {Icon && <Icon />}
    {children}
  </button>
 );
--- a/client/js/index.js
+++ b/client/js/index.js
@ -11,7 +11,6 @@ import routes from './routes';
 import runModules from './modules';
 import { register } from './serviceWorker';
 import '../css/fonts.css';
-import '../css/fontello.css';
 import '../css/style.css';

 const production = process.env.NODE_ENV === 'production';
--- a/client/package.json
+++ b/client/package.json
@ -70,6 +70,7 @@
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-hot-loader": "^4.9.0",
+    "react-icons": "^3.7.0",
    "react-modal": "^3.8.1",
    "react-redux": "^7.0.3",
    "react-virtualized-auto-sizer": "^1.0.2",
--- a/client/yarn.lock
+++ b/client/yarn.lock
@ -2288,12 +2288,7 @@ camelcase@^3.0.0:
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
  integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=

-camelcase@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
-  integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
-
-camelcase@^5.2.0:
+camelcase@^5.0.0, camelcase@^5.2.0:
  version "5.3.1"
  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
  integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
@ -8329,6 +8324,13 @@ react-hot-loader@^4.9.0:
    shallowequal "^1.0.2"
    source-map "^0.7.3"

+react-icons@^3.7.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.10.0.tgz#6c217a2dde2e8fa8d293210023914b123f317297"
+  integrity sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-is@^16.7.0, react-is@^16.8.4, react-is@^16.8.6:
  version "16.8.6"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"