diff --git a/frontend/components/KolideAce/_styles.scss b/frontend/components/KolideAce/_styles.scss index 32f84e3fc971..03f019daf3dc 100644 --- a/frontend/components/KolideAce/_styles.scss +++ b/frontend/components/KolideAce/_styles.scss @@ -21,10 +21,8 @@ } &__hint { - font-size: 14px; + font-size: $x-small; font-weight: $regular; - line-height: 1.57; - letter-spacing: 1px; color: $core-medium-blue-grey; code { diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index 91fb8a5bc6ea..c01f4f7913c4 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -78,7 +78,8 @@ $base-class: 'button'; @include button-variant($white, $inverse-hover, $core-blue); color: $core-blue; border: 2px solid $core-blue; - border-bottom-color: $core-blue; + height: 40px; + line-height: $x-small; &:active { border-bottom-color: $core-blue; @@ -89,7 +90,8 @@ $base-class: 'button'; @include button-variant($white, $inverse-hover, $alert); color: $alert; border: 2px solid $alert; - border-bottom-color: $white; + height: 40px; + line-height: $x-small; &:active { border-bottom-color: $alert; diff --git a/frontend/components/forms/FormField/_styles.scss b/frontend/components/forms/FormField/_styles.scss index 180298a1af40..debd11205813 100644 --- a/frontend/components/forms/FormField/_styles.scss +++ b/frontend/components/forms/FormField/_styles.scss @@ -1,11 +1,9 @@ .form-field { - margin-bottom: $pad-small; + margin-bottom: 24px; &__label { font-size: $x-small; font-weight: $regular; - font-style: normal; - font-stretch: normal; color: $core-black; display: block; margin-bottom: 4px; @@ -16,10 +14,7 @@ } &__hint { - font-size: 14px; font-weight: $regular; - line-height: 1.57; - letter-spacing: 1px; color: $core-medium-blue-grey; code { diff --git a/frontend/components/forms/LabelForm/LabelForm.jsx b/frontend/components/forms/LabelForm/LabelForm.jsx index be5e3cf8ec1c..1c4d870bb0bf 100644 --- a/frontend/components/forms/LabelForm/LabelForm.jsx +++ b/frontend/components/forms/LabelForm/LabelForm.jsx @@ -59,8 +59,8 @@ class LabelForm extends Component { const { onLoad } = this; const isBuiltin = formData && (formData.label_type === 'builtin' || formData.type === 'status'); const isManual = formData && formData.label_membership_type === 'manual'; - const headerText = isEdit ? 'Edit Label' : 'New Label'; - const saveBtnText = isEdit ? 'Update Label' : 'Save Label'; + const headerText = isEdit ? 'Edit label' : 'New label'; + const saveBtnText = isEdit ? 'Update label' : 'Save label'; const aceHintText = isEdit ? 'Label queries are immutable. To change the query, delete this label and create a new one.' : ''; if (isBuiltin) { diff --git a/frontend/components/forms/LabelForm/_styles.scss b/frontend/components/forms/LabelForm/_styles.scss index a7f7422cea8c..45af36f91f4f 100644 --- a/frontend/components/forms/LabelForm/_styles.scss +++ b/frontend/components/forms/LabelForm/_styles.scss @@ -1,15 +1,13 @@ .label-form { - &__wrapper { - padding: $pad-base; - } &__label-title, &__label-description { - width: 50%; + width: 100%; } &__button-wrap { - text-align: right; + display: flex; + justify-content: flex-end; .query-form__run-query-btn, .query-form__stop-query-btn { @@ -21,13 +19,16 @@ } } - &__save-btn, &__cancel-btn { - margin-right: $pad-xsmall; + margin-right: 14px; + } + + &__save-btn { + padding: 7px 28px; } &__text-editor-wrapper { - margin: $pad-base 0; + margin: 24px 0; } } diff --git a/frontend/components/forms/fields/Dropdown/_styles.scss b/frontend/components/forms/fields/Dropdown/_styles.scss index 011a3b26f2a4..13996d9465b5 100644 --- a/frontend/components/forms/fields/Dropdown/_styles.scss +++ b/frontend/components/forms/fields/Dropdown/_styles.scss @@ -33,13 +33,16 @@ background-color: $ui-light-grey; border-radius: 4px; height: 40px; + + .Select-value { + border: 0; + } } .Select-value { - font-size: $medium; - border-radius: 2px; - background-color: #fff; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 0 0 $ui-medium-grey; + font-size: $small; + border-radius: 4px; + background-color: $ui-light-grey; border: solid 1px $ui-borders; .Select-value-icon { @@ -90,7 +93,7 @@ } .Select-arrow { - border-top-color: $core-blue; + border-top-color: $core-dark-blue-grey; } &.is-focused { @@ -117,27 +120,24 @@ } } - &.is-open { - .Select-control { - box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.08); - } - } - .Select-menu-outer { - margin-top: 2px; - box-shadow: 0 1px 3px 1px rgba($black, 0.05); - border: solid 1px $ui-borders; - border-radius: 2px; + margin-top: 4px; + box-shadow: 0 4px 10px rgba(52, 59, 96, 0.15); + border-radius: 4px; z-index: 6; + overflow: hidden; + border: 0; } .Select-option { color: $core-dark-blue-grey; - font-size: $medium; + font-size: $x-small; + margin: 6px 0; + padding: 6px 16px; + display: block; &.is-focused { - background-color: $core-blue; - color: $white; + background-color: $core-blue-selected; .Select-icon { color: $core-blue-ultralight; diff --git a/frontend/components/forms/fields/InputField/_styles.scss b/frontend/components/forms/fields/InputField/_styles.scss index 707884149b0b..5404cf2d2f9d 100644 --- a/frontend/components/forms/fields/InputField/_styles.scss +++ b/frontend/components/forms/fields/InputField/_styles.scss @@ -17,7 +17,6 @@ &:focus { outline: none; - box-shadow: inset 0 0 8px 0 rgba($black, 0.1); border-color: $core-purple; border-bottom-color: $core-blue; } @@ -31,10 +30,8 @@ border-color: $alert; background-color: $alert-light; color: $white; - box-shadow: inset 0 -4px 4px 0 rgba($black, 0.1); &:focus { - box-shadow: inset 0 0 8px 0 rgba($black, 0.1); border-bottom-color: $alert; background-color: $white; color: $core-dark-blue-grey; diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss index 49fffdd7570e..3f95a5446443 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss +++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss @@ -119,7 +119,6 @@ .Select-control { border: 1px solid $ui-borders; border-bottom-color: $core-blue; - box-shadow: inset 0 0 8px 0 rgba($black, 0.1); } } } diff --git a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx index bf3c11917d57..ea828118bcf1 100644 --- a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx +++ b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx @@ -83,7 +83,7 @@ class QuerySidePanel extends Component { return (
-

Table Documentation

+

Documentation

{renderTableSelect()}

{description}

diff --git a/frontend/components/side_panels/QuerySidePanel/_styles.scss b/frontend/components/side_panels/QuerySidePanel/_styles.scss index 8e695c1a06a7..053e93ce0dc9 100644 --- a/frontend/components/side_panels/QuerySidePanel/_styles.scss +++ b/frontend/components/side_panels/QuerySidePanel/_styles.scss @@ -1,18 +1,19 @@ .query-side-panel { - padding: 0 $pad-small; + padding: 0 28px; &__header { - margin: 0 0 12px; - padding: 0 0 5px; - font-size: 16px; + margin: 0 0 16px; + font-size: $x-small; font-weight: $bold; - letter-spacing: -0.5px; - color: $core-dark-blue-grey; - border-bottom: solid 1px $ui-borders; + color: $core-darkest-blue-grey; } &__choose-table { - margin-bottom: 24px; + margin: 40px 0 16px; + + .form-field { + margin-bottom: 16px; + } .Select { margin: 0 0 $pad-half; @@ -20,9 +21,8 @@ } &__description { - font-size: 14px; - line-height: 1.43; - letter-spacing: 0.5px; + font-size: $x-small; + font-style: italic; color: $core-medium-blue-grey; margin: 0; } @@ -84,8 +84,7 @@ border-top: 1px solid $ui-borders; color: $core-dark-blue-grey; font-size: px-to-rem(14); - padding-bottom: $pad-half; - padding-top: $pad-half; + padding: 12px 0; &:first-of-type { border: 0; @@ -93,13 +92,13 @@ } &__name { - line-height: 28px; - border-radius: 3px; - background-color: $ui-light-grey; - border: solid 1px #dce2f7; - color: #858495; - padding: 0 13px; + border-radius: 4px; + border: solid 1px $core-dark-blue-grey; + padding: 4px 10px; box-sizing: border-box; + font-size: $xx-small; + font-weight: $bold; + color: $core-dark-blue-grey; } &__description { @@ -108,8 +107,7 @@ } &__type { - font-size: 14px; - letter-spacing: 0.7px; + font-size: $x-small; color: $core-dark-blue-grey; } @@ -117,7 +115,7 @@ margin-left: 12px; vertical-align: text-bottom; font-size: 20px; - color: #c1c8e1; + color: $core-dark-blue-grey; } } diff --git a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss index 99bd5560ab84..87eefbe25e43 100644 --- a/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss +++ b/frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss @@ -5,7 +5,6 @@ border-left: 1px solid $ui-medium-grey; overflow: auto; width: $sidepanel-width; - margin-left: $pad-base; @include breakpoint(smalldesk) { width: $sidepanel-tablet-width; diff --git a/frontend/layouts/CoreLayout/_styles.scss b/frontend/layouts/CoreLayout/_styles.scss index 1fe46418bbdd..3b86ba820f26 100644 --- a/frontend/layouts/CoreLayout/_styles.scss +++ b/frontend/layouts/CoreLayout/_styles.scss @@ -6,17 +6,17 @@ .core-wrapper { flex-grow: 1; margin: 0; - padding: 0 0 0 $pad-base; + padding: 0; max-width: calc(100% - 217px); position: relative; background-color: $white; &--small { - max-width: calc(100% - 73px); + max-width: calc(100% - 55px); } @include breakpoint(smalldesk) { - max-width: calc(100% - 73px); + max-width: calc(100% - 55px); } } diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx index d04ef098cd39..32b6f9754dd4 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx @@ -352,9 +352,9 @@ export class ManageHostsPage extends PureComponent { } return ( -
+
- +
); } @@ -408,16 +408,18 @@ export class ManageHostsPage extends PureComponent { return (
- {renderDeleteButton()} -

- {displayText} -

-
-

{description || {defaultDescription}}

-
-
-

{hostsTotalDisplay}

+
+

+ {displayText} +

+
+

{description || {defaultDescription}}

+
+
+

{hostsTotalDisplay}

+
+ {renderDeleteButton()}
); } diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx index f1f2bef5c6a5..8f995d2e2c23 100644 --- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx +++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx @@ -137,10 +137,10 @@ describe('ManageHostsPage - component', () => { expect(page.find('LabelForm').length).toEqual(1); }); - it('displays "New Label" as the query form header', () => { + it('displays "New label" as the query form header', () => { const page = mount(component); - expect(page.find('LabelForm').text()).toContain('New Label'); + expect(page.find('LabelForm').text()).toContain('New label'); }); }); @@ -212,7 +212,7 @@ describe('ManageHostsPage - component', () => { it('renders the LabelForm when Edit is clicked', () => { const Page = mount(Component); const EditButton = Page - .find('.manage-hosts__delete-label') + .find('.manage-hosts__label-actions') .find('Button') .first(); @@ -238,7 +238,7 @@ describe('ManageHostsPage - component', () => { }); const page = mount(component); const deleteBtn = page - .find('.manage-hosts__delete-label') + .find('.manage-hosts__label-actions') .find('Button') .last(); diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss index 3411aa723453..0bbcd806bd8d 100644 --- a/frontend/pages/hosts/ManageHostsPage/_styles.scss +++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss @@ -1,5 +1,4 @@ .manage-hosts { - padding: 50px 30px 0; min-height: 90vh; .header-wrap { @@ -11,15 +10,17 @@ margin-bottom: 16px; } - #label-header { + .ace-kolide { // We set this equal to the max-width of the host-container to preserve visual consistency max-width: 1206px; } &__header { - .ace-kolide { - margin: 12px 0; - } + display: flex; + } + + &__text { + margin-right: 16px; } &__title { @@ -47,13 +48,11 @@ } } - &__delete-label { - float: right; - margin-bottom: 15px; + &__label-actions { button { &:first-child { - margin-right: 15px; + margin-right: 12px; } } } diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss index b051d819a315..43e862f25190 100644 --- a/frontend/styles/global/_global.scss +++ b/frontend/styles/global/_global.scss @@ -52,6 +52,7 @@ a { } .body-wrap { + padding: 50px 30px 0; border-radius: 3px; background-color: $white; border: solid 1px $white; @@ -68,14 +69,14 @@ a { min-width: 610px; // 62px includes - max-width: calc(100vw - #{$nav-width} - #{$pad-base} - #{$pad-base} - #{$pad-body} - #{$pad-body} - #{$pad-borders} - #{$sidepanel-width}); + max-width: calc(100vw - #{$nav-width} - #{$pad-body} - #{$pad-body} - #{$pad-borders} - #{$sidepanel-width}); @at-root .core-wrapper--small & { - max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-base} - #{$pad-base} - #{$pad-body} - #{$pad-body} - #{pad-borders} #{$sidepanel-tablet-width}); + max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-body} - #{$pad-body} - #{$pad-borders} - #{$sidepanel-tablet-width}); } @include breakpoint(smalldesk) { - max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-base} - #{$pad-base} - #{$pad-body} - #{$pad-body} - #{pad-borders} - #{$sidepanel-tablet-width}); + max-width: calc(100vw - #{$nav-tablet-width} - #{$pad-body} - #{$pad-body} - #{$pad-borders} - #{$sidepanel-tablet-width}); } } }