Updating tutorials UI

web/react/components/sidebar_header.jsx

@@ -64,7 +64,8 @@ export default class SidebarHeader extends React.Component {
 
         screens.push(
             <div>
-                <h4><strong>{'Sending Messages'}</strong></h4>
+                <h4>{'Main Menu'}</h4>
+                <p>
                 {'The '}<strong>{'Main Menu'}</strong>{' is where you can '}
                 <a
                     href='#'
@@ -82,8 +83,10 @@ export default class SidebarHeader extends React.Component {
                     {'Account Settings'}
                 </a>
                 {', and set your '}<strong>{'Theme Color'}</strong>{'.'}
-                <br/><br/>
+                </p>
+                <p>
                 {'Team administrators can also access their '}{teamSettingsLink}{' from this menu.'}
+                </p>
             </div>
         );
 
@@ -95,7 +98,7 @@ export default class SidebarHeader extends React.Component {
                     ref='tip'
                     placement='right'
                     screens={screens}
-                    overlayClass='tip-overlay--sidebar'
+                    overlayClass='tip-overlay--header'
                 />
             </div>
         );

web/react/components/tutorial/tutorial_tip.jsx

@@ -70,7 +70,7 @@ export default class TutorialTip extends React.Component {
         }
 
         return (
-            <div className='tip-div'>
+            <div className={'tip-div ' + this.props.overlayClass}>
                 <img
                     className='tip-button'
                     src='/static/images/tutorialTip.gif'
@@ -93,6 +93,7 @@ export default class TutorialTip extends React.Component {
                     target={() => this.refs.target}
                 >
                     <div className={'tip-overlay ' + this.props.overlayClass}>
+                        <div className='arrow'></div>
                         {this.props.screens[this.state.currentScreen]}
                         <div className='tutorial__circles'>{dots}</div>
                         <div className='text-right'>

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

@@ -179,6 +179,15 @@
 }
 
 @media screen and (max-width: 1140px) {
+    .tip-overlay {
+        &.tip-overlay--chat {
+            margin: -10px 0 0 -10px;
+            .arrow {
+                right: 15px;
+                left: auto;
+            }
+        }
+    }
     .inner__wrap {
         &.move--left {
             .file-overlay {
@@ -266,6 +275,18 @@
     }
 }
 @media screen and (max-width: 768px) {
+    .tip-div {
+        left: 15px;
+        right: auto;
+    }
+    .tip-overlay {
+        &.tip-overlay--chat {
+            margin-left: 10px;
+            .arrow {
+                left: 32px;
+            }
+        }
+    }
     .file-details__container {
         display: block;
         .file-details__preview {
@@ -482,7 +503,6 @@
             padding-bottom: 10px;
             display: table;
             width: 100%;
-            table-layout: fixed;
             .post-body__cell {
                 display: table-cell;
                 padding-left: 45px;

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

@@ -16,38 +16,93 @@
     @include border-radius(3px);
     padding: 20px;
     z-index: 1000;
+
+    .arrow {
+        border-width: 10px;
+        position: absolute;
+        display: block;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+
+    &.tip-overlay--sidebar {
+        max-width: 75%;
+        margin: 50px 0 0 10px;
+        .arrow {
+            top: 80px;
+            left: -10px;
+            margin-top: -10px;
+            border-left-width: 0;
+            border-right-color: #fff;
+        }
+    }
+
+    &.tip-overlay--header {
+        margin: 10px 0 0 10px;
+        .arrow {
+            top: 15px;
+            left: -10px;
+            border-left-width: 0;
+            border-right-color: #fff;
+        }
+    }
+
+    &.tip-overlay--chat {
+        margin-top: -10px;
+        .arrow {
+            left: 50%;
+            margin-left: -10px;
+            border-bottom-width: 0;
+            border-top-color: #fff;
+            bottom: -10px;
+        }
+    }
+
     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;
@@ -56,8 +111,11 @@
                 background: #000;
                 @include opacity(0.4);
             }
+
         }
+
     }
+
 }
 
 .tip-button {
@@ -72,6 +130,16 @@
     position:absolute;
     top:0px;
     right:0px;
+
+    &.tip-overlay--header {
+        top: 20px;
+    }
+
+    &.tip-overlay--sidebar {
+        left: 0;
+        top: -9px;
+    }
+
 }
 
 .tutorial-steps__container {