1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Update home portfolio dapp icon to new icon (#17471)

* Update home portfolio dapp icon to new icon

* Using ButtonLink component so onClick isn't used on a div

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
This commit is contained in:
David Walsh 2023-01-30 12:33:08 -06:00 committed by GitHub
parent 55d8ec0572
commit acafe7c4c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 56 deletions

View File

@ -25,7 +25,6 @@ export const ButtonLink = ({
backgroundColor={COLORS.TRANSPARENT}
color={danger ? COLORS.ERROR_DEFAULT : COLORS.PRIMARY_DEFAULT}
borderRadius={null}
{...props}
textProps={{
variant:
size === BUTTON_LINK_SIZES.INHERIT ? TEXT.INHERIT : TEXT.BODY_MD,
@ -36,6 +35,7 @@ export const ButtonLink = ({
iconLoadingProps={{
size: size === BUTTON_LINK_SIZES.INHERIT ? SIZES.INHERIT : SIZES.MD,
}}
{...props}
/>
);
};

View File

@ -1,45 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
const IconChart = ({
size = 12,
color = 'var(--color-primary-default)',
className,
ariaLabel,
}) => (
<svg
width={size}
height={size}
viewBox="0 0 12 12"
fill="none"
className={className}
aria-label={ariaLabel}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.5 9.375C1.5 9.58125 1.66781 9.75 1.875 9.75H11.25C11.6648 9.75 12 10.0852 12 10.5C12 10.9148 11.6648 11.25 11.25 11.25H1.875C0.839531 11.25 0 10.4109 0 9.375V1.5C0 1.08586 0.335859 0.75 0.75 0.75C1.16414 0.75 1.5 1.08586 1.5 1.5V9.375ZM8.02969 6.52969C7.73672 6.82266 7.26328 6.82266 6.97031 6.52969L5.625 5.18672L3.52969 7.27969C3.23672 7.57266 2.76328 7.57266 2.47031 7.27969C2.17688 6.98672 2.17688 6.51328 2.47031 6.22031L5.09531 3.59531C5.38828 3.30234 5.86172 3.30234 6.15469 3.59531L7.5 4.93828L9.97031 2.47031C10.2633 2.17687 10.7367 2.17687 11.0297 2.47031C11.3227 2.76328 11.3227 3.23672 11.0297 3.52969L8.02969 6.52969Z"
fill={color}
/>
</svg>
);
IconChart.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 IconChart;

View File

@ -23,14 +23,17 @@ import WhatsNewPopup from '../../components/app/whats-new-popup';
import RecoveryPhraseReminder from '../../components/app/recovery-phrase-reminder';
import ActionableMessage from '../../components/ui/actionable-message/actionable-message';
import Typography from '../../components/ui/typography/typography';
import IconChart from '../../components/ui/icon/icon-chart';
import {
TYPOGRAPHY,
FONT_WEIGHT,
DISPLAY,
COLORS,
BLOCK_SIZES,
SIZES,
TEXT,
} from '../../helpers/constants/design-system';
import { SECOND } from '../../../shared/constants/time';
import { ButtonLink, ICON_NAMES } from '../../components/component-library';
import {
ASSET_ROUTE,
@ -686,8 +689,9 @@ export default class Home extends PureComponent {
</div>
}
>
<div
<ButtonLink
className="home__subheader-link"
data-testid="home__portfolio-site"
onClick={async () => {
const portfolioUrl = process.env.PORTFOLIO_URL;
global.platform.openTab({
@ -708,15 +712,13 @@ export default class Home extends PureComponent {
},
);
}}
iconName={ICON_NAMES.DIAGRAM}
width={BLOCK_SIZES.FULL}
size={SIZES.MD}
textProps={{ variant: TEXT.BODY_SM }}
>
<IconChart />
<div
className="home__subheader-link--text"
data-testid="home__portfolio-site"
>
{t('portfolioSite')}
</div>
</div>
{t('portfolioSite')}
</ButtonLink>
</Tooltip>
}
>