Normalize display of <ResourceIcon> across browsers, platforms

openshift · Feb 21, 2019 · 7c1cedc · 7c1cedc
1 parent 9bfcbc6
commit 7c1cedc
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 />