diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index fccb2919a9..0cd3f7ca91 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -99,6 +99,10 @@ $base-class: 'button'; &--disabled { opacity: 0.4; cursor: default; + + &:hover { + cursor: default; + } } &--small { diff --git a/frontend/components/forms/ConfigOptionsForm/ConfigOptionForm/ConfigOptionForm.jsx b/frontend/components/forms/ConfigOptionsForm/ConfigOptionForm/ConfigOptionForm.jsx index 4b44c54050..7559daf7bd 100644 --- a/frontend/components/forms/ConfigOptionsForm/ConfigOptionForm/ConfigOptionForm.jsx +++ b/frontend/components/forms/ConfigOptionsForm/ConfigOptionForm/ConfigOptionForm.jsx @@ -9,11 +9,11 @@ import formFieldInterface from 'interfaces/form_field'; import Icon from 'components/icons/Icon'; import InputField from 'components/forms/fields/InputField'; -const baseClass = 'config-option-form'; const fieldNames = ['name', 'value']; class ConfigOptionForm extends Component { static propTypes = { + baseClass: PropTypes.string, configNameOptions: PropTypes.arrayOf(dropdownOptionInterface), fields: PropTypes.shape({ name: formFieldInterface, @@ -32,7 +32,7 @@ class ConfigOptionForm extends Component { } render () { - const { configNameOptions, fields, formData } = this.props; + const { baseClass, configNameOptions, fields, formData } = this.props; const { handleRemove } = this; const { name, read_only: readOnly, value } = formData; const inputType = formData.type === 'int' ? 'number' : 'input'; @@ -40,8 +40,8 @@ class ConfigOptionForm extends Component { const disabled = readOnly || !!(name && value); return ( -
- +
  • + +
    • ); } @@ -48,10 +53,17 @@ class ConfigOptionsForm extends Component { const { renderConfigOptionForm } = this; return ( -
    - {completedOptions.map((option, idx) => { - return renderConfigOptionForm(option, idx); - })} +
    +
      +
    • + Option Name + Value +
      • + + {completedOptions.map((option, idx) => { + return renderConfigOptionForm(option, idx); + })} +
    ); } diff --git a/frontend/components/forms/ConfigOptionsForm/_styles.scss b/frontend/components/forms/ConfigOptionsForm/_styles.scss new file mode 100644 index 0000000000..1905d61fc4 --- /dev/null +++ b/frontend/components/forms/ConfigOptionsForm/_styles.scss @@ -0,0 +1,58 @@ +.config-options-form { + clear: both; + padding-top: 25px; + + &__options { + @include clearfix; + margin: 0; + padding: 25px 0 0; + list-style: none; + border-top: 1px solid $accent-medium; + } + + &__option { + border-bottom: 1px dashed $accent-medium; + margin: 0 0 $pad-small; + } + + &__option-header { + span { + font-size: 15px; + font-weight: $normal; + line-height: 2.5; + letter-spacing: 0.6px; + color: $text-medium; + text-transform: uppercase; + display: inline-block; + } + + &-name { + padding: 0 50px 0 40px; + width: 300px; + } + } + + &__form { + @include display(flex); + + .form-field--dropdown { + width: 300px; + margin-right: 50px; + margin-left: 15px; + } + + .form-field--input { + @include flex-grow(1); + } + } + + &__remove { + height: 40px; + color: $alert; + font-size: 24px; + } + + &__field { + width: 100%; + } +} diff --git a/frontend/components/forms/Form.jsx b/frontend/components/forms/Form.jsx index f4b40b01a4..668a59e069 100644 --- a/frontend/components/forms/Form.jsx +++ b/frontend/components/forms/Form.jsx @@ -136,14 +136,12 @@ export default (WrappedComponent, { fields, validate = defaultValidate }) => { const { errors } = this.state; return ( -
    - -
    + ); } } diff --git a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx index 57ec8e4e39..54d1cdb3b6 100644 --- a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx +++ b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx @@ -44,6 +44,7 @@ class QuerySidePanel extends Component { } onSelectTable = (value) => { + console.log('onSelectTable'); const { onOsqueryTableSelect } = this.props; onOsqueryTableSelect(value); diff --git a/frontend/components/side_panels/SiteNavHeader/_styles.scss b/frontend/components/side_panels/SiteNavHeader/_styles.scss index 74242e3378..a56ada5407 100644 --- a/frontend/components/side_panels/SiteNavHeader/_styles.scss +++ b/frontend/components/side_panels/SiteNavHeader/_styles.scss @@ -92,6 +92,10 @@ @include position(absolute, null 0 $pad-small null); color: $accent-medium; font-size: 9px; + + @include breakpoint(smalldesk) { + display: none; + } } } diff --git a/frontend/pages/config/ConfigOptionsPage/ConfigOptionsPage.jsx b/frontend/pages/config/ConfigOptionsPage/ConfigOptionsPage.jsx index a7a2176d8d..6d23a402f4 100644 --- a/frontend/pages/config/ConfigOptionsPage/ConfigOptionsPage.jsx +++ b/frontend/pages/config/ConfigOptionsPage/ConfigOptionsPage.jsx @@ -5,6 +5,7 @@ import { differenceWith, find, filter, isEqual, noop } from 'lodash'; import Button from 'components/buttons/Button'; import configOptionActions from 'redux/nodes/entities/config_options/actions'; import ConfigOptionsForm from 'components/forms/ConfigOptionsForm'; +import Icon from 'components/icons/Icon'; import configOptionInterface from 'interfaces/config_option'; import debounce from 'utilities/debounce'; import defaultConfigOptions from 'pages/config/ConfigOptionsPage/default_config_options'; @@ -159,10 +160,10 @@ export class ConfigOptionsPage extends Component { return (
    -
    +

    Manage Additional Osquery Options

    - Osquery allows you to set a number of configuration options (Osquery Documentation). + Osquery allows you to set a number of configuration options (Osquery Documentation). Since Kolide manages your Osquery configuration, you can set these additional desired options on this screen. Some options that Kolide needs to function correctly will be ignored.

    @@ -183,7 +184,7 @@ export class ConfigOptionsPage extends Component { onFormUpdate={onOptionUpdate} onRemoveOption={onRemoveOption} /> - +
    ); } diff --git a/frontend/pages/config/ConfigOptionsPage/_styles.scss b/frontend/pages/config/ConfigOptionsPage/_styles.scss index c1d85b52c2..9bdf221dc4 100644 --- a/frontend/pages/config/ConfigOptionsPage/_styles.scss +++ b/frontend/pages/config/ConfigOptionsPage/_styles.scss @@ -1,13 +1,16 @@ .config-options-page { + padding: 30px; + padding-bottom: 120px; + margin-bottom: $pad-small; + &__btn-wrapper { min-width: 214px; + float: right; } - &__header-wrapper { - @include display(flex); - @include justify-content(space-around); - - padding: 31px 35px; + &__header-content { + max-width: 75%; + float: left; } &__options-wrapper { @@ -19,6 +22,16 @@ margin-bottom: 32px; } + &__add-new { + color: $success; + + .kolidecon { + font-size: 24px; + vertical-align: text-bottom; + margin-right: 15px; + } + } + h1 { color: $text-dark; font-size: 24px; diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss index 544557741b..a5dc4840fa 100644 --- a/frontend/styles/global/_global.scss +++ b/frontend/styles/global/_global.scss @@ -61,7 +61,7 @@ a { background-color: $white; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1); border: solid 1px $silver; - min-width: 610px; + min-width: 951px; max-width: calc(100vw - #{$nav-width} - #{$pad-base}); box-sizing: border-box; margin-top: $pad-base; @@ -73,6 +73,7 @@ a { @at-root .has-sidebar & { margin-right: 0; + min-width: 610px; max-width: calc(100vw - #{$nav-width} - #{$pad-base} - #{$pad-base} - #{$sidepanel-width}); @include breakpoint(smalldesk) {