Merge pull request #2574 from asaadmahmoodspin/ui-improvements

PLT-2296 - Adding back button to main create team page

webapp/components/signup_team.jsx

@@ -138,6 +138,24 @@ export default class TeamSignUp extends React.Component {
         }
 
         let signupMethod = null;
+        let goBack = (
+            <div className='signup-header'>
+                <a
+                    href='#'
+                    onClick={
+                        (e) => {
+                            e.preventDefault();
+                            this.updatePage('choose');
+                        }
+                    }
+                >
+                    <span className='fa fa-chevron-left'/>
+                    <FormattedMessage
+                        id='web.header.back'
+                    />
+                </a>
+            </div>
+        );
 
         if (global.window.mm_config.EnableTeamCreation !== 'true') {
             if (teamListing == null) {
@@ -154,9 +172,12 @@ export default class TeamSignUp extends React.Component {
                     updatePage={this.updatePage}
                 />
             );
+            goBack = null;
         } else if (this.state.page === 'email') {
             signupMethod = (
-                <EmailSignUpPage/>
+                <div>
+                    <EmailSignUpPage/>
+                </div>
             );
         } else if (this.state.page === 'ldap') {
             return (
@@ -180,24 +201,28 @@ export default class TeamSignUp extends React.Component {
                     defaultMessage='No team creation method has been enabled.  Please contact an administrator for access.'
                 />
             );
+            goBack = null;
         }
 
         return (
-            <div className='col-sm-12'>
+            <div>
-                <div className='signup-team__container'>
+                {goBack}
-                    <img
+                <div className='col-sm-12'>
-                        className='signup-team-logo'
+                    <div className='signup-team__container'>
-                        src={logoImage}
+                        <img
-                    />
+                            className='signup-team-logo'
-                    <h1>{global.window.mm_config.SiteName}</h1>
+                            src={logoImage}
-                    <h4 className='color--light'>
-                        <FormattedMessage
-                            id='web.root.singup_info'
                         />
-                    </h4>
+                        <h1>{global.window.mm_config.SiteName}</h1>
-                    <div id='signup-team'>
+                        <h4 className='color--light'>
-                        {teamListing}
+                            <FormattedMessage
-                        {signupMethod}
+                                id='web.root.singup_info'
+                            />
+                        </h4>
+                        <div id='signup-team'>
+                            {teamListing}
+                            {signupMethod}
+                        </div>
                     </div>
                 </div>
             </div>

webapp/sass/routes/_signup.scss

@@ -200,7 +200,7 @@
             display: block;
             height: 40px;
             line-height: 34px;
-            margin: 1em 0;
+            margin: 1em 0 1em 10px;
             min-width: 200px;
             padding: 0 1em;
             width: 200px;
@@ -262,9 +262,10 @@
             }
 
             &.btn-full {
-                width: 100%;
+                margin-left: 0;
-                text-align: left;
                 padding-left: 35px;
+                text-align: left;
+                width: 100%;
             }
         }