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

Fix site icon size (#8814)

Browse Source 
A new `SiteIcon` component has been created for showing icons
representing web3 sites. The icon has a border and background, and it
has a fallback in case no icon is given. This new component accepts a
`size` prop that controls the size of the icon.

The old `IconWithFallback` component had a hard-coded size in the
SCSS styles for the icon, which was being overridden in a few places.
It was difficult to customize, and overly complicated.

The old `IconWithFallback` component is still used, but it's now
simpler. It only handles rendering the underlying `img` for the icon,
or the fallback letter if no image is given.

A separate `IconBorder` component has been created for the border and
white background used. It's solely used by `SiteIcon` for now, but I
intend to use it elsewhere as well, where this same pattern of a white
background is embedded.
This commit is contained in:
Mark Stacey 2020-06-15 19:24:23 -03:00 committed by GitHub
parent a332c3edc1
commit ad5e16cfa7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 86 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import { Menu, Item, Divider, CloseArea } from '../dropdowns/components/menu'
import { ENVIRONMENT_TYPE_POPUP } from '../../../../../app/scripts/lib/enums'
import { getEnvironmentType } from '../../../../../app/scripts/lib/util'
import Identicon from '../../ui/identicon'
import IconWithFallBack from '../../ui/icon-with-fallback'
import SiteIcon from '../../ui/site-icon'
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
import { PRIMARY } from '../../../helpers/constants/common'
import {
@ -178,7 +178,7 @@ export default class AccountMenu extends Component {
{ iconAndNameForOpenDomain
? (
<div className="account-menu__icon-list">
<IconWithFallBack icon={iconAndNameForOpenDomain.icon} name={iconAndNameForOpenDomain.name} />
<SiteIcon icon={iconAndNameForOpenDomain.icon} name={iconAndNameForOpenDomain.name} size={32} />
</div>
)
: null

4
ui/app/components/app/connected-sites-list/connected-sites-list.component.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import IconWithFallBack from '../../ui/icon-with-fallback'
import SiteIcon from '../../ui/site-icon'
import { stripHttpSchemes } from '../../../helpers/utils/util'
export default class ConnectedSitesList extends Component {
@ -28,7 +28,7 @@ export default class ConnectedSitesList extends Component {
{ connectedDomains.map((domain) => (
<div key={domain.origin} className="connected-sites-list__content-row">
<div className="connected-sites-list__domain-info">
<IconWithFallBack icon={domain.icon} name={domain.name} />
<SiteIcon icon={domain.icon} name={domain.name} size={32} />
<span className="connected-sites-list__domain-name" title={domain.extensionId || domain.origin}>
{this.getDomainDisplayName(domain)}
</span>

6
ui/app/components/app/index.scss
View File

@ -90,10 +90,10 @@
@import 'connected-accounts-permissions/index';
@import '../ui/icon-with-fallback/index';
@import '../ui/icon/index';
@import '../ui/icon-with-fallback/icon-with-fallback';
@import '../ui/icon-with-label/index';
@import '../ui/circle-icon/index';
@ -113,3 +113,5 @@
@import 'wallet-overview/index';
@import '../ui/account-mismatch-warning/index';
@import '../ui/icon-border/icon-border';

4
ui/app/components/app/permissions-connect-header/permissions-connect-header.component.js
View File

@ -1,6 +1,6 @@
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import IconWithFallBack from '../../ui/icon-with-fallback'
import SiteIcon from '../../ui/site-icon'
export default class PermissionsConnectHeader extends Component {
static propTypes = {
@ -22,7 +22,7 @@ export default class PermissionsConnectHeader extends Component {
return (
<div className="permissions-connect-header__icon">
<IconWithFallBack icon={ icon } name={ iconName } />
<SiteIcon icon={ icon } name={ iconName } size={64} />
<div className="permissions-connect-header__text">{iconName}</div>
</div>
)

16
ui/app/components/ui/icon-border/icon-border.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react'
import PropTypes from 'prop-types'
export default function IconBorder ({ children, size }) {
const borderStyle = { height: `${size}px`, width: `${size}px` }
return (
<div className="icon-border" style={borderStyle}>
{ children }
</div>
)
}
IconBorder.propTypes = {
children: PropTypes.node.isRequired,
size: PropTypes.number.isRequired,
}

10
ui/app/components/ui/icon-border/icon-border.scss Normal file
View File

@ -0,0 +1,10 @@
.icon-border {
border-radius: 50%;
border: 1px solid #F2F3F4;
background: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}

1
ui/app/components/ui/icon-border/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './icon-border'

36
ui/app/components/ui/icon-with-fallback/icon-with-fallback.component.js
View File

@ -5,6 +5,7 @@ export default class IconWithFallback extends PureComponent {
static propTypes = {
icon: PropTypes.string,
name: PropTypes.string,
size: PropTypes.number.isRequired,
}
static defaultProps = {
@ -17,26 +18,21 @@ export default class IconWithFallback extends PureComponent {
}
render () {
const { icon, name } = this.props
const { icon, name, size } = this.props
const style = { height: `${size}px`, width: `${size}px` }
return (
<div className="icon-with-fallback__identicon-container">
<div className="icon-with-fallback__identicon-border" />
{ !this.state.iconError && icon
? (
<img
className="icon-with-fallback__identicon"
src={icon}
onError={() => this.setState({ iconError: true })}
/>
)
: (
<i className="icon-with-fallback__identicon--default">
{ name.length ? name.charAt(0).toUpperCase() : '' }
</i>
)
}
</div>
)
return !this.state.iconError && icon
? (
<img
onError={() => this.setState({ iconError: true })}
src={icon}
style={style}
/>
)
: (
<i className="icon-with-fallback__fallback">
{ name.length ? name.charAt(0).toUpperCase() : '' }
</i>
)
}
}

5
ui/app/components/ui/icon-with-fallback/icon-with-fallback.scss Normal file
View File

@ -0,0 +1,5 @@
.icon-with-fallback {
&__fallback {
color: black;
}
}

30
ui/app/components/ui/icon-with-fallback/index.scss
View File

@ -1,30 +0,0 @@
.icon-with-fallback {
&__identicon-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 32px;
width: 32px;
}
&__identicon-border {
height: 32px;
width: 32px;
border-radius: 50%;
border: 1px solid #F2F3F4;
position: absolute;
background: #FFFFFF;
}
&__identicon {
position: relative;
width: 24px;
height: 24px;
&--default {
position: relative;
color: black;
}
}
}

1
ui/app/components/ui/site-icon/index.js Normal file
View File

@ -0,0 +1 @@
export { default } from './site-icon'

24
ui/app/components/ui/site-icon/site-icon.js Normal file
View File

@ -0,0 +1,24 @@
import React from 'react'
import PropTypes from 'prop-types'
import IconBorder from '../icon-border'
import IconWithFallback from '../icon-with-fallback'
export default function SiteIcon ({ icon, name, size }) {
const iconSize = Math.floor(size * 0.75)
return (
<IconBorder size={size}>
<IconWithFallback icon={icon} name={name} size={iconSize} />
</IconBorder>
)
}
SiteIcon.propTypes = {
icon: PropTypes.string,
name: PropTypes.string,
size: PropTypes.number.isRequired,
}
SiteIcon.defaultProps = {
icon: undefined,
name: undefined,
}

46
ui/app/pages/permissions-connect/redirect/index.scss
View File

@ -33,50 +33,4 @@
background: white url("/images/permissions-check.svg") no-repeat;
position: absolute;
}
&__identicon, .icon-with-fallback__identicon {
width: 32px;
height: 32px;
&--default {
background-color: #777A87;
color: white;
width: 64px;
height: 64px;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
}
&__identicon-container, .icon-with-fallback__identicon-container {
height: auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 64px;
width: 64px;
}
&__identicon-border, .icon-with-fallback__identicon-border {
height: 64px;
width: 64px;
border-radius: 50%;
border: 1px solid white;
background: #FFFFFF;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}
&__identicon-border {
display: flex;
justify-content: center;
align-items: center;
}
.icon-with-fallback__identicon-border {
position: absolute;
}
}

10
ui/app/pages/permissions-connect/redirect/permissions-redirect.component.js
View File

@ -1,6 +1,6 @@
import React, { useContext } from 'react'
import PropTypes from 'prop-types'
import IconWithFallBack from '../../../components/ui/icon-with-fallback'
import SiteIcon from '../../../components/ui/site-icon'
import { I18nContext } from '../../../contexts/i18n'
export default function PermissionsRedirect ({ domainMetadata }) {
@ -12,16 +12,12 @@ export default function PermissionsRedirect ({ domainMetadata }) {
<div className="permissions-redirect__result">
{ t('connecting') }
<div className="permissions-redirect__icons">
<IconWithFallBack icon={domainMetadata.icon} name={domainMetadata.name} />
<SiteIcon icon={domainMetadata.icon} name={domainMetadata.name} size={64} />
<div className="permissions-redirect__center-icon">
<span className="permissions-redirect__check" />
{ renderBrokenLine() }
</div>
<div className="permissions-redirect__identicon-container">
<div className="permissions-redirect__identicon-border">
<img src="/images/logo/metamask-fox.svg" />
</div>
</div>
<SiteIcon icon="/images/logo/metamask-fox.svg" size={64} />
</div>
</div>
</div>