From cf4c7422ed5a814ca6fdd0b4244306f6fb07fdf9 Mon Sep 17 00:00:00 2001
From: alexfront <alex.andreev.email@gmail.com>
Date: Thu, 6 Aug 2020 13:02:57 +0300
Subject: [PATCH] Cluster Settings styling

Signed-off-by: alexfront <alex.andreev.email@gmail.com>
---
 .../+cluster-settings/cluster-settings.scss   | 26 ++++++++++++++++++-
 .../components/install-feature.tsx            |  4 +--
 .../components/remove-cluster-button.tsx      |  2 +-
 .../+cluster-settings/components/statuses.ts  | 18 -------------
 .../components/layout/wizard-layout.scss      |  1 -
 src/renderer/components/select/select.scss    |  2 +-
 6 files changed, 29 insertions(+), 24 deletions(-)
 delete mode 100644 src/renderer/components/+cluster-settings/components/statuses.ts

diff --git a/src/renderer/components/+cluster-settings/cluster-settings.scss b/src/renderer/components/+cluster-settings/cluster-settings.scss
index 3ed377ac3b..e02a4da5f8 100644
--- a/src/renderer/components/+cluster-settings/cluster-settings.scss
+++ b/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 {
diff --git a/src/renderer/components/+cluster-settings/components/install-feature.tsx b/src/renderer/components/+cluster-settings/components/install-feature.tsx
index 1bff9c2285..f10d2a3d7d 100644
--- a/src/renderer/components/+cluster-settings/components/install-feature.tsx
+++ b/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>
       </>
     );
   }
diff --git a/src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx b/src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx
index c998a09e81..137a275093 100644
--- a/src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx
+++ b/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>
     );
diff --git a/src/renderer/components/+cluster-settings/components/statuses.ts b/src/renderer/components/+cluster-settings/components/statuses.ts
deleted file mode 100644
index 9ce641e1c7..0000000000
--- a/src/renderer/components/+cluster-settings/components/statuses.ts
+++ /dev/null
@@ -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"
-}
diff --git a/src/renderer/components/layout/wizard-layout.scss b/src/renderer/components/layout/wizard-layout.scss
index 1e99094e91..a81cdfd429 100644
--- a/src/renderer/components/layout/wizard-layout.scss
+++ b/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;
   }
 
diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss
index 002c2a567c..5710e82945 100644
--- a/src/renderer/components/select/select.scss
+++ b/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;