Updating tutorial screens

7 files changed, 215 insertions, 98 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>
diff --git a/web/sass-files/sass/partials/_tutorial.scss b/web/sass-files/sass/partials/_tutorial.scss
index e80abf952..fa93e46bf 100644
--- a/web/sass-files/sass/partials/_tutorial.scss
+++ b/web/sass-files/sass/partials/_tutorial.scss
@@ -1,17 +1,71 @@
+.tip-backdrop {
+    background: rgba(black, 0.5);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+}
+
 .tip-overlay {
+    width: 350px;
+    max-width: 90%;
     position:absolute;
-    background-color:#EEE;
-    box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
-    border:1px solid #CCC;
-    border-radius:3px;
-    padding:10px;
-    z-index:999;
+    background-color: #fff;
+    @include border-radius(3px);
+    padding: 20px;
+    z-index: 1000;
+    h4 {
+        font-size: em(16px);
+        font-weight: 600;
+        margin: 5px 0 15px;
+    }
+    p {
+        font-size: 13px;
+        line-height: 1.6;
+        strong {
+            font-weight: 600;
+        }
+    }
+    .btn {
+        background: #cccccc;
+        color: #fff;
+        @include border-radius(3px);
+        border: none;
+        margin-bottom: 10px;
+        &:hover, &:active, &:focus {
+            color: #fff;
+            border: none;
+            background: #bbb;
+        }
+    }
+    .tip-opt {
+        font-size: 12px;
+        span {
+            @include opacity(0.5);
+        }
+    }
+    .tutorial__circles {
+        margin: 1.5em 0px -1.7em -4px;
+        .circle {
+            width: 7px;
+            height: 7px;
+            margin: 0 4px;
+            &.active {
+                background: #000;
+                @include opacity(0.4);
+            }
+        }
+    }
 }
 
 .tip-button {
-    height:20px;
-    width:20px;
-    z-index:998;
+    z-index: 998;
+    right: -10px;
+    top: -10px;
+    position: relative;
+    cursor: pointer;
 }
 
 .tip-div {
@@ -19,3 +73,48 @@
     top:0px;
     right:0px;
 }
+
+.tutorial-steps__container {
+    text-align: center;
+    width: 100%;
+    display: table;
+    .tutorial__content {
+        display: table-cell;
+        vertical-align: middle;
+        padding-bottom: 100px;
+        padding: 0 40px;
+        .tutorial__steps {
+            max-width: 310px;
+            min-height: 420px;
+            text-align: left;
+            display: inline-block;
+        }
+    }
+    h1 {
+        font-size: em(40px);
+        margin: -20px 0 30px;
+        font-weight: 600;
+    }
+    h3 {
+        font-size: em(24px);
+        margin-bottom: 30px;
+        font-weight: 600;
+    }
+}
+
+.tutorial__circles {
+    margin: 2em 0;
+    .circle {
+        width: 9px;
+        height: 9px;
+        @include border-radius(9px);
+        @include opacity(0.1);
+        background: #000;
+        display: inline-block;
+        margin: 0 5px;
+        &.active {
+            background: $primary-color;
+            @include opacity(1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/web/sass-files/sass/styles.scss b/web/sass-files/sass/styles.scss
index 34f7c6eed..5c83d5c5b 100644
--- a/web/sass-files/sass/styles.scss
+++ b/web/sass-files/sass/styles.scss
@@ -39,6 +39,7 @@
 @import "partials/get-link";
 @import "partials/markdown";
 @import "partials/tutorial";
+@import "partials/statistics";
 
 // Responsive Css
 @import "partials/responsive";
diff --git a/web/static/images/tutorialTip.gif b/web/static/images/tutorialTip.gif
new file mode 100644
index 000000000..024dc3c09
--- /dev/null
+++ b/web/static/images/tutorialTip.gif