diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss index adb09bfac9..3610186e26 100644 --- a/src/renderer/components/+landing-page/landing-page.scss +++ b/src/renderer/components/+landing-page/landing-page.scss @@ -1,6 +1,27 @@ -.PageLayout.LandingPage { - --width: 80%; +.LandingPage { + width: 100%; + height: 100%; text-align: center; + z-index: 0; + + &::after { + content: ""; + background: url(../../components/icon/crane.svg) no-repeat; + background-position: 0 35%; + background-size: 85%; + background-clip: content-box; + opacity: .75; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; + z-index: -1; + + .theme-light & { + opacity: 0.2; + } + } .startup-hint { $bgc: $mainBackground; @@ -36,4 +57,9 @@ } } } +} + +.PageLayout.LandingOverview { + --width: 80%; + text-align: center; } \ No newline at end of file diff --git a/src/renderer/components/+landing-page/landing-page.tsx b/src/renderer/components/+landing-page/landing-page.tsx index 8ec7eb279b..3bb50e97e5 100644 --- a/src/renderer/components/+landing-page/landing-page.tsx +++ b/src/renderer/components/+landing-page/landing-page.tsx @@ -14,7 +14,18 @@ export class LandingPage extends React.Component { get workspace(): Workspace { return workspaceStore.currentWorkspace; } - + + renderStartupHint() { + return ( +
this.showHint = false}> +

This is the quick launch menu.

+

+ Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button. +

+
+ ) + } + render() { const clusters = clusterStore.getByWorkspaceId(this.workspace.id); const noClustersInScope = !clusters.length; @@ -22,16 +33,24 @@ export class LandingPage extends React.Component { const header =

Workspace: {this.workspace.name}

; - return ( - - {showStartupHint && ( -
this.showHint = false}> -

This is the quick launch menu.

+ if (this.workspace.name === "default" && noClustersInScope) { + return ( +
+ {showStartupHint && this.renderStartupHint()} +
+

+ Welcome! +

- Associate clusters and choose the ones you want to access via quick launch menu by clicking the + button. + Get started by associating one or more clusters to Lens.

- )} +
+ ) + } + + return ( + );