From 753666d9c2a0cb2be89e885629dfa6f3ded5703b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Justin=20L=C3=A9ger?= <hey@justinleger.ca>
Date: Tue, 9 Aug 2022 13:29:38 -0400
Subject: [PATCH] Fix connected site styling (#15409)

---
 .../connected-sites-list.component.js                     | 7 ++++++-
 ui/components/app/connected-sites-list/index.scss         | 4 ++++
 ui/components/ui/icon-border/icon-border.js               | 6 ++++--
 ui/components/ui/site-icon/site-icon.js                   | 8 ++++++--
 ui/components/ui/site-origin/index.scss                   | 1 +
 ui/pages/connected-sites/index.scss                       | 7 +++++--
 6 files changed, 26 insertions(+), 7 deletions(-)

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"
           >
             <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
                 className="connected-sites-list__subject-name"
                 title={subject.extensionId || subject.origin}
diff --git a/ui/components/app/connected-sites-list/index.scss b/ui/components/app/connected-sites-list/index.scss
index 7e9fc0d10..7df824c5f 100644
--- a/ui/components/app/connected-sites-list/index.scss
+++ b/ui/components/app/connected-sites-list/index.scss
@@ -32,6 +32,10 @@
     min-width: 0;
   }
 
+  &__subject-icon {
+    flex-shrink: 0;
+  }
+
   &__subject-name {
     max-width: 215px;
     margin-left: 6px;
diff --git a/ui/components/ui/icon-border/icon-border.js b/ui/components/ui/icon-border/icon-border.js
index 5ef8186b6..b564f4acb 100644
--- a/ui/components/ui/icon-border/icon-border.js
+++ b/ui/components/ui/icon-border/icon-border.js
@@ -1,16 +1,18 @@
 import React from 'react';
 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` };
   return (
-    <div className="icon-border" style={borderStyle}>
+    <div className={classnames('icon-border', className)} style={borderStyle}>
       {children}
     </div>
   );
 }
 
 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 (
-    <IconBorder size={size}>
+    <IconBorder size={size} className={className}>
       <IconWithFallback icon={icon} name={name} size={iconSize} />
     </IconBorder>
   );
 }
 
 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);
+  }
 }