From 7a3b3d1f1da8c5bd2ad6913b207a29178737ad06 Mon Sep 17 00:00:00 2001
From: alexfront <alex.andreev.email@gmail.com>
Date: Mon, 17 Aug 2020 12:06:43 +0300
Subject: [PATCH] Adding 'centering' option to WizardLayout

Signed-off-by: alexfront <alex.andreev.email@gmail.com>
---
 .../components/layout/wizard-layout.scss        | 14 ++++++++++++++
 .../components/layout/wizard-layout.tsx         | 17 +++++++++++------
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/layout/wizard-layout.scss b/src/renderer/components/layout/wizard-layout.scss
index a81cdfd429..603b7ca067 100644
--- a/src/renderer/components/layout/wizard-layout.scss
+++ b/src/renderer/components/layout/wizard-layout.scss
@@ -16,6 +16,7 @@
   > .head-col {
     position: sticky;
     border-bottom: 1px solid $grey-800;
+    justify-content: space-between;
   }
 
   > .content-col {
@@ -41,4 +42,17 @@
   a {
     color: $colorInfo;
   }
+
+  &.centered {
+    .content-col {
+      margin: 0;
+
+      > div {
+        margin: 0 auto;
+        width: 60%;
+        min-width: 570px;
+        max-width: 1000px;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/components/layout/wizard-layout.tsx b/src/renderer/components/layout/wizard-layout.tsx
index 01b7f331d8..17867eed1a 100644
--- a/src/renderer/components/layout/wizard-layout.tsx
+++ b/src/renderer/components/layout/wizard-layout.tsx
@@ -10,25 +10,30 @@ interface Props {
   contentClass?: IClassName;
   infoPanelClass?: IClassName;
   infoPanel?: React.ReactNode;
+  centered?: boolean;  // Centering content horizontally
 }
 
 @observer
 export class WizardLayout extends React.Component<Props> {
   render() {
-    const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, children: content } = this.props;
+    const { className, contentClass, infoPanelClass, infoPanel, header, headerClass, centered, children: content } = this.props;
     return (
-      <div className={cssNames("WizardLayout", className)}>
+      <div className={cssNames("WizardLayout", { centered }, className)}>
         {header && (
           <div className={cssNames("head-col flex gaps align-center", headerClass)}>
             {header}
           </div>
         )}
         <div className={cssNames("content-col flex column gaps", contentClass)}>
-          {content}
-        </div>
-        <div className={cssNames("info-col flex column gaps", infoPanelClass)}>
-          {infoPanel}
+          <div className="flex column gaps">
+            {content}
+          </div>
         </div>
+        {infoPanel && (
+          <div className={cssNames("info-col flex column gaps", infoPanelClass)}>
+            {infoPanel}
+          </div>
+        )}
       </div>
     )
   }