From e20c70efd59f5eb2415776f07800e8096c1915b1 Mon Sep 17 00:00:00 2001 From: David Walsh Date: Sun, 26 Feb 2023 20:42:03 -0600 Subject: [PATCH] UX: Update Settings Icon (#17561) * UX: Update Settings Icon * Remove font-awesome usage * Remove from files to convert * Fix lint --- .../files-to-convert.json | 1 - .../account-menu/account-menu.component.js | 6 +-- ui/components/app/tab-bar/tab-bar.stories.js | 2 +- ui/components/ui/icon/icon-cog.js | 47 ------------------- ui/components/ui/icon/icon.stories.js | 2 - ui/helpers/constants/settings.js | 10 ++-- ui/pages/settings/settings.component.js | 2 +- 7 files changed, 10 insertions(+), 60 deletions(-) delete mode 100644 ui/components/ui/icon/icon-cog.js diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json index 331814af4..1a509ecab 100644 --- a/development/ts-migration-dashboard/files-to-convert.json +++ b/development/ts-migration-dashboard/files-to-convert.json @@ -882,7 +882,6 @@ "ui/components/ui/icon/approve-icon.component.js", "ui/components/ui/icon/copy-icon.component.js", "ui/components/ui/icon/icon-check.js", - "ui/components/ui/icon/icon-cog.js", "ui/components/ui/icon/icon-eye-slash.js", "ui/components/ui/icon/icon-eye.js", "ui/components/ui/icon/icon-import.js", diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index 1805d7a5e..7e288efb3 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -31,7 +31,6 @@ import { ///: END:ONLY_INCLUDE_IN } from '../../../helpers/constants/routes'; import TextField from '../../ui/text-field'; -import IconCog from '../../ui/icon/icon-cog'; import Button from '../../ui/button'; import SearchIcon from '../../ui/icon/search-icon'; @@ -485,8 +484,9 @@ export default class AccountMenu extends Component { }); }} icon={ - } diff --git a/ui/components/app/tab-bar/tab-bar.stories.js b/ui/components/app/tab-bar/tab-bar.stories.js index a2f618292..fb304c6ee 100644 --- a/ui/components/app/tab-bar/tab-bar.stories.js +++ b/ui/components/app/tab-bar/tab-bar.stories.js @@ -19,7 +19,7 @@ export default { args: { tabs: [ { - icon: , + icon: , content: 'General', key: 'general', }, diff --git a/ui/components/ui/icon/icon-cog.js b/ui/components/ui/icon/icon-cog.js deleted file mode 100644 index 3a76a93be..000000000 --- a/ui/components/ui/icon/icon-cog.js +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -/** - * @deprecated This has been deprecated in favour of the `` component in ./ui/components/component-library/icon/icon.js - * See storybook documentation for Icon here https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#icon - */ - -const IconCog = ({ - size = 24, - color = 'currentColor', - ariaLabel, - className, -}) => ( - - - -); - -IconCog.propTypes = { - /** - * The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc - */ - size: PropTypes.number, - /** - * The color of the icon accepts design token css variables - */ - color: PropTypes.string, - /** - * An additional className to assign the Icon - */ - className: PropTypes.string, - /** - * The aria-label of the icon for accessibility purposes - */ - ariaLabel: PropTypes.string, -}; - -export default IconCog; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index ece776384..e4c9e573b 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -22,7 +22,6 @@ import SendIcon from './send-icon.component'; import Sign from './sign-icon.component'; import SunCheck from './sun-check-icon.component'; import Swap from './swap-icon-for-list.component'; -import IconCog from './icon-cog'; import IconEye from './icon-eye'; import IconEyeSlash from './icon-eye-slash'; import IconTokenSearch from './icon-token-search'; @@ -115,7 +114,6 @@ export const DefaultStory = (args) => ( gridTemplateColumns: 'repeat(auto-fill, 176px)', }} > - } /> } /> } /> diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js index 20768e77c..552eb5c9a 100644 --- a/ui/helpers/constants/settings.js +++ b/ui/helpers/constants/settings.js @@ -19,21 +19,21 @@ export const SETTINGS_CONSTANTS = [ sectionMessage: (t) => t('currencyConversion'), descriptionMessage: (t) => t('currencyConversion'), route: `${GENERAL_ROUTE}#currency-conversion`, - icon: 'fa fa-cog', + iconName: ICON_NAMES.SETTING, }, { tabMessage: (t) => t('general'), sectionMessage: (t) => t('primaryCurrencySetting'), descriptionMessage: (t) => t('primaryCurrencySettingDescription'), route: `${GENERAL_ROUTE}#primary-currency`, - icon: 'fa fa-cog', + iconName: ICON_NAMES.SETTING, }, { tabMessage: (t) => t('general'), sectionMessage: (t) => t('currentLanguage'), descriptionMessage: (t) => t('currentLanguage'), route: `${GENERAL_ROUTE}#current-language`, - icon: 'fa fa-cog', + iconName: ICON_NAMES.SETTING, }, { tabMessage: (t) => t('general'), @@ -47,14 +47,14 @@ export const SETTINGS_CONSTANTS = [ sectionMessage: (t) => t('accountIdenticon'), descriptionMessage: (t) => t('accountIdenticon'), route: `${GENERAL_ROUTE}#account-identicon`, - icon: 'fa fa-cog', + iconName: ICON_NAMES.SETTING, }, { tabMessage: (t) => t('general'), sectionMessage: (t) => t('hideZeroBalanceTokens'), descriptionMessage: (t) => t('hideZeroBalanceTokens'), route: `${GENERAL_ROUTE}#zero-balancetokens`, - icon: 'fa fa-cog', + iconName: ICON_NAMES.SETTING, }, { tabMessage: (t) => t('advanced'), diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js index 5da1c45cb..14bf90b70 100644 --- a/ui/pages/settings/settings.component.js +++ b/ui/pages/settings/settings.component.js @@ -274,7 +274,7 @@ class SettingsPage extends PureComponent { const tabs = [ { content: t('general'), - icon: , + icon: , key: GENERAL_ROUTE, }, {