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 connected site styling (#15409)

Browse Source
This commit is contained in:
Justin Léger 2022-08-09 13:29:38 -04:00 committed by GitHub
parent 67a7483754
commit 753666d9c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,12 @@ export default class ConnectedSitesList extends Component {
className="connected-sites-list__content-row" className="connected-sites-list__content-row"
> >
<div className="connected-sites-list__subject-info"> <div className="connected-sites-list__subject-info">
<SiteIcon icon={subject.iconUrl} name={subject.name} size={32} /> <SiteIcon
icon={subject.iconUrl}
name={subject.name}
size={32}
className="connected-sites-list__subject-icon"
/>
<SiteOrigin <SiteOrigin
className="connected-sites-list__subject-name" className="connected-sites-list__subject-name"
title={subject.extensionId || subject.origin} title={subject.extensionId || subject.origin}

4
ui/components/app/connected-sites-list/index.scss
View File

@ -32,6 +32,10 @@
min-width: 0; min-width: 0;
} }
&__subject-icon {
flex-shrink: 0;
}
&__subject-name { &__subject-name {
max-width: 215px; max-width: 215px;
margin-left: 6px; margin-left: 6px;

6
ui/components/ui/icon-border/icon-border.js
View File

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

8
ui/components/ui/site-icon/site-icon.js
View File

@ -3,16 +3,20 @@ import PropTypes from 'prop-types';
import IconBorder from '../icon-border'; import IconBorder from '../icon-border';
import IconWithFallback from '../icon-with-fallback'; import IconWithFallback from '../icon-with-fallback';
export default function SiteIcon({ icon = null, name = '', size }) { export default function SiteIcon({ icon = null, name = '', size, className }) {
const iconSize = Math.floor(size * 0.75); const iconSize = Math.floor(size * 0.75);
return ( return (
<IconBorder size={size}> <IconBorder size={size} className={className}>
<IconWithFallback icon={icon} name={name} size={iconSize} /> <IconWithFallback icon={icon} name={name} size={iconSize} />
</IconBorder> </IconBorder>
); );
} }
SiteIcon.propTypes = { SiteIcon.propTypes = {
/**
* Additional className to add to the root element of SiteIcon.
*/
className: PropTypes.string,
/** /**
* The img src of the icon. * The img src of the icon.
* Used in IconWithFallback * Used in IconWithFallback

1
ui/components/ui/site-origin/index.scss
View File

@ -12,6 +12,7 @@
span { span {
display: inline-block; display: inline-block;
vertical-align: middle;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

7
ui/pages/connected-sites/index.scss
View File

@ -24,11 +24,14 @@
margin-top: 15px; margin-top: 15px;
} }
a, a {
a:hover {
@include H6; @include H6;
color: var(--color-primary-default); color: var(--color-primary-default);
cursor: pointer; cursor: pointer;
} }
a:hover {
color: var(--color-primary-alternative);
}
} }