m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Replaced all fa-icon-circle with INFO icon (#17539)

Browse Source 
* replace all fa-icon-circle with INFO icon

* updated classnames

* updated classnames

* updated snapshots

* updated colors

* resolved errors

* fixed relative import

* fixed lint errors

* added story for alerts tab

* update snapshot

* updated info-circle

* updated enum for iconName

* removed classnames

* updated iconName in settings

* fixed lint errors and snapshots
This commit is contained in:
Nidhi Kumari 2023-05-09 23:04:58 +05:30 committed by GitHub
parent cde449925b
commit 6535e34943
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 137 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/components/app/advanced-gas-inputs/advanced-gas-inputs.component.js
View File

@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { debounce } from 'lodash';
import Tooltip from '../../ui/tooltip';
import { Icon, IconName } from '../../component-library';
import { IconColor } from '../../../helpers/constants/design-system';
export default class AdvancedGasInputs extends Component {
static contextTypes = {
@ -138,7 +140,11 @@ export default class AdvancedGasInputs extends Component {
<div className="advanced-gas-inputs__gas-edit-row__label">
{label}
<Tooltip title={tooltipTitle} position="top" arrow>
<i className="fa fa-info-circle" />
<Icon
name={IconName.Info}
color={IconColor.iconAlternative}
className="info-circle"
/>
</Tooltip>
</div>
<div className="advanced-gas-inputs__gas-edit-row__input-wrapper">

5
ui/components/app/advanced-gas-inputs/index.scss
View File

@ -22,12 +22,11 @@
@include H8;
}
.fa-info-circle {
color: var(--color-icon-alternative);
.info-circle {
cursor: pointer;
}
.fa-info-circle:hover {
.info-circle:hover {
color: var(--color-icon-muted);
}
}

3
ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js
View File

@ -22,6 +22,7 @@ import Checkbox from '../../../ui/check-box';
import Tooltip from '../../../ui/tooltip';
import ConnectedAccountsList from '../../connected-accounts-list';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import { Icon, IconName } from '../../../component-library';
const { ERROR, LOADING } = ALERT_STATE;
@ -68,7 +69,7 @@ const UnconnectedAccountAlert = () => {
title={t('alertDisableTooltip')}
wrapperClassName="unconnected-account-alert__checkbox-label-tooltip"
>
<i className="fa fa-info-circle" />
<Icon name={IconName.Info} />
</Tooltip>
</label>
</div>

5
ui/components/app/confirm-gas-display/confirm-legacy-gas-display/confirm-legacy-gas-display.js
View File

@ -26,6 +26,7 @@ import {
import { useDraftTransactionGasValues } from '../../../../hooks/useDraftTransactionGasValues';
import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
import MultilayerFeeMessage from '../../multilayer-fee-message/multi-layer-fee-message';
import { Icon, IconName } from '../../../component-library';
const renderHeartBeatIfNotInTest = () =>
process.env.IN_TEST ? null : <LoadingHeartBeat />;
@ -95,7 +96,7 @@ const ConfirmLegacyGasDisplay = () => {
contentText={t('transactionDetailDappGasTooltip')}
position="top"
>
<i className="fa fa-info-circle" />
<Icon name={IconName.Info} />
</InfoTooltip>
</>
) : (
@ -123,7 +124,7 @@ const ConfirmLegacyGasDisplay = () => {
}
position="top"
>
<i className="fa fa-info-circle" />
<Icon name={IconName.Info} />
</InfoTooltip>
</>
)

8
ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
View File

@ -1,10 +1,16 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Icon, IconName } from '../../../../component-library';
import { IconColor } from '../../../../../helpers/constants/design-system';
const ConfirmPageContainerWarning = (props) => {
return (
<div className="confirm-page-container-warning">
<i className="fa fa-info-circle confirm-page-container-warning__icon" />
<Icon
name={IconName.Info}
color={IconColor.warningDefault}
className="confirm-page-container-warning__icon"
/>
<div className="confirm-page-container-warning__warning">
{props.warning}
</div>

4
ui/components/app/home-notification/home-notification.component.js
View File

@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
import Button from '../../ui/button';
import Checkbox from '../../ui/check-box';
import Tooltip from '../../ui/tooltip';
import { Icon, IconName } from '../../component-library';
import { IconColor } from '../../../helpers/constants/design-system';
const HomeNotification = ({
acceptText,
@ -39,7 +41,7 @@ const HomeNotification = ({
title={infoText}
wrapperClassName="home-notification__tooltip-wrapper"
>
<i className="fa fa-info-circle" />
<Icon name={IconName.Info} color={IconColor.iconDefault} />
</Tooltip>
) : null}
</div>

4
ui/components/app/home-notification/index.scss
View File

@ -36,10 +36,6 @@
cursor: pointer;
}
.fa-info-circle {
color: var(--color-icon-default);
}
&__checkbox-wrapper {
display: flex;
flex-direction: row;

12
ui/components/app/nfts-detection-notice/nfts-detection-notice.js
View File

@ -9,10 +9,12 @@ import {
FONT_WEIGHT,
DISPLAY,
TextColor,
IconColor,
} from '../../../helpers/constants/design-system';
import { useI18nContext } from '../../../hooks/useI18nContext';
import Button from '../../ui/button';
import { EXPERIMENTAL_ROUTE } from '../../../helpers/constants/routes';
import { Icon, IconName } from '../../component-library';
export default function NftsDetectionNotice() {
const t = useI18nContext();
@ -23,12 +25,10 @@ export default function NftsDetectionNotice() {
<Dialog type="message" className="nfts-detection-notice__message">
<Box display={DISPLAY.FLEX}>
<Box paddingTop={1}>
<i
style={{
fontSize: '1rem',
color: 'var(--color-primary-default)',
}}
className="fa fa-info-circle"
<Icon
name={IconName.Info}
className="info-circle"
color={IconColor.primaryDefault}
/>
</Box>
<Box paddingLeft={2}>

2
ui/components/app/tab-bar/tab-bar.stories.js
View File

@ -54,7 +54,7 @@ export default {
key: 'experimental',
},
{
icon: <i className="fa fa-info-circle" />,
icon: <Icon name={IconName.Info} />,
content: 'About',
key: 'about',
},

20
ui/components/app/transaction-decoding/components/ui/accreditation/accrediation.component.stories.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import Accreditation from './accreditation.component';
export default {
title: 'Components/App/Accrediation', // title should follow the folder structure location of the component. Don't use spaces.
argTypes: {
fetchVia: {
control: 'string',
},
address: { control: 'string' },
},
args: {
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
},
};
export const DefaultStory = (args) => <Accreditation {...args} />;
DefaultStory.storyName = 'Default';

3
ui/components/app/transaction-decoding/components/ui/accreditation/accreditation.component.js
View File

@ -12,6 +12,7 @@ import { TypographyVariant } from '../../../../../../helpers/constants/design-sy
import Button from '../../../../../ui/button';
import Typography from '../../../../../ui/typography';
import { Icon, IconName } from '../../../../../component-library';
const Accreditation = ({ fetchVia, address }) => {
const t = useContext(I18nContext);
@ -55,7 +56,7 @@ const Accreditation = ({ fetchVia, address }) => {
return (
<div className="accreditation">
<div className="accreditation__icon">
<i className="fa fa-info-circle" />
<Icon name={IconName.Info} />
</div>
<div className="accreditation__info">
<AccreditationLink />

3
ui/components/app/transaction-detail-item/transaction-detail-item.stories.js
View File

@ -3,6 +3,7 @@ import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import { TextColor } from '../../../helpers/constants/design-system';
import { Icon, IconName } from '../../component-library';
import README from './README.mdx';
import TransactionDetailItem from '.';
@ -45,7 +46,7 @@ DefaultStory.args = {
<>
<strong>Estimated gas fee</strong>
<InfoTooltip contentText="This is the tooltip text" position="top">
<i className="fa fa-info-circle" />
<Icon name={IconName.Info} />
</InfoTooltip>
</>
),

3
ui/components/app/transaction-detail/transaction-detail.stories.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
import GasTiming from '../gas-timing/gas-timing.component';
import { Icon, IconName } from '../../component-library';
import README from './README.mdx';
import TransactionDetail from '.';
@ -27,7 +28,7 @@ const rows = [
<>
Estimated gas fee
<InfoTooltip contentText="This is the tooltip text" position="top">
<i className="fa fa-info-circle" />
<Icon name={IconName.Info} />
</InfoTooltip>
</>
}

16
ui/components/ui/account-list/account-list.js
View File

@ -8,6 +8,8 @@ import Identicon from '../identicon';
import UserPreferencedCurrencyDisplay from '../../app/user-preferenced-currency-display';
import { PRIMARY } from '../../../helpers/constants/common';
import Tooltip from '../tooltip';
import { Icon, IconName } from '../../component-library';
import { IconColor } from '../../../helpers/constants/design-system';
const AccountList = ({
selectNewAccountViaModal,
@ -61,7 +63,12 @@ const AccountList = ({
</div>
}
>
<i className="fa fa-info-circle" />
<Icon
name={IconName.Info}
color={IconColor.iconMuted}
className="info-circle"
marginInlineStart={2}
/>
</Tooltip>
</div>
) : null}
@ -114,7 +121,12 @@ const AccountList = ({
addressLastConnectedMap[address]
}`}
>
<i className="fa fa-info-circle" />
<Icon
name={IconName.Info}
color={IconColor.iconMuted}
className="info-circle"
marginInlineStart={2}
/>
</Tooltip>
) : null}
</div>

7
ui/components/ui/account-list/index.scss
View File

@ -113,14 +113,11 @@
}
}
.fa-info-circle {
color: var(--color-icon-muted);
.info-circle {
cursor: pointer;
margin-inline-start: 8px;
font-size: 0.9rem;
}
.fa-info-circle:hover {
.info-circle:hover {
color: var(--color-icon-default);
}

9
ui/components/ui/definition-list/definition-list.js
View File

@ -8,8 +8,10 @@ import {
FONT_WEIGHT,
OVERFLOW_WRAP,
TextColor,
IconColor,
} from '../../../helpers/constants/design-system';
import Tooltip from '../tooltip';
import { Icon, IconName, IconSize } from '../../component-library';
const MARGIN_MAP = {
[Size.XS]: 0,
@ -48,7 +50,12 @@ export default function DefinitionList({
position="top"
containerClassName="definition-list__tooltip-wrapper"
>
<i className="fas fa-info-circle" />
<Icon
name={IconName.Info}
size={IconSize.Sm}
marginLeft={1}
color={IconColor.iconDefault}
/>
</Tooltip>
)}
</Typography>

6
ui/components/ui/definition-list/definition-list.scss
View File

@ -5,12 +5,6 @@
display: flex;
align-items: center;
& i {
color: var(--color-icon-default);
margin-left: 6px;
font-size: $font-size-h8;
}
& #{$self}__tooltip-wrapper {
display: flex !important;
align-items: center;

4
ui/components/ui/deprecated-test-networks/deprecated-test-networks.js
View File

@ -12,7 +12,7 @@ import Box from '../box/box';
import ActionableMessage from '../actionable-message/actionable-message';
import { getCurrentChainId } from '../../../selectors';
import { getCompletedOnboarding } from '../../../ducks/metamask/metamask';
import { Text } from '../../component-library';
import { Text, Icon, IconName, IconSize } from '../../component-library';
export default function DeprecatedTestNetworks() {
const currentChainID = useSelector(getCurrentChainId);
@ -45,7 +45,7 @@ export default function DeprecatedTestNetworks() {
className="deprecated-test-networks__content"
>
<Box marginRight={2} color={Color.warningDefault}>
<i className="fa fa-info-circle deprecated-test-networks__content__icon" />
<Icon name={IconName.Info} size={IconSize.Sm} />
</Box>
<Box justifyContent={JustifyContent.spaceBetween}>
<Text

4
ui/components/ui/deprecated-test-networks/index.scss
View File

@ -5,10 +5,6 @@
z-index: 1050;
&__content {
&__icon {
font-size: 16px;
}
&__inline-link {
@include H7;

13
ui/components/ui/tooltip/tooltip.stories.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import Box from '../box/box';
import { Text } from '../../component-library';
import { Icon, IconName, Text } from '../../component-library';
import { IconColor } from '../../../helpers/constants/design-system';
import Tooltip from '.';
export default {
@ -60,10 +61,7 @@ export const DefaultStory = (args) => (
<Box display="flex">
<Text>Hover over the info icon to see the tooltip</Text>
<Tooltip {...args}>
<i
className="fa fa-sm fa-info-circle"
style={{ color: 'var(--color-icon-alternative)' }}
/>
<Icon name={IconName.Info} color={IconColor.iconAlternative} />
</Tooltip>
</Box>
);
@ -74,10 +72,7 @@ export const HTML = (args) => (
<Box display="flex">
<Text>This tooltips content is html</Text>
<Tooltip {...args}>
<i
className="fa fa-sm fa-info-circle"
style={{ color: 'var(--color-icon-alternative)' }}
/>
<Icon name={IconName.Info} color={IconColor.iconAlternative} />
</Tooltip>
</Box>
);

19
ui/helpers/constants/settings.js
View File

@ -1,3 +1,4 @@
import { IconName } from '../../components/component-library';
import { ICON_NAMES } from '../../components/component-library/icon/deprecated';
import {
ALERTS_ROUTE,
@ -259,28 +260,28 @@ export const SETTINGS_CONSTANTS = [
sectionMessage: (t) => t('metamaskVersion'),
descriptionMessage: (t) => t('builtAroundTheWorld'),
route: `${ABOUT_US_ROUTE}#version`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
tabMessage: (t) => t('about'),
sectionMessage: (t) => t('links'),
descriptionMessage: (t) => t('links'),
route: `${ABOUT_US_ROUTE}#links`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
tabMessage: (t) => t('about'),
sectionMessage: (t) => t('privacyMsg'),
descriptionMessage: (t) => t('privacyMsg'),
route: `${ABOUT_US_ROUTE}#privacy-policy`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
tabMessage: (t) => t('about'),
sectionMessage: (t) => t('terms'),
descriptionMessage: (t) => t('terms'),
route: `${ABOUT_US_ROUTE}#terms`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
@ -288,7 +289,7 @@ export const SETTINGS_CONSTANTS = [
sectionMessage: (t) => t('attributions'),
descriptionMessage: (t) => t('attributions'),
route: `${ABOUT_US_ROUTE}#attributions`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
@ -296,7 +297,7 @@ export const SETTINGS_CONSTANTS = [
sectionMessage: (t) => t('supportCenter'),
descriptionMessage: (t) => t('supportCenter'),
route: `${ABOUT_US_ROUTE}#supportcenter`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
@ -304,7 +305,7 @@ export const SETTINGS_CONSTANTS = [
sectionMessage: (t) => t('visitWebSite'),
descriptionMessage: (t) => t('visitWebSite'),
route: `${ABOUT_US_ROUTE}#visitwebsite`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
@ -312,14 +313,14 @@ export const SETTINGS_CONSTANTS = [
sectionMessage: (t) => t('contactUs'),
descriptionMessage: (t) => t('contactUs'),
route: `${ABOUT_US_ROUTE}#contactus`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
tabMessage: (t) => t('about'),
sectionMessage: (t) => t('betaTerms'),
descriptionMessage: (t) => t('betaTerms'),
route: `${ABOUT_US_ROUTE}#beta-terms`,
icon: 'fa fa-info-circle',
iconName: IconName.Info,
},
{
tabMessage: (t) => t('experimental'),

10
ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap
View File

@ -30,8 +30,9 @@ exports[`SendGasRow Component render should match snapshot 1`] = `
style="display: inline;"
tabindex="0"
>
<i
class="fa fa-info-circle"
<span
class="box info-circle mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
</div>
@ -82,8 +83,9 @@ exports[`SendGasRow Component render should match snapshot 1`] = `
style="display: inline;"
tabindex="0"
>
<i
class="fa fa-info-circle"
<span
class="box info-circle mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-icon-alternative"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
</div>

6
ui/pages/settings/alerts-tab/alerts-tab.js
View File

@ -9,6 +9,7 @@ import { setAlertEnabledness } from '../../../store/actions';
import { getAlertEnabledness } from '../../../ducks/metamask/metamask';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { handleSettingsRefs } from '../../../helpers/utils/settings-search';
import { Icon, IconName } from '../../../components/component-library';
const AlertSettingsEntry = ({ alertId, description, title }) => {
const t = useI18nContext();
@ -30,7 +31,10 @@ const AlertSettingsEntry = ({ alertId, description, title }) => {
title={description}
wrapperClassName="alerts-tab__description"
>
<i className="fa fa-info-circle alerts-tab__description__icon" />
<Icon
name={IconName.Info}
className="alerts-tab__description__icon"
/>
</Tooltip>
<ToggleButton
offLabel={t('off')}

14
ui/pages/settings/alerts-tab/alerts-tab.stories.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import AlertsTab from './alerts-tab';
export default {
title: 'Components/UI/Pages/AlertsTab ',
component: AlertsTab,
};
export const DefaultAlertsTab = () => {
return <AlertsTab />;
};
DefaultAlertsTab.storyName = 'Default';

2
ui/pages/settings/settings.component.js
View File

@ -303,7 +303,7 @@ class SettingsPage extends PureComponent {
},
{
content: t('about'),
icon: <i className="fa fa-info-circle" />,
icon: <Icon name={IconName.Info} />,
key: ABOUT_US_ROUTE,
},
];

20
ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap
View File

@ -35,8 +35,9 @@ exports[`View Price Quote Difference displays a fiat error when calculationError
style="display: inline;"
tabindex="0"
>
<i
class="fa fa-info-circle"
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
</div>
@ -92,8 +93,9 @@ exports[`View Price Quote Difference displays an error when in high bucket 1`] =
style="display: inline;"
tabindex="0"
>
<i
class="fa fa-info-circle"
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
</div>
@ -149,8 +151,9 @@ exports[`View Price Quote Difference displays an error when in medium bucket 1`]
style="display: inline;"
tabindex="0"
>
<i
class="fa fa-info-circle"
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
</div>
@ -206,8 +209,9 @@ exports[`View Price Quote Difference should match snapshot 1`] = `
style="display: inline;"
tabindex="0"
>
<i
class="fa fa-info-circle"
<span
class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
style="mask-image: url('./images/icons/info.svg');"
/>
</div>
</div>

3
ui/pages/swaps/view-quote/view-quote-price-difference.js
View File

@ -12,6 +12,7 @@ import {
DISPLAY,
} from '../../../helpers/constants/design-system';
import { GasRecommendations } from '../../../../shared/constants/gas';
import { Icon, IconName } from '../../../components/component-library';
export default function ViewQuotePriceDifference(props) {
const {
@ -74,7 +75,7 @@ export default function ViewQuotePriceDifference(props) {
{priceDifferenceTitle}
</div>
<Tooltip position="bottom" title={t('swapPriceImpactTooltip')}>
<i className="fa fa-info-circle" />
<Icon name={IconName.Info} />
</Tooltip>
</Box>
{priceDifferenceMessage}