From 523d596c779ec151661ddab977cb2fafdb51d3ae Mon Sep 17 00:00:00 2001 From: noahtalerman <47070608+noahtalerman@users.noreply.github.com> Date: Tue, 8 Dec 2020 12:08:59 -0800 Subject: [PATCH] Update app settings page and osquery options page styles. (#107) The goal of this PR is to implement the new global styling (colors, buttons, and fonts) to the "App settings" and "Osquery options" pages. These pages are only visible to users granted an admin role. --- assets/images/fleet-avatar-24x24@2x.png | Bin 0 -> 1061 bytes assets/images/open-new-tab-12x12@2x.png | Bin 0 -> 452 bytes frontend/components/YamlAce/_styles.scss | 2 +- .../admin/AppConfigForm/AppConfigForm.jsx | 9 +-- .../forms/admin/AppConfigForm/_styles.scss | 71 +++++------------- .../OsqueryOptionsForm/OsqueryOptionsForm.jsx | 5 +- .../admin/OsqueryOptionsForm/_styles.scss | 12 +-- .../forms/fields/Slider/_styles.scss | 1 - .../icons/OrgLogoIcon/OrgLogoIcon.jsx | 10 +-- .../icons/OrgLogoIcon/OrgLogoIcon.tests.jsx | 4 +- .../side_panels/SiteNavHeader/_styles.scss | 1 + .../pages/admin/AppSettingsPage/_styles.scss | 11 +-- .../OsqueryOptionsPage/OsqueryOptionsPage.jsx | 61 +++++++-------- .../admin/OsqueryOptionsPage/_styles.scss | 40 +++++++++- 14 files changed, 108 insertions(+), 119 deletions(-) create mode 100644 assets/images/fleet-avatar-24x24@2x.png create mode 100644 assets/images/open-new-tab-12x12@2x.png diff --git a/assets/images/fleet-avatar-24x24@2x.png b/assets/images/fleet-avatar-24x24@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..76a35876f3685cc05ff742d44e4bed791bd91cea GIT binary patch literal 1061 zcmV+=1ls$FP)K~#7F?U>I? zR8bVi&v{QwcMkXmIJ7E)auGR-G5!a(5K3@o4-lM9z6%f&bGbp?g@>!@ zPQE(K|E7Z>mjo=#wz>0Qpl9i~W1-#W$MOw|1h8><2>qYBlLb@kuffrAAaDq=iPI|* z((?X+musGWRj9atf%Wt_3dpLiaWdK2l$!$$y-Qnjgy1M+J&{?we>Ja*-5ebI#(!?9 zuZnxu-@aTfAC(FiSV=o*!5oBuhtM(8?z-jU!IKY-<&{XPR$_B#Y?7bONJwaLujWs( zIiD|{9JI=3aq@j&fNb@RY|9=ughGui)JYOL5KhCDgL-L>rI?ro69_lUhn&w_4Mfmn zj~FGJ{0V0VqUslTs&tlAfh4meW!b^fkR0B$oTol{Ciw92#{j!XVb)RV3-i{FiHZ6D z(5le->+Mdo>|s`*bZH`j>yfvRdeS%#2L3KSa%{wsf|WWuE10)O{q_CR1&A1B0beI~ z#)ZaCTNY$*XA;^zvH$V$91uCGYl8bgUC)%(PM-y-fVGKj$AWN6%*A!2o+aG!@!-ja z#_~!eqg)B86Wd2$QlX$lYCDZ+wA1#LP|tsAqymojd>9BQ*;<+#@!e<>7?ESELG?Xw zHalInduBUb4e}RR1$LT%Bs*Q-&HK8NZwbT#M2NhFgxOA$K&6rhs=!WzFwQv*QUQ0K zCYD)cv^VjusT9bk?!i=^LhQ6JqotLK5N#t{o7iDVgudXVE+TO=B7O2F3FP$15+64* zk8<_B)5h4Cn3zk3R)tdAtDRtrVGK^{_(Z`)4;NM&+vec{p)8J^5DaxQ;d@~A8cmEIf@#3DU>zTUp(H)h@uAkE{wdBxKAO!2b5%?x zOQ!^hfrp6W-2v1BuH^Koe_Iq`IE>XnV2|tIn}C*LTEAE8Lo;A)4Q3oMt>*j8wrwZV zsg*RqVwqS>DuO_D7(c4( z%zS5c2`>~p^;~&U2WSTzg1auCrVDY&*4JA#P-}{G?mS!a2lnuR_~cWCwF;13an=Oi zSg?ey7J2E{nxaf({(xlr0VHcouXf>0(hB(9d(Oc?#=Ge;pfhbPG9fzEk4P)AMgYid uR=y};ruu|`SOa7qI+XlPiNcqDRMg+dE4oCJ_EVMs0000
-

Avatar Preview

@@ -184,7 +183,7 @@ class AppConfigForm extends Component { />
-

The base URL of this instance for use in Fleet links.

+

The base URL of this instance for use in Fleet links.

@@ -217,7 +216,7 @@ class AppConfigForm extends Component { />
-

The required entity ID is a URI that you use to identify Fleet when configuring the identity provider.

+

The required entity ID is a URI that you use to identify Fleet when configuring the identity provider.

@@ -281,7 +280,7 @@ class AppConfigForm extends Component { />
-

The address email recipients will see all messages that are sent from the Fleet application.

+

The sender address for emails from Fleet.

- UPDATE SETTINGS + Update settings ); diff --git a/frontend/components/forms/admin/AppConfigForm/_styles.scss b/frontend/components/forms/admin/AppConfigForm/_styles.scss index 4d8de0715..e064f2d2d 100644 --- a/frontend/components/forms/admin/AppConfigForm/_styles.scss +++ b/frontend/components/forms/admin/AppConfigForm/_styles.scss @@ -8,7 +8,6 @@ font-weight: $regular; float: right; height: 23px; - letter-spacing: -0.5px; text-transform: none; } @@ -17,6 +16,18 @@ } } + .form-field { + &__label { + font-weight: $bold; + margin-bottom: 4px; + } + + &__hint { + font-size: $x-small; + font-style: italic; + } + } + &__section { @include clearfix; margin: 0 0 30px; @@ -24,8 +35,6 @@ .smtp-options { font-size: 15px; font-weight: $bold; - line-height: 3.2; - letter-spacing: 0.6px; color: $core-dark-blue-grey; padding-left: 15px; @@ -83,11 +92,9 @@ width: 40%; p { - font-size: 15px; - font-weight: $regular; - line-height: 1.6; - letter-spacing: 0.5px; - color: $core-dark-blue-grey; + font-size: $x-small; + font-style: italic; + margin: 32px 0; } .hint { @@ -103,10 +110,12 @@ text-align: center; img { - border-radius: 80px; - height: 160px; - width: 160px; + border-radius: 20%; + height: 120px; + width: 120px; border: 1px solid $ui-borders; + background-color: $ui-light-grey; + transform: translate(-100px, 20px); } p { @@ -117,53 +126,13 @@ } } - &__show-options { - color: $core-dark-blue-grey; - } - &__smtp-section { @include clearfix; - border-radius: 2px; - background-color: $core-medium-blue-grey; - border: solid 1px $ui-borders; - padding: 30px; - - .form-field { - @include clearfix; - - &__label { - float: left; - font-size: 15px; - font-weight: $bold; - letter-spacing: 0.6px; - text-align: right; - color: $core-dark-blue-grey; - width: 32%; - margin: 0; - line-height: 40px; - - @media (min-width: $medium-width + 1) and (max-width: 1195px) { - line-height: 18px; - } - } - - &:last-child { - margin: 0; - } - } - - .input-field, - .Select, - .kolide-slider__wrapper { - width: 60%; - float: right; - } .slide-wrapper { .slider-option { font-size: 18px; font-weight: $regular; - letter-spacing: 1.3px; text-align: left; vertical-align: text-bottom; diff --git a/frontend/components/forms/admin/OsqueryOptionsForm/OsqueryOptionsForm.jsx b/frontend/components/forms/admin/OsqueryOptionsForm/OsqueryOptionsForm.jsx index 0d3c2ae07..6cf3ed9fb 100644 --- a/frontend/components/forms/admin/OsqueryOptionsForm/OsqueryOptionsForm.jsx +++ b/frontend/components/forms/admin/OsqueryOptionsForm/OsqueryOptionsForm.jsx @@ -40,9 +40,6 @@ class OsqueryOptionsForm extends Component { return (
-

The YAML code editor allows control over osquery configuration options. - Options specified in the code editor below will overwrite existing osquery options. -

- UPDATE OPTIONS + Update options ); diff --git a/frontend/components/forms/admin/OsqueryOptionsForm/_styles.scss b/frontend/components/forms/admin/OsqueryOptionsForm/_styles.scss index 5d4b0cd4b..13b60adda 100644 --- a/frontend/components/forms/admin/OsqueryOptionsForm/_styles.scss +++ b/frontend/components/forms/admin/OsqueryOptionsForm/_styles.scss @@ -2,15 +2,7 @@ display: flex; flex-direction: column; align-items: flex-end; - width: 60%; - padding-right: 40px; - - &__header { - font-size: 16px; - margin: 15px 0; - display: inline-block; - color: $core-dark-blue-grey; - } + width: 100%; &__button-wrap { text-align: right; @@ -26,7 +18,7 @@ } &__text-editor-wrapper { - margin: $pad-base 0; width: 100%; + margin-bottom: 16px; } } diff --git a/frontend/components/forms/fields/Slider/_styles.scss b/frontend/components/forms/fields/Slider/_styles.scss index 1f2b5ecfc..e41bd39cd 100644 --- a/frontend/components/forms/fields/Slider/_styles.scss +++ b/frontend/components/forms/fields/Slider/_styles.scss @@ -51,7 +51,6 @@ letter-spacing: 1.3px; text-align: left; vertical-align: text-bottom; - text-transform: uppercase; margin-right: 10px; color: $core-medium-blue-grey; diff --git a/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx b/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx index 94ae63331..66472b24d 100644 --- a/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx +++ b/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import fleetLogo from '../../../../assets/images/fleet-logo.svg'; +import fleetAvatar from '../../../../assets/images/fleet-avatar-24x24@2x.png'; class OrgLogoIcon extends Component { static propTypes = { @@ -10,13 +10,13 @@ class OrgLogoIcon extends Component { }; static defaultProps = { - src: fleetLogo, + src: fleetAvatar, }; constructor (props) { super(props); - this.state = { imageSrc: fleetLogo }; + this.state = { imageSrc: fleetAvatar }; } componentWillMount () { @@ -44,7 +44,7 @@ class OrgLogoIcon extends Component { const { imageSrc } = this.state; const { unchangedSourceProp } = this; - if (unchangedSourceProp(nextProps) && (imageSrc === fleetLogo)) { + if (unchangedSourceProp(nextProps) && (imageSrc === fleetAvatar)) { return false; } @@ -52,7 +52,7 @@ class OrgLogoIcon extends Component { } onError = () => { - this.setState({ imageSrc: fleetLogo }); + this.setState({ imageSrc: fleetAvatar }); return false; } diff --git a/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.tests.jsx b/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.tests.jsx index ecbc71b56..9f3f43ab7 100644 --- a/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.tests.jsx +++ b/frontend/components/icons/OrgLogoIcon/OrgLogoIcon.tests.jsx @@ -1,14 +1,14 @@ import React from 'react'; import { mount } from 'enzyme'; -import fleetLogo from '../../../../assets/images/fleet-logo.svg'; +import fleetAvatar from '../../../../assets/images/fleet-avatar-24x24@2x.png'; import OrgLogoIcon from './OrgLogoIcon'; describe('OrgLogoIcon - component', () => { it('renders the Kolide Logo by default', () => { const component = mount(); - expect(component.state('imageSrc')).toEqual(fleetLogo); + expect(component.state('imageSrc')).toEqual(fleetAvatar); }); it('renders the image source when it is valid', () => { diff --git a/frontend/components/side_panels/SiteNavHeader/_styles.scss b/frontend/components/side_panels/SiteNavHeader/_styles.scss index 36319b2c1..8e15fb48f 100644 --- a/frontend/components/side_panels/SiteNavHeader/_styles.scss +++ b/frontend/components/side_panels/SiteNavHeader/_styles.scss @@ -16,6 +16,7 @@ &__logo { @include size(24px); margin-right: 24px; + border-radius: 20%; @at-root .site-nav--small & { margin: 24px 5px 10px; diff --git a/frontend/pages/admin/AppSettingsPage/_styles.scss b/frontend/pages/admin/AppSettingsPage/_styles.scss index 3d2424a0c..9b2455a88 100644 --- a/frontend/pages/admin/AppSettingsPage/_styles.scss +++ b/frontend/pages/admin/AppSettingsPage/_styles.scss @@ -1,5 +1,5 @@ .app-settings { - padding: 30px; + padding: 50px 30px; h1 { margin: 0 0 22px; @@ -8,11 +8,10 @@ h2 { font-size: 20px; font-weight: $regular; - line-height: 2.4; - letter-spacing: 0.8px; - color: $core-dark-blue-grey; + color: $core-black; border-bottom: solid 1px $ui-borders; margin: 0 0 15px; + padding: 0 0 8px; a { text-decoration: none; @@ -25,10 +24,8 @@ } small { - font-size: 15px; + font-size: $x-small; font-weight: $regular; - line-height: 1.6; - letter-spacing: 0.5px; color: $core-dark-blue-grey; } } diff --git a/frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx b/frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx index dfa3b536a..22f5a46a6 100644 --- a/frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx +++ b/frontend/pages/admin/OsqueryOptionsPage/OsqueryOptionsPage.jsx @@ -6,8 +6,8 @@ import { noop } from 'lodash'; import osqueryOptionsActions from 'redux/nodes/osquery/actions'; import validateYaml from 'components/forms/validators/validate_yaml'; import OsqueryOptionsForm from 'components/forms/admin/OsqueryOptionsForm'; -import Icon from 'components/icons/Icon'; import { renderFlash } from 'redux/nodes/notifications/actions'; +import OpenNewTabIcon from '../../../../assets/images/open-new-tab-12x12@2x.png'; const yaml = require('js-yaml'); @@ -64,37 +64,38 @@ export class OsqueryOptionsPage extends Component { const { onSaveOsqueryOptionsFormSubmit } = this; return ( -
-

Osquery Options

-
- -
-

This file describes options returned to osqueryd when it checks for configuration.

-

See Fleet documentation for an example file that includes the overrides option.

- - GO TO FLEET DOCS - - -

See osquery documentation for all available options.

- - GO TO OSQUERY DOCS - - +
+
+

Osquery Options

+
+
+
+

Help

+

This file describes options returned to osqueryd when it checks for configuration.

+

See Fleet documentation for an example file that includes the overrides option.

+ + Go to Fleet docs + open new tab + +

See osquery documentation for all available options.

+ + Go to osquery docs + open new tab + +
); } diff --git a/frontend/pages/admin/OsqueryOptionsPage/_styles.scss b/frontend/pages/admin/OsqueryOptionsPage/_styles.scss index 1eba0837c..9775b308d 100644 --- a/frontend/pages/admin/OsqueryOptionsPage/_styles.scss +++ b/frontend/pages/admin/OsqueryOptionsPage/_styles.scss @@ -1,8 +1,14 @@ .osquery-options { - padding: 30px; + padding: 50px 30px; + flex-grow: 1; + + &__page-wrap { + display: flex; + min-height: 100vh; + } h1 { - margin: 0 0 22px; + margin: 0 0 24px; } a { @@ -15,7 +21,7 @@ &__form-details { margin-top: 133px; - width: 40%; + width: 1000%; p { font-size: 15px; @@ -29,4 +35,32 @@ i { margin-left: 8px; } + + &__side-panel { + padding: 40px 28px; + + h2 { + font-size: $x-small; + font-weight: $bold; + } + + p { + font-size: $x-small; + font-style: italic; + color: $core-dark-blue-grey; + } + + a { + color: $core-blue; + font-size: $x-small; + font-weight: $bold; + text-decoration: none; + } + + img { + width: 12px; + height: 12px; + margin-left: 6px; + } + } }