From eca727bef6fed92ed62916413d2fc60011000344 Mon Sep 17 00:00:00 2001
From: alexfront <alex.andreev.email@gmail.com>
Date: Tue, 4 Aug 2020 15:45:38 +0300
Subject: [PATCH] Adding head-col to WizardLayout

Signed-off-by: alexfront <alex.andreev.email@gmail.com>
---
 src/renderer/components/layout/wizard-layout.scss | 10 ++++++++++
 src/renderer/components/layout/wizard-layout.tsx  |  7 ++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/layout/wizard-layout.scss b/src/renderer/components/layout/wizard-layout.scss
index 5d7b95bbab..1e99094e91 100644
--- a/src/renderer/components/layout/wizard-layout.scss
+++ b/src/renderer/components/layout/wizard-layout.scss
@@ -13,6 +13,12 @@
     padding: $spacing;
   }
 
+  > .head-col {
+    position: sticky;
+    background-color: var(--clusters-menu-bgc);
+    border-bottom: 1px solid $grey-800;
+  }
+
   > .content-col {
     margin-right: $spacing;
     background-color: var(--clusters-menu-bgc);
@@ -29,6 +35,10 @@
     border-left: 1px solid #353a3e;
   }
 
+  p {
+    line-height: 140%;
+  }
+
   a {
     color: $colorInfo;
   }
diff --git a/src/renderer/components/layout/wizard-layout.tsx b/src/renderer/components/layout/wizard-layout.tsx
index 107c8feffe..5067fb299d 100644
--- a/src/renderer/components/layout/wizard-layout.tsx
+++ b/src/renderer/components/layout/wizard-layout.tsx
@@ -5,6 +5,8 @@ import { cssNames, IClassName } from "../../utils";
 
 interface Props {
   className?: IClassName;
+  header?: React.ReactNode;
+  headerClass?: IClassName;
   contentClass?: IClassName;
   infoPanelClass?: IClassName;
   infoPanel?: React.ReactNode;
@@ -13,9 +15,12 @@ interface Props {
 @observer
 export class WizardLayout extends React.Component<Props> {
   render() {
-    const { className, contentClass, infoPanelClass, infoPanel, children: content } = this.props;
+    const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, children: content } = this.props;
     return (
       <div className={cssNames("WizardLayout", className)}>
+        <div className={cssNames("head-col flex gaps align-center", headerClass)}>
+          {header}
+        </div>
         <div className={cssNames("content-col flex column gaps", contentClass)}>
           {content}
         </div>