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

Fine-tuning layout/coloring styles

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-11-25 15:01:02 +03:00
parent 3a9c89a91a
commit 558d641213
2 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/renderer/components/+add-cluster/add-cluster.scss
View File

@ -1,9 +1,20 @@
.AddClusters { .AddClusters {
--flex-gap: #{$unit * 2};
$spacing: $padding * 2; $spacing: $padding * 2;
.AceEditor { .AceEditor {
min-height: 200px; min-height: 200px;
max-height: 400px; max-height: 400px;
border: 1px solid var(--colorVague);
border-radius: $radius;
.theme-light & {
border-color: var(--borderFaintColor);
}
.editor {
border-radius: $radius;
}
} }
.Select { .Select {
@ -27,4 +38,13 @@
code { code {
color: $pink-400; color: $pink-400;
} }
.text-primary {
color: var(--textColorAccent);
}
.hint {
display: block;
padding-top: 6px;
}
} }

28
src/renderer/components/+add-cluster/add-cluster.tsx
View File

@ -195,21 +195,19 @@ export class AddCluster extends React.Component {
renderInfo() { renderInfo() {
return ( return (
<Fragment> <p>
<p> Add clusters by clicking the <span className="text-primary">Add Cluster</span> button.
Add clusters by clicking the <span className="text-primary">Add Cluster</span> button. You'll need to obtain a working kubeconfig for the cluster you want to add.
You'll need to obtain a working kubeconfig for the cluster you want to add. You can either browse it from the file system or paste it as a text from the clipboard.
You can either browse it from the file system or paste it as a text from the clipboard. Read more about adding clusters <a href={`${docsUrl}/latest/clusters/adding-clusters/`} target="_blank">here</a>.
Read more about adding clusters <a href={`${docsUrl}/latest/clusters/adding-clusters/`} target="_blank">here</a>. </p>
</p>
</Fragment>
); );
} }
renderKubeConfigSource() { renderKubeConfigSource() {
return ( return (
<> <>
<Tabs withBorder onChange={this.onKubeConfigTabChange}> <Tabs onChange={this.onKubeConfigTabChange}>
<Tab <Tab
value={KubeConfigSourceTab.FILE} value={KubeConfigSourceTab.FILE}
label={<Trans>Select kubeconfig file</Trans>} label={<Trans>Select kubeconfig file</Trans>}
@ -221,7 +219,7 @@ export class AddCluster extends React.Component {
/> />
</Tabs> </Tabs>
{this.sourceTab === KubeConfigSourceTab.FILE && ( {this.sourceTab === KubeConfigSourceTab.FILE && (
<> <div>
<div className="kube-config-select flex gaps align-center"> <div className="kube-config-select flex gaps align-center">
<Input <Input
theme="round-black" theme="round-black"
@ -246,10 +244,10 @@ export class AddCluster extends React.Component {
<small className="hint"> <small className="hint">
<Trans>Pro-Tip: you can also drag-n-drop kubeconfig file to this area</Trans> <Trans>Pro-Tip: you can also drag-n-drop kubeconfig file to this area</Trans>
</small> </small>
</> </div>
)} )}
{this.sourceTab === KubeConfigSourceTab.TEXT && ( {this.sourceTab === KubeConfigSourceTab.TEXT && (
<> <div className="flex column">
<AceEditor <AceEditor
autoFocus autoFocus
showGutter={false} showGutter={false}
@ -263,7 +261,7 @@ export class AddCluster extends React.Component {
<small className="hint"> <small className="hint">
<Trans>Pro-Tip: paste kubeconfig to get available contexts</Trans> <Trans>Pro-Tip: paste kubeconfig to get available contexts</Trans>
</small> </small>
</> </div>
)} )}
</> </>
); );
@ -275,7 +273,7 @@ export class AddCluster extends React.Component {
? <Trans>Selected contexts: <b>{this.selectedContexts.length}</b></Trans> ? <Trans>Selected contexts: <b>{this.selectedContexts.length}</b></Trans>
: <Trans>Select contexts</Trans>; : <Trans>Select contexts</Trans>;
return ( return (
<> <div>
<Select <Select
id="kubecontext-select" // todo: provide better mapping for integration tests (e.g. data-test-id="..") id="kubecontext-select" // todo: provide better mapping for integration tests (e.g. data-test-id="..")
placeholder={placeholder} placeholder={placeholder}
@ -299,7 +297,7 @@ export class AddCluster extends React.Component {
<code>{this.selectedContexts.join(", ")}</code> <code>{this.selectedContexts.join(", ")}</code>
</small> </small>
)} )}
</> </div>
); );
} }