diff --git a/ui/components/app/connected-sites-list/connected-sites-list.component.js b/ui/components/app/connected-sites-list/connected-sites-list.component.js
index 7b23820c0..00372f64e 100644
--- a/ui/components/app/connected-sites-list/connected-sites-list.component.js
+++ b/ui/components/app/connected-sites-list/connected-sites-list.component.js
@@ -33,7 +33,12 @@ export default class ConnectedSitesList extends Component {
className="connected-sites-list__content-row"
>
-
+
+
{children}
);
}
IconBorder.propTypes = {
+ className: PropTypes.string,
children: PropTypes.node.isRequired,
size: PropTypes.number.isRequired,
};
diff --git a/ui/components/ui/site-icon/site-icon.js b/ui/components/ui/site-icon/site-icon.js
index f165ff311..a1a0c6ab9 100644
--- a/ui/components/ui/site-icon/site-icon.js
+++ b/ui/components/ui/site-icon/site-icon.js
@@ -3,16 +3,20 @@ import PropTypes from 'prop-types';
import IconBorder from '../icon-border';
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);
return (
-
+
);
}
SiteIcon.propTypes = {
+ /**
+ * Additional className to add to the root element of SiteIcon.
+ */
+ className: PropTypes.string,
/**
* The img src of the icon.
* Used in IconWithFallback
diff --git a/ui/components/ui/site-origin/index.scss b/ui/components/ui/site-origin/index.scss
index 895e0f2ef..5bef6a504 100644
--- a/ui/components/ui/site-origin/index.scss
+++ b/ui/components/ui/site-origin/index.scss
@@ -12,6 +12,7 @@
span {
display: inline-block;
+ vertical-align: middle;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
diff --git a/ui/pages/connected-sites/index.scss b/ui/pages/connected-sites/index.scss
index 1c39ea83a..8ebb4c5f1 100644
--- a/ui/pages/connected-sites/index.scss
+++ b/ui/pages/connected-sites/index.scss
@@ -24,11 +24,14 @@
margin-top: 15px;
}
- a,
- a:hover {
+ a {
@include H6;
color: var(--color-primary-default);
cursor: pointer;
}
+
+ a:hover {
+ color: var(--color-primary-alternative);
+ }
}