m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Updating account and network icons (#13947)

Browse Source
This commit is contained in:
George Marshall 2022-03-15 07:40:55 -07:00 committed by GitHub
parent 0ab9a39c7d
commit 524ddcfaf4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 429 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/images/check-white.svg
View File

@ -1,3 +0,0 @@
<svg height="13" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M5.2 9.571L1.714 6.014l-1.428 1.4L5.2 12.43l10.514-10.73L14.286.3z" fill="#fff"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 166 B

4
app/images/connect-icon.svg
View File

@ -1,4 +0,0 @@
<svg height="288" width="288" xmlns="http://www.w3.org/2000/svg">
<path d="M-1-1h582v402H-1z" fill="none"/>
<path d="M122 25l15-21c4-5 10-5 14 0l16 22c4 5 2 10-5 10h-12v118c0 3 3 3 5 1l25-25c4-4 6-10 6-16V90c-7 0-12-5-12-12V66c0-6 5-12 12-12h12c7 0 12 5 12 12v12c0 7-5 12-12 12v24c0 10-3 18-10 25l-31 31c-4 4-7 6-7 16v49c12 3 21 13 21 26 0 15-12 27-27 27s-27-12-27-27c0-13 9-23 21-26v-13c0-10-3-13-7-17l-31-31c-6-6-10-14-10-24v-25c-7-2-12-9-12-17 0-10 8-18 18-18s18 8 18 18c0 8-5 15-12 17v25c0 7 3 12 7 16l25 25c2 2 4 2 4-1V36h-12c-7 0-9-5-4-11z" fill="#fff"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 576 B

6
app/images/import-account.svg
View File

@ -1,6 +0,0 @@
<svg height="15" width="15" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M0 13.172h14.49v1.084H0zM6.586 0H7.67v10.538H6.586z" fill="#fff"/>
<path d="M2.634 6.586l4.61 3.952 4.61-3.952" stroke="#fff"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 273 B

6
app/images/plus-btn-white.svg
View File

@ -1,6 +0,0 @@
<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff" fill-rule="evenodd">
<path d="M7.385 0h1.23v16h-1.23z"/>
<path d="M0 8.615v-1.23h16v1.23z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 208 B

6
app/images/settings.svg
View File

@ -1,6 +0,0 @@
<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg">
<mask id="a" fill="#fff">
<path d="M20 10v10H0V0h20z" fill-rule="evenodd"/>
</mask>
<path d="M10 13.66a3.66 3.66 0 110-7.32 3.66 3.66 0 010 7.32zm9.157-1.849a.804.804 0 00.772-.672S20 10.62 20 10s-.071-1.138-.071-1.138a.805.805 0 00-.772-.673h-1.929c-.374 0-.762-.238-.863-.529-.1-.292-.238-1.225.026-1.489l1.364-1.364a.76.76 0 00.045-1.002L16.195 2.2a.76.76 0 00-1.002.045L13.829 3.61c-.264.264-.704.371-.977.237-.274-.134-1.04-.7-1.04-1.073V.843a.803.803 0 00-.673-.77S10.619 0 10 0c-.618 0-1.138.072-1.138.072a.803.803 0 00-.673.771v1.93c0 .373-.238.762-.529.862s-1.225.238-1.489-.026L4.807 2.245A.76.76 0 003.805 2.2L2.2 3.805a.76.76 0 00.045 1.002l1.364 1.364c.264.264.371.704.237.977-.135.274-.7 1.041-1.073 1.041H.843a.804.804 0 00-.771.673S0 9.382 0 10s.072 1.14.072 1.14c.051.37.398.671.771.671h1.93c.373 0 .762.24.862.53s.239 1.223-.026 1.488l-1.363 1.364a.76.76 0 00-.046 1.002L3.805 17.8a.76.76 0 001.002-.045l1.364-1.365c.264-.263.704-.37.977-.236.274.134 1.041.7 1.041 1.073v1.93c0 .373.303.721.673.772 0 0 .52.071 1.138.071.619 0 1.139-.07 1.139-.07a.806.806 0 00.673-.773v-1.93c0-.374.238-.76.529-.862s1.224-.238 1.488.025l1.364 1.365a.762.762 0 001.002.045l1.605-1.605a.76.76 0 00-.045-1.002l-1.364-1.364c-.264-.264-.37-.704-.237-.978.134-.273.7-1.04 1.074-1.04z" fill="#b3b3b3" fill-rule="evenodd" mask="url(#a)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

3
app/images/support.svg
View File

@ -1,3 +0,0 @@
<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 5C14 2.25 11.0625 0 7.5 0C3.90625 0 1 2.25 1 5C1 6.09375 1.4375 7.0625 2.1875 7.875C1.75 8.84375 1.0625 9.59375 1.0625 9.59375C1 9.65625 0.96875 9.78125 1 9.875C1.0625 9.96875 1.125 10 1.25 10C2.375 10 3.3125 9.625 4 9.21875C5 9.71875 6.21875 10 7.5 10C11.0625 10 14 7.78125 14 5ZM17.8125 11.875C18.5312 11.0625 19 10.0938 19 9C19 6.9375 17.3125 5.125 14.9375 4.375C14.9688 4.59375 15 4.8125 15 5C15 8.3125 11.625 11 7.5 11C7.15625 11 6.8125 11 6.5 10.9688C7.46875 12.75 9.78125 14 12.5 14C13.7812 14 14.9688 13.7188 15.9688 13.2188C16.6562 13.625 17.5938 14 18.75 14C18.8438 14 18.9375 13.9688 18.9688 13.875C19 13.7812 19 13.6562 18.9062 13.5938C18.9062 13.5938 18.2188 12.8438 17.8125 11.875Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 827 B

42
ui/components/app/account-menu/account-menu.component.js
View File

@ -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 {
>
<div className="account-menu__check-mark">
{isSelected ? (
<div className="account-menu__check-mark-icon" />
<IconCheck color="var(--color-success-default)" />
) : null}
</div>
<Identicon address={identity.address} diameter={24} />
@ -344,13 +351,7 @@ export default class AccountMenu extends Component {
});
history.push(NEW_ACCOUNT_ROUTE);
}}
icon={
<img
className="account-menu__item-icon"
src="images/plus-btn-white.svg"
alt={t('createAccount')}
/>
}
icon={<IconPlus />}
text={t('createAccount')}
/>
<AccountMenuItem
@ -365,13 +366,7 @@ export default class AccountMenu extends Component {
});
history.push(IMPORT_ACCOUNT_ROUTE);
}}
icon={
<img
className="account-menu__item-icon"
src="images/import-account.svg"
alt={t('importAccount')}
/>
}
icon={<IconImport ariaLabel={t('importAccount')} />}
text={t('importAccount')}
/>
<AccountMenuItem
@ -390,13 +385,7 @@ export default class AccountMenu extends Component {
history.push(CONNECT_HARDWARE_ROUTE);
}
}}
icon={
<img
className="account-menu__item-icon"
src="images/connect-icon.svg"
alt={t('connectHardwareWallet')}
/>
}
icon={<IconConnect ariaLabel={t('connectHardwareWallet')} />}
text={t('connectHardwareWallet')}
/>
<div className="account-menu__divider" />
@ -404,7 +393,7 @@ export default class AccountMenu extends Component {
onClick={() => {
global.platform.openTab({ url: supportLink });
}}
icon={<img src="images/support.svg" alt={supportText} />}
icon={<IconSpeechBubbles ariaLabel={supportText} />}
text={supportText}
/>
@ -420,12 +409,7 @@ export default class AccountMenu extends Component {
},
});
}}
icon={
<img
className="account-menu__item-icon"
src="images/settings.svg"
/>
}
icon={<IconCog ariaLabel={t('settings')} />}
text={t('settings')}
/>
</div>

23
ui/components/app/account-menu/index.scss
View File

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

6
ui/components/app/dropdowns/network-dropdown.js
View File

@ -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 ? (
<i className="fa fa-check" />
<IconCheck color="var(--color-success-default)" />
) : (
<div className="network-check__transparent">✓</div>
)}
@ -257,7 +259,7 @@ class NetworkDropdown extends Component {
style={DROP_DOWN_MENU_ITEM_STYLE}
>
{providerType === network ? (
<i className="fa fa-check" />
<IconCheck color="var(--color-success-default)" />
) : (
<div className="network-check__transparent">✓</div>
)}

58
ui/components/ui/icon/README.mdx
View File

@ -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
<ArgsTable of={IconCaretLeft} />
## 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`
<Canvas>
<Story id="ui-components-ui-icon-icon-stories-js--size" />
</Canvas>
### 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
<Canvas>
<Story id="ui-components-ui-icon-icon-stories-js--color" />
</Canvas>
### 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
<Canvas>
<Story id="ui-components-ui-icon-icon-stories-js--aria-label" />
</Canvas>
Will render the html
```html
<svg
width="24"
height="24"
fill="currentColor"
aria-label="back"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z"
></path>
</svg>
```
### 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
<Canvas>

42
ui/components/ui/icon/icon-check.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconCheck = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m420 134c9 9 9 22 0 30l-213 214c-8 8-22 8-30 0l-85-86c-9-8-9-21 0-30 8-8 21-8 30 0l70 70 198-198c9-8 22-8 30 0z" />
</svg>
);
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;

42
ui/components/ui/icon/icon-cog.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconCog = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m256 326c-9 0-18-2-27-5-8-4-16-9-23-15-6-7-11-15-15-23-3-9-5-18-5-27 0-9 2-18 5-27 4-8 9-16 15-23 7-6 15-11 23-15 9-3 18-5 27-5 19 0 37 7 50 20 13 13 20 31 20 50 0 19-7 37-20 50-13 13-31 20-50 20z m176-35c3 0 7-2 10-4 2-2 4-6 5-9 0 0 1-10 1-22 0-12-1-22-1-22-1-3-3-7-5-9-3-2-7-4-10-4l-37 0c-7 0-15-4-17-10-2-6-4-23 1-29l26-26c2-2 4-6 4-9 0-4-1-7-3-10l-31-31c-3-2-6-3-10-3-3 0-7 2-9 4l-26 26c-6 5-14 7-19 5-6-3-20-14-20-21l0-37c0-3-2-7-4-10-2-2-6-4-9-5 0 0-10-1-22-1-12 0-22 1-22 1-3 1-7 3-9 5-2 3-4 7-4 10l0 37c0 7-4 15-10 17-6 2-23 4-29-1l-26-26c-2-2-6-4-9-4-4 0-7 1-10 3l-31 31c-2 3-3 6-3 10 0 3 2 7 4 9l26 26c5 6 7 14 5 19-3 6-14 20-21 20l-37 0c-3 0-7 2-10 4-2 2-4 6-5 9 0 0-1 10-1 22 0 12 1 22 1 22 1 7 8 13 15 13l37 0c7 0 15 4 17 10 2 6 4 23-1 29l-26 26c-2 2-4 6-4 9 0 4 1 7 3 10l31 31c3 2 6 3 10 3 3 0 7-2 9-4l26-26c6-5 14-7 19-5 6 3 20 14 20 21l0 37c0 7 6 14 13 15 0 0 10 1 22 1 12 0 22-1 22-1 3-1 7-3 9-5 2-3 4-7 4-10l0-37c0-7 4-15 10-17 6-2 23-4 29 1l26 26c2 2 6 4 9 4 4 0 7-1 10-3l31-31c2-3 3-6 3-10 0-3-2-7-4-9l-26-26c-5-6-7-14-5-19 3-6 14-20 21-20z" />
</svg>
);
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;

42
ui/components/ui/icon/icon-connect.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconConnect = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m213 79l22-31c6-7 15-7 21 0l23 33c6 7 3 15-7 15l-18 0 0 175c0 4 4 4 7 1l37-37c6-6 8-15 8-24l0-35c-10 0-17-8-17-18l0-18c0-9 7-18 17-18l18 0c10 0 17 8 17 18l0 18c0 10-7 18-17 18l0 35c0 15-4 27-15 37l-45 46c-6 6-10 9-10 24l0 73c18 4 31 19 31 38 0 23-18 40-40 40-21 0-39-17-39-40 0-19 13-34 31-38l0-20c0-14-5-19-11-25l-45-46c-8-9-14-20-14-35l0-37c-10-3-18-14-18-26 0-14 12-26 27-26 14 0 26 12 26 26 0 12-8 23-18 26l0 37c0 10 5 18 10 23l37 38c3 2 6 2 6-2l0-228-18 0c-10 0-13-8-6-17z" />
</svg>
);
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;

42
ui/components/ui/icon/icon-import.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconImport = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m256 85c12 0 21 10 21 22l0 183 71-70c8-9 21-9 30 0 8 8 8 21 0 30l-107 106 0 1c-4 3-9 6-15 6l0 0c-3 0-6-1-8-2-3-1-5-3-7-5l-107-106c-8-9-8-22 0-30 9-9 22-9 30 0l71 70 0-183c0-12 9-22 21-22z m-149 299c-12 0-22 10-22 21 0 12 10 22 22 22l298 0c12 0 22-10 22-22 0-11-10-21-22-21z" />
</svg>
);
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;

42
ui/components/ui/icon/icon-plus.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconPlus = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m277 107c0-12-9-22-21-22-12 0-21 10-21 22l0 128-128 0c-12 0-22 9-22 21 0 12 10 21 22 21l128 0 0 128c0 12 9 22 21 22 12 0 21-10 21-22l0-128 128 0c12 0 22-9 22-21 0-12-10-21-22-21l-128 0z" />
</svg>
);
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;

42
ui/components/ui/icon/icon-speech-bubbles.js Normal file
View File

@ -0,0 +1,42 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconSpeechBubbles = ({
size = 24,
color = 'currentColor',
ariaLabel,
className,
}) => (
<svg
width={size}
height={size}
fill={color}
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="m357 221c0-63-66-114-146-114-81 0-146 51-146 114 0 25 10 47 27 66-10 22-25 39-25 39-2 1-3 4-2 6 2 3 3 3 6 3 25 0 46-8 61-18 23 12 50 18 79 18 80 0 146-50 146-114z m86 157c16-18 26-41 26-66 0-47-38-88-91-105 1 5 2 10 2 14 0 76-76 137-169 137-8 0-15 0-22-1 21 41 73 70 134 70 29 0 56-7 78-18 16 9 37 18 63 18 2 0 4-1 5-3 0-2 0-5-2-7 0 0-15-17-24-39z" />
</svg>
);
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;

132
ui/components/ui/icon/icon.stories.js
View File

@ -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) => (
<div>
<Typography variant="h2" boxProps={{ marginBottom: 4 }}>
<Typography variant={TYPOGRAPHY.H2} boxProps={{ marginBottom: 4 }}>
Icons
</Typography>
<Typography variant={TYPOGRAPHY.Paragraph} boxProps={{ marginBottom: 4 }}>
If you are creating a new icon please use the ./icon-caret-left.js as the
template
</Typography>
<Box marginBottom={4}>
<div
style={{
display: 'grid',
gridGap: '16px',
gridTemplateColumns: 'repeat(auto-fill, 176px)',
}}
>
<IconItem Component={<IconCaretLeft {...args} />} />
<IconItem Component={<IconCaretRight {...args} />} />
<IconItem Component={<IconCaretDown {...args} />} />
<IconItem Component={<IconCaretUp {...args} />} />
<IconItem Component={<IconCheck {...args} />} />
<IconItem Component={<IconPlus {...args} />} />
<IconItem Component={<IconImport {...args} />} />
<IconItem Component={<IconConnect {...args} />} />
<IconItem Component={<IconSpeechBubbles {...args} />} />
<IconItem Component={<IconCog {...args} />} />
</div>
</Box>
<Typography
variant={TYPOGRAPHY.H2}
color={COLORS.ERROR_DEFAULT}
boxProps={{ marginBottom: 4 }}
>
DEPRECATED
</Typography>
<Box marginBottom={4}>
<Typography variant="h4" boxProps={{ marginBottom: 2 }}>
Circle Icons
</Typography>
<div
style={{
display: 'grid',
@ -77,46 +143,16 @@ export const DefaultStory = (args) => (
<IconItem Component={<SendIcon {...args} />} />
<IconItem Component={<ReceiveIcon {...args} />} />
<IconItem Component={<Interaction {...args} />} />
</div>
</Box>
<Box marginBottom={4}>
<Typography variant="h4" boxProps={{ marginBottom: 2 }}>
Invertible Icons
</Typography>
<div
style={{
display: 'grid',
gridGap: '16px',
gridTemplateColumns: 'repeat(auto-fill, 176px)',
}}
>
<IconItem Component={<InfoIcon {...args} />} />
<IconItem Component={<InfoIconInverted {...args} />} />
<IconItem Component={<SunCheck {...args} />} />
<IconItem Component={<SunCheck {...args} reverseColors />} />
</div>
</Box>
<Box marginBottom={4}>
<Typography variant="h4" boxProps={{ marginBottom: 2 }}>
Other Icons
</Typography>
<div
style={{
display: 'grid',
gridGap: '16px',
gridTemplateColumns: 'repeat(auto-fill, 176px)',
}}
>
<IconItem Component={<BuyIcon {...args} />} />
<IconItem Component={<SwapIcon {...args} />} />
<IconItem Component={<SwapIconComponent {...args} />} />
<IconItem Component={<PaperAirplane {...args} />} />
<IconItem Component={<CopyIcon {...args} />} />
<IconItem Component={<Preloader {...args} />} />
<IconItem Component={<IconCaretLeft {...args} />} />
<IconItem Component={<IconCaretRight {...args} />} />
<IconItem Component={<IconCaretDown {...args} />} />
<IconItem Component={<IconCaretUp {...args} />} />
</div>
</Box>
</div>
@ -132,6 +168,32 @@ DefaultStory.args = {
reverseColors: false,
};
export const Size = (args) => (
<div>
<IconCaretLeft size={16 || args.size} />
<IconCaretLeft size={24 || args.size} />
<IconCaretLeft size={32 || args.size} />
</div>
);
Size.args = {
size: null,
};
export const Color = (args) => (
<>
{Object.values(validColors).map((color) => (
<IconCaretLeft {...args} color={args.color || color} key={color} />
))}
</>
);
export const AriaLabel = (args) => <IconCaretLeft {...args} />;
AriaLabel.args = {
ariaLabel: 'back',
};
export const ApproveStory = (args) => <Approve {...args} />;
ApproveStory.args = {
size: 40,

11
ui/css/itcss/components/network.scss
View File

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