diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js --- a/web/chat/thread-menu.react.js +++ b/web/chat/thread-menu.react.js @@ -1,14 +1,5 @@ // @flow -import { - faArrowRight, - faBell, - faCog, - faCommentAlt, - faSignOutAlt, - faPlusCircle, - faUserFriends, -} from '@fortawesome/free-solid-svg-icons'; import * as React from 'react'; import { @@ -61,7 +52,7 @@ <MenuItem key="settings" text="Settings" - icon={faCog} + icon="wrench" onClick={onClickSettings} /> ); @@ -82,7 +73,7 @@ <MenuItem key="members" text="Members" - icon={faUserFriends} + icon="users" onClick={onClickMembers} /> ); @@ -111,7 +102,7 @@ <MenuItem key="sidebars" text="Sidebars" - icon={faArrowRight} + icon="arrow-right-small" onClick={onClickSidebars} /> ); @@ -131,7 +122,7 @@ return null; } return ( - <MenuItem key="subchannels" text="Subchannels" icon={faCommentAlt} /> + <MenuItem key="subchannels" text="Subchannels" icon="message-square" /> ); }, [canCreateSubchannels, hasSubchannels]); @@ -143,7 +134,7 @@ <MenuItem key="newSubchannel" text="Create new subchannel" - icon={faPlusCircle} + icon="plus-circle" /> ); }, [canCreateSubchannels]); @@ -183,7 +174,7 @@ <MenuItem key="leave" text="Leave Thread" - icon={faSignOutAlt} + icon="logout" dangerous onClick={onClickLeaveThread} /> @@ -192,7 +183,7 @@ const menuItems = React.useMemo(() => { const notificationsItem = ( - <MenuItem key="notifications" text="Notifications" icon={faBell} /> + <MenuItem key="notifications" text="Notifications" icon="bell" /> ); const separator = <hr key="separator" className={css.separator} />; diff --git a/web/components/menu-item.react.js b/web/components/menu-item.react.js --- a/web/components/menu-item.react.js +++ b/web/components/menu-item.react.js @@ -1,15 +1,14 @@ // @flow -import type { IconDefinition } from '@fortawesome/fontawesome-common-types'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; import * as React from 'react'; +import SWMansionIcon, { type Icon } from '../SWMansionIcon.react'; import css from './menu.css'; type MenuItemProps = { +onClick?: () => mixed, - +icon: IconDefinition, + +icon: Icon, +text: string, +dangerous?: boolean, }; @@ -23,7 +22,7 @@ return ( <button className={itemClasses} onClick={onClick}> <div className={css.menuActionIcon}> - <FontAwesomeIcon icon={icon} className={css.promptIcon} /> + <SWMansionIcon size="100%" icon={icon} /> </div> <div>{text}</div> </button> diff --git a/web/components/menu.css b/web/components/menu.css --- a/web/components/menu.css +++ b/web/components/menu.css @@ -52,10 +52,16 @@ } div.menuActionIcon { - font-size: 1.125em; display: flex; justify-content: center; margin-right: 8px; + height: 24px; + width: 24px; +} + +div.menuActionListMemberActions div.menuActionIcon { + height: 18px; + width: 18px; } button.menuActionDangerous { diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js --- a/web/modals/threads/members/member.react.js +++ b/web/modals/threads/members/member.react.js @@ -1,10 +1,5 @@ // @flow -import { - faPlusCircle, - faMinusCircle, - faSignOutAlt, -} from '@fortawesome/free-solid-svg-icons'; import classNames from 'classnames'; import * as React from 'react'; @@ -117,7 +112,7 @@ <MenuItem key="remove_admin" text="Remove admin" - icon={faMinusCircle} + icon="cross-circle" onClick={onMemberAdminRoleToggled} />, ); @@ -126,7 +121,7 @@ <MenuItem key="make_admin" text="Make admin" - icon={faPlusCircle} + icon="plus-circle" onClick={onMemberAdminRoleToggled} />, ); @@ -141,7 +136,7 @@ <MenuItem key="remove_user" text="Remove user" - icon={faSignOutAlt} + icon="logout" onClick={onClickRemoveUser} dangerous />,