PLT-2395 - Improvements to backstage css

10 files changed, 271 insertions, 243 deletions

diff --git a/webapp/components/backstage/add_incoming_webhook.jsx b/webapp/components/backstage/add_incoming_webhook.jsx
index fa7531fc6..83027c6b3 100644
--- a/webapp/components/backstage/add_incoming_webhook.jsx
+++ b/webapp/components/backstage/add_incoming_webhook.jsx
@@ -96,10 +96,10 @@ export default class AddIncomingWebhook extends React.Component {
 
     render() {
         return (
-            <div className='backstage row'>
+            <div className='backstage-content row'>
                 <div className='add-incoming-webhook'>
-                    <div className='backstage__header'>
-                        <h1 className='text'>
+                    <div className='backstage-header'>
+                        <h1>
                             <FormattedMessage
                                 id='add_incoming_webhook.header'
                                 defaultMessage='Add Incoming Webhook'
@@ -107,81 +107,91 @@ export default class AddIncomingWebhook extends React.Component {
                         </h1>
                     </div>
                 </div>
-                <form className='add-incoming-webhook__body'>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='name'
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.name'
-                                defaultMessage='Name'
-                            />
-                        </label>
-                        <input
-                            id='name'
-                            type='text'
-                            value={this.state.name}
-                            onChange={this.updateName}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='description'
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.description'
-                                defaultMessage='Description'
-                            />
-                        </label>
-                        <input
-                            id='description'
-                            type='text'
-                            value={this.state.description}
-                            onChange={this.updateDescription}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='channelId'
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.channel'
-                                defaultMessage='Channel'
-                            />
-                        </label>
-                        <ChannelSelect
-                            id='channelId'
-                            value={this.state.channelId}
-                            onChange={this.updateChannelId}
-                        />
-                    </div>
-                    <div className='add-integration__submit-row'>
-                        <Link
-                            className='btn btn-sm'
-                            to={'/settings/integrations/add'}
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.cancel'
-                                defaultMessage='Cancel'
-                            />
-                        </Link>
-                        <SpinnerButton
-                            className='btn btn-primary'
-                            type='submit'
-                            spinning={this.state.saving}
-                            onClick={this.handleSubmit}
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.save'
-                                defaultMessage='Save'
-                            />
-                        </SpinnerButton>
-                    </div>
-                    <FormError errors={[this.state.serverError, this.state.clientError]}/>
-                </form>
+                <div className='backstage-form'>
+                    <form className='form-horizontal'>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='name'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.name'
+                                    defaultMessage='Name'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='name'
+                                    type='text'
+                                    className='form-control'
+                                    value={this.state.name}
+                                    onChange={this.updateName}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='description'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.description'
+                                    defaultMessage='Description'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='description'
+                                    type='text'
+                                    className='form-control'
+                                    value={this.state.description}
+                                    onChange={this.updateDescription}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='channelId'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.channel'
+                                    defaultMessage='Channel'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <ChannelSelect
+                                    id='channelId'
+                                    value={this.state.channelId}
+                                    onChange={this.updateChannelId}
+                                />
+                            </div>
+                        </div>
+                        <div className='backstage-form__footer'>
+                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
+                            <Link
+                                className='btn btn-sm'
+                                to={'/settings/integrations/add'}
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </Link>
+                            <SpinnerButton
+                                className='btn btn-primary'
+                                type='submit'
+                                spinning={this.state.saving}
+                                onClick={this.handleSubmit}
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.save'
+                                    defaultMessage='Save'
+                                />
+                            </SpinnerButton>
+                        </div>
+                    </form>
+                </div>
             </div>
         );
     }
diff --git a/webapp/components/backstage/add_integration.jsx b/webapp/components/backstage/add_integration.jsx
index cebc1e8b0..5f4a69bfe 100644
--- a/webapp/components/backstage/add_integration.jsx
+++ b/webapp/components/backstage/add_integration.jsx
@@ -57,18 +57,16 @@ export default class AddIntegration extends React.Component {
         }
 
         return (
-            <div className='backstage row'>
-                <div className='add-integration'>
-                    <div className='backstage__header'>
-                        <h1 className='text'>
-                            <FormattedMessage
-                                id='add_integration.header'
-                                defaultMessage='Add Integration'
-                            />
-                        </h1>
-                    </div>
+            <div className='backstage-content row'>
+                <div className='backstage-header'>
+                    <h1>
+                        <FormattedMessage
+                            id='add_integration.header'
+                            defaultMessage='Add Integration'
+                        />
+                    </h1>
                 </div>
-                <div className='add-integration__options'>
+                <div>
                     {options}
                 </div>
             </div>
diff --git a/webapp/components/backstage/add_integration_option.jsx b/webapp/components/backstage/add_integration_option.jsx
index 3c3caf2f4..b17ebb185 100644
--- a/webapp/components/backstage/add_integration_option.jsx
+++ b/webapp/components/backstage/add_integration_option.jsx
@@ -21,16 +21,16 @@ export default class AddIntegrationOption extends React.Component {
         return (
             <Link
                 to={link}
-                className='add-integration-option'
+                className='add-integration'
             >
                 <img
-                    className='add-integration-option__image'
+                    className='add-integration__image'
                     src={image}
                 />
-                <div className='add-integration-option__title'>
+                <div className='add-integration__title'>
                     {title}
                 </div>
-                <div className='add-integration-option__description'>
+                <div className='add-integration__description'>
                     {description}
                 </div>
             </Link>
diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx
index 3ae2f8606..5d98138df 100644
--- a/webapp/components/backstage/add_outgoing_webhook.jsx
+++ b/webapp/components/backstage/add_outgoing_webhook.jsx
@@ -128,10 +128,10 @@ export default class AddOutgoingWebhook extends React.Component {
 
     render() {
         return (
-            <div className='backstage row'>
+            <div className='backstage-content row'>
                 <div className='add-outgoing-webhook'>
-                    <div className='backstage__header'>
-                        <h1 className='text'>
+                    <div className='backstage-header'>
+                        <h1>
                             <FormattedMessage
                                 id='add_outgoing_webhook.header'
                                 defaultMessage='Add Outgoing Webhook'
@@ -139,115 +139,131 @@ export default class AddOutgoingWebhook extends React.Component {
                         </h1>
                     </div>
                 </div>
-                <form className='add-outgoing-webhook__body'>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='name'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.name'
-                                defaultMessage='Name'
-                            />
-                        </label>
-                        <input
-                            id='name'
-                            type='text'
-                            value={this.state.name}
-                            onChange={this.updateName}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='description'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.description'
-                                defaultMessage='Description'
-                            />
-                        </label>
-                        <input
-                            id='description'
-                            type='text'
-                            value={this.state.description}
-                            onChange={this.updateDescription}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='channelId'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.channel'
-                                defaultMessage='Channel'
-                            />
-                        </label>
-                        <ChannelSelect
-                            id='channelId'
-                            value={this.state.channelId}
-                            onChange={this.updateChannelId}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='triggerWords'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.triggerWords'
-                                defaultMessage='Trigger Words (One Per Line)'
-                            />
-                        </label>
-                        <textarea
-                            id='triggerWords'
-                            rows='3'
-                            value={this.state.triggerWords}
-                            onChange={this.updateTriggerWords}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='callbackUrls'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.callbackUrls'
-                                defaultMessage='Callback URLs (One Per Line)'
-                            />
-                        </label>
-                        <textarea
-                            id='callbackUrls'
-                            rows='3'
-                            value={this.state.callbackUrls}
-                            onChange={this.updateCallbackUrls}
-                        />
-                    </div>
-                    <div className='add-integration__submit-row'>
-                        <Link
-                            className='btn btn-sm'
-                            to={'/settings/integrations/add'}
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.cancel'
-                                defaultMessage='Cancel'
-                            />
-                        </Link>
-                        <SpinnerButton
-                            className='btn btn-primary'
-                            type='submit'
-                            spinning={this.state.saving}
-                            onClick={this.handleSubmit}
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.save'
-                                defaultMessage='Save'
-                            />
-                        </SpinnerButton>
-                    </div>
-                    <FormError errors={[this.state.serverError, this.state.clientError]}/>
-                </form>
+                <div className='backstage-form'>
+                    <form className='form-horizontal'>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='name'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.name'
+                                    defaultMessage='Name'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='name'
+                                    type='text'
+                                    className='form-control'
+                                    value={this.state.name}
+                                    onChange={this.updateName}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='description'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.description'
+                                    defaultMessage='Description'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='description'
+                                    type='text'
+                                    className='form-control'
+                                    value={this.state.description}
+                                    onChange={this.updateDescription}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='channelId'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.channel'
+                                    defaultMessage='Channel'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <ChannelSelect
+                                    id='channelId'
+                                    value={this.state.channelId}
+                                    onChange={this.updateChannelId}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='triggerWords'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.triggerWords'
+                                    defaultMessage='Trigger Words (One Per Line)'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <textarea
+                                    id='triggerWords'
+                                    rows='3'
+                                    className='form-control'
+                                    value={this.state.triggerWords}
+                                    onChange={this.updateTriggerWords}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='callbackUrls'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.callbackUrls'
+                                    defaultMessage='Callback URLs (One Per Line)'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <textarea
+                                    id='callbackUrls'
+                                    rows='3'
+                                    className='form-control'
+                                    value={this.state.callbackUrls}
+                                    onChange={this.updateCallbackUrls}
+                                />
+                            </div>
+                        </div>
+                        <div className='backstage-form__footer'>
+                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
+                            <Link
+                                className='btn btn-sm'
+                                to={'/settings/integrations/add'}
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </Link>
+                            <SpinnerButton
+                                className='btn btn-primary'
+                                type='submit'
+                                spinning={this.state.saving}
+                                onClick={this.handleSubmit}
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.save'
+                                    defaultMessage='Save'
+                                />
+                            </SpinnerButton>
+                        </div>
+                    </form>
+                </div>
             </div>
         );
     }
diff --git a/webapp/components/backstage/backstage_category.jsx b/webapp/components/backstage/backstage_category.jsx
index e8b0b57ae..913c7562c 100644
--- a/webapp/components/backstage/backstage_category.jsx
+++ b/webapp/components/backstage/backstage_category.jsx
@@ -50,7 +50,7 @@ export default class BackstageCategory extends React.Component {
         }
 
         return (
-            <li className='backstage__sidebar__category'>
+            <li className='backstage-sidebar__category'>
                 <Link
                     to={link}
                     className='category-title'
diff --git a/webapp/components/backstage/backstage_navbar.jsx b/webapp/components/backstage/backstage_navbar.jsx
index 555165791..d1dac6043 100644
--- a/webapp/components/backstage/backstage_navbar.jsx
+++ b/webapp/components/backstage/backstage_navbar.jsx
@@ -39,9 +39,9 @@ export default class BackstageNavbar extends React.Component {
         }
 
         return (
-            <div className='backstage__navbar row'>
+            <div className='backstage-navbar row'>
                 <Link
-                    className='backstage__navbar__back'
+                    className='backstage-navbar__back'
                     to={`/${this.state.team.display_name}/channels/town-square`}
                 >
                     <i className='fa fa-angle-left'/>
diff --git a/webapp/components/backstage/backstage_sidebar.jsx b/webapp/components/backstage/backstage_sidebar.jsx
index 63a0df5cb..13c4f8b50 100644
--- a/webapp/components/backstage/backstage_sidebar.jsx
+++ b/webapp/components/backstage/backstage_sidebar.jsx
@@ -10,7 +10,7 @@ import {FormattedMessage} from 'react-intl';
 export default class BackstageSidebar extends React.Component {
     render() {
         return (
-            <div className='backstage__sidebar'>
+            <div className='backstage-sidebar'>
                 <ul>
                     <BackstageCategory
                         name='integrations'
diff --git a/webapp/components/backstage/installed_incoming_webhook.jsx b/webapp/components/backstage/installed_incoming_webhook.jsx
index 4ca421a02..f65cf6327 100644
--- a/webapp/components/backstage/installed_incoming_webhook.jsx
+++ b/webapp/components/backstage/installed_incoming_webhook.jsx
@@ -35,26 +35,26 @@ export default class InstalledIncomingWebhook extends React.Component {
         const channelName = channel ? channel.display_name : 'cannot find channel';
 
         return (
-            <div className='installed-integrations__item installed-integrations__incoming-webhook'>
-                <div className='details'>
-                    <div className='details-row'>
-                        <span className='name'>
+            <div className='backstage-list__item'>
+                <div className='item-details'>
+                    <div className='item-details__row'>
+                        <span className='item-details__name'>
                             {channelName}
                         </span>
-                        <span className='type'>
+                        <span className='item-details__type'>
                             <FormattedMessage
                                 id='installed_integrations.incomingWebhookType'
                                 defaultMessage='(Incoming Webhook)'
                             />
                         </span>
                     </div>
-                    <div className='details-row'>
-                        <span className='description'>
+                    <div className='item-details__row'>
+                        <span className='item-details__description'>
                             {Utils.getWindowLocationOrigin() + '/hooks/' + incomingWebhook.id}
                         </span>
                     </div>
                 </div>
-                <div className='actions'>
+                <div className='item-actions'>
                     <a
                         href='#'
                         onClick={this.handleDeleteClick}
diff --git a/webapp/components/backstage/installed_integrations.jsx b/webapp/components/backstage/installed_integrations.jsx
index ff0b6e4ec..fe84ae81a 100644
--- a/webapp/components/backstage/installed_integrations.jsx
+++ b/webapp/components/backstage/installed_integrations.jsx
@@ -98,9 +98,9 @@ export default class InstalledIntegrations extends React.Component {
         const fields = [];
 
         if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0) {
-            let filterClassName = 'type-filter';
+            let filterClassName = 'filter-sort';
             if (this.state.typeFilter === '') {
-                filterClassName += ' type-filter--selected';
+                filterClassName += ' filter-sort--active';
             }
 
             fields.push(
@@ -131,9 +131,9 @@ export default class InstalledIntegrations extends React.Component {
                 </span>
             );
 
-            let filterClassName = 'type-filter';
+            let filterClassName = 'filter-sort';
             if (this.state.typeFilter === 'incomingWebhooks') {
-                filterClassName += ' type-filter--selected';
+                filterClassName += ' filter-sort--active';
             }
 
             fields.push(
@@ -164,9 +164,9 @@ export default class InstalledIntegrations extends React.Component {
                 </span>
             );
 
-            let filterClassName = 'type-filter';
+            let filterClassName = 'filter-sort';
             if (this.state.typeFilter === 'outgoingWebhooks') {
-                filterClassName += ' type-filter--selected';
+                filterClassName += ' filter-sort--active';
             }
 
             fields.push(
@@ -188,7 +188,7 @@ export default class InstalledIntegrations extends React.Component {
         }
 
         return (
-            <div className='type-filters'>
+            <div className='backstage-filters__sort'>
                 {fields}
             </div>
         );
@@ -243,10 +243,10 @@ export default class InstalledIntegrations extends React.Component {
         }
 
         return (
-            <div className='backstage row'>
+            <div className='backstage-content row'>
                 <div className='installed-integrations'>
-                    <div className='backstage__header'>
-                        <h1 className='text'>
+                    <div className='backstage-header'>
+                        <h1>
                             <FormattedMessage
                                 id='installed_integrations.header'
                                 defaultMessage='Installed Integrations'
@@ -269,17 +269,21 @@ export default class InstalledIntegrations extends React.Component {
                             </button>
                         </Link>
                     </div>
-                    <div className='installed-integrations__filters'>
+                    <div className='backstage-filters'>
                         {this.renderTypeFilters(this.state.incomingWebhooks, this.state.outgoingWebhooks)}
-                        <input
-                            type='search'
-                            placeholder={Utils.localizeMessage('installed_integrations.search', 'Search Integrations')}
-                            value={this.state.filter}
-                            onChange={this.updateFilter}
-                            style={{flexGrow: 0, flexShrink: 0}}
-                        />
+                        <div className='backstage-filter__search'>
+                            <i className='fa fa-search'></i>
+                            <input
+                                type='search'
+                                className='form-control'
+                                placeholder={Utils.localizeMessage('installed_integrations.search', 'Search Integrations')}
+                                value={this.state.filter}
+                                onChange={this.updateFilter}
+                                style={{flexGrow: 0, flexShrink: 0}}
+                            />
+                        </div>
                     </div>
-                    <div className='installed-integrations__list'>
+                    <div className='backstage-list'>
                         {integrations}
                     </div>
                 </div>
diff --git a/webapp/components/backstage/installed_outgoing_webhook.jsx b/webapp/components/backstage/installed_outgoing_webhook.jsx
index 12e1a5c81..fee427260 100644
--- a/webapp/components/backstage/installed_outgoing_webhook.jsx
+++ b/webapp/components/backstage/installed_outgoing_webhook.jsx
@@ -43,21 +43,21 @@ export default class InstalledOutgoingWebhook extends React.Component {
         const channelName = channel ? channel.display_name : 'cannot find channel';
 
         return (
-            <div className='installed-integrations__item installed-integrations__outgoing-webhook'>
-                <div className='details'>
-                    <div className='details-row'>
-                        <span className='name'>
+            <div className='backstage-list__item'>
+                <div className='item-details'>
+                    <div className='item-details__row'>
+                        <span className='item-details__name'>
                             {channelName}
                         </span>
-                        <span className='type'>
+                        <span className='item-details__type'>
                             <FormattedMessage
                                 id='installed_integrations.outgoingWebhookType'
                                 defaultMessage='(Outgoing Webhook)'
                             />
                         </span>
                     </div>
-                    <div className='details-row'>
-                        <span className='description'>
+                    <div className='item-details__row'>
+                        <span className='item-details__description'>
                             {Utils.getWindowLocationOrigin() + '/hooks/' + outgoingWebhook.id}
                             {' - '}
                             {outgoingWebhook.token}