Fixing Cluster Settings general layout bugs

Signed-off-by: alexfront <alex.andreev.email@gmail.com>

src/renderer/components/+cluster-settings/cluster-settings.scss

@@ -1,86 +1,101 @@
 .ClusterSettings {
-    overflow-y: scroll;
+  grid-template-columns: unset;
-    grid-template-columns: unset;
 
-    .info-col {
+  .info-col {
-        display: none;
+    display: none;
+  }
+
+  .content-col {
+    margin: 0;
+    padding-top: $padding * 3;
+
+    .SubTitle {
+      text-transform: none;
     }
 
-    .content-col {
+    .settings-wrapper {
-        margin-right: unset;
+      margin: 0 auto;
-    }
+      width: 70%;
+      min-width: 800px;
 
-    * {
+      > div {
-        margin-top: 40px;
+        margin-top: $margin * 3;
+      }
 
-        &:first-child {
+      .admin-note {
-            margin-top: 0px;
-        }
-    }
-
-    h4 {
-        margin-top: 20px;
-    }
-
-    .status-table {
-        margin-top: 20px;
-        display: grid;
-        grid-template-columns: 1fr 3fr;
-        grid-gap: 10px;
-    }
-
-    .loading {
-        margin-top: 20px;
-        text-align: center;
-
-        .Spinner {
-            display: inline-block;
-        }
-    }
-
-    .Input,.Select {
-        margin-top: 10px;
-    }
-
-    .Icon:not(.updated):not(.clean) {
-        color: #ad0000;
-    }
-
-    .Icon.updated {
-        color: #00dd1d;
-    }
-
-    .updated {
-        animation: updated-name 1s 1;
-        animation-fill-mode: forwards;
-        animation-delay: 3s;
-    }
-
-    @keyframes updated-name {
-        from {opacity :1;}
-        to {opacity :0;}
-    }
-
-    .center {
-        text-align: center;
-    }
-
-    input[type="text"]::placeholder {
         font-size: small;
-        color: #707070;
+        opacity: 0.5;
+        margin-left: $margin;
+      }
     }
+  }
 
-    input[type="text"] {
+  .status-table {
-        color: white;
+    margin: $margin * 3 0;
-    }
 
-    button {
+    .Table {
-        margin-top: 5px;
+      border: 1px solid var(--drawerSubtitleBackground);
+      border-radius: $radius;
 
-        .Spinner {
+      .TableCell {
-            width: 10px;
+        border-bottom: 1px solid var(--drawerSubtitleBackground);
-            height: 10px;
+
-            border-color: transparent black;
+        &.value {
+          color: var(--textColorSecondary);
         }
+      }
     }
+  }
+
+  .loading {
+    margin-top: 20px;
+    text-align: center;
+
+    .Spinner {
+        display: inline-block;
+    }
+  }
+
+  .Input,.Select {
+    margin-top: 10px;
+  }
+
+  .Icon:not(.updated):not(.clean) {
+    color: #ad0000;
+  }
+
+  .Icon.updated {
+    color: #00dd1d;
+  }
+
+  .updated {
+    animation: updated-name 1s 1;
+    animation-fill-mode: forwards;
+    animation-delay: 3s;
+  }
+
+  @keyframes updated-name {
+    from {opacity :1;}
+    to {opacity :0;}
+  }
+
+
+  input[type="text"]::placeholder {
+    font-size: small;
+    color: #707070;
+  }
+
+  input[type="text"] {
+    color: white;
+  }
+
+  button {
+    margin-top: 5px;
+
+    .Spinner {
+        width: 10px;
+        height: 10px;
+        border-color: transparent black;
+    }
+  }
 }

src/renderer/components/+cluster-settings/cluster-settings.tsx

@@ -1,25 +1,38 @@
-import "./cluster-settings.scss"
+import "./cluster-settings.scss";
+
 import React from "react";
 import { observer } from "mobx-react";
-import { Features } from "./features" 
+import { Features } from "./features";
-import { Removal } from "./removal"
+import { Removal } from "./removal";
-import { Status } from "./status"
+import { Status } from "./status";
-import { General } from "./general"
+import { General } from "./general";
-import { getHostedCluster } from "../../../common/cluster-store"
+import { getHostedCluster } from "../../../common/cluster-store";
 import { WizardLayout } from "../layout/wizard-layout";
+import { ClusterIcon } from "../cluster-icon";
 
 @observer
 export class ClusterSettings extends React.Component {
   render() {
     const cluster = getHostedCluster();
-    
+    const header = (
+      <>
+        <ClusterIcon
+          cluster={cluster}
+          showErrors={false}
+          showTooltip={false}
+        />
+        <h2>{cluster.preferences.clusterName}</h2>
+      </>
+    );
     return (
-      <WizardLayout className="ClusterSettings">
+      <WizardLayout header={header} className="ClusterSettings">
-        <Status cluster={cluster}></Status>
+        <div className="settings-wrapper">
-        <General cluster={cluster}></General>
+          <Status cluster={cluster}></Status>
-        <Features cluster={cluster}></Features>
+          <General cluster={cluster}></General>
-        <Removal cluster={cluster}></Removal>
+          <Features cluster={cluster}></Features>
+          <Removal cluster={cluster}></Removal>
+        </div>
       </WizardLayout>
-    )
+    );
   }
 }