From 70ae3f7012167b3a9fd8ce37ddc1bcc0aeb8d1f6 Mon Sep 17 00:00:00 2001
From: alexfront <alex.andreev.email@gmail.com>
Date: Tue, 11 Aug 2020 10:26:19 +0300
Subject: [PATCH] Fix Cluster Settings style specificity

Signed-off-by: alexfront <alex.andreev.email@gmail.com>
---
 .../+cluster-settings/cluster-settings.scss   | 148 +++++++++---------
 .../+cluster-settings/cluster-settings.tsx    |  18 ++-
 2 files changed, 85 insertions(+), 81 deletions(-)

diff --git a/src/renderer/components/+cluster-settings/cluster-settings.scss b/src/renderer/components/+cluster-settings/cluster-settings.scss
index acb59ea0ac..b54466c326 100644
--- a/src/renderer/components/+cluster-settings/cluster-settings.scss
+++ b/src/renderer/components/+cluster-settings/cluster-settings.scss
@@ -1,95 +1,97 @@
 .ClusterSettings {
-  grid-template-columns: unset;
-  padding: 0;
+  .WizardLayout {
+    grid-template-columns: unset;
+    padding: 0;
 
-  .head-col {
-    justify-content: space-between;
+    .head-col {
+      justify-content: space-between;
 
-    :nth-child(2) {
-      flex: 1 0 0;
-    }
-
-    a {
-      text-decoration: none;
-      color: $grey-600;
-    }
-  }
-
-  .info-col {
-    display: none;
-  }
-
-  .content-col {
-    margin: 0;
-    padding-top: $padding * 3;
-    background-color: transparent;
-
-    .SubTitle {
-      text-transform: none;
-    }
-
-    .settings-wrapper {
-      margin: 0 auto;
-      width: 60%;
-      min-width: 570px;
-      max-width: 1000px;
-
-      > div {
-        margin-top: $margin * 5;
+      :nth-child(2) {
+        flex: 1 0 0;
       }
 
-      .admin-note {
-        font-size: small;
-        opacity: 0.5;
-        margin-left: $margin;
+      a {
+        text-decoration: none;
+        color: $grey-600;
+      }
+    }
+
+    .info-col {
+      display: none;
+    }
+
+    .content-col {
+      margin: 0;
+      padding-top: $padding * 3;
+      background-color: transparent;
+
+      .SubTitle {
+        text-transform: none;
       }
 
-      .button-area {
+      .settings-wrapper {
+        margin: 0 auto;
+        width: 60%;
+        min-width: 570px;
+        max-width: 1000px;
+
+        > div {
+          margin-top: $margin * 5;
+        }
+
+        .admin-note {
+          font-size: small;
+          opacity: 0.5;
+          margin-left: $margin;
+        }
+
+        .button-area {
+          margin-top: $margin * 2;
+        }
+      }
+
+      .file-loader {
         margin-top: $margin * 2;
       }
+
+      .hint {
+        font-size: smaller;
+        opacity: 0.8;
+      }
+
+      p + p, .hint + p {
+        padding-top: $padding;
+      }
     }
 
-    .file-loader {
-      margin-top: $margin * 2;
-    }
+    .status-table {
+      margin: $margin * 3 0;
 
-    .hint {
-      font-size: smaller;
-      opacity: 0.8;
-    }
+      .Table {
+        border: 1px solid var(--drawerSubtitleBackground);
+        border-radius: $radius;
 
-    p + p, .hint + p {
-      padding-top: $padding;
-    }
-  }
+        .TableRow {
+          &:not(:last-of-type) {
+            border-bottom: 1px solid var(--drawerSubtitleBackground);
+          }
 
-  .status-table {
-    margin: $margin * 3 0;
-
-    .Table {
-      border: 1px solid var(--drawerSubtitleBackground);
-      border-radius: $radius;
-
-      .TableRow {
-        &:not(:last-of-type) {
-          border-bottom: 1px solid var(--drawerSubtitleBackground);
-        }
-
-        .value {
-          flex-grow: 2;
-          color: var(--textColorSecondary);
+          .value {
+            flex-grow: 2;
+            color: var(--textColorSecondary);
+          }
         }
       }
     }
-  }
 
-  .Input, .Select {
-    margin-top: 10px;
-  }
+    .Input, .Select {
+      margin-top: 10px;
+    }
 
-  .Select {
-    &__control {
-      box-shadow: 0 0 0 1px $borderFaintColor;
+    .Select {
+      &__control {
+        box-shadow: 0 0 0 1px $borderFaintColor;
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/+cluster-settings/cluster-settings.tsx b/src/renderer/components/+cluster-settings/cluster-settings.tsx
index 4ce4dcb379..9070883cb3 100644
--- a/src/renderer/components/+cluster-settings/cluster-settings.tsx
+++ b/src/renderer/components/+cluster-settings/cluster-settings.tsx
@@ -30,14 +30,16 @@ export class ClusterSettings extends React.Component {
       </>
     );
     return (
-      <WizardLayout header={header} className="ClusterSettings">
-        <div className="settings-wrapper">
-          <Status cluster={cluster}></Status>
-          <General cluster={cluster}></General>
-          <Features cluster={cluster}></Features>
-          <Removal cluster={cluster}></Removal>
-        </div>
-      </WizardLayout>
+      <div className="ClusterSettings">
+        <WizardLayout header={header}>
+          <div className="settings-wrapper">
+            <Status cluster={cluster}></Status>
+            <General cluster={cluster}></General>
+            <Features cluster={cluster}></Features>
+            <Removal cluster={cluster}></Removal>
+          </div>
+        </WizardLayout>
+      </div>
     );
   }
 }