mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
Dark mdoe: token search icon (#14213)
This commit is contained in:
George Marshall
GitHub
parent
53da89cea1
commit
cf0bc662c1
@ -1,6 +0,0 @@
|
||||
<svg height="58" width="65" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="#b8bac1" fill-rule="evenodd">
|
||||
<path d="M28.532 2.806c13.907 0 25.66 6.423 25.723 14.037-.062 7.616-11.816 14.04-25.723 14.04-13.907 0-25.66-6.423-25.723-14.039C2.872 9.23 14.625 2.806 28.532 2.806m0 33.923c-12.789 0-23.75-5.431-25.48-12.228 4.657 5.497 14.204 9.188 25.48 9.188 11.277 0 20.823-3.69 25.481-9.188-1.73 6.797-12.692 12.228-25.48 12.228m0 17.54c-12.79 0-23.752-5.431-25.481-12.227 4.657 5.496 14.204 9.187 25.48 9.187 4.692 0 9.076-.645 12.94-1.789.666-.196 1.055-.872.94-1.558a3.942 3.942 0 01-.02-.112c-.128-.81-.953-1.312-1.739-1.075-3.635 1.097-7.77 1.728-12.12 1.728-12.79 0-23.752-5.432-25.481-12.228 4.657 5.497 14.204 9.187 25.48 9.187 4.833 0 9.341-.684 13.29-1.891.454-.14.785-.515.92-.971l.011-.039c.322-1.073-.68-2.075-1.749-1.74-3.72 1.163-7.981 1.835-12.472 1.835-12.789 0-23.75-5.432-25.48-12.228 4.657 5.497 14.204 9.187 25.48 9.187 11.277 0 20.823-3.69 25.481-9.187v3.201c0 .836.677 1.513 1.513 1.513s1.512-.672 1.513-1.506c.008-7.066.026-16.63.026-16.65 0-.021-.003-.041-.003-.062 0-.02.003-.04.003-.061h-.005C56.95 7.363 44.462 0 28.532 0 12.602 0 .113 7.362.005 16.783H0c0 .02.003.04.003.061 0 .02-.003.04-.003.061l.01 5.724H0c0 .086.008.17.01.255.004 1.712.008 3.64.01 5.592H0c0 .174.013.346.02.52.004 1.833.008 3.663.01 5.327H0c0 .263.014.524.032.783l.01 5.064H0c0 .32.018.639.046.954l.004.08c.015.166.044.33.067.496.013.086.02.173.035.258.031.184.073.366.115.548.023.104.042.21.068.314.023.088.052.174.077.262C2 48.713 8.128 53.316 16.578 55.57l.07.018c.287.076.573.15.864.222 3.398.843 7.12 1.31 11.02 1.31 3.9 0 7.623-.467 11.02-1.31a46.525 46.525 0 00.935-.24c1.09-.291 2.138-.623 3.145-.991.836-.306 1.136-1.317.633-2.053l-.065-.097a1.383 1.383 0 00-1.635-.52c-4.065 1.486-8.903 2.36-14.033 2.36"/>
|
||||
<path d="M64.323 54.4l-3.87-3.87c1-1.373 1.5-2.995 1.5-4.742.148-5.222-5.053-9.374-10.488-7.551-2.852.956-4.983 3.503-5.404 6.482a8.107 8.107 0 008.028 9.306c1.498 0 2.996-.5 4.118-1.248l3.87 3.868a1.588 1.588 0 002.246-2.246m-15.975-8.487c0-3.12 2.622-5.74 5.741-5.74s5.616 2.496 5.616 5.74a5.593 5.593 0 01-5.616 5.617c-3.244 0-5.74-2.496-5.74-5.617"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB |
42
ui/components/ui/icon/icon-token-search.js
Normal file
42
ui/components/ui/icon/icon-token-search.js
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const IconTokenSearch = ({
|
||||
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="m233 103c82 0 151 40 152 88-1 47-70 87-152 87-83 0-152-40-152-87 0-48 69-88 152-88z m0 212c-76 0-141-34-151-76 28 34 84 57 151 57 66 0 123-23 150-57-10 42-75 76-150 76z m0 110c-76 0-141-34-151-77 28 35 84 58 151 58 27 0 53-4 76-12 4-1 6-5 6-9 0 0-1-1-1-1 0-5-5-8-10-7-21 7-46 11-71 11-76 0-141-34-151-76 28 34 84 57 151 57 28 0 55-4 78-12 3-1 5-3 6-6l0 0c1-7-4-13-11-11-22 7-47 12-73 12-76 0-141-34-151-77 28 34 84 58 151 58 66 0 123-24 150-58l0 20c0 5 4 10 9 10 5 0 9-5 9-10 0-44 0-104 0-104 0 0 0 0 0 0 0 0 0-1 0-1l0 0c-1-59-74-105-168-105-95 0-168 46-169 105l0 0c0 0 0 1 0 1 0 0 0 0 0 0l0 36 0 0c0 0 0 1 0 1 0 11 0 23 0 35l0 0c0 1 0 3 0 4 0 11 0 23 0 33l0 0c0 2 0 3 0 5l0 32 0 0c0 2 0 4 0 5l0 1c0 1 1 2 1 3 0 1 0 1 0 2 0 1 0 2 1 3 0 1 0 1 0 2 0 1 0 1 0 2 10 35 46 64 96 78l0 0c2 0 4 1 5 1 21 6 43 9 66 9 23 0 45-3 65-9 2 0 3-1 5-1 7-2 13-4 19-6 5-2 6-9 4-13l-1-1c-1-1-2-3-4-3-2-1-4-1-6 0-24 9-52 15-82 15m211 0l-23-24c6-8 9-18 9-29 1-33-30-59-62-48-17 6-29 22-32 41-1 7 0 15 1 22 2 7 6 13 10 19 5 5 10 10 17 13 6 3 13 4 20 4 8 0 17-3 24-8l23 25c1 0 2 1 3 2 1 0 2 0 3 0 2 0 3 0 4 0 1-1 2-2 3-2 1-1 2-2 2-4 1-1 1-2 1-3 0-2 0-3-1-4 0-1-1-3-2-4z m-94-53c0-19 15-35 34-35 18 0 33 15 33 35 0 5-1 10-3 14-1 4-4 8-7 11-3 4-7 6-11 8-4 2-8 3-12 3-20 0-34-16-34-36z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
IconTokenSearch.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 IconTokenSearch;
|
||||
@ -37,6 +37,7 @@ import IconSpeechBubbles from './icon-speech-bubbles';
|
||||
import IconPlus from './icon-plus';
|
||||
import IconEye from './icon-eye';
|
||||
import IconEyeSlash from './icon-eye-slash';
|
||||
import IconTokenSearch from './icon-token-search';
|
||||
|
||||
const validColors = [
|
||||
'var(--color-icon-default)',
|
||||
@ -100,8 +101,11 @@ export const DefaultStory = (args) => (
|
||||
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
|
||||
To ensure correct licensing we suggest you use an icon from the
|
||||
@fortawesome/fontawesome-free: ^5.13.0 package. If there is no icon to
|
||||
suit your needs and you need to create a new one. Ensure that it has the
|
||||
correct licensing or has been created in house from scratch. Please use
|
||||
the ./icon-caret-left.js as the template.
|
||||
</Typography>
|
||||
<Box marginBottom={4}>
|
||||
<div
|
||||
@ -121,6 +125,7 @@ export const DefaultStory = (args) => (
|
||||
<IconItem Component={<IconConnect {...args} />} />
|
||||
<IconItem Component={<IconSpeechBubbles {...args} />} />
|
||||
<IconItem Component={<IconCog {...args} />} />
|
||||
<IconItem Component={<IconTokenSearch {...args} />} />
|
||||
</div>
|
||||
</Box>
|
||||
<Typography
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '../../../../components/ui/button';
|
||||
import IconSearch from '../../../../components/ui/icon/icon-token-search';
|
||||
|
||||
export default class TokenListPlaceholder extends Component {
|
||||
static contextTypes = {
|
||||
@ -10,7 +11,7 @@ export default class TokenListPlaceholder extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="token-list-placeholder">
|
||||
<img src="images/tokensearch.svg" alt="" width="65" height="58" />
|
||||
<IconSearch size="64" color="var(--color-icon-muted)" />
|
||||
<div className="token-list-placeholder__text">
|
||||
{this.context.t('addAcquiredTokens')}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user