Merge pull request #307 from suppermancool/issue-2739

New Login view for unregistered customers #2739

Author: RishiRajSahu

components/Wizard/Wizard.jsx

@@ -32,8 +32,8 @@ const Wizard = ({ type, vm, children, wrapperClass }) => {
   return (
     <div className={wrapperClasses}>
       <WizardTop type={type} vm={vm} />
-      <WizardLeft type={type} />
-      <WizardMiddle>
+      <WizardLeft type={type} vm={vm} />
+      <WizardMiddle vm={vm} >
         {(type === ViewTypes.register) && (<RegistrationScreen vm={vm} />)}
         {(type === ViewTypes.pin) && (<PinVerificationScreen vm={vm} />)}
         {(type === ViewTypes.welcome) && (<WelcomeScreen vm={vm} />)}

components/Wizard/Wizard.scss

@@ -6,7 +6,7 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    justify-content: stretch;
+    justify-content: center;
     flex-wrap: wrap;
     font-family: "Roboto", Arial, Helvetica, sans-serif;
     min-height: 100vh;
@@ -41,6 +41,10 @@
 
       @include tablet {
         width : 23%;
+
+        &.hide-left-progress {
+          display: none;
+        }
       }
 
       @media (max-width: 645px) {
@@ -60,10 +64,18 @@
 
       @include tablet {
         width : 77%;
+        
+        &.hide-left-progress {
+          width : 100%;
+        }
       }
 
       @media (max-width: 645px) {
         width: 60%;
+        
+        &.hide-left-progress {
+          width : 100%;
+        }
       }
 
       @include mobile {

components/Wizard/WizardLeft/index.jsx

@@ -5,7 +5,7 @@ require('./style.scss')
 import { ViewTypes } from '../Wizard'
 import ConnectLogo from '../../Icons/ConnectLogoWhite'
 
-const WizardLeft = ({type}) => {
+const WizardLeft = ({type, vm}) => {
   const step1ContainerClass = cn({
     selected: (type === ViewTypes.welcome) || (type === ViewTypes.register) || (type === ViewTypes.pin),
     'bottom-line': true, step1: true,
@@ -26,14 +26,14 @@ const WizardLeft = ({type}) => {
     flex: true, middle: true, center: true
   })
   return (
-    <div className="WizardLeft">
+    <div className={'WizardLeft ' + (vm.hideLeftProgress ? 'hide-left-progress' : '')}>
       <div className="logo flex column middle center">
         <ConnectLogo fill="#47474F" wrapperClass="top-logo with-text" title="CONNECT" />
       </div>
-      <div className="title">
+      {!vm.hideLeftProgress && (<div className="title">
         CREATE A NEW PROJECT
-      </div>
-      <div className="step-container">
+      </div>)}
+      {!vm.hideLeftProgress && (<div className="step-container">
         <div className={step1ContainerClass}>
           <div className="number">1</div>
           <div className="name">Create account</div>
@@ -50,7 +50,7 @@ const WizardLeft = ({type}) => {
           <div className="number">4</div>
           <div className="name">Project submitted</div>
         </div>
-      </div>
+      </div>)}
       <div className="bottom">
       © 2018 Topcoder. All Rights Reserved
       </div>

components/Wizard/WizardMiddle/index.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 
 require('./style.scss')
 
-const WizardMiddle = ({ children }) => {
+const WizardMiddle = ({ children, vm }) => {
   return (
-    <div className="WizardMiddle">
+    <div className={'WizardMiddle ' + (vm.hideLeftProgress ? 'hide-left-progress' : '')}>
       {children}
     </div>
   )