summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--webapp/components/backstage/add_incoming_webhook.jsx166
-rw-r--r--webapp/components/backstage/add_integration.jsx20
-rw-r--r--webapp/components/backstage/add_integration_option.jsx8
-rw-r--r--webapp/components/backstage/add_outgoing_webhook.jsx240
-rw-r--r--webapp/components/backstage/backstage_category.jsx2
-rw-r--r--webapp/components/backstage/backstage_navbar.jsx4
-rw-r--r--webapp/components/backstage/backstage_sidebar.jsx2
-rw-r--r--webapp/components/backstage/installed_incoming_webhook.jsx16
-rw-r--r--webapp/components/backstage/installed_integrations.jsx42
-rw-r--r--webapp/components/backstage/installed_outgoing_webhook.jsx14
-rw-r--r--webapp/sass/responsive/_desktop.scss5
-rw-r--r--webapp/sass/responsive/_mobile.scss38
-rw-r--r--webapp/sass/responsive/_tablet.scss13
-rw-r--r--webapp/sass/routes/_backstage.scss245
-rw-r--r--webapp/sass/utils/_variables.scss2
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);
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-01 14:35:16 +0000