Updating tutorial screens

4 files changed, 106 insertions, 89 deletions

diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 1dc30e251..cb3148b7b 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -383,10 +383,9 @@ export default class CreatePost extends React.Component {
 
         screens.push(
             <div>
-                <h4><strong>{'Sending Messages'}</strong></h4>
-                {'Type here to write a message.'}
-                <br/><br/>
-                {'Click the attachment button to upload an image or a file.'}
+                <h4>{'Sending Messages'}</h4>
+                <p>{'Type here to write a message.'}</p>
+                <p>{'Click the attachment button to upload an image or a file.'}</p>
             </div>
         );
 
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index c3f43ff69..39d9808e9 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -323,28 +323,34 @@ export default class Sidebar extends React.Component {
 
         screens.push(
             <div>
-                <h4><strong>{'Channels'}</strong></h4>
-                <strong>{'Channels'}</strong>{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}<strong>{'Direct Messages'}</strong>{' for a single person or '}<strong>{'Private Groups'}</strong>{' for multiple people.'}
+                <h4>{'Channels'}</h4>
+                <p><strong>{'Channels'}</strong>{' organize conversations across different topics. They’re open to everyone on your team. To send private communications use '}<strong>{'Direct Messages'}</strong>{' for a single person or '}<strong>{'Private Groups'}</strong>{' for multiple people.'}
+                </p>
             </div>
         );
 
         screens.push(
             <div>
-                <h4><strong>{'"Town Square" and "Off-Topic" channels'}</strong></h4>
-                {'Here are two public channels to start:'}
-                <br/><br/>
-                <strong>{'Town Square'}</strong>{' is a place for team-wide communication. Everyone in your team is a member of this channel.'}
-                <br/><br/>
-                <strong>{'Off-Topic'}</strong>{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'}
+                <h4>{'"Town Square" and "Off-Topic" channels'}</h4>
+                <p>{'Here are two public channels to start:'}</p>
+                <p>
+                    <strong>{'Town Square'}</strong>{' is a place for team-wide communication. Everyone in your team is a member of this channel.'}
+                </p>
+                <p>
+                    <strong>{'Off-Topic'}</strong>{' is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.'}
+                </p>
             </div>
         );
 
         screens.push(
             <div>
-                <h4><strong>{'Creating and Joining Channels'}</strong></h4>
-                {'Click '}<strong>{'"More..."'}</strong>{' to create a new channel or join an existing one.'}
-                <br/><br/>
-                {'You can also create a new channel or private group by clicking the '}<strong>{'"+" symbol'}</strong>{' next to the channel or private group header.'}
+                <h4>{'Creating and Joining Channels'}</h4>
+                <p>
+                    {'Click '}<strong>{'"More..."'}</strong>{' to create a new channel or join an existing one.'}
+                </p>
+                <p>
+                    {'You can also create a new channel or private group by clicking the '}<strong>{'"+" symbol'}</strong>{' next to the channel or private group header.'}
+                </p>
             </div>
         );
 
diff --git a/web/react/components/tutorial/tutorial_intro_screens.jsx b/web/react/components/tutorial/tutorial_intro_screens.jsx
index d423b4f1b..b37aac27c 100644
--- a/web/react/components/tutorial/tutorial_intro_screens.jsx
+++ b/web/react/components/tutorial/tutorial_intro_screens.jsx
@@ -20,6 +20,10 @@ export default class TutorialIntroScreens extends React.Component {
 
         this.state = {currentScreen: 0};
     }
+    componentDidMount() {
+        const height = $(window).outerHeight() - 120;
+        $('.tutorial-steps__container').css('height', `${height}px`);
+    }
     handleNext() {
         if (this.state.currentScreen < 2) {
             this.setState({currentScreen: this.state.currentScreen + 1});
@@ -48,35 +52,29 @@ export default class TutorialIntroScreens extends React.Component {
     createScreenOne() {
         return (
             <div>
-                <h4><strong>{'Welcome to:'}</strong></h4>
-                <h2><strong>{'Mattermost'}</strong></h2>
-                <br/>
-                {'Your team communications all in one place,'}
-                <br/>
-                {'instantly searchable and available anywhere.'}
-                <br/><br/>
-                {'Keep your team connected to help them'}
-                <br/>
-                {'achieve what matters most.'}
-                <br/><br/>
-                <span>{'[ x ][ ][ ]'}</span>
+                <h3>{'Welcome to:'}</h3>
+                <h1>{'Mattermost'}</h1>
+                <p>{'Your team communications all in one place, instantly searchable and available anywhere.'}</p>
+                <p>{'Keep your team connected to help them achieve what matters most.'}</p>
+                <div className='tutorial__circles'>
+                    <div className='circle active'/>
+                    <div className='circle'/>
+                    <div className='circle'/>
+                </div>
             </div>
         );
     }
     createScreenTwo() {
         return (
             <div>
-                <h4><strong>{'How Mattermost works:'}</strong></h4>
-                <br/>
-                {'Communication happens in public discussion channels,'}
-                <br/>
-                {'private groups and direct messages.'}
-                <br/><br/>
-                {'Everything is archived and searchable from'}
-                <br/>
-                {'any web-enabled laptop, tablet or phone.'}
-                <br/><br/>
-                <span>{'[ ][ x ][ ]'}</span>
+                <h3>{'How Mattermost works:'}</h3>
+                <p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p>
+                <p>{'Everything is archived and searchable from any web-enabled laptop, tablet or phone.'}</p>
+                <div className='tutorial__circles'>
+                    <div className='circle'/>
+                    <div className='circle active'/>
+                    <div className='circle'/>
+                </div>
             </div>
         );
     }
@@ -111,26 +109,26 @@ export default class TutorialIntroScreens extends React.Component {
 
         return (
             <div>
-                <h4><strong>{'You’re all set'}</strong></h4>
-                <br/>
-                {inviteModalLink}
-                {' when you’re ready.'}
-                <br/><br/>
-                {'Need anything, just email us at '}
-                <a
-                    href='mailto:feedback@mattermost.com'
-                    target='_blank'
-                >
-                    {'feedback@mattermost.com.'}
-                </a>
-                <br/><br/>
-                {'Click “Next” to enter Town Square. This is the first channel'}
-                <br/>
-                {'teammates see when they sign up - use it for posting updates'}
-                <br/>
-                {'everyone needs to know.'}
-                <br/><br/>
-                <span>{'[ ][ ][ x ]'}</span>
+                <h3>{'You’re all set'}</h3>
+                <p>
+                    {inviteModalLink}
+                    {' when you’re ready.'}
+                </p>
+                <p>
+                    {'Need anything, just email us at '}
+                    <a
+                        href='mailto:feedback@mattermost.com'
+                        target='_blank'
+                    >
+                        {'feedback@mattermost.com.'}
+                    </a>
+                </p>
+                {'Click “Next” to enter Town Square. This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'}
+                <div className='tutorial__circles'>
+                    <div className='circle'/>
+                    <div className='circle'/>
+                    <div className='circle active'/>
+                </div>
             </div>
         );
     }
@@ -138,16 +136,19 @@ export default class TutorialIntroScreens extends React.Component {
         const screen = this.createScreen();
 
         return (
-            <div>
-                {screen}
-                <br/><br/>
-                <button
-                    className='btn btn-primary'
-                    tabIndex='1'
-                    onClick={this.handleNext}
-                >
-                    {'Next'}
-                </button>
+            <div className='tutorial-steps__container'>
+                <div className='tutorial__content'>
+                    <div className='tutorial__steps'>
+                        {screen}
+                        <button
+                            className='btn btn-primary'
+                            tabIndex='1'
+                            onClick={this.handleNext}
+                        >
+                            {'Next'}
+                        </button>
+                    </div>
+                </div>
             </div>
         );
     }
diff --git a/web/react/components/tutorial/tutorial_tip.jsx b/web/react/components/tutorial/tutorial_tip.jsx
index 166d10d8a..3482a7cfa 100644
--- a/web/react/components/tutorial/tutorial_tip.jsx
+++ b/web/react/components/tutorial/tutorial_tip.jsx
@@ -52,9 +52,19 @@ export default class TutorialTip extends React.Component {
         if (this.props.screens.length > 1) {
             for (let i = 0; i < this.props.screens.length; i++) {
                 if (i === this.state.currentScreen) {
-                    dots.push(<span key={'dotactive' + i}>{'[ x ]'}</span>);
+                    dots.push(
+                        <div
+                            className='circle active'
+                            key={'dotactive' + i}
+                        />
+                    );
                 } else {
-                    dots.push(<span key={'dotinactive' + i}>{'[ ]'}</span>);
+                    dots.push(
+                        <div
+                            className='circle'
+                            key={'dotinactive' + i}
+                        />
+                    );
                 }
             }
         }
@@ -63,7 +73,8 @@ export default class TutorialTip extends React.Component {
             <div className='tip-div'>
                 <img
                     className='tip-button'
-                    src='/static/images/next.png'
+                    src='/static/images/tutorialTip.gif'
+                    width='35'
                     onClick={this.toggle}
                     ref='target'
                 />
@@ -77,24 +88,24 @@ export default class TutorialTip extends React.Component {
                 >
                     <div className='tip-overlay'>
                         {this.props.screens[this.state.currentScreen]}
-                        <br/>
-                        {dots}
-                        <button
-                            className='btn btn-default'
-                            onClick={this.handleNext}
-                        >
-                            {buttonText}
-                        </button>
-                        <br/>
-                        <span>
-                            {'Seen this before? '}
-                            <a
-                                href='#'
-                                onClick={this.skipTutorial}
+                        <div className='tutorial__circles'>{dots}</div>
+                        <div className='text-right'>
+                            <button
+                                className='btn btn-default'
+                                onClick={this.handleNext}
                             >
-                                {'Opt out of these tips.'}
-                            </a>
-                        </span>
+                                {buttonText}
+                            </button>
+                            <div className='tip-opt'>
+                                {'Seen this before? '}
+                                <a
+                                    href='#'
+                                    onClick={this.skipTutorial}
+                                >
+                                    {'Opt out of these tips.'}
+                                </a>
+                            </div>
+                        </div>
                     </div>
                 </Overlay>
             </div>