Multiple UI fixes (#3357)

* Multiple UI fixes

* Removing utils from tutorial file

webapp/components/admin_console/multiselect_settings.jsx

@@ -54,7 +54,10 @@ export default class MultiSelectSetting extends React.Component {
                     onChange={this.handleChange}
                     value={this.props.selected}
                 />
-                <FormError error={this.state.error}/>
+                <FormError
+                    noMargin={true}
+                    error={this.state.error}
+                />
             </Setting>
         );
     }

webapp/components/analytics/statistic_count.jsx

@@ -15,7 +15,7 @@ export default class StatisticCount extends React.Component {
         );
 
         return (
-            <div className='col-sm-3'>
+            <div className='col-md-3 col-sm-6'>
                 <div className='total-count'>
                     <div className='title'>
                         {this.props.title}

webapp/components/change_url_modal.jsx

@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 import ReactDOM from 'react-dom';
-import {Modal} from 'react-bootstrap';
+import {Modal, Tooltip, OverlayTrigger} from 'react-bootstrap';
 import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -131,6 +131,9 @@ export default class ChangeUrlModal extends React.Component {
 
         const fullTeamUrl = Utils.getTeamURLFromAddressBar();
         const teamURL = Utils.getShortenedTeamURL();
+        const urlTooltip = (
+            <Tooltip id='urlTooltip'>{fullTeamUrl}</Tooltip>
+        );
 
         return (
             <Modal
@@ -150,13 +153,12 @@ export default class ChangeUrlModal extends React.Component {
                             <label className='col-sm-2 form__label control-label'>{this.props.urlLabel}</label>
                             <div className='col-sm-10'>
                                 <div className={urlClass}>
-                                    <span
+                                    <OverlayTrigger
-                                        data-toggle='tooltip'
+                                        placement='top'
-                                        title={fullTeamUrl}
+                                        overlay={urlTooltip}
-                                        className='input-group-addon'
                                     >
-                                        {teamURL}
+                                        <span className='input-group-addon'>{teamURL}</span>
-                                    </span>
+                                    </OverlayTrigger>
                                     <input
                                         type='text'
                                         ref='urlinput'

webapp/components/form_error.jsx

@@ -8,6 +8,7 @@ export default class FormError extends React.Component {
         // accepts either a single error or an array of errors
         return {
             error: React.PropTypes.node,
+            noMargin: React.PropTypes.node,
             errors: React.PropTypes.arrayOf(React.PropTypes.node)
         };
     }
@@ -26,6 +27,7 @@ export default class FormError extends React.Component {
 
         // look for the first truthy error to display
         let message = this.props.error;
+        const noMargin = this.props.noMargin;
 
         if (!message) {
             for (const error of this.props.errors) {
@@ -39,6 +41,16 @@ export default class FormError extends React.Component {
             return null;
         }
 
+        if (noMargin) {
+            return (
+                <div className='has-error'>
+                    <label className='control-label'>
+                        {message}
+                    </label>
+                </div>
+            );
+        }
+
         return (
             <div className='form-group has-error'>
                 <label className='control-label'>

webapp/components/tutorial/tutorial_intro_screens.jsx

@@ -4,7 +4,6 @@
 import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
-import * as Utils from 'utils/utils.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 
@@ -218,40 +217,34 @@ export default class TutorialIntroScreens extends React.Component {
         );
     }
     render() {
-        const height = Utils.windowHeight() - 100;
         const screen = this.createScreen();
 
         return (
-            <div
+            <div className='tutorial-steps__container'>
-                className='tutorials__scroll'
+                <div className='tutorial__content'>
-                style={{height}}
+                    <div className='tutorial__steps'>
-            >
+                        {screen}
-                <div className='tutorial-steps__container'>
+                        <div className='tutorial__footer'>
-                    <div className='tutorial__content'>
+                            <button
-                        <div className='tutorial__steps'>
+                                className='btn btn-primary'
-                            {screen}
+                                tabIndex='1'
-                            <div className='tutorial__footer'>
+                                onClick={this.handleNext}
-                                <button
+                            >
-                                    className='btn btn-primary'
+                                <FormattedMessage
-                                    tabIndex='1'
+                                    id='tutorial_intro.next'
-                                    onClick={this.handleNext}
+                                    defaultMessage='Next'
-                                >
+                                />
-                                    <FormattedMessage
+                            </button>
-                                        id='tutorial_intro.next'
+                            <a
-                                        defaultMessage='Next'
+                                className='tutorial-skip'
-                                    />
+                                href='#'
-                                </button>
+                                onClick={this.skipTutorial}
-                                <a
+                            >
-                                    className='tutorial-skip'
+                                <FormattedMessage
-                                    href='#'
+                                    id='tutorial_intro.skip'
-                                    onClick={this.skipTutorial}
+                                    defaultMessage='Skip tutorial'
-                                >
+                                />
-                                    <FormattedMessage
+                            </a>
-                                        id='tutorial_intro.skip'
-                                        defaultMessage='Skip tutorial'
-                                    />
-                                </a>
-                            </div>
                         </div>
                     </div>
                 </div>

webapp/components/user_settings/user_settings_notifications.jsx

@@ -320,7 +320,7 @@ class NotificationsTab extends React.Component {
                 inputs.push(
                     <div
                         key='oauthEmailInfo'
-                        className='form-group'
+                        className='padding-top'
                     >
                         <FormattedMessage
                             id='user.settings.push_notification.disabled_long'

webapp/sass/components/_tutorial.scss

@@ -66,11 +66,11 @@
         margin-top: -10px;
 
         .arrow {
-            border-top-width: 0;
             border-bottom-color: $white;
-            top: -10px;
+            border-top-width: 0;
             left: 50%;
             margin-left: -10px;
+            top: -10px;
         }
     }
 
@@ -168,12 +168,15 @@
 .tutorial-steps__container {
     display: table;
     height: 100%;
+    left: 0;
+    position: absolute;
     text-align: center;
+    top: 0;
     width: 100%;
 
     .tutorial__content {
         display: table-cell;
-        padding: 20px 40px 40px;
+        padding: 20px 40px 80px;
         vertical-align: middle;
 
         .tutorial__steps {

webapp/sass/layout/_post.scss

@@ -534,9 +534,8 @@ body.ios {
 
             ol,
             ul {
-                display: inline-block;
+                clear: both;
-                margin-top: 1px;
+                padding-left: 20px;
-                padding-left: 30px;
             }
         }
 
@@ -911,14 +910,18 @@ body.ios {
         ul,
         ol {
             margin-bottom: .4em;
+            padding-left: 20px;
 
             p {
                 margin-bottom: 0;
             }
 
-            li ul,
+            li {
-            li ol {
+                ul,
-                padding: 10px 0 0 20px;
+                ol {
+                    margin: 0;
+                    padding: 0 0 0 20px;
+                }
             }
 
             li.list-item--task-list ul,
@@ -991,7 +994,7 @@ body.ios {
         margin: 0 0 10px;
         text-rendering: auto;
 
-        &.pull-left{
+        &.pull-left {
             margin: 5px 5px 0 0;
         }
 

webapp/sass/routes/_admin-console.scss

@@ -82,6 +82,12 @@
             text-align: left;
         }
 
+        .has-error {
+            .control-label {
+                font-weight: normal;
+            }
+        }
+
         .form-group {
             margin-bottom: 25px;
         }
@@ -321,7 +327,6 @@
 
     .sidebar-section-title,
     .sidebar-subsection-title {
-        @include clearfix;
         color: alpha-color($white, .5);
         display: block;
         font-size: 13px;

webapp/sass/routes/_backstage.scss

@@ -303,14 +303,14 @@ body {
     border: 1px solid $light-gray;
     display: inline-block;
     height: 210px;
-    margin: 0 0 20px 30px;
+    margin: 0 30px 30px 0;
     padding: 20px;
     text-align: center;
     vertical-align: top;
     width: 250px;
 
-    &:first-child {
+    &:last-child {
-        margin-left: 0;
+        margin-right: 0;
     }
 
     &:hover {

webapp/sass/routes/_settings.scss

@@ -269,6 +269,7 @@
                         display: none;
                         font-size: 12px;
                         margin-right: 5px;
+
                         &.fa-chevron-down {
                             margin-right: 0;
                             position: relative;
@@ -290,6 +291,14 @@
 
                 .divider-light {
                     border-bottom: 1px solid lightgrey;
+
+                    & + .divider-light {
+                        display: none;
+                    }
+
+                    & + .divider-dark {
+                        display: none;
+                    }
                 }
 
                 .setting-list {

webapp/utils/utils.jsx

@@ -607,7 +607,7 @@ export function applyTheme(theme) {
     if (theme.centerChannelColor) {
         changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
-        changeCss('.app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.app__body .input-group-addon, .app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1);
         changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1);
         changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2);
@@ -638,7 +638,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .input-group-addon, .app__body .search-bar__container .search__form, .app__body .form-control', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__body .form-control:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.app__body .attachment .attachment__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
-        changeCss('.app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
+        changeCss('.app__body .input-group-addon, .app__body .channel-intro .channel-intro__content, .app__body .webhooks__container', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1);
         changeCss('.app__body .date-separator .separator__text', 'color:' + theme.centerChannelColor, 2);
         changeCss('.app__body .date-separator .separator__hr, .app__body .modal-footer, .app__body .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__body .search-item-container, .app__body .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1);