From d5bc7425f5fab2f60f282b32129cf809370f1d53 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 19 Apr 2021 15:19:09 +0300
Subject: [PATCH] Polishing settings styles (#2534)

* Polishing settings css

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

* Fixing inputs border-radius

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

* Removing Box component

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

* Removing unused import

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

* Remove content region style fixes

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

* Revert theme colors

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

* Set new colors in theme files

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

* Change Cluster extectedText

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 integration/__tests__/cluster-pages.tests.ts      |  2 +-
 .../components/+preferences/preferences.tsx       |  4 ++--
 src/renderer/components/button/button.scss        |  1 -
 src/renderer/components/input/input.scss          |  3 ++-
 src/renderer/components/layout/page-layout.scss   | 13 +++++++++----
 src/renderer/components/select/select.scss        |  5 +++++
 src/renderer/themes/lens-dark.json                | 15 ++++++++-------
 src/renderer/themes/lens-light.json               |  5 +++--
 8 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/integration/__tests__/cluster-pages.tests.ts b/integration/__tests__/cluster-pages.tests.ts
index 12d95f887c..00c5a7cdc8 100644
--- a/integration/__tests__/cluster-pages.tests.ts
+++ b/integration/__tests__/cluster-pages.tests.ts
@@ -91,7 +91,7 @@ describe("Lens cluster pages", () => {
           name: "Cluster",
           href: "cluster",
           expectedSelector: "div.ClusterOverview div.label",
-          expectedText: "Master"
+          expectedText: "CPU"
         }]
       },
       {
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 3eb98cc4d7..bf376adbed 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -125,9 +125,9 @@ export class Preferences extends React.Component {
               />
             </section>
 
-            <hr className="small"/>
+            <hr/>
 
-            <section id="shell" className="small">
+            <section id="shell">
               <SubTitle title="Terminal Shell Path"/>
               <Input
                 theme="round-black"
diff --git a/src/renderer/components/button/button.scss b/src/renderer/components/button/button.scss
index a874970d0b..7f60dfbcd9 100644
--- a/src/renderer/components/button/button.scss
+++ b/src/renderer/components/button/button.scss
@@ -4,7 +4,6 @@
   overflow: hidden; // required for transition effect on hover
   color: white;
   font-family: var(--font-main);
-  font-weight: var(--font-weight-bold);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
diff --git a/src/renderer/components/input/input.scss b/src/renderer/components/input/input.scss
index 90577922eb..6b6169d03a 100644
--- a/src/renderer/components/input/input.scss
+++ b/src/renderer/components/input/input.scss
@@ -98,8 +98,9 @@
       label {
         background: var(--inputControlBackground);
         border: 1px solid var(--inputControlBorder);
-        border-radius: 4px;
+        border-radius: 5px;
         padding: $padding;
+        color: var(--textColorTertiary);
 
         &:hover {
           border-color: var(--inputControlHoverBorder);
diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss
index a2a2ea1080..2c79c48f95 100644
--- a/src/renderer/components/layout/page-layout.scss
+++ b/src/renderer/components/layout/page-layout.scss
@@ -7,6 +7,7 @@
   width: 100%;
   height: 100%;
   display: grid !important;
+  color: var(--settingsColor);
 
   @include media("<1000px") {
     --width: 85%;
@@ -40,7 +41,7 @@
 
     .sidebar {
       width: 218px;
-      padding: 60px 10px 60px 20px;
+      padding: 60px 0 60px 20px;
 
       .Tabs {
         .header {
@@ -62,18 +63,18 @@
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
-          font-weight: 500;
           font-size: 15px;
           line-height: 20px;
           cursor: pointer;
-          color: var(--textColorSecondary);
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
 
           &::after {
             content: none;
           }
 
           &:hover {
-            background-color: var(--navHoverBackground);
+            background-color: var(--navSelectedBackground);
             color: var(--navHoverColor);
           }
 
@@ -194,5 +195,9 @@
         display: none;
       }
     }
+
+    .Checkbox .label {
+      color: var(--textColorTertiary);
+    }
   }
 }
diff --git a/src/renderer/components/select/select.scss b/src/renderer/components/select/select.scss
index d0e13c1dc5..3d42b2afa7 100644
--- a/src/renderer/components/select/select.scss
+++ b/src/renderer/components/select/select.scss
@@ -206,6 +206,11 @@ html {
         &__control {
           box-shadow: 0 0 0 1px var(--inputControlBorder);
           background: var(--inputControlBackground);
+          border-radius: 5px;
+        }
+
+        &__single-value {
+          color: var(--textColorTertiary);
         }
 
         &__menu {
diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json
index 14de361c95..0082f9ce63 100644
--- a/src/renderer/themes/lens-dark.json
+++ b/src/renderer/themes/lens-dark.json
@@ -11,12 +11,13 @@
     "primary": "#3d90ce",
     "textColorPrimary": "#8e9297",
     "textColorSecondary": "#a0a0a0",
+    "textColorTertiary": "#909ba6",
     "textColorAccent": "#ffffff",
     "textColorDimmed": "#8e92978c",
     "borderColor": "#4c5053",
     "borderFaintColor": "#373a3e",
     "mainBackground": "#1e2124",
-    "secondaryBackground": "#212427",
+    "secondaryBackground": "#1e2125",
     "contentColor": "#262b2f",
     "layoutBackground": "#2e3136",
     "layoutTabsBackground": "#252729",
@@ -115,17 +116,17 @@
     "chartCapacityColor": "#4c545f",
     "pieChartDefaultColor": "#30353a",
     "inputOptionHoverColor": "#87909c",
-    "inputControlBackground": "#00000021",
-    "inputControlBorder": "#202225bf",
-    "inputControlHoverBorder": "#07080880",
+    "inputControlBackground": "#1e2125",
+    "inputControlBorder": "#414448",
+    "inputControlHoverBorder": "#474a4f",
     "lineProgressBackground": "#414448",
     "radioActiveBackground": "#36393e",
     "menuActiveBackground": "#36393e",
     "menuSelectedOptionBgc": "#36393e",
     "scrollBarColor": "#5f6064",
-    "settingsBackground": "#2b3035",
-    "navSelectedBackground": "#4f545c52",
-    "navHoverBackground": "#4f545c29",
+    "settingsBackground": "#262b2e",
+    "settingsColor": "#909ba6",
+    "navSelectedBackground": "#262b2e",
     "navHoverColor": "#dcddde",
     "hrColor": "#ffffff0f"
   }
diff --git a/src/renderer/themes/lens-light.json b/src/renderer/themes/lens-light.json
index 52b9cd32e2..5a4365b500 100644
--- a/src/renderer/themes/lens-light.json
+++ b/src/renderer/themes/lens-light.json
@@ -11,6 +11,7 @@
     "primary": "#3d90ce",
     "textColorPrimary": "#555555",
     "textColorSecondary": "#51575d",
+    "textColorTertiary": "#555555",
     "textColorAccent": "#333333",
     "textColorDimmed": "#5557598c",
     "borderColor": "#c9cfd3",
@@ -126,8 +127,8 @@
     "scrollBarColor": "#bbbbbb",
     "canvasBackground": "#24292e",
     "settingsBackground": "#ffffff",
-    "navSelectedBackground": "#747f8d3d",
-    "navHoverBackground": "#747f8d14",
+    "settingsColor": "#555555",
+    "navSelectedBackground": "#ffffff",
     "navHoverColor": "#2e3135",
     "hrColor": "#06060714"
   }