Polishing settings css

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

src/renderer/components/+preferences/preferences.scss

@@ -1,2 +1,9 @@
 .Preferences {
+  > .contentRegion {
+    > .content {
+      max-width: 740px;
+      min-width: 460px;
+      width: 100%;
+    }
+  }
 }

src/renderer/components/+preferences/preferences.tsx

@@ -17,6 +17,7 @@ import { KubectlBinaries } from "./kubectl-binaries";
 import { navigation } from "../../navigation";
 import { Tab, Tabs } from "../tabs";
 import { FormSwitch, Switcher } from "../switch";
+import { Box } from "@material-ui/core";
 
 enum Pages {
   Application = "application",
@@ -186,11 +187,11 @@ export class Preferences extends React.Component {
                 }
                 label="Allow untrusted Certificate Authorities"
               />
-              <small className="hint">
+              <Box lineHeight={1.3} mt={1}>
                 This will make Lens to trust ANY certificate authority without any validations.{" "}
                 Needed with some corporate proxies that do certificate re-writing.{" "}
                 Does not affect cluster communications!
-              </small>
+              </Box>
             </section>
           </section>
         )}

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

@@ -100,6 +100,7 @@
         border: 1px solid var(--inputControlBorder);
         border-radius: 4px;
         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

@@ -208,6 +208,10 @@ html {
           background: var(--inputControlBackground);
         }
 
+        &__single-value {
+          color: var(--textColorTertiary);
+        }
+
         &__menu {
           &-list {
             padding: 6px;

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"
   }