mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Dark mode: updating permissions redirect check icon (#14200)
Co-authored-by: David Walsh <davidwalsh83@gmail.com>
This commit is contained in:
parent
b1cfdd2475
commit
2118b4825d
@ -1,15 +0,0 @@
|
||||
<svg fill="none" height="40" width="40" xmlns="http://www.w3.org/2000/svg">
|
||||
<filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="40" width="40" x="0" y="0">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="2.5"/>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<g filter="url(#a)">
|
||||
<path d="M34.5 19c0 8.008-6.492 14.5-14.5 14.5S5.5 27.008 5.5 19 11.992 4.5 20 4.5 34.5 10.992 34.5 19z" fill="#61ba00" stroke="#61ba00"/>
|
||||
<path d="M13.3 19.72l3.513 3.6 9.387-9.3" stroke="#fff" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
Before Width: | Height: | Size: 937 B |
@ -4,39 +4,47 @@
|
||||
justify-content: center;
|
||||
|
||||
&__result {
|
||||
@include H3;
|
||||
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: var(--color-text-default);
|
||||
}
|
||||
|
||||
&__icons {
|
||||
display: flex;
|
||||
position: relative;
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
top: 50%;
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-style: dashed;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__center-icon {
|
||||
@include H7;
|
||||
.icon-border {
|
||||
max-width: 64px;
|
||||
flex: 0 0 64px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
&__line {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-success-default);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
color: var(--color-success-inverse);
|
||||
background-color: var(--color-success-default);
|
||||
position: absolute;
|
||||
background-color: var(--color-background-default);
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,8 @@
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import SiteIcon from '../../../components/ui/site-icon';
|
||||
import Typography from '../../../components/ui/typography/typography';
|
||||
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
|
||||
import { I18nContext } from '../../../contexts/i18n';
|
||||
|
||||
export default function PermissionsRedirect({ subjectMetadata }) {
|
||||
@ -9,41 +11,28 @@ export default function PermissionsRedirect({ subjectMetadata }) {
|
||||
return (
|
||||
<div className="permissions-redirect">
|
||||
<div className="permissions-redirect__result">
|
||||
{t('connecting')}
|
||||
<Typography boxProps={{ marginBottom: 4 }} variant={TYPOGRAPHY.H3}>
|
||||
{t('connecting')}
|
||||
</Typography>
|
||||
<div className="permissions-redirect__icons">
|
||||
<SiteIcon
|
||||
icon={subjectMetadata.iconUrl}
|
||||
name={subjectMetadata.name}
|
||||
size={64}
|
||||
className="permissions-redirect__site-icon"
|
||||
/>
|
||||
<div className="permissions-redirect__center-icon">
|
||||
<i className="fa fa-check fa-lg permissions-redirect__check" />
|
||||
{renderBrokenLine()}
|
||||
<div className="permissions-redirect__line">
|
||||
<i className="fa fa-check-circle fa-2x permissions-redirect__check" />
|
||||
</div>
|
||||
<SiteIcon icon="/images/logo/metamask-fox.svg" size={64} />
|
||||
<SiteIcon
|
||||
icon="/images/logo/metamask-fox.svg"
|
||||
size={64}
|
||||
className="permissions-redirect__site-icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
function renderBrokenLine() {
|
||||
return (
|
||||
<svg
|
||||
width="131"
|
||||
height="2"
|
||||
viewBox="0 0 131 2"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 1H134"
|
||||
stroke="#CDD1E4"
|
||||
strokeLinejoin="round"
|
||||
strokeDasharray="8 7"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
PermissionsRedirect.propTypes = {
|
||||
|
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import PermissionsRedirect from '.';
|
||||
|
||||
export default {
|
||||
title: 'Components/Pages/PermissionsConnect/Redirect/PermissionsRedirect',
|
||||
id: __filename,
|
||||
argTypes: {
|
||||
subjectMetadata: {
|
||||
control: 'object',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
subjectMetadata: {
|
||||
extensionId: 'extensionId',
|
||||
iconUrl: 'https://airswap-token-images.s3.amazonaws.com/SNX.png',
|
||||
subjectType: 'subjectType',
|
||||
name: 'name',
|
||||
origin: 'origin',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const DefaultStory = (args) => <PermissionsRedirect {...args} />;
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
Loading…
Reference in New Issue
Block a user