hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Styling Application tab

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-04-01 10:49:53 +03:00
parent 987be6c52e
commit f18b594df7
5 changed files with 62 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/renderer/components/+preferences/preferences.tsx
View File

@ -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}
/>
</section>
<section id="proxy">
<h2>Proxy</h2>
<SubTitle title="HTTP Proxy"/>
<Input
theme="round-black"
placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
value={this.httpProxy}
onChange={v => this.httpProxy = v}
onBlur={() => preferences.httpsProxy = this.httpProxy}
/>
<small className="hint">
Proxy is used only for non-cluster communication.
</small>
<SubTitle title="Certificate Trust"/>
<Checkbox
label="Allow untrusted Certificate Authorities"
value={preferences.allowUntrustedCAs}
onChange={v => preferences.allowUntrustedCAs = v}
/>
<small className="hint">
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>
</section>
<hr/>
<section id="shell">
<h2>Terminal Shell</h2>
<SubTitle title="Shell Path"/>
@ -145,10 +123,13 @@ export class Preferences extends React.Component {
onChange={v => this.shell = v}
onBlur={() => preferences.shell = this.shell}
/>
<small className="hint">
<div className="hint">
The path of the shell that the terminal uses.
</small>
</div>
</section>
<hr/>
<section id="startup">
<h2>Start-up</h2>
<SubTitle title="Automatic Start-up"/>
@ -160,6 +141,34 @@ export class Preferences extends React.Component {
</section>
</section>
)}
{this.activeTab == PreferencesTab.Proxy && (
<section id="proxy">
<h2>Proxy</h2>
<SubTitle title="HTTP Proxy"/>
<Input
theme="round-black"
placeholder="Type HTTP proxy url (example: http://proxy.acme.org:8080)"
value={this.httpProxy}
onChange={v => this.httpProxy = v}
onBlur={() => preferences.httpsProxy = this.httpProxy}
/>
<small className="hint">
Proxy is used only for non-cluster communication.
</small>
<SubTitle title="Certificate Trust"/>
<Checkbox
label="Allow untrusted Certificate Authorities"
value={preferences.allowUntrustedCAs}
onChange={v => preferences.allowUntrustedCAs = v}
/>
<small className="hint">
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>
</section>
)}
{this.activeTab == PreferencesTab.Kubernetes && (
<section id="kubernetes">

11
src/renderer/components/app.scss
View File

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

32
src/renderer/components/layout/page-layout.scss
View File

@ -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;
}
}
}

7
src/renderer/themes/lens-dark.json
View File

@ -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",

1
src/renderer/themes/lens-light.json
View File

@ -12,6 +12,7 @@
"textColorPrimary": "#555555",
"textColorSecondary": "#51575d",
"textColorAccent": "#333333",
"textColorDimmed": "#8e92978c",
"borderColor": "#c9cfd3",
"borderFaintColor": "#dfdfdf",
"mainBackground": "#f1f1f1",