From 7c1cedcb21e9466c2ae2143f8a4553029e0b024c Mon Sep 17 00:00:00 2001
From: Robb Hamilton <rhamilto@redhat.com>
Date: Thu, 21 Feb 2019 14:32:51 -0500
Subject: [PATCH] Normalize display of <ResourceIcon> across browsers,
 platforms

---
 frontend/public/components/_resource.scss     | 38 +++++--------------
 .../public/components/_sysevent-stream.scss   |  3 --
 frontend/public/components/ingress.jsx        |  2 +-
 .../modals/configure-ns-pull-secret-modal.jsx |  4 +-
 4 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/frontend/public/components/_resource.scss b/frontend/public/components/_resource.scss
index 90273dced3a..033ed8ac2a8 100644
--- a/frontend/public/components/_resource.scss
+++ b/frontend/public/components/_resource.scss
@@ -1,29 +1,23 @@
-$height: 18px;
-
 .co-m-resource-icon {
   background-color: $color-container-dark;
-  border-radius: 10px;
+  border-radius: 20px;
   color: #fff;
   display: inline-block;
   font-size: $font-size-base - 1;
-  font-weight: normal;
-  height: $height;
-  line-height: $height;
+  font-weight: 300;
+  line-height: 16px;
   margin-right: 4px;
-  min-width: $height;
-  padding: 0 4px;
+  min-width: 18px;
+  padding: 2px 4px 1px;
   text-align: center;
+
   &--lg {
-    border-radius: 12px;
-    font-size: 16px;
-    height: 24px;
-    line-height: 24px;
-    margin-left: 0;
+    font-size: ($font-size-base + 1);
+    line-height: 21px;
     margin-right: 7px;
     min-width: 24px;
-    padding: 0 7px;
-    position: relative;
-    top: 2px;
+    padding-left: 7px;
+    padding-right: 7px;
   }
 }
 
@@ -106,18 +100,6 @@ $height: 18px;
   background-color: $color-ingress-dark;
 }
 
-.co-m-resource-icon--all {
-  background-color: black;
-}
-
-.co-m-resource-icon--align-left {
-  margin-left: 0;
-}
-
-.co-m-resource-icon--flex-child {
-  margin-right: 7px;
-}
-
 .co-resource-link {
   align-items: baseline;
   display: flex;
diff --git a/frontend/public/components/_sysevent-stream.scss b/frontend/public/components/_sysevent-stream.scss
index aca471a0447..b462c9baab7 100644
--- a/frontend/public/components/_sysevent-stream.scss
+++ b/frontend/public/components/_sysevent-stream.scss
@@ -67,9 +67,6 @@ $color-dark-border: #ddd;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
-  .co-m-resource-icon {
-    margin-left: 0;
-  }
 }
 
 .co-sysevent--transition {
diff --git a/frontend/public/components/ingress.jsx b/frontend/public/components/ingress.jsx
index 7ec09892c35..a3826176685 100644
--- a/frontend/public/components/ingress.jsx
+++ b/frontend/public/components/ingress.jsx
@@ -26,7 +26,7 @@ const getTLSCert = (ingress) => {
   const certs = _.map(ingress.spec.tls, 'secretName');
 
   return <div>
-    <ResourceIcon kind="Secret" className="co-m-resource-icon--align-left" />
+    <ResourceIcon kind="Secret" />
     <span>{certs.join(', ')}</span>
   </div>;
 };
diff --git a/frontend/public/components/modals/configure-ns-pull-secret-modal.jsx b/frontend/public/components/modals/configure-ns-pull-secret-modal.jsx
index 302ea8c8e56..f2bb33c0139 100644
--- a/frontend/public/components/modals/configure-ns-pull-secret-modal.jsx
+++ b/frontend/public/components/modals/configure-ns-pull-secret-modal.jsx
@@ -183,7 +183,7 @@ class ConfigureNamespacePullSecret extends PromiseComponent {
             <label>Namespace</label>
           </div>
           <div className="col-xs-9">
-            <ResourceIcon kind="Namespace" className="co-m-resource-icon--align-left" /> &nbsp;{namespace.metadata.name}
+            <ResourceIcon kind="Namespace" /> &nbsp;{namespace.metadata.name}
           </div>
         </div>
 
@@ -193,7 +193,7 @@ class ConfigureNamespacePullSecret extends PromiseComponent {
           </div>
           { pullSecret ?
             <div className="col-xs-9">
-              <ResourceIcon kind="Secret" className="co-m-resource-icon--align-left" />
+              <ResourceIcon kind="Secret" />
                 &nbsp;{_.get(pullSecret, 'metadata.name')}
             </div> : <div className="col-xs-9">
               <input type="text" className="form-control" id="namespace-pull-secret-name" aria-describedby="namespace-pull-secret-name-help" required />