From 524ddcfaf47e16c803c0174306d95fc7bbb150ec Mon Sep 17 00:00:00 2001 From: George Marshall Date: Tue, 15 Mar 2022 07:40:55 -0700 Subject: [PATCH] Updating account and network icons (#13947) --- app/images/check-white.svg | 3 - app/images/connect-icon.svg | 4 - app/images/import-account.svg | 6 - app/images/plus-btn-white.svg | 6 - app/images/settings.svg | 6 - app/images/support.svg | 3 - .../account-menu/account-menu.component.js | 42 ++---- ui/components/app/account-menu/index.scss | 23 +-- .../app/dropdowns/network-dropdown.js | 6 +- ui/components/ui/icon/README.mdx | 58 ++++++++ ui/components/ui/icon/icon-check.js | 42 ++++++ ui/components/ui/icon/icon-cog.js | 42 ++++++ ui/components/ui/icon/icon-connect.js | 42 ++++++ ui/components/ui/icon/icon-import.js | 42 ++++++ ui/components/ui/icon/icon-plus.js | 42 ++++++ ui/components/ui/icon/icon-speech-bubbles.js | 42 ++++++ ui/components/ui/icon/icon.stories.js | 132 +++++++++++++----- ui/css/itcss/components/network.scss | 11 +- 18 files changed, 429 insertions(+), 123 deletions(-) delete mode 100644 app/images/check-white.svg delete mode 100644 app/images/connect-icon.svg delete mode 100644 app/images/import-account.svg delete mode 100644 app/images/plus-btn-white.svg delete mode 100644 app/images/settings.svg delete mode 100644 app/images/support.svg create mode 100644 ui/components/ui/icon/icon-check.js create mode 100644 ui/components/ui/icon/icon-cog.js create mode 100644 ui/components/ui/icon/icon-connect.js create mode 100644 ui/components/ui/icon/icon-import.js create mode 100644 ui/components/ui/icon/icon-plus.js create mode 100644 ui/components/ui/icon/icon-speech-bubbles.js diff --git a/app/images/check-white.svg b/app/images/check-white.svg deleted file mode 100644 index 9bbea3c1a..000000000 --- a/app/images/check-white.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/images/connect-icon.svg b/app/images/connect-icon.svg deleted file mode 100644 index 7b93be6b4..000000000 --- a/app/images/connect-icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/app/images/import-account.svg b/app/images/import-account.svg deleted file mode 100644 index bbcec8e29..000000000 --- a/app/images/import-account.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/app/images/plus-btn-white.svg b/app/images/plus-btn-white.svg deleted file mode 100644 index 13ce2e74b..000000000 --- a/app/images/plus-btn-white.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/app/images/settings.svg b/app/images/settings.svg deleted file mode 100644 index 5424d5f09..000000000 --- a/app/images/settings.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/app/images/support.svg b/app/images/support.svg deleted file mode 100644 index 4670dfb4f..000000000 --- a/app/images/support.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index 4c3ff209c..2100228da 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -25,6 +25,13 @@ import { } from '../../../helpers/constants/routes'; import TextField from '../../ui/text-field'; import SearchIcon from '../../ui/search-icon'; +import IconCheck from '../../ui/icon/icon-check'; +import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles'; +import IconConnect from '../../ui/icon/icon-connect'; +import IconCog from '../../ui/icon/icon-cog'; +import IconPlus from '../../ui/icon/icon-plus'; +import IconImport from '../../ui/icon/icon-import'; + import Button from '../../ui/button'; import KeyRingLabel from './keyring-label'; @@ -202,7 +209,7 @@ export default class AccountMenu extends Component { >
{isSelected ? ( -
+ ) : null}
@@ -344,13 +351,7 @@ export default class AccountMenu extends Component { }); history.push(NEW_ACCOUNT_ROUTE); }} - icon={ - {t('createAccount')} - } + icon={} text={t('createAccount')} /> - } + icon={} text={t('importAccount')} /> - } + icon={} text={t('connectHardwareWallet')} />
@@ -404,7 +393,7 @@ export default class AccountMenu extends Component { onClick={() => { global.platform.openTab({ url: supportLink }); }} - icon={{supportText}} + icon={} text={supportText} /> @@ -420,12 +409,7 @@ export default class AccountMenu extends Component { }, }); }} - icon={ - - } + icon={} text={t('settings')} />
diff --git a/ui/components/app/account-menu/index.scss b/ui/components/app/account-menu/index.scss index 96d43e2bc..1c0a9de93 100644 --- a/ui/components/app/account-menu/index.scss +++ b/ui/components/app/account-menu/index.scss @@ -51,9 +51,8 @@ } &__icon { - height: 16px; - width: 16px; - margin-right: 14px; + margin-right: 8px; + display: flex; } &__text { @@ -116,11 +115,6 @@ } } - &__item-icon { - width: 16px; - height: 16px; - } - &__accounts-container { display: flex; position: relative; @@ -202,21 +196,10 @@ } &__check-mark { - width: 14px; - margin-right: 12px; + margin-right: 8px; flex: 0 0 auto; } - &__check-mark-icon { - background-image: url("/images/check-white.svg"); - height: 18px; - width: 18px; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - margin: 3px 0; - } - .identicon { margin: 0 12px 0 0; flex: 0 0 auto; diff --git a/ui/components/app/dropdowns/network-dropdown.js b/ui/components/app/dropdowns/network-dropdown.js index c6c5e6091..e3f59fef7 100644 --- a/ui/components/app/dropdowns/network-dropdown.js +++ b/ui/components/app/dropdowns/network-dropdown.js @@ -21,6 +21,8 @@ import { ADD_NETWORK_ROUTE, ADVANCED_ROUTE, } from '../../../helpers/constants/routes'; +import IconCheck from '../../ui/icon/icon-check'; + import { Dropdown, DropdownMenuItem } from './dropdown'; // classes from nodes of the toggle element. @@ -185,7 +187,7 @@ class NetworkDropdown extends Component { }} > {isCurrentRpcTarget ? ( - + ) : (
✓
)} @@ -257,7 +259,7 @@ class NetworkDropdown extends Component { style={DROP_DOWN_MENU_ITEM_STYLE} > {providerType === network ? ( - + ) : (
✓
)} diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx index 1c7c0b739..f33bca8d4 100644 --- a/ui/components/ui/icon/README.mdx +++ b/ui/components/ui/icon/README.mdx @@ -1,5 +1,6 @@ import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; +import IconCaretLeft from './icon-caret-left.js'; import Approve from './approve-icon.component'; import BuyIcon from './overview-buy-icon.component'; import CopyIcon from './copy-icon.component'; @@ -22,6 +23,63 @@ A range of SVG icon components > 💡 A lot of the our icons have different props and are not consistent we will need to work on fixing this. +## Component API + + + +## Usage + +The following describes the props and example usage for this component. + +### Size + +Use the `size` prop to change the size of the icon it should adhere to an `8px` grid e.g. `16px`, `24px`, `32px` + + + + + +### Color + +Use the `color` prop to change the color of the icon. `color` accepts any css value. Should use the valid design token css variables + + + + + +### AriaLabel + +Use the `ariaLabel` prop with icons intended to be used without text. e.g. back buttons or icons that should provide extra information to screen readers + + + + + +Will render the html + +```html + + + +``` + +### ClassName + +Use the `className` prop to add an additional class to the icon. This additional class is recommend to be used with layout of positioning css + +# DEPRECATED ICONS + +> The icons below use many different prop combinations and should be updated to the above api + ## Approve diff --git a/ui/components/ui/icon/icon-check.js b/ui/components/ui/icon/icon-check.js new file mode 100644 index 000000000..14e00339f --- /dev/null +++ b/ui/components/ui/icon/icon-check.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const IconCheck = ({ + size = 24, + color = 'currentColor', + ariaLabel, + className, +}) => ( + + + +); + +IconCheck.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 IconCheck; diff --git a/ui/components/ui/icon/icon-cog.js b/ui/components/ui/icon/icon-cog.js new file mode 100644 index 000000000..9f54f38fc --- /dev/null +++ b/ui/components/ui/icon/icon-cog.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +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-connect.js b/ui/components/ui/icon/icon-connect.js new file mode 100644 index 000000000..c55a21df6 --- /dev/null +++ b/ui/components/ui/icon/icon-connect.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const IconConnect = ({ + size = 24, + color = 'currentColor', + ariaLabel, + className, +}) => ( + + + +); + +IconConnect.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 IconConnect; diff --git a/ui/components/ui/icon/icon-import.js b/ui/components/ui/icon/icon-import.js new file mode 100644 index 000000000..9d37135dc --- /dev/null +++ b/ui/components/ui/icon/icon-import.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const IconImport = ({ + size = 24, + color = 'currentColor', + ariaLabel, + className, +}) => ( + + + +); + +IconImport.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 IconImport; diff --git a/ui/components/ui/icon/icon-plus.js b/ui/components/ui/icon/icon-plus.js new file mode 100644 index 000000000..1f3c8b234 --- /dev/null +++ b/ui/components/ui/icon/icon-plus.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const IconPlus = ({ + size = 24, + color = 'currentColor', + ariaLabel, + className, +}) => ( + + + +); + +IconPlus.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 IconPlus; diff --git a/ui/components/ui/icon/icon-speech-bubbles.js b/ui/components/ui/icon/icon-speech-bubbles.js new file mode 100644 index 000000000..5a7869ada --- /dev/null +++ b/ui/components/ui/icon/icon-speech-bubbles.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const IconSpeechBubbles = ({ + size = 24, + color = 'currentColor', + ariaLabel, + className, +}) => ( + + + +); + +IconSpeechBubbles.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 IconSpeechBubbles; diff --git a/ui/components/ui/icon/icon.stories.js b/ui/components/ui/icon/icon.stories.js index bd27369e0..4aaa79e70 100644 --- a/ui/components/ui/icon/icon.stories.js +++ b/ui/components/ui/icon/icon.stories.js @@ -1,6 +1,10 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { COLORS, SEVERITIES } from '../../../helpers/constants/design-system'; +import { + COLORS, + SEVERITIES, + TYPOGRAPHY, +} from '../../../helpers/constants/design-system'; import Card from '../card'; import Typography from '../typography'; import Box from '../box'; @@ -26,6 +30,24 @@ import IconCaretLeft from './icon-caret-left'; import IconCaretRight from './icon-caret-right'; import IconCaretDown from './icon-caret-down'; import IconCaretUp from './icon-caret-up'; +import IconCheck from './icon-check'; +import IconCog from './icon-cog'; +import IconConnect from './icon-connect'; +import IconImport from './icon-import'; +import IconSpeechBubbles from './icon-speech-bubbles'; +import IconPlus from './icon-plus'; + +const validColors = [ + 'var(--color-icon-default)', + 'var(--color-icon-muted)', + 'var(--color-overlay-inverse)', + 'var(--color-primary-default)', + 'var(--color-secondary-default)', + 'var(--color-error-default)', + 'var(--color-warning-default)', + 'var(--color-success-default)', + 'var(--color-info-default)', +]; export default { title: 'Components/UI/Icon', @@ -35,6 +57,22 @@ export default { page: README, }, }, + argTypes: { + size: { + control: 'select', + options: [16, 24, 32, 40], + }, + color: { + control: 'select', + options: validColors, + }, + ariaLabel: { + control: 'text', + }, + className: { + control: 'text', + }, + }, }; const IconItem = ({ Component }) => { @@ -57,13 +95,41 @@ IconItem.propTypes = { export const DefaultStory = (args) => (
- + Icons + + If you are creating a new icon please use the ./icon-caret-left.js as the + template + + +
+ } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> +
+ + + DEPRECATED + - - Circle Icons -
( } /> } /> } /> -
- - - - Invertible Icons - -
} /> } /> } /> } /> -
- - - - Other Icons - -
} /> } /> } /> } /> } /> } /> - } /> - } /> - } /> - } />
@@ -132,6 +168,32 @@ DefaultStory.args = { reverseColors: false, }; +export const Size = (args) => ( +
+ + + +
+); + +Size.args = { + size: null, +}; + +export const Color = (args) => ( + <> + {Object.values(validColors).map((color) => ( + + ))} + +); + +export const AriaLabel = (args) => ; + +AriaLabel.args = { + ariaLabel: 'back', +}; + export const ApproveStory = (args) => ; ApproveStory.args = { size: 40, diff --git a/ui/css/itcss/components/network.scss b/ui/css/itcss/components/network.scss index 887e9e5f5..7c3c5f7f7 100644 --- a/ui/css/itcss/components/network.scss +++ b/ui/css/itcss/components/network.scss @@ -58,7 +58,7 @@ right: 2px; .color-indicator { - margin: 0 14px; + margin: 0 14px 0 4px; } @media screen and (min-width: $break-large) { @@ -82,16 +82,9 @@ white-space: nowrap; } -.network-check, -.network-check__transparent { - color: var(--white); - margin-left: 7px; -} - .network-check__transparent { opacity: 0; - width: 16px; - margin: 0; + width: 24px; } .menu-icon-circle,