Preferences page redesign (#2446)

* Removing header part

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

* Restyling PageLayout

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

* Restyling .round-black Input

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

* Adding Tab navigation to Preferences

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

* Styling Application tab

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

* Add esc button

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

* Add media queries

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

* Introducting Switcher component

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

* Styling Proxy tab

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

* Moving start-up switcher to Other tab

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

* Styling Kubernetes tab

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

* Styling Extensions tab

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

* Styling inputs and selects

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

* Styling helm chart section

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

* Create a telemetry tab with extensions

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

* Adding lens Select theme

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

* Remove Other tab

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

* Fix mainBackground color

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

* Simplifying Tabs boilerplate

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

* Replacing button font

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

* Fixing one-column settings layout

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

* Fixing integration tests

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

* Fixin tests harder

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

* Showing bottom bar in workspaces

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

src/renderer/themes/lens-dark.json

@@ -9,12 +9,14 @@
     "golden": "#ffc63d",
     "halfGray": "#87909c80",
     "primary": "#3d90ce",
-    "textColorPrimary": "#87909c",
+    "textColorPrimary": "#8e9297",
     "textColorSecondary": "#a0a0a0",
     "textColorAccent": "#ffffff",
+    "textColorDimmed": "#8e92978c",
     "borderColor": "#4c5053",
     "borderFaintColor": "#373a3e",
     "mainBackground": "#1e2124",
+    "secondaryBackground": "#212427",
     "contentColor": "#262b2f",
     "layoutBackground": "#2e3136",
     "layoutTabsBackground": "#252729",
@@ -112,11 +114,19 @@
     "chartStripesColor": "#ffffff08",
     "chartCapacityColor": "#4c545f",
     "pieChartDefaultColor": "#30353a",
-    "selectOptionHoveredColor": "#87909c",
+    "inputOptionHoverColor": "#87909c",
+    "inputControlBackground": "#00000021",
+    "inputControlBorder": "#202225bf",
+    "inputControlHoverBorder": "#07080880",
     "lineProgressBackground": "#414448",
     "radioActiveBackground": "#36393e",
     "menuActiveBackground": "#36393e",
     "menuSelectedOptionBgc": "#36393e",
-    "scrollBarColor": "#5f6064"
+    "scrollBarColor": "#5f6064",
+    "settingsBackground": "#2b3035",
+    "navSelectedBackground": "#4f545c52",
+    "navHoverBackground": "#4f545c29",
+    "navHoverColor": "#dcddde",
+    "hrColor": "#ffffff0f"
   }
 }

src/renderer/themes/lens-light.json

@@ -12,9 +12,11 @@
     "textColorPrimary": "#555555",
     "textColorSecondary": "#51575d",
     "textColorAccent": "#333333",
+    "textColorDimmed": "#5557598c",
     "borderColor": "#c9cfd3",
     "borderFaintColor": "#dfdfdf",
     "mainBackground": "#f1f1f1",
+    "secondaryBackground": "#f2f3f5",
     "contentColor": "#ffffff",
     "layoutBackground": "#e8e8e8",
     "layoutTabsBackground": "#f8f8f8",
@@ -113,12 +115,20 @@
     "chartStripesColor": "#00000009",
     "chartCapacityColor": "#cccccc",
     "pieChartDefaultColor": "#efefef",
-    "selectOptionHoveredColor": "#ffffff",
+    "inputOptionHoverColor": "#ffffff",
+    "inputControlBackground": "#f6f6f7",
+    "inputControlBorder": "#cccdcf",
+    "inputControlHoverBorder": "#b9bbbe",
     "lineProgressBackground": "#e8e8e8",
     "radioActiveBackground": "#f1f1f1",
     "menuActiveBackground": "#e8e8e8",
     "menuSelectedOptionBgc": "#e8e8e8",
     "scrollBarColor": "#bbbbbb",
-    "canvasBackground": "#24292e"
+    "canvasBackground": "#24292e",
+    "settingsBackground": "#ffffff",
+    "navSelectedBackground": "#747f8d3d",
+    "navHoverBackground": "#747f8d14",
+    "navHoverColor": "#2e3135",
+    "hrColor": "#06060714"
   }
 }

src/renderer/themes/theme-vars.scss

@@ -128,7 +128,7 @@ $iconActiveColor: var(--iconActiveColor);
 $iconActiveBackground: var(--iconActiveBackground);
 $filterAreaBackground: var(--filterAreaBackground);
 
-$selectOptionHoveredColor: var(--selectOptionHoveredColor);
+$inputOptionHoverColor: var(--inputOptionHoverColor);
 $lineProgressBackground: var(--lineProgressBackground);
 $radioActiveBackground: var(--radioActiveBackground);
 $menuActiveBackground: var(--menuActiveBackground);