diff options
-rw-r--r-- | webapp/components/backstage/add_incoming_webhook.jsx | 166 | ||||
-rw-r--r-- | webapp/components/backstage/add_integration.jsx | 20 | ||||
-rw-r--r-- | webapp/components/backstage/add_integration_option.jsx | 8 | ||||
-rw-r--r-- | webapp/components/backstage/add_outgoing_webhook.jsx | 240 | ||||
-rw-r--r-- | webapp/components/backstage/backstage_category.jsx | 2 | ||||
-rw-r--r-- | webapp/components/backstage/backstage_navbar.jsx | 4 | ||||
-rw-r--r-- | webapp/components/backstage/backstage_sidebar.jsx | 2 | ||||
-rw-r--r-- | webapp/components/backstage/installed_incoming_webhook.jsx | 16 | ||||
-rw-r--r-- | webapp/components/backstage/installed_integrations.jsx | 42 | ||||
-rw-r--r-- | webapp/components/backstage/installed_outgoing_webhook.jsx | 14 | ||||
-rw-r--r-- | webapp/sass/responsive/_desktop.scss | 5 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 38 | ||||
-rw-r--r-- | webapp/sass/responsive/_tablet.scss | 13 | ||||
-rw-r--r-- | webapp/sass/routes/_backstage.scss | 245 | ||||
-rw-r--r-- | webapp/sass/utils/_variables.scss | 2 |
15 files changed, 476 insertions, 341 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} diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss index 1ae4b6b70..3b36fb75f 100644 --- a/webapp/sass/responsive/_desktop.scss +++ b/webapp/sass/responsive/_desktop.scss @@ -48,6 +48,11 @@ } } + .backstage-content { + margin: 46px 46px 46px 150px; + } + + .inner-wrap { &.move--left { .file-overlay { diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 4e77849ce..38476485d 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -1,6 +1,16 @@ @charset 'UTF-8'; @media screen and (max-width: 768px) { + .backstage-filters { + display: block; + + .backstage-filter__search { + border-bottom: 1px solid $light-gray; + margin: 10px 0; + width: 100%; + } + } + .signup-team__container { font-size: 1em; } @@ -675,9 +685,9 @@ } .sidebar--right { - width: 100%; - right: 0; @include translate3d(100%, 0, 0); + right: 0; + width: 100%; z-index: 5; &.move--left { @@ -853,6 +863,30 @@ } @media screen and (max-width: 480px) { + .backstage-header { + h1 { + float: none; + margin-bottom: 15px; + } + + .add-integrations-link { + float: none; + } + } + + .add-integration { + width: 100%; + } + + .backstage-list__item { + display: block; + + .actions { + margin-top: 10px; + padding: 0; + } + } + .modal { .settings-modal { .settings-table { diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss index 6863e660b..db2a8d7b9 100644 --- a/webapp/sass/responsive/_tablet.scss +++ b/webapp/sass/responsive/_tablet.scss @@ -15,6 +15,19 @@ } } + .backstage-content { + margin: 30px; + max-width: 100%; + padding: 0; + } + + .backstage-sidebar { + height: auto; + padding: 30px 15px 0; + position: relative; + width: 100%; + } + .help__format-text { display: none; } diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss index 70bab99cb..729c8c912 100644 --- a/webapp/sass/routes/_backstage.scss +++ b/webapp/sass/routes/_backstage.scss @@ -1,103 +1,106 @@ -.backstage { - background-color: #f2f2f2; +.backstage-content { + background-color: $bg--gray; height: 100%; - padding-left: 260px; - padding-top: 45px; + margin: 46px auto; + max-width: 960px; + padding-left: 135px; } -.backstage__navbar { - background: white; - border-bottom: lightgray 1px solid; - margin: 0 -15px; - padding: 10px; +.backstage-navbar { + background: $white; + border-bottom: 1px solid $light-gray; + padding: 10px 20px; z-index: 10; } -.backstage__navbar__back { - color: black; +.backstage-navbar__back { + color: inherit; + text-decoration: none; .fa { + font-size: 1.1em; font-weight: bold; - margin-right: 5px; + margin-right: 7px; + } + + &:hover, + &:active { + color: inherit; } } -.backstage__sidebar { - position: absolute; +.backstage-sidebar { + height: 100%; left: 0; + padding: 50px 20px; + position: absolute; width: 260px; - height: 100%; - background-color: #f2f2f2; - padding-bottom: 20px; - padding-left: 20px; - padding-right: 20px; - padding-top: 45px; z-index: 5; ul { - padding: 0px; list-style: none; + padding: 0; } } -.backstage__sidebar__category { - border: lightgray 1px solid; +.backstage-sidebar__category { + border: 1px solid $light-gray; .category-title { - color: gray; display: block; - padding: 5px 10px; + line-height: 36px; + padding: 0 10px; position: relative; } .category-title--active { - color: black; + color: $black; } .category-title__text { - position: absolute; left: 2em; + position: absolute; } .sections { - background: white; - border-top: lightgray 1px solid; + background: $white; + border-top: 1px solid $light-gray; } - .section-title { + .section-title, + .subsection-title { display: block; + font-size: .95em; + line-height: 29px; padding-left: 2em; - } - - .subsection { + text-decoration: none; } .subsection-title { - display: block; padding-left: 3em; } - .section-title--active, .subsection-title--active { - background-color:#2388d6; - color: white; + .section-title--active, + .subsection-title--active { + background-color: $primary-color; + color: $white; + font-weight: 600; } } .backstage__sidebar__category + .backstage__sidebar__category { - border-top-width: 0px; + border-top-width: 0; } -.installed-integrations { - height: 100%; - max-width: 958px; -} - -.backstage__header { +.backstage-header { + @include clearfix; margin-bottom: 20px; width: 100%; - .text { - display: inline; + h1 { + float: left; + font-size: 20px; + margin: 5px 0; } .add-integrations-link { @@ -105,21 +108,22 @@ } } -.installed-integrations__filters { +.backstage-filters { display: flex; flex-direction: row; - margin-bottom: 8px; width: 100%; - .type-filters { + .backstage-filters__sort { flex-grow: 1; flex-shrink: 0; + line-height: 30px; - .type-filter { - &--selected { - color: black; + .filter-sort { + text-decoration: none; + + &.filter-sort--active { + color: inherit; cursor: default; - font-weight: bold; } } @@ -129,84 +133,135 @@ } } - .filter-box { + .backstage-filter__search { flex-grow: 0; flex-shrink: 0; + position: relative; + width: 270px; + + .fa { + @include opacity(.4); + left: 11px; + position: absolute; + top: 11px; + } + + input { + background: $white; + border-bottom: none; + padding-left: 30px; + } } } -.installed-integrations__list { - background-color: white; - border: lightgray 1px solid; - padding-bottom: 30px; - padding-left: 30px; - padding-right: 30px; - padding-top: 10px; +.backstage-list { + background-color: $white; + border: 1px solid $light-gray; + padding: 5px 15px; } -.installed-integrations__item { - border-bottom: lightgray 1px solid; +.backstage-list__item { + border-bottom: 1px solid $light-gray; display: flex; - padding: 20px; + padding: 20px 15px; + + &:last-child { + border: none; + } - .details { + .item-details { flex-grow: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; + } - .details-row + .details-row { - margin-top: 15px; - } + .item-details__row + .item-details__row { + @include clearfix; + margin-top: 10px; + text-overflow: ellipsis; + } - .name { - font-weight: bold; - margin-bottom: 1em; - } + .item-details__name { + font-weight: 600; + margin-bottom: 1em; + } - .type { - margin-left: 6px; - } + .item-details__type { + margin-left: 6px; + } - .description { - color: gray; - margin-bottom: 1em; - } + .item-details__description { + color: $dark-gray; + margin-bottom: 1em; } - .actions { + .list-item__actions { flex-grow: 0; flex-shrink: 0; padding-left: 20px; } } -.add-integration-option { - background-color: white; - border: lightgray 1px solid; +// Backstage Form + +.backstage-form { + background-color: $white; + border: 1px solid $light-gray; + padding: 40px 30px 30px; + + label { + font-weight: normal; + } + + .form-control { + background: $white; + + &:focus { + border-color: $primary-color; + } + } +} + +.backstage-form__footer { + border-top: 1px solid $light-gray; + margin-top: 2.5em; + padding-top: 1.8em; + text-align: right; + + .has-error { + float: left; + margin: 0; + } +} + +.add-integration { + background-color: $white; + border: 1px solid $light-gray; display: inline-block; height: 210px; - margin-right: 30px; + margin: 0 30px 20px 0; padding: 20px; text-align: center; + vertical-align: top; width: 250px; &:hover { color: default; text-decoration: none; } +} - &__image { - width: 80px; - height: 80px; - } +.add-integration__image { + height: 80px; + width: 80px; +} - &__title { - color: black; - margin-bottom: 10px; - } +.add-integration__title { + color: $black; + margin-bottom: 10px; +} - &__description { - color: gray; - } +.add-integration__description { + color: $dark-gray; } diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss index 345ab11e8..53004520e 100644 --- a/webapp/sass/utils/_variables.scss +++ b/webapp/sass/utils/_variables.scss @@ -8,7 +8,7 @@ $white: rgb(255, 255, 255); $black: rgb(0, 0, 0); $red: rgb(229, 101, 101); $yellow: rgb(255, 255, 0); -$light-gray: rgba(0, 0, 0, .06); +$light-gray: rgba(0, 0, 0, .15); $gray: rgba(0, 0, 0, .3); $dark-gray: rgba(0, 0, 0, .5); |