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

@@ -91,7 +91,7 @@ describe("Lens cluster pages", () => {
           name: "Cluster",
           href: "cluster",
           expectedSelector: "div.ClusterOverview div.label",
-          expectedText: "Master"
+          expectedText: "CPU"
         }]
       },
       {

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"

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;

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);

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);
+    }
   }
 }

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 {

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",
+    "inputControlBackground": "#1e2125",
-    "inputControlBorder": "#202225bf",
+    "inputControlBorder": "#414448",
-    "inputControlHoverBorder": "#07080880",
+    "inputControlHoverBorder": "#474a4f",
     "lineProgressBackground": "#414448",
     "radioActiveBackground": "#36393e",
     "menuActiveBackground": "#36393e",
     "menuSelectedOptionBgc": "#36393e",
     "scrollBarColor": "#5f6064",
-    "settingsBackground": "#2b3035",
+    "settingsBackground": "#262b2e",
-    "navSelectedBackground": "#4f545c52",
+    "settingsColor": "#909ba6",
-    "navHoverBackground": "#4f545c29",
+    "navSelectedBackground": "#262b2e",
     "navHoverColor": "#dcddde",
     "hrColor": "#ffffff0f"
   }

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",
+    "settingsColor": "#555555",
-    "navHoverBackground": "#747f8d14",
+    "navSelectedBackground": "#ffffff",
     "navHoverColor": "#2e3135",
     "hrColor": "#06060714"
   }