Updating tutorial screens

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>
+                <h4>{'Sending Messages'}</h4>
-                {'Type here to write a message.'}
+                <p>{'Type here to write a message.'}</p>
-                <br/><br/>
+                <p>{'Click the attachment button to upload an image or a file.'}</p>
-                {'Click the attachment button to upload an image or a file.'}
             </div>
         );
 

web/react/components/sidebar.jsx

@@ -323,28 +323,34 @@ export default class Sidebar extends React.Component {
 
         screens.push(
             <div>
-                <h4><strong>{'Channels'}</strong></h4>
+                <h4>{'Channels'}</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.'}
+                <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>
+                <h4>{'"Town Square" and "Off-Topic" channels'}</h4>
-                {'Here are two public channels to start:'}
+                <p>{'Here are two public channels to start:'}</p>
-                <br/><br/>
+                <p>
                     <strong>{'Town Square'}</strong>{' is a place for team-wide communication. Everyone in your team is a member of this channel.'}
-                <br/><br/>
+                </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>
+                <h4>{'Creating and Joining Channels'}</h4>
+                <p>
                     {'Click '}<strong>{'"More..."'}</strong>{' to create a new channel or join an existing one.'}
-                <br/><br/>
+                </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>
         );
 

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>
+                <h3>{'Welcome to:'}</h3>
-                <h2><strong>{'Mattermost'}</strong></h2>
+                <h1>{'Mattermost'}</h1>
-                <br/>
+                <p>{'Your team communications all in one place, instantly searchable and available anywhere.'}</p>
-                {'Your team communications all in one place,'}
+                <p>{'Keep your team connected to help them achieve what matters most.'}</p>
-                <br/>
+                <div className='tutorial__circles'>
-                {'instantly searchable and available anywhere.'}
+                    <div className='circle active'/>
-                <br/><br/>
+                    <div className='circle'/>
-                {'Keep your team connected to help them'}
+                    <div className='circle'/>
-                <br/>
+                </div>
-                {'achieve what matters most.'}
-                <br/><br/>
-                <span>{'[ x ][ ][ ]'}</span>
             </div>
         );
     }
     createScreenTwo() {
         return (
             <div>
-                <h4><strong>{'How Mattermost works:'}</strong></h4>
+                <h3>{'How Mattermost works:'}</h3>
-                <br/>
+                <p>{'Communication happens in public discussion channels, private groups and direct messages.'}</p>
-                {'Communication happens in public discussion channels,'}
+                <p>{'Everything is archived and searchable from any web-enabled laptop, tablet or phone.'}</p>
-                <br/>
+                <div className='tutorial__circles'>
-                {'private groups and direct messages.'}
+                    <div className='circle'/>
-                <br/><br/>
+                    <div className='circle active'/>
-                {'Everything is archived and searchable from'}
+                    <div className='circle'/>
-                <br/>
+                </div>
-                {'any web-enabled laptop, tablet or phone.'}
-                <br/><br/>
-                <span>{'[ ][ x ][ ]'}</span>
             </div>
         );
     }
@@ -111,11 +109,12 @@ export default class TutorialIntroScreens extends React.Component {
 
         return (
             <div>
-                <h4><strong>{'You’re all set'}</strong></h4>
+                <h3>{'You’re all set'}</h3>
-                <br/>
+                <p>
                     {inviteModalLink}
                     {' when you’re ready.'}
-                <br/><br/>
+                </p>
+                <p>
                     {'Need anything, just email us at '}
                     <a
                         href='mailto:feedback@mattermost.com'
@@ -123,14 +122,13 @@ export default class TutorialIntroScreens extends React.Component {
                     >
                         {'feedback@mattermost.com.'}
                     </a>
-                <br/><br/>
+                </p>
-                {'Click “Next” to enter Town Square. This is the first channel'}
+                {'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.'}
-                <br/>
+                <div className='tutorial__circles'>
-                {'teammates see when they sign up - use it for posting updates'}
+                    <div className='circle'/>
-                <br/>
+                    <div className='circle'/>
-                {'everyone needs to know.'}
+                    <div className='circle active'/>
-                <br/><br/>
+                </div>
-                <span>{'[ ][ ][ x ]'}</span>
             </div>
         );
     }
@@ -138,9 +136,10 @@ export default class TutorialIntroScreens extends React.Component {
         const screen = this.createScreen();
 
         return (
-            <div>
+            <div className='tutorial-steps__container'>
+                <div className='tutorial__content'>
+                    <div className='tutorial__steps'>
                         {screen}
-                <br/><br/>
                         <button
                             className='btn btn-primary'
                             tabIndex='1'
@@ -149,6 +148,8 @@ export default class TutorialIntroScreens extends React.Component {
                             {'Next'}
                         </button>
                     </div>
+                </div>
+            </div>
         );
     }
 }

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,16 +88,15 @@ export default class TutorialTip extends React.Component {
                 >
                     <div className='tip-overlay'>
                         {this.props.screens[this.state.currentScreen]}
-                        <br/>
+                        <div className='tutorial__circles'>{dots}</div>
-                        {dots}
+                        <div className='text-right'>
                             <button
                                 className='btn btn-default'
                                 onClick={this.handleNext}
                             >
                                 {buttonText}
                             </button>
-                        <br/>
+                            <div className='tip-opt'>
-                        <span>
                                 {'Seen this before? '}
                                 <a
                                     href='#'
@@ -94,7 +104,8 @@ export default class TutorialTip extends React.Component {
                                 >
                                     {'Opt out of these tips.'}
                                 </a>
-                        </span>
+                            </div>
+                        </div>
                     </div>
                 </Overlay>
             </div>

web/sass-files/sass/partials/_tutorial.scss

@@ -1,17 +1,71 @@
-.tip-overlay {
+.tip-backdrop {
+    background: rgba(black, 0.5);
     position: absolute;
-    background-color:#EEE;
+    top: 0;
-    box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
+    left: 0;
-    border:1px solid #CCC;
+    width: 100%;
-    border-radius:3px;
+    height: 100%;
-    padding:10px;
     z-index: 999;
 }
 
+.tip-overlay {
+    width: 350px;
+    max-width: 90%;
+    position:absolute;
+    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;
+    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);
+        }
+    }
+}

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";