diff --git a/assets/fonts/kolidecons/kolidecons.woff b/assets/fonts/kolidecons/kolidecons.woff index 12816f87a4..0343901297 100644 Binary files a/assets/fonts/kolidecons/kolidecons.woff and b/assets/fonts/kolidecons/kolidecons.woff differ diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx index 47ecb1204d..e5ab98ea80 100644 --- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx +++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx @@ -2,7 +2,6 @@ import React, { Component, PropTypes } from 'react'; import Button from 'components/buttons/Button'; import formDataInterface from 'interfaces/registration_form_data'; -import Icon from 'components/icons/Icon'; class ConfirmationPage extends Component { static propTypes = { @@ -32,7 +31,7 @@ class ConfirmationPage extends Component { return (
- + diff --git a/frontend/components/icons/Icon.jsx b/frontend/components/icons/Icon.jsx deleted file mode 100644 index 636f5d6321..0000000000 --- a/frontend/components/icons/Icon.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { Component, PropTypes } from 'react'; - -import Check from './svg/Check'; -import Clipboard from './svg/Clipboard'; -import Envelope from './svg/Envelope'; -import KolideLoginBackground from './svg/KolideLoginBackground'; -import Lock from './svg/Lock'; -import User from './svg/User'; - -class Icon extends Component { - static propTypes = { - name: PropTypes.string.isRequired, - className: PropTypes.string, - }; - - static iconNames = { - check: Check, - clipboard: Clipboard, - envelope: Envelope, - kolideLoginBackground: KolideLoginBackground, - lock: Lock, - user: User, - }; - - render () { - const IconComponent = Icon.iconNames[this.props.name]; - - return ; - } -} - -export default Icon; diff --git a/frontend/components/icons/svg/Check/Check.svg.jsx b/frontend/components/icons/svg/Check/Check.svg.jsx deleted file mode 100644 index 4f87e5cf37..0000000000 --- a/frontend/components/icons/svg/Check/Check.svg.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { Component } from 'react'; - -import base, { basePropTypes } from '../base'; - -class Check extends Component { - static propTypes = { - ...basePropTypes, - }; - - static variants = { - default: ( - - - - - - - - - - - - - ), - }; - - render () { - const { alt, style, variant, className } = this.props; - - return ( - - {Check.variants[variant]} - - ); - } -} - -export default base(Check); diff --git a/frontend/components/icons/svg/Check/index.js b/frontend/components/icons/svg/Check/index.js deleted file mode 100644 index e99fec10eb..0000000000 --- a/frontend/components/icons/svg/Check/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export default from './Check.svg.jsx'; - diff --git a/frontend/components/icons/svg/Clipboard/Clipboard.svg.jsx b/frontend/components/icons/svg/Clipboard/Clipboard.svg.jsx deleted file mode 100644 index 4c2ef9aa51..0000000000 --- a/frontend/components/icons/svg/Clipboard/Clipboard.svg.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { Component } from 'react'; -import classnames from 'classnames'; - -import base, { basePropTypes } from '../base'; - -const baseClass = 'clipboard-svg'; - -class Envelope extends Component { - static propTypes = { - ...basePropTypes, - }; - - render () { - const { alt, onClick, style, variant, className } = this.props; - - const clipboardClasses = classnames( - baseClass, - `${baseClass}--${variant}` - ); - - return ( - - - - - - - - - - - - - - - - - - - ); - } -} - -export default base(Envelope); diff --git a/frontend/components/icons/svg/Clipboard/_styles.scss b/frontend/components/icons/svg/Clipboard/_styles.scss deleted file mode 100644 index 8388ea105f..0000000000 --- a/frontend/components/icons/svg/Clipboard/_styles.scss +++ /dev/null @@ -1,11 +0,0 @@ -.clipboard-svg { - fill: $text-dark; - - &__paper { - fill: $bg-light; - } - - &--copied { - fill: $brand-light; - } -} diff --git a/frontend/components/icons/svg/Clipboard/index.js b/frontend/components/icons/svg/Clipboard/index.js deleted file mode 100644 index 229feb70de..0000000000 --- a/frontend/components/icons/svg/Clipboard/index.js +++ /dev/null @@ -1 +0,0 @@ -export default from './Clipboard.svg.jsx'; diff --git a/frontend/components/icons/svg/Envelope/Envelope.svg.jsx b/frontend/components/icons/svg/Envelope/Envelope.svg.jsx deleted file mode 100644 index e295c0ccc9..0000000000 --- a/frontend/components/icons/svg/Envelope/Envelope.svg.jsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { Component } from 'react'; -import classnames from 'classnames'; - -import base, { basePropTypes } from '../base'; - -const baseClass = 'envelope-svg'; - -class Envelope extends Component { - static propTypes = { - ...basePropTypes, - }; - - render () { - const { alt, style, variant, className } = this.props; - - const envelopeBorderClasses = classnames( - `${baseClass}__border`, - `${baseClass}__border--${variant}` - ); - - const envelopeFillClasses = classnames( - `${baseClass}__fill`, - `${baseClass}__fill--${variant}` - ); - - return ( - - - - - - - - - - - - - - - - - - - - - ); - } -} - -export default base(Envelope); diff --git a/frontend/components/icons/svg/Envelope/_styles.scss b/frontend/components/icons/svg/Envelope/_styles.scss deleted file mode 100644 index f1d29f8817..0000000000 --- a/frontend/components/icons/svg/Envelope/_styles.scss +++ /dev/null @@ -1,25 +0,0 @@ -.envelope-svg { - &__border { - stroke: $accent-medium; - - &--colored { - stroke: $brand-light; - } - - &--error { - stroke: $alert; - } - } - - &__fill { - fill: $accent-light; - - &--colored { - fill: $brand-ultralight; - } - - &--error { - fill: $alert-light; - } - } -} diff --git a/frontend/components/icons/svg/Envelope/index.js b/frontend/components/icons/svg/Envelope/index.js deleted file mode 100644 index a7e7c9b3e9..0000000000 --- a/frontend/components/icons/svg/Envelope/index.js +++ /dev/null @@ -1 +0,0 @@ -export default from './Envelope.svg.jsx'; diff --git a/frontend/components/icons/svg/KolideLoginBackground/KolideLoginBackground.svg.jsx b/frontend/components/icons/svg/KolideLoginBackground/KolideLoginBackground.svg.jsx deleted file mode 100644 index 043d751cec..0000000000 --- a/frontend/components/icons/svg/KolideLoginBackground/KolideLoginBackground.svg.jsx +++ /dev/null @@ -1,432 +0,0 @@ -/* eslint-disable */ -import React, { Component } from 'react'; - -import base, { basePropTypes } from '../base'; - -export class KolideLoginBackground extends Component { - static propTypes = { - ...basePropTypes, - }; - - static variants = { - default: ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - }; - - render () { - const { alt, style, variant, className } = this.props; - - return ( - - {KolideLoginBackground.variants[variant]} - - ); - } -} - -export default base(KolideLoginBackground); diff --git a/frontend/components/icons/svg/KolideLoginBackground/index.js b/frontend/components/icons/svg/KolideLoginBackground/index.js deleted file mode 100644 index 06536e94b0..0000000000 --- a/frontend/components/icons/svg/KolideLoginBackground/index.js +++ /dev/null @@ -1 +0,0 @@ -export default from './KolideLoginBackground.svg.jsx'; diff --git a/frontend/components/icons/svg/Lock/Lock.svg.jsx b/frontend/components/icons/svg/Lock/Lock.svg.jsx deleted file mode 100644 index c1559dc4b4..0000000000 --- a/frontend/components/icons/svg/Lock/Lock.svg.jsx +++ /dev/null @@ -1,61 +0,0 @@ -import React, { Component } from 'react'; -import classnames from 'classnames'; - -import base, { basePropTypes } from '../base'; - -const baseClass = 'lock-svg'; - -class Lock extends Component { - static propTypes = { - ...basePropTypes, - }; - - render () { - const { alt, style, variant, className } = this.props; - - const lockBorderClasses = classnames( - `${baseClass}__border`, - `${baseClass}__border--${variant}` - ); - - const lockFill1Classes = classnames( - `${baseClass}__fill1`, - `${baseClass}__fill1--${variant}` - ); - - const lockFill2Classes = classnames( - `${baseClass}__fill2`, - `${baseClass}__fill2--${variant}` - ); - - return ( - - - - - - - - - - - - - - - - ); - } -} - -export default base(Lock); diff --git a/frontend/components/icons/svg/Lock/_styles.scss b/frontend/components/icons/svg/Lock/_styles.scss deleted file mode 100644 index cfae0356c3..0000000000 --- a/frontend/components/icons/svg/Lock/_styles.scss +++ /dev/null @@ -1,37 +0,0 @@ -.lock-svg { - &__border { - stroke: $accent-medium; - - &--colored { - stroke: $brand-light; - } - - &--error { - stroke: $alert; - } - } - - &__fill1 { - fill: $accent-light; - - &--colored { - fill: $brand-ultralight; - } - - &--error { - fill: $alert-light; - } - } - - &__fill2 { - fill: $accent-medium; - - &--colored { - fill: $brand-light; - } - - &--error { - fill: $alert; - } - } -} diff --git a/frontend/components/icons/svg/Lock/index.js b/frontend/components/icons/svg/Lock/index.js deleted file mode 100644 index 9f1390326d..0000000000 --- a/frontend/components/icons/svg/Lock/index.js +++ /dev/null @@ -1 +0,0 @@ -export default from './Lock.svg.jsx'; diff --git a/frontend/components/icons/svg/User/User.svg.jsx b/frontend/components/icons/svg/User/User.svg.jsx deleted file mode 100644 index 3cb8ac6595..0000000000 --- a/frontend/components/icons/svg/User/User.svg.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, { Component } from 'react'; -import classnames from 'classnames'; - -import base, { basePropTypes } from '../base'; - -const baseClass = 'user-svg'; - -export class User extends Component { - static propTypes = { - ...basePropTypes, - }; - - render () { - const { alt, style, variant, className } = this.props; - - const userClasses = classnames( - `${baseClass}__border`, - `${baseClass}__border--${variant}` - ); - - if (variant === 'circle') { - return ( - - - - - - - - - - - - - - - ); - } - - return ( - - - - - - - - - - - - - - - ); - } -} - -export default base(User); diff --git a/frontend/components/icons/svg/User/_styles.scss b/frontend/components/icons/svg/User/_styles.scss deleted file mode 100644 index 9ed2913405..0000000000 --- a/frontend/components/icons/svg/User/_styles.scss +++ /dev/null @@ -1,14 +0,0 @@ -.user-svg { - stroke: $accent-medium; - fill: $accent-light; - - &--colored { - stroke: $brand-light; - fill: $brand-ultralight; - } - - &--error { - stroke: $alert; - fill: $alert-light; - } -} diff --git a/frontend/components/icons/svg/User/index.js b/frontend/components/icons/svg/User/index.js deleted file mode 100644 index 767d48dcd0..0000000000 --- a/frontend/components/icons/svg/User/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export default from './User.svg.jsx'; - diff --git a/frontend/components/icons/svg/base.jsx b/frontend/components/icons/svg/base.jsx deleted file mode 100644 index 43f4530b82..0000000000 --- a/frontend/components/icons/svg/base.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { Component, PropTypes } from 'react'; -import { keys, noop, pick } from 'lodash'; - -export const basePropTypes = { - alt: PropTypes.string, - name: PropTypes.string, - onClick: PropTypes.func, - style: PropTypes.object, - variant: PropTypes.string, - className: PropTypes.string, -}; - -export default function (SVGComponent) { - class ComponentWrapper extends Component { - static propTypes = { - ...basePropTypes, - }; - - static defaultProps = { - onClick: noop, - variant: 'default', - className: '', - }; - - render () { - const svgProps = pick(this.props, keys(ComponentWrapper.propTypes)); - return ; - } - } - - return ComponentWrapper; -} diff --git a/frontend/components/icons/svg/base.tests.jsx b/frontend/components/icons/svg/base.tests.jsx deleted file mode 100644 index 9b6b63bad4..0000000000 --- a/frontend/components/icons/svg/base.tests.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import expect from 'expect'; -import { mount } from 'enzyme'; -import { noop } from 'lodash'; - -import base from './base'; -import { KolideLoginBackground } from './KolideLoginBackground/KolideLoginBackground.svg'; - -describe('base - svg HOC', () => { - const WrappedComponent = base(KolideLoginBackground); - const mountedComponent = mount( - - ); - - it('renders a wrapped component', () => { - expect(mountedComponent).toExist(); - }); - - it('filters out unwanted props', () => { - expect(mountedComponent.find(KolideLoginBackground).props()).toEqual({ - alt: 'image alt', - name: 'component name', - onClick: noop, - variant: 'default', - className: '', - }); - }); - - it('allows overriding the default variant prop', () => { - const Component = base(KolideLoginBackground); - const mounted = mount( - - ); - - expect(mounted.find(KolideLoginBackground).props()).toContain({ - variant: 'my variant', - }); - }); -}); diff --git a/frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx b/frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx index 6125859347..1fd2155d74 100644 --- a/frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx +++ b/frontend/pages/ForgotPasswordPage/ForgotPasswordPage.jsx @@ -8,7 +8,6 @@ import { } from '../../redux/nodes/components/ForgotPasswordPage/actions'; import debounce from '../../utilities/debounce'; import ForgotPasswordForm from '../../components/forms/ForgotPasswordForm'; -import Icon from '../../components/icons/Icon'; import StackedWhiteBoxes from '../../components/StackedWhiteBoxes'; export class ForgotPasswordPage extends Component { @@ -51,7 +50,7 @@ export class ForgotPasswordPage extends Component {

- + EMAIL SENT
diff --git a/frontend/pages/ForgotPasswordPage/_styles.scss b/frontend/pages/ForgotPasswordPage/_styles.scss index 1f338ef02a..c5e39f2a1a 100644 --- a/frontend/pages/ForgotPasswordPage/_styles.scss +++ b/frontend/pages/ForgotPasswordPage/_styles.scss @@ -29,10 +29,9 @@ } &__icon { - height: 35px; + font-size: 35px; left: 18px; position: absolute; top: 14px; - width: 35px; } } diff --git a/frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx b/frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx index 5622c8bad5..02296f55e3 100644 --- a/frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx +++ b/frontend/pages/LoginSuccessfulPage/LoginSuccessfulPage.jsx @@ -1,8 +1,6 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; -import Icon from '../../components/icons/Icon'; - class LoginSuccessfulPage extends Component { static propTypes = { dispatch: PropTypes.func.isRequired, @@ -12,7 +10,7 @@ class LoginSuccessfulPage extends Component { const baseClass = 'login-success'; return (
- +

Login successful

hold on to your butts...

diff --git a/frontend/pages/LoginSuccessfulPage/_styles.scss b/frontend/pages/LoginSuccessfulPage/_styles.scss index 579ac9868f..d8aa193dc0 100644 --- a/frontend/pages/LoginSuccessfulPage/_styles.scss +++ b/frontend/pages/LoginSuccessfulPage/_styles.scss @@ -24,4 +24,9 @@ font-size: $medium; color: $accent-text; } + + &__icon { + color: $success; + font-size: 100px; + } } diff --git a/frontend/pages/hosts/NewHostPage/NewHostPage.jsx b/frontend/pages/hosts/NewHostPage/NewHostPage.jsx index be5e5ef185..b739947218 100644 --- a/frontend/pages/hosts/NewHostPage/NewHostPage.jsx +++ b/frontend/pages/hosts/NewHostPage/NewHostPage.jsx @@ -4,7 +4,6 @@ import { map, noop } from 'lodash'; import classnames from 'classnames'; import { copyText } from './helpers'; -import Icon from '../../../components/icons/Icon'; import { renderFlash } from '../../../redux/nodes/notifications/actions'; const HOST_TABS = { @@ -123,6 +122,21 @@ export class NewHostPage extends Component { const { method1Text, method1TextCopied, method2Text, method2TextCopied } = this.state; const { onCopyText, renderHostTabContent, renderHostTabHeaders } = this; + const method1IconClasses = classnames('kolidecon', + 'kolidecon-clipboard', + `${baseClass}__clipboard-icon`, + { + [`${baseClass}__clipboard-icon--copied`]: method1TextCopied, + } + ); + const method2IconClasses = classnames('kolidecon', + 'kolidecon-clipboard', + `${baseClass}__clipboard-icon`, + { + [`${baseClass}__clipboard-icon--copied`]: method2TextCopied, + } + ); + return (
@@ -130,7 +144,7 @@ export class NewHostPage extends Component {
{method1TextCopied && copied!} - +
{renderHostTabHeaders()} @@ -144,7 +158,7 @@ export class NewHostPage extends Component {
{method2TextCopied && copied!} - +

This method allows you to configure an existing osqueryd installation to work with Kolide. The --config_endpoints flag allows us to point your osqueryd installation to your Kolide configuration.

diff --git a/frontend/pages/hosts/NewHostPage/NewHostPage.tests.jsx b/frontend/pages/hosts/NewHostPage/NewHostPage.tests.jsx index eadb3dff87..afb8f51a86 100644 --- a/frontend/pages/hosts/NewHostPage/NewHostPage.tests.jsx +++ b/frontend/pages/hosts/NewHostPage/NewHostPage.tests.jsx @@ -11,7 +11,7 @@ describe('New Host Page - component', () => { const page = mount( connectedComponent(ConnectedNewHostPage, { mockStore }) ); - const icon = page.find('Icon').first(); + const icon = page.find('.kolidecon-clipboard').first(); icon.simulate('click'); const dispatchedActionMessages = mockStore.getActions().map((action) => { return action.payload.message; }); @@ -20,8 +20,8 @@ describe('New Host Page - component', () => { it('saves the copied text in state', () => { const page = mount(); - const method1Icon = page.find('Icon').first(); - const method2Icon = page.find('Icon').last(); + const method1Icon = page.find('.kolidecon-clipboard').first(); + const method2Icon = page.find('.kolidecon-clipboard').last(); method1Icon.simulate('click'); diff --git a/frontend/pages/hosts/NewHostPage/_styles.scss b/frontend/pages/hosts/NewHostPage/_styles.scss index 53d950e72c..9328f3df55 100644 --- a/frontend/pages/hosts/NewHostPage/_styles.scss +++ b/frontend/pages/hosts/NewHostPage/_styles.scss @@ -48,6 +48,12 @@ right: 10px; cursor: pointer; top: 18px; + font-size: $large; + color: $text-medium; + + &--copied { + color: $brand-light; + } } &__tab-wrap { diff --git a/frontend/styles/global/_icons.scss b/frontend/styles/global/_icons.scss index d61075222f..2649fe6fdb 100644 --- a/frontend/styles/global/_icons.scss +++ b/frontend/styles/global/_icons.scss @@ -200,6 +200,10 @@ content: '\f040'; } + .kolidecon-clipboard:before { + content: '\f043'; +} + .sr-only { position: absolute;
Administrator Configuration