diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx index d0314ba4cc..cb0eb0d9f4 100644 --- a/src/renderer/components/+preferences/preferences.tsx +++ b/src/renderer/components/+preferences/preferences.tsx @@ -20,6 +20,7 @@ import { Tab, Tabs } from "../tabs"; enum PreferencesTab { Application = "application", + Proxy = "proxy", Kubernetes = "kubernetes", Extensions = "extensions" } @@ -109,32 +110,9 @@ export class Preferences extends React.Component { onChange={({ value }: SelectOption) => preferences.colorTheme = value} /> -
-

Proxy

- - this.httpProxy = v} - onBlur={() => preferences.httpsProxy = this.httpProxy} - /> - - Proxy is used only for non-cluster communication. - - - preferences.allowUntrustedCAs = v} - /> - - 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! - -
+
+

Terminal Shell

@@ -145,10 +123,13 @@ export class Preferences extends React.Component { onChange={v => this.shell = v} onBlur={() => preferences.shell = this.shell} /> - +
The path of the shell that the terminal uses. - +
+ +
+

Start-up

@@ -160,6 +141,34 @@ export class Preferences extends React.Component {
)} + {this.activeTab == PreferencesTab.Proxy && ( +
+

Proxy

+ + this.httpProxy = v} + onBlur={() => preferences.httpsProxy = this.httpProxy} + /> + + Proxy is used only for non-cluster communication. + + + + preferences.allowUntrustedCAs = v} + /> + + 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! + +
+ )} {this.activeTab == PreferencesTab.Kubernetes && (
diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss index e2ab1df907..43f3f9ccd9 100755 --- a/src/renderer/components/app.scss +++ b/src/renderer/components/app.scss @@ -105,12 +105,6 @@ ol, ul { list-style: none; } -hr { - margin: $margin 0 !important; - height: 1px; - background: $grey-800; -} - h1 { color: $textColorPrimary; font-size: 28px; @@ -226,6 +220,11 @@ a { } } +// Margins +.marginTop40 { + margin-top: 40px; +} + // app's common loading indicator, displaying on the route transitions #loading { position: absolute; diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss index 5b6965166e..6ae399627a 100644 --- a/src/renderer/components/layout/page-layout.scss +++ b/src/renderer/components/layout/page-layout.scss @@ -106,11 +106,6 @@ color: var(--colorInfo); } - .SubTitle { - text-transform: none; - margin-bottom: 0 !important; - } - .Select { &__control { box-shadow: 0 0 0 1px #20222580; @@ -133,10 +128,9 @@ section { display: flex; flex-direction: column; - margin-bottom: var(--spacing); - > :not(:last-child) { - margin-bottom: var(--spacing); + &:not(:first-child) { + margin-top: 40px; } h1, h2 { @@ -144,24 +138,30 @@ text-transform: uppercase; } - h1 { - font-size: x-large; - border-bottom: 1px solid var(--borderFaintColor); - padding-bottom: var(--padding); - } - h2 { font-size: 16px; line-height: 20px; font-weight: 600; + margin-bottom: 20px; } - small.hint { - margin-top: calc(var(--unit) * -1.5); + .hint { + margin-top: 4px; + font-size: 14px; + color: var(--textColorDimmed); } .SubTitle { margin-top: 0; + margin-bottom: 8px; + padding-bottom: 0; + font-size: 12px; + } + + hr { + margin-top: 40px; + height: 1px; + border-top: thin solid #ffffff0f; } } } diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json index f636a1e71a..c57f9fa83b 100644 --- a/src/renderer/themes/lens-dark.json +++ b/src/renderer/themes/lens-dark.json @@ -9,13 +9,14 @@ "golden": "#ffc63d", "halfGray": "#87909c80", "primary": "#3d90ce", - "textColorPrimary": "#87909c", + "textColorPrimary": "#8e9297", "textColorSecondary": "#a0a0a0", "textColorAccent": "#ffffff", + "textColorDimmed": "#8e92978c", "borderColor": "#4c5053", "borderFaintColor": "#373a3e", - "mainBackground": "#36393f", - "secondaryBackground": "#2f3136", + "mainBackground": "#2b3035", + "secondaryBackground": "#212427", "contentColor": "#262b2f", "layoutBackground": "#2e3136", "layoutTabsBackground": "#252729", diff --git a/src/renderer/themes/lens-light.json b/src/renderer/themes/lens-light.json index 2663fbaf10..48fb2f8777 100644 --- a/src/renderer/themes/lens-light.json +++ b/src/renderer/themes/lens-light.json @@ -12,6 +12,7 @@ "textColorPrimary": "#555555", "textColorSecondary": "#51575d", "textColorAccent": "#333333", + "textColorDimmed": "#8e92978c", "borderColor": "#c9cfd3", "borderFaintColor": "#dfdfdf", "mainBackground": "#f1f1f1",