Cluster Settings styling

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

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

@@ -1,5 +1,19 @@
 .ClusterSettings {
   grid-template-columns: unset;
+  padding: 0;
+
+  .head-col {
+    justify-content: space-between;
+
+    :nth-child(2) {
+      flex: 1 0 0;
+    }
+
+    a {
+      text-decoration: none;
+      color: $grey-600;
+    }
+  }
 
   .info-col {
     display: none;
@@ -8,6 +22,7 @@
   .content-col {
     margin: 0;
     padding-top: $padding * 3;
+    background-color: transparent;
 
     .SubTitle {
       text-transform: none;
@@ -29,10 +44,19 @@
         margin-left: $margin;
       }
 
-      button {
+      .button-area {
         margin-top: $margin * 2;
       }
     }
+
+    .file-loader {
+      margin-top: $margin * 2;
+    }
+
+    .hint {
+      font-size: smaller;
+      opacity: 0.8;
+    }
   }
 
   .status-table {

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

@@ -35,7 +35,7 @@ export class InstallFeature extends React.Component<Props> {
         }
         {features.installed &&
           <Button
-            primary
+            accent
             disabled={disabled}
             onClick={this.runAction("uninstallFeature")}
           >
@@ -74,7 +74,7 @@ export class InstallFeature extends React.Component<Props> {
     return (
       <>
         {this.props.children}
-        {this.getActionButtons()}
+        <div className="button-area">{this.getActionButtons()}</div>
       </>
     );
   }

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

@@ -30,7 +30,7 @@ export class RemoveClusterButton extends React.Component<Props> {
 
   render() {
     return (
-      <Button accent onClick={this.confirmRemoveCluster}>
+      <Button accent onClick={this.confirmRemoveCluster} className="button-area">
         Remove Cluster
       </Button>
     );

src/renderer/components/+cluster-settings/components/statuses.ts

@@ -1,18 +0,0 @@
-export enum TextInputStatus {
-    CLEAN = "clean",
-    DIRTY = "dirty",
-    UPDATING = "updating",
-    ERROR = "error",
-    UPDATED = "updated",
-}
-
-export enum GeneralInputStatus {
-    CLEAN = "clean",
-    ERROR = "error",
-}
-
-export enum ActionStatus {
-    IDLE = "idle",
-    PROCESSING = "processing",
-    ERROR = "error"
-}

src/renderer/components/layout/wizard-layout.scss

@@ -15,7 +15,6 @@
 
   > .head-col {
     position: sticky;
-    background-color: var(--clusters-menu-bgc);
     border-bottom: 1px solid $grey-800;
   }
 

src/renderer/components/select/select.scss

@@ -31,7 +31,7 @@ html {
       border-radius: $radius;
       background: transparent;
       min-height: 0;
-      box-shadow: 0 0 0 1px $halfGray;
+      box-shadow: 0 0 0 1px $borderFaintColor;
 
       &--is-focused {
         box-shadow: 0 0 0 2px $primary;