Fix connected site styling (#15409)

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}

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;

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,
 };

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

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;

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);
+  }
 }