From 623fa5ef17aab1af78ae3f67d339f27b4e0dbd2c Mon Sep 17 00:00:00 2001
From: Orlando Hohmeier <orlando@mesosphere.io>
Date: Fri, 18 Aug 2017 19:50:43 +0200
Subject: [PATCH 1/2] refactor(styles): adjust icon margin classes

Change the `icon-margin-right` and `.icon-margin-left` classes so that
they're no longer nested. This adjustment allows us also to apply the
respective styles elements wrapping icons.
---
 src/styles/components/icons/styles.less | 118 +++++++++++-------------
 1 file changed, 53 insertions(+), 65 deletions(-)

diff --git a/src/styles/components/icons/styles.less b/src/styles/components/icons/styles.less
index 88ed22805d..0fc4fb12d0 100644
--- a/src/styles/components/icons/styles.less
+++ b/src/styles/components/icons/styles.less
@@ -64,23 +64,6 @@
       background-color: @icon-default-background-white;
     }
 
-    &.icon-margin-right {
-      margin-right: @base-spacing-unit * 0.25;
-
-      &.icon-margin-right-wide {
-        margin-right: @base-spacing-unit * 0.5;
-      }
-    }
-
-    &.icon-margin-left {
-      margin-left: @base-spacing-unit * 0.25;
-      margin-right: 0;
-
-      &.icon-margin-left-wide {
-        margin-left: @base-spacing-unit * 0.5;
-      }
-    }
-
     &.icon-neutral {
       color: @neutral;
     }
@@ -109,28 +92,42 @@
       flex: 0 0 auto;
     }
   }
+
+  .icon-margin-right {
+    margin-right: @base-spacing-unit * 0.25;
+
+    &.icon-margin-right-wide {
+      margin-right: @base-spacing-unit * 0.5;
+    }
+  }
+
+  .icon-margin-left {
+    margin-left: @base-spacing-unit * 0.25;
+    margin-right: 0;
+
+    &.icon-margin-left-wide {
+      margin-left: @base-spacing-unit * 0.5;
+    }
+  }
 }
 
 & when (@icon-enabled) and (@layout-screen-small-enabled) {
 
   @media (min-width: @layout-screen-small-min-width) {
 
-    .icon {
-
-      &.icon-margin-right {
-        margin-right: @base-spacing-unit-screen-small * 0.25;
+    .icon-margin-right {
+      margin-right: @base-spacing-unit-screen-small * 0.25;
 
-        &.icon-margin-right-wide {
-          margin-right: @base-spacing-unit-screen-small * 0.5;
-        }
+      &.icon-margin-right-wide {
+        margin-right: @base-spacing-unit-screen-small * 0.5;
       }
+    }
 
-      &.icon-margin-left {
-        margin-left: @base-spacing-unit-screen-small * 0.25;
+    .icon-margin-left {
+      margin-left: @base-spacing-unit-screen-small * 0.25;
 
-        &.icon-margin-left-wide {
-          margin-left: @base-spacing-unit-screen-small * 0.5;
-        }
+      &.icon-margin-left-wide {
+        margin-left: @base-spacing-unit-screen-small * 0.5;
       }
     }
   }
@@ -140,22 +137,19 @@
 
   @media (min-width: @layout-screen-medium-min-width) {
 
-    .icon {
-
-      &.icon-margin-right {
-        margin-right: @base-spacing-unit-screen-medium * 0.25;
+    &.icon-margin-right {
+      margin-right: @base-spacing-unit-screen-medium * 0.25;
 
-        &.icon-margin-right-wide {
-          margin-right: @base-spacing-unit-screen-medium 0.5;
-        }
+      &.icon-margin-right-wide {
+        margin-right: @base-spacing-unit-screen-medium 0.5;
       }
+    }
 
-      &.icon-margin-left {
-        margin-left: @base-spacing-unit-screen-medium * 0.25;
+    &.icon-margin-left {
+      margin-left: @base-spacing-unit-screen-medium * 0.25;
 
-        &.icon-margin-left-wide {
-          margin-left: @base-spacing-unit-screen-medium * 0.5;
-        }
+      &.icon-margin-left-wide {
+        margin-left: @base-spacing-unit-screen-medium * 0.5;
       }
     }
   }
@@ -165,22 +159,19 @@
 
   @media (min-width: @layout-screen-large-min-width) {
 
-    .icon {
-
-      &.icon-margin-right {
-        margin-right: @base-spacing-unit-screen-large * 0.25;
+    &.icon-margin-right {
+      margin-right: @base-spacing-unit-screen-large * 0.25;
 
-        &.icon-margin-right-wide {
-          margin-right: @base-spacing-unit-screen-large 0.5;
-        }
+      &.icon-margin-right-wide {
+        margin-right: @base-spacing-unit-screen-large 0.5;
       }
+    }
 
-      &.icon-margin-left {
-        margin-left: @base-spacing-unit-screen-large * 0.25;
+    &.icon-margin-left {
+      margin-left: @base-spacing-unit-screen-large * 0.25;
 
-        &.icon-margin-left-wide {
-          margin-left: @base-spacing-unit-screen-large * 0.5;
-        }
+      &.icon-margin-left-wide {
+        margin-left: @base-spacing-unit-screen-large * 0.5;
       }
     }
   }
@@ -190,22 +181,19 @@
 
   @media (min-width: @layout-screen-jumbo-min-width) {
 
-    .icon {
-
-      &.icon-margin-right {
-        margin-right: @base-spacing-unit-screen-jumbo * 0.25;
+    &.icon-margin-right {
+      margin-right: @base-spacing-unit-screen-jumbo * 0.25;
 
-        &.icon-margin-right-wide {
-          margin-right: @base-spacing-unit-screen-jumbo 0.5;
-        }
+      &.icon-margin-right-wide {
+        margin-right: @base-spacing-unit-screen-jumbo 0.5;
       }
+    }
 
-      &.icon-margin-left {
-        margin-left: @base-spacing-unit-screen-jumbo * 0.25;
+    &.icon-margin-left {
+      margin-left: @base-spacing-unit-screen-jumbo * 0.25;
 
-        &.icon-margin-left-wide {
-          margin-left: @base-spacing-unit-screen-jumbo * 0.5;
-        }
+      &.icon-margin-left-wide {
+        margin-left: @base-spacing-unit-screen-jumbo * 0.5;
       }
     }
   }

From 80f61028012540c3fa99dce3525412de67b0c50e Mon Sep 17 00:00:00 2001
From: Orlando Hohmeier <orlando@mesosphere.io>
Date: Fri, 18 Aug 2017 19:54:11 +0200
Subject: [PATCH 2/2] fix(JobsTable): adjust the schedule icon classes

Change the schedule icon `Tooltip` and  `Icon` classes so that no
conflicting ( `.icon svg`) are applied.

Closes DCOS-17997
---
 src/js/pages/jobs/JobsTable.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/pages/jobs/JobsTable.js b/src/js/pages/jobs/JobsTable.js
index 8d68620ee2..c7e6698d0c 100644
--- a/src/js/pages/jobs/JobsTable.js
+++ b/src/js/pages/jobs/JobsTable.js
@@ -166,7 +166,7 @@ class JobsTable extends React.Component {
       if (schedule.enabled) {
         scheduleIcon = (
           <Tooltip
-            wrapperClassName="tooltip-wrapper icon icon-margin-left"
+            wrapperClassName="tooltip-wrapper icon-margin-left"
             content={prettycron.toString(schedule.cron)}
             maxWidth={250}
             wrapText={true}