From d64c75ae4a5561075d9020ff1e4e62f160660b43 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Thu, 24 Mar 2016 18:12:57 +0500
Subject: [PATCH] Multiple UI Improvements

---
 .../admin_console/admin_sidebar.jsx           | 467 +++++++++---------
 webapp/components/rhs_thread.jsx              |   1 +
 webapp/components/search_bar.jsx              |   1 +
 .../components/suggestion/suggestion_box.jsx  |  10 +-
 webapp/sass/components/_buttons.scss          |  10 +
 webapp/sass/components/_search.scss           |  16 +-
 webapp/sass/responsive/_mobile.scss           | 125 ++---
 7 files changed, 333 insertions(+), 297 deletions(-)

diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index 8ee75e2efd..9f9e85de11 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -1,8 +1,11 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
+
 import AdminSidebarHeader from './admin_sidebar_header.jsx';
 import SelectTeamModal from './select_team_modal.jsx';
+import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -27,6 +30,12 @@ export default class AdminSidebar extends React.Component {
         };
     }
 
+    componentDidUpdate() {
+        if (!Utils.isMobile()) {
+            $('.sidebar--left .nav-pills__container').perfectScrollbar();
+        }
+    }
+
     handleClick(name, teamId, e) {
         e.preventDefault();
         this.props.selectTab(name, teamId);
@@ -242,244 +251,242 @@ export default class AdminSidebar extends React.Component {
 
         return (
             <div className='sidebar--left sidebar--collapsable'>
-                <div>
-                    <AdminSidebarHeader/>
-                    <div className='nav-pills__container'>
-                        <ul className='nav nav-pills nav-stacked'>
-                            <li>
-                                <ul className='nav nav__sub-menu'>
-                                    <li>
-                                        <h4>
-                                            <span className='icon fa fa-gear'></span>
-                                            <span>
-                                                <FormattedMessage
-                                                    id='admin.sidebar.reports'
-                                                    defaultMessage='SITE REPORTS'
-                                                />
-                                            </span>
-                                        </h4>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu padded'>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('system_analytics')}
-                                            onClick={this.handleClick.bind(this, 'system_analytics', null)}
-                                        >
+                <AdminSidebarHeader/>
+                <div className='nav-pills__container'>
+                    <ul className='nav nav-pills nav-stacked'>
+                        <li>
+                            <ul className='nav nav__sub-menu'>
+                                <li>
+                                    <h4>
+                                        <span className='icon fa fa-gear'></span>
+                                        <span>
                                             <FormattedMessage
-                                                id='admin.sidebar.view_statistics'
-                                                defaultMessage='View Statistics'
+                                                id='admin.sidebar.reports'
+                                                defaultMessage='SITE REPORTS'
                                             />
-                                        </a>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu'>
-                                    <li>
-                                        <h4>
-                                            <span className='icon fa fa-gear'></span>
-                                            <span>
-                                                <FormattedMessage
-                                                    id='admin.sidebar.settings'
-                                                    defaultMessage='SETTINGS'
-                                                />
-                                            </span>
-                                        </h4>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu padded'>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('service_settings')}
-                                            onClick={this.handleClick.bind(this, 'service_settings', null)}
-                                        >
+                                        </span>
+                                    </h4>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu padded'>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('system_analytics')}
+                                        onClick={this.handleClick.bind(this, 'system_analytics', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.view_statistics'
+                                            defaultMessage='View Statistics'
+                                        />
+                                    </a>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu'>
+                                <li>
+                                    <h4>
+                                        <span className='icon fa fa-gear'></span>
+                                        <span>
                                             <FormattedMessage
-                                                id='admin.sidebar.service'
-                                                defaultMessage='Service Settings'
+                                                id='admin.sidebar.settings'
+                                                defaultMessage='SETTINGS'
                                             />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('team_settings')}
-                                            onClick={this.handleClick.bind(this, 'team_settings', null)}
-                                        >
+                                        </span>
+                                    </h4>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu padded'>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('service_settings')}
+                                        onClick={this.handleClick.bind(this, 'service_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.service'
+                                            defaultMessage='Service Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('team_settings')}
+                                        onClick={this.handleClick.bind(this, 'team_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.team'
+                                            defaultMessage='Team Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('sql_settings')}
+                                        onClick={this.handleClick.bind(this, 'sql_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.sql'
+                                            defaultMessage='SQL Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('email_settings')}
+                                        onClick={this.handleClick.bind(this, 'email_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.email'
+                                            defaultMessage='Email Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('image_settings')}
+                                        onClick={this.handleClick.bind(this, 'image_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.file'
+                                            defaultMessage='File Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('log_settings')}
+                                        onClick={this.handleClick.bind(this, 'log_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.log'
+                                            defaultMessage='Log Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('rate_settings')}
+                                        onClick={this.handleClick.bind(this, 'rate_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.rate_limit'
+                                            defaultMessage='Rate Limit Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('privacy_settings')}
+                                        onClick={this.handleClick.bind(this, 'privacy_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.privacy'
+                                            defaultMessage='Privacy Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('gitlab_settings')}
+                                        onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.gitlab'
+                                            defaultMessage='GitLab Settings'
+                                        />
+                                    </a>
+                                </li>
+                                {ldapSettings}
+                                {complianceSettings}
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('legal_and_support_settings')}
+                                        onClick={this.handleClick.bind(this, 'legal_and_support_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.support'
+                                            defaultMessage='Legal and Support Settings'
+                                        />
+                                    </a>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu'>
+                                 <li>
+                                    <h4>
+                                        <span className='icon fa fa-gear'></span>
+                                        <span>
                                             <FormattedMessage
-                                                id='admin.sidebar.team'
-                                                defaultMessage='Team Settings'
+                                                id='admin.sidebar.teams'
+                                                defaultMessage='TEAMS ({count})'
+                                                values={{
+                                                    count: count
+                                                }}
                                             />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('sql_settings')}
-                                            onClick={this.handleClick.bind(this, 'sql_settings', null)}
-                                        >
+                                        </span>
+                                        <span className='menu-icon--right'>
+                                            <OverlayTrigger
+                                                delayShow={1000}
+                                                placement='top'
+                                                overlay={addTeamTooltip}
+                                            >
+                                            <a
+                                                href='#'
+                                                onClick={this.showTeamSelect}
+                                            >
+                                                <i
+                                                    className='fa fa-plus'
+                                                ></i>
+                                            </a>
+                                            </OverlayTrigger>
+                                        </span>
+                                    </h4>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu padded'>
+                                <li>
+                                    {teams}
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu'>
+                                <li>
+                                    <h4>
+                                        <span className='icon fa fa-gear'></span>
+                                        <span>
                                             <FormattedMessage
-                                                id='admin.sidebar.sql'
-                                                defaultMessage='SQL Settings'
+                                                id='admin.sidebar.other'
+                                                defaultMessage='OTHER'
                                             />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('email_settings')}
-                                            onClick={this.handleClick.bind(this, 'email_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.email'
-                                                defaultMessage='Email Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('image_settings')}
-                                            onClick={this.handleClick.bind(this, 'image_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.file'
-                                                defaultMessage='File Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('log_settings')}
-                                            onClick={this.handleClick.bind(this, 'log_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.log'
-                                                defaultMessage='Log Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('rate_settings')}
-                                            onClick={this.handleClick.bind(this, 'rate_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.rate_limit'
-                                                defaultMessage='Rate Limit Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('privacy_settings')}
-                                            onClick={this.handleClick.bind(this, 'privacy_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.privacy'
-                                                defaultMessage='Privacy Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('gitlab_settings')}
-                                            onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.gitlab'
-                                                defaultMessage='GitLab Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    {ldapSettings}
-                                    {complianceSettings}
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('legal_and_support_settings')}
-                                            onClick={this.handleClick.bind(this, 'legal_and_support_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.support'
-                                                defaultMessage='Legal and Support Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu'>
-                                     <li>
-                                        <h4>
-                                            <span className='icon fa fa-gear'></span>
-                                            <span>
-                                                <FormattedMessage
-                                                    id='admin.sidebar.teams'
-                                                    defaultMessage='TEAMS ({count})'
-                                                    values={{
-                                                        count: count
-                                                    }}
-                                                />
-                                            </span>
-                                            <span className='menu-icon--right'>
-                                                <OverlayTrigger
-                                                    delayShow={1000}
-                                                    placement='top'
-                                                    overlay={addTeamTooltip}
-                                                >
-                                                <a
-                                                    href='#'
-                                                    onClick={this.showTeamSelect}
-                                                >
-                                                    <i
-                                                        className='fa fa-plus'
-                                                    ></i>
-                                                </a>
-                                                </OverlayTrigger>
-                                            </span>
-                                        </h4>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu padded'>
-                                    <li>
-                                        {teams}
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu'>
-                                    <li>
-                                        <h4>
-                                            <span className='icon fa fa-gear'></span>
-                                            <span>
-                                                <FormattedMessage
-                                                    id='admin.sidebar.other'
-                                                    defaultMessage='OTHER'
-                                                />
-                                            </span>
-                                        </h4>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu padded'>
-                                    {licenseSettings}
-                                    {audits}
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('logs')}
-                                            onClick={this.handleClick.bind(this, 'logs', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.logs'
-                                                defaultMessage='Logs'
-                                            />
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
+                                        </span>
+                                    </h4>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu padded'>
+                                {licenseSettings}
+                                {audits}
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('logs')}
+                                        onClick={this.handleClick.bind(this, 'logs', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.logs'
+                                            defaultMessage='Logs'
+                                        />
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
                 </div>
 
                 <SelectTeamModal
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index f0324d7ce5..bbd9f8b280 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -54,6 +54,7 @@ export default class RhsThread extends React.Component {
         if ($('.post-right__scroll')[0]) {
             $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
         }
+        $('.sidebar--right .post-right__scroll').perfectScrollbar('update');
         this.resize();
     }
     componentWillUnmount() {
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index c8dbb9d3fc..caaf0f8444 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -184,6 +184,7 @@ class SearchBar extends React.Component {
                         onUserInput={this.handleUserInput}
                         listComponent={SearchSuggestionList}
                         providers={this.suggestionProviders}
+                        type='search'
                     />
                     {isSearching}
                     <Popover
diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index b7f0e3a360..dbec024ac7 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -139,6 +139,14 @@ export default class SuggestionBox extends React.Component {
                     {...newProps}
                 />
             );
+        } else if (this.props.type === 'search') {
+            textbox = (
+                <input
+                    ref='textbox'
+                    type='search'
+                    {...newProps}
+                />
+            );
         } else if (this.props.type === 'textarea') {
             textbox = (
                 <TextareaAutosize
@@ -166,7 +174,7 @@ SuggestionBox.defaultProps = {
 
 SuggestionBox.propTypes = {
     listComponent: React.PropTypes.func.isRequired,
-    type: React.PropTypes.oneOf(['input', 'textarea']).isRequired,
+    type: React.PropTypes.oneOf(['input', 'textarea', 'search']).isRequired,
     value: React.PropTypes.string.isRequired,
     onUserInput: React.PropTypes.func,
     providers: React.PropTypes.arrayOf(React.PropTypes.object),
diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss
index efef11ce9a..5d95759a2a 100644
--- a/webapp/sass/components/_buttons.scss
+++ b/webapp/sass/components/_buttons.scss
@@ -15,6 +15,16 @@
         }
     }
 
+    &.btn-danger {
+        color: $white;
+
+        &:hover,
+        &:focus,
+        &:active {
+            color: $white;
+        }
+    }
+
     &.btn-inactive {
         background: $light-gray;
         border-color: transparent;
diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss
index 499c4fad41..98c27ecdce 100644
--- a/webapp/sass/components/_search.scss
+++ b/webapp/sass/components/_search.scss
@@ -6,17 +6,19 @@
     }
 }
 
-.search-bar__container {
-    @include flex(0 0 56px);
-    padding: 12px 8px 0 0;
-
-    .sidebar--right {
-        &.move--left & {
+.sidebar--right {
+    &.move--left {
+        .search-bar__container {
             padding-right: 42px;
         }
     }
 }
 
+.search-bar__container {
+    @include flex(0 0 56px);
+    padding: 12px 8px 0 0;
+}
+
 .glyphicon-refresh-animate {
     @include animation(spin .7s infinite linear);
 }
@@ -95,7 +97,7 @@
     }
 
     .glyphicon-refresh-animate {
-        color: $dark-gray;
+        @include opacity(0.5);
         position: absolute;
         right: 27px;
         top: 27px;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 53ea6d3290..0e1a471cf5 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -14,23 +14,23 @@
 
     .post {
         .post__dropdown {
+            display: inline-block;
+            height: 20px;
             line-height: 9px;
+            text-align: center;
             text-decoration: none;
             width: 20px;
-            display: inline-block;
-            text-align: center;
-            height: 20px;
 
             &:after {
-                font-size: 20px;
                 content: '...';
+                font-size: 20px;
                 top: -3px;
             }
         }
 
         .comment-icon__container {
-            visibility: visible;
             display: none;
+            visibility: visible;
 
             &.icon--show {
                 display: inline-block;
@@ -57,8 +57,8 @@
         }
 
         .post__reply {
-            margin-right: 20px;
             float: right;
+            margin-right: 20px;
 
             svg {
                 top: 1px;
@@ -97,15 +97,15 @@
             width: 40px;
 
             img {
-                width: 32px;
                 height: 32px;
+                width: 32px;
             }
         }
     }
 
     .post-image__column {
-        width: 200px;
         height: 95px;
+        width: 200px;
     }
 
     .textarea-wrapper {
@@ -114,6 +114,7 @@
             display: none;
         }
     }
+
     .form-control {
         &.min-height {
             min-height: 100px;
@@ -132,6 +133,7 @@
     .tip-overlay {
         &.tip-overlay--chat {
             margin-left: 10px;
+
             .arrow {
                 left: 32px;
             }
@@ -142,20 +144,21 @@
         display: block;
 
         .file-details__preview {
-            display: block;
-            width: 100%;
-            height: 150px;
+            border-bottom: 1px solid #dddddd;
             border-right: none;
-            border-bottom: 1px solid #ddd;
+            display: block;
+            height: 150px;
+            width: 100%;
+
             img {
-                width: 64px;
                 height: 64px;
+                width: 64px;
             }
         }
 
         .file-details {
-            width: 100%;
             height: auto;
+            width: 100%;
         }
     }
 
@@ -165,9 +168,9 @@
 
     .modal-direct-channels {
         .member-count {
+            display: block;
             float: none;
             margin-top: 10px;
-            display: block;
         }
     }
 
@@ -181,9 +184,9 @@
         }
 
         .overlay__circle {
-            width: 300px;
             height: 300px;
             margin: -150px 0 0 -150px;
+            width: 300px;
         }
 
         .overlay__files {
@@ -212,9 +215,9 @@
     }
 
     .signup-team__container {
-        padding: 30px 0;
-        margin-bottom: 30px;
         font-size: .9em;
+        margin-bottom: 30px;
+        padding: 30px 0;
 
         .signup-team__name {
             font-size: 2em;
@@ -240,8 +243,8 @@
 
     .modal {
         .info__label {
-            text-align: left;
             padding-bottom: 5px;
+            text-align: left;
         }
 
         .modal-header {
@@ -250,8 +253,8 @@
             }
 
             button.close {
-                font-weight: normal;
                 font-size: 27px;
+                font-weight: normal;
             }
 
             .modal-title {
@@ -262,9 +265,9 @@
             .btn {
                 &.btn-primary {
                     display: block;
+                    float: none;
                     margin: 10px 0 6px;
                     width: 100%;
-                    float: none;
                 }
             }
         }
@@ -304,8 +307,8 @@
                         z-index: 5;
 
                         .modal-title {
-                            width: 100%;
                             text-align: center;
+                            width: 100%;
                         }
                     }
 
@@ -323,6 +326,7 @@
 
             .settings-table {
                 padding: 0;
+
                 .nav {
                     position: relative;
                     top: auto;
@@ -339,6 +343,7 @@
                         top: 14px;
                         right: 0;
                         padding-right: 0;
+
                         .fa {
                             display: inline-block;
                         }
@@ -347,6 +352,7 @@
                     &.minimize-settings {
                         padding: 0;
                         display: none;
+
                         .user-settings {
                             padding: 70px 20px 30px;
                         }
@@ -360,10 +366,10 @@
                 .nav {
                     > li {
                         > a {
-                            border-top: 1px solid #ddd;
+                            border-top: 1px solid #dddddd;
                             font-size: 1.1em;
                             line-height: 2.7;
-                            color: #555;
+                            color: #555555;
 
                             .glyphicon {
                                 margin-left: 7px;
@@ -438,25 +444,24 @@
     }
 
     .file-preview__remove {
-        width: 28px;
+        @include alpha-property(background, $black, .5);
         height: 28px;
         left: auto;
         right: 0;
-        top: 0;
-        background: #444;
-        background: rgba(#000, .5);
         text-align: center;
+        top: 0;
+        width: 28px;
 
         &:after {
             display: none;
         }
 
         i {
-            line-height: 29px;
-            top: auto;
-            right: auto;
-            position: relative;
             font-size: 16px;
+            line-height: 29px;
+            position: relative;
+            right: auto;
+            top: auto;
         }
     }
 
@@ -467,10 +472,10 @@
                 margin: 0 -15px;
 
                 .dropdown__icon {
-                    width: 4px;
-                    height: 16px;
                     @include background-size(100% 100%);
                     display: inline-block;
+                    height: 16px;
+                    width: 4px;
                 }
             }
 
@@ -502,10 +507,11 @@
 
     .footer-pane {
         .footer-link {
-            padding: 0;
-            width: 100%;
-            text-align: right;
             line-height: 1.7;
+            padding: 0;
+            text-align: right;
+            width: 100%;
+
             &.copyright {
                 width: 100%;
             }
@@ -517,10 +523,10 @@
     }
 
     .search-bar__container {
-        padding: 0;
         @include flex(0 0 44px);
         background: $primary-color;
-        color: #fff;
+        color: $white;
+        padding: 0;
 
         &.focused {
             .sidebar__collapse {
@@ -534,40 +540,40 @@
             }
 
             .search__clear {
-                @include translateX(0px);
+                @include translateX(0);
             }
         }
+
         .search__form {
-            border: none;
-            @include translateX(0px);
-            padding: 7px 20px 0 49px;
-            height: 45px;
-            position: relative;
             @include single-transition(all, .2s, linear);
+            @include translateX(0);
+            border: none;
+            height: 45px;
+            padding: 7px 20px 0 49px;
+            position: relative;
 
             .glyphicon-refresh-animate {
+                color: $black;
                 right: 33px;
                 top: 15px;
-                color: #fff;
-                color: rgba(255,255,255,.5);
             }
 
             .form-control {
-                border: none;
-                padding: 0 10px 0 31px;
-                background: rgba(black, .2);
                 @include border-radius(3px);
-                color: #444;
-                background: #fff;
+                background: $white;
+                border: none;
+                color: $dark-gray;
+                padding: 0 10px 0 31px;
             }
         }
     }
+
     .sidebar--menu {
         @include single-transition(transform, .5s, ease);
         @include translate3d(290px, 0, 0);
-        width: 290px;
         border: none;
         display: block;
+        width: 290px;
 
         &.move--left {
             @include translate3d(0, 0, 0);
@@ -627,7 +633,7 @@
 
                     ul {
                         clear: both;
-                        background: #fff;
+                        background: #ffffff;
                         border-radius: 3px;
                         top: 5px;
                         position: relative;
@@ -795,6 +801,7 @@
             }
         }
     }
+
     .activity-log__table {
         > div {
             display: block;
@@ -805,8 +812,8 @@
         }
 
         .activity-log__action {
-            text-align: left;
             margin-top: 10px;
+            text-align: left;
         }
     }
 }
@@ -816,8 +823,8 @@
         .settings-modal {
             .settings-table {
                 .security-links {
-                    margin-bottom: 10px;
                     display: block;
+                    margin-bottom: 10px;
 
                     &:last-child {
                         margin-bottom: 0;
@@ -850,11 +857,11 @@
 
         .member-drop,
         .member-role {
-            position: relative;
-            margin: 0px 0 0 44px;
+            margin: 0 0 0 44px;
             padding: 5px 0;
-            top: 0;
+            position: relative;
             right: 0;
+            top: 0;
         }
 
         .open > .dropdown-menu {