Use react-icons

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';
-} /* '' */

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 {
+.connect-form-button-optionals {
-  display: block;
-  cursor: pointer;
-  color: #999;
-  text-align: center;
   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 {
+.chat-title-bar .icon-button {
-  border-left: 1px solid #ddd;
+  color: #999;
 }
 
-.button-leave:hover {
+.chat-title-bar .icon-button:hover {
-  background: #ddd;
+  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 {
+.userlist-bar svg {
-  margin-right: 3px;
+  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;
+  width: 60px !important;
-  height: 24px;
+  height: 30px;
-  font-size: 12px;
 }
 
 .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;
-}
+  margin-left: 5px;
-
-.modal-channel-users i {
-  margin-right: 3px;
 }
 
 .modal-channel-results {

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>
+          <Button icon={FiPlus} onClick={this.handleConnectClick} />
-          <i className="icon-user" />
+          <Button icon={FiUser} />
-          <i className="icon-cog" onClick={this.handleSettingsClick} />
+          <Button icon={FiSettings} onClick={this.handleSettingsClick} />
         </div>
       </div>
     );

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">
+        <FiUsers />
-          <i className="icon-user" />
+        <span className="modal-channel-users">{userCount}</span>
-          {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
+        <Button
-          className="icon-cancel modal-close modal-channel-close"
+          icon={FiX}
+          className="modal-close modal-channel-close"
           onClick={onClose}
         />
       </div>

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>
     </>

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} />
+        {tab.name && (
-        <i
+          <Button icon={FiSearch} title="Search" onClick={onToggleSearch} />
-          className="icon-cancel button-leave"
+        )}
-          title={closeTitle}
+        <Button icon={FiX} title={closeTitle} onClick={onCloseClick} />
-          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" />
+        <FiUsers />
-        <span className="chat-usercount">
         {channel && channel.users.length}
-        </span>
       </div>
     </div>
   );

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"

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>
       );

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>
 );

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';

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",

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:
+camelcase@^5.0.0, camelcase@^5.2.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:
   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"