From 7d9906e5eae62fc8ea7aec961b989356f7f600bf Mon Sep 17 00:00:00 2001 From: noahtalerman <47070608+noahtalerman@users.noreply.github.com> Date: Wed, 2 Dec 2020 09:59:44 -0500 Subject: [PATCH] Update Fleet setup styles (#78) This PR is part of the UI Refresh #38. The goal of this PR is to update the styles of the Fleet setup (onboarding) flow. --- frontend/components/App/App.jsx | 4 +- .../AdminDetails/AdminDetails.jsx | 9 +- .../ConfirmationPage/ConfirmationPage.jsx | 18 +- .../ConfirmationPage/_styles.scss | 36 ++-- .../KolideDetails/KolideDetails.jsx | 2 +- .../OrgDetails/OrgDetails.jsx | 6 +- .../RegistrationForm/RegistrationForm.jsx | 126 ++++------- .../RegistrationForm.tests.jsx | 8 +- .../forms/RegistrationForm/_styles.scss | 196 +++++++++--------- .../InputFieldWithIcon/InputFieldWithIcon.jsx | 7 +- .../fields/InputFieldWithIcon/_styles.scss | 37 ++-- frontend/layouts/CoreLayout/_styles.scss | 1 + .../Breadcrumbs/Breadcrumbs.jsx | 4 +- .../RegistrationPage/Breadcrumbs/_styles.scss | 63 +++--- .../RegistrationPage/RegistrationPage.jsx | 2 +- frontend/pages/RegistrationPage/_styles.scss | 2 +- frontend/styles/global/_global.scss | 6 +- 17 files changed, 241 insertions(+), 286 deletions(-) diff --git a/frontend/components/App/App.jsx b/frontend/components/App/App.jsx index b82849c0391e..28bd1173cd55 100644 --- a/frontend/components/App/App.jsx +++ b/frontend/components/App/App.jsx @@ -13,7 +13,6 @@ export class App extends Component { static propTypes = { children: PropTypes.element, dispatch: PropTypes.func, - showBackgroundImage: PropTypes.bool, user: userInterface, }; @@ -51,11 +50,10 @@ export class App extends Component { } render () { - const { children, showBackgroundImage } = this.props; + const { children } = this.props; const wrapperStyles = classnames( 'wrapper', - { 'wrapper--background': showBackgroundImage }, ); return ( diff --git a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx index 68ba87e1c106..4e95bd7c7a5a 100644 --- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx +++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx @@ -43,7 +43,6 @@ class AdminDetails extends Component {
- ); diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx index c01a4751e466..ee3d6a38f135 100644 --- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx +++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx @@ -4,7 +4,6 @@ import classnames from 'classnames'; import Button from 'components/buttons/Button'; import formDataInterface from 'interfaces/registration_form_data'; -import Icon from 'components/icons/Icon'; import Checkbox from 'components/forms/fields/Checkbox'; const baseClass = 'confirm-user-reg'; @@ -12,10 +11,22 @@ const baseClass = 'confirm-user-reg'; class ConfirmationPage extends Component { static propTypes = { className: PropTypes.string, + currentPage: PropTypes.bool, formData: formDataInterface, handleSubmit: PropTypes.func, }; + componentDidUpdate(prevProps) { + if (this.props.currentPage && this.props.currentPage !== prevProps.currentPage) { + // Component has a transition duration of 300ms set in + // RegistrationForm/_styles.scss. We need to wait 300ms before + // calling .focus() to preserve smooth transition. + setTimeout(() => { + this.firstInput.input.focus(); + }, 300); + } + } + importOsqueryConfig = () => { const disableImport = true; @@ -37,6 +48,7 @@ class ConfirmationPage extends Component { const { importOsqueryConfig } = this; const { className, + currentPage, handleSubmit, formData: { email, @@ -45,13 +57,13 @@ class ConfirmationPage extends Component { username, }, } = this.props; + const tabIndex = currentPage ? 1 : -1; const confirmRegClasses = classnames(className, baseClass); return (
- @@ -77,7 +89,7 @@ class ConfirmationPage extends Component { {importOsqueryConfig()} - diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss index 64ee9d7f517c..e460d4ab18ed 100644 --- a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss +++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss @@ -1,6 +1,10 @@ .confirm-user-reg { - &__wrapper { - padding: 0 35px 25px; + display: flex; + flex-direction: column; + align-items: center; + + h2 { + text-align: center; } &__icon { @@ -27,13 +31,10 @@ width: 100%; caption { - font-size: 18px; + font-size: $small; font-weight: $bold; - line-height: 0.72; - letter-spacing: 0.6px; - color: $core-dark-blue-grey; - text-transform: uppercase; - padding-bottom: 20px; + margin-bottom: 24px; + text-align: left; } tr { @@ -41,27 +42,23 @@ } th { - font-size: 14px; + font-size: $small; font-weight: $bold; - line-height: 1.71; - letter-spacing: 0.5px; - color: $core-dark-blue-grey; text-align: left; + padding-right: 108px; } td { - font-size: 14px; + font-size: $small; font-weight: $regular; - line-height: 1.71; - letter-spacing: 0.5px; - color: $core-dark-blue-grey; } } &__table-url { - @include ellipsis(90%); + @include ellipsis(100%); font-family: 'SourceCodePro', $monospace; vertical-align: bottom; + font-weight: 600; } &__import { @@ -92,4 +89,9 @@ top: 0; } } + + .button { + width: 160px; + margin-top: 40px; + } } diff --git a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx b/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx index 8ed0f91d7981..7d1fcbdb2ebb 100644 --- a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx +++ b/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx @@ -46,7 +46,7 @@ class KolideDetails extends Component { ref={(input) => { this.firstInput = input; }} /> - diff --git a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx index d62df60df763..12ec08111e22 100644 --- a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx +++ b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx @@ -49,11 +49,11 @@ class OrgDetails extends Component { {...fields.org_logo_url} placeholder="Organization Logo URL (optional)" tabIndex={tabIndex} - hint="must start with https://" + hint="Personalize Fleet with your brand. For best results, use a square image at least 150px wide, like https://fleetdm.com/logo.png." /> - ); diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx index e8803cd748f1..7a4985f4d428 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx @@ -7,13 +7,6 @@ import ConfirmationPage from 'components/forms/RegistrationForm/ConfirmationPage import KolideDetails from 'components/forms/RegistrationForm/KolideDetails'; import OrgDetails from 'components/forms/RegistrationForm/OrgDetails'; -const PAGE_HEADER_TEXT = { - 1: 'SET USERNAME & PASSWORD', - 2: 'SET ORGANIZATION DETAILS', - 3: 'SET KOLIDE WEB ADDRESS', - 4: 'SUCCESS', -}; - const baseClass = 'user-registration'; class RegistrationForm extends Component { @@ -68,99 +61,51 @@ class RegistrationForm extends Component { return false; } - renderHeader = () => { - const { page } = this.props; - const headerText = PAGE_HEADER_TEXT[page]; - - if (headerText) { - return

{headerText}

; - } - - return false; - } - - renderDescription = () => { - const { page } = this.props; - - if (page === 1) { - return ( -
-

Additional admins can be designated within the Fleet App

-

Passwords must include 7 characters, at least 1 number (eg. 0-9) and at least 1 symbol (eg. ^&*#)

-
- ); - } - - if (page === 2) { - return ( -
-

Set your organization's name (eg. Kolide, Inc)

-

(Optional) Set an organization logo to use in the Fleet application. Should be an https URL to an image file (eg. https://kolide.co/logo.png).

-
- ); - } - - if (page === 3) { - return ( -
-

Define the base URL of this Fleet instance.

-
- ); - } - - return false; - } - - renderContent = () => { - const { page } = this.props; - const { formData } = this.state; - const { - onSubmitConfirmation, - renderDescription, - renderHeader, - } = this; - - if (page === 4) { - return ( -
- {renderHeader()} - -
- ); - } - - return ( -
- {renderHeader()} - {renderDescription()} -
- ); - } - render () { const { page } = this.props; const { formData } = this.state; - const { isCurrentPage, onPageFormSubmit, renderContent } = this; + const { isCurrentPage, onPageFormSubmit, onSubmitConfirmation } = this; - const containerClass = classnames(`${baseClass}__container`, { - [`${baseClass}__container--complete`]: page > 3, - }); + const adminDetailsContainerClass = classnames( + `${baseClass}__container`, + `${baseClass}__container--admin`, + ); const adminDetailsClass = classnames( `${baseClass}__field-wrapper`, `${baseClass}__field-wrapper--admin`, ); + const orgDetailsContainerClass = classnames( + `${baseClass}__container`, + `${baseClass}__container--org`, + ); + const orgDetailsClass = classnames( `${baseClass}__field-wrapper`, `${baseClass}__field-wrapper--org`, ); + const kolideDetailsContainerClass = classnames( + `${baseClass}__container`, + `${baseClass}__container--kolide`, + ); + const kolideDetailsClass = classnames( `${baseClass}__field-wrapper`, `${baseClass}__field-wrapper--kolide`, ); + const confirmationContainerClass = classnames( + `${baseClass}__container`, + `${baseClass}__container--confirmation`, + ); + + const confirmationClass = classnames( + `${baseClass}__field-wrapper`, + `${baseClass}__field-wrapper--confirmation`, + ); + const formSectionClasses = classnames( `${baseClass}__form`, { @@ -170,21 +115,30 @@ class RegistrationForm extends Component { [`${baseClass}__form--step2-complete`]: page > 2, [`${baseClass}__form--step3-active`]: page === 3, [`${baseClass}__form--step3-complete`]: page > 3, + [`${baseClass}__form--step4-active`]: page === 4, }, ); return (
-
- {renderContent()} - -
+
+
+

Setup user

+

Additional admins can be designated within the Fleet App

- +
+
+

Organization details

- +
+
+

Set Fleet URL

+
+

Success

+ +
); diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx index a78e22d0fc61..03e66a580c76 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx @@ -8,28 +8,28 @@ describe('RegistrationForm - component', () => { const form = mount(); expect(form.find('AdminDetails').length).toEqual(1); - expect(form.text()).toContain('SET USERNAME & PASSWORD'); + expect(form.text()).toContain('Setup user'); }); it('renders OrgDetails on the second page', () => { const form = mount(); expect(form.find('OrgDetails').length).toEqual(1); - expect(form.text()).toContain('SET ORGANIZATION DETAILS'); + expect(form.text()).toContain('Organization details'); }); it('renders KolideDetails on the third page', () => { const form = mount(); expect(form.find('KolideDetails').length).toEqual(1); - expect(form.text()).toContain('SET KOLIDE WEB ADDRESS'); + expect(form.text()).toContain('Set Fleet URL'); }); it('renders ConfirmationPage on the fourth page', () => { const form = mount(); expect(form.find('ConfirmationPage').length).toEqual(1); - expect(form.text()).toContain('SUCCESS'); + expect(form.text()).toContain('Success'); }); }); diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss index d0472fcdac2b..b02c3d8c5e2b 100644 --- a/frontend/components/forms/RegistrationForm/_styles.scss +++ b/frontend/components/forms/RegistrationForm/_styles.scss @@ -1,18 +1,56 @@ .user-registration { display: flex; - align-content: center; justify-content: center; + align-items: stretch; flex-grow: 1; + margin-top: 24px; &__container { - @include size(500px 520px); - align-self: center; - border-radius: 4px; + @include size(500px auto); + @include position(absolute, 49% 0 null null); + transition: left 300ms ease, opacity 300ms ease; + border-radius: 10px; background-color: $core-light-blue-grey; - box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3); box-sizing: border-box; - padding: 25px 35px; - margin-top: -55px; + padding: 40px; + z-index: 1; + transform: translateY(-50%); + + h2 { + font-size: $large; + font-weight: $regular; + text-align: center; + padding: 0 0 16px; + margin: 0; + margin-bottom: 40px; + border-bottom: 1px solid $ui-borders; + } + + p { + font-size: $small; + margin: 0 0 8px; + } + + &--admin { + left: 0; + top: unquote('max(56%, 480px)'); + margin: auto; + } + + &--org { + left: calc(100% + 220px); + top: -10px; + } + + &--kolide { + left: calc(150% + 220px); + top: -8px; + } + + &--confirmation { + left: calc(200% + 220px); + top: -8px; + } &--complete { padding: 0; @@ -20,8 +58,6 @@ .user-registration__title { font-size: 24px; font-weight: $bold; - line-height: 0.54; - letter-spacing: 0.9px; color: $core-dark-blue-grey; padding: 25px 35px; } @@ -29,72 +65,80 @@ } &__form { - @include position(absolute, 49% 0 null null); - transform: translateY(-85px); + display: flex; width: 100%; - height: 470px; box-sizing: border-box; - padding: 25px 0; @include breakpoint(tablet) { transform: translateY(-100px); } &--step1-complete { - .user-registration__field-wrapper--admin { - left: -184px; + .user-registration__container--admin { + left: -600px; + opacity: 0; + } + + .user-registration__container--org { + left: 0; + top: unquote('max(56%, 480px)'); + margin: auto; } - .user-registration__field-wrapper--org { - left: 50%; + .user-registration__container--kolide { + left: calc(100% + 220px); } - .user-registration__field-wrapper--kolide { - left: calc(100% + 184px); + .user-registration__container--confirmation { + left: calc(150% + 220px); } } &--step2-complete { - .user-registration__field-wrapper--admin { - left: calc(-50% - 184px); + + .user-registration__container--admin { + left: calc(-50% - 600px); + opacity: 0; } - .user-registration__field-wrapper--org { - left: -184px; + .user-registration__container--org { + left: -600px; + opacity: 0; } - .user-registration__field-wrapper--kolide { - left: 50%; + .user-registration__container--kolide { + left: 0; + top: unquote('max(56%, 480px)'); + margin: auto; + } + + .user-registration__container--confirmation { + left: calc(100% + 220px); } } &--step3-complete { - .user-registration__field-wrapper--admin { - left: calc(-100% - 184px); + + .user-registration__container--admin { + left: calc(-100% - 600px); + opacity: 0; } - .user-registration__field-wrapper--org { - left: calc(-50% - 184px); + .user-registration__container--org { + left: calc(-50% - 600px); + opacity: 0; } - .user-registration__field-wrapper--kolide { - left: -184px; + .user-registration__container--kolide { + left: -600px; + opacity: 0; } - } - &::before, - &::after { - background-image: linear-gradient(to right, $ui-medium-grey 50%, transparent 50%); - background-position: left top; - background-repeat: repeat-x; - background-size: 17px 2px; - position: absolute; - top: 100px; - left: 50%; - width: 50%; - height: 2px; - content: ''; - z-index: 1; + .user-registration__container--confirmation { + left: 0; + top: unquote('max(56%, 480px)'); + margin: auto; + } } &::before { @@ -107,89 +151,39 @@ display: none; } } - - &--step3-active, - &--step3-complete { - &::after { - display: none; - } - } } &__description { font-size: 14px; font-weight: $regular; - line-height: 1.43; - letter-spacing: 0.5px; color: $core-dark-blue-grey; } &__title { font-size: 18px; font-weight: $bold; - line-height: 0.72; - letter-spacing: 0.6px; color: $core-dark-blue-grey; margin: 0; padding: 0; } &__field-wrapper { - transition: left 300ms ease; - width: 430px; - min-height: 420px; - padding-bottom: 75px; - border-radius: 4px; background-color: $core-light-blue-grey; - box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3); - margin: 0 auto; - position: absolute; box-sizing: border-box; - margin-left: -215px; z-index: 2; - - &--admin { - left: 50%; - top: -25px; - } - - &--org { - left: calc(100% + 184px); - top: -10px; - } - - &--kolide { - left: calc(150% + 184px); - top: -8px; - } - - input { - background-color: transparent; - } + display: flex; + flex-direction: column; + align-items: center; .button { - bottom: 0; - top: auto; - position: absolute; - border-top-left-radius: 0; - border-top-right-radius: 0; - - &:active { - top: auto; - } + width: 160px; + margin-top: 40px; } .registration-fields { - padding: 0 35px 25px; box-sizing: border-box; + width: 100%; } } - &__confirmation { - background-color: $core-light-blue-grey; - position: relative; - z-index: 2; - width: 500px; - height: 500px; - } } diff --git a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx index 53c11698cc38..2c5126c1d371 100644 --- a/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx +++ b/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx @@ -22,12 +22,9 @@ class InputFieldWithIcon extends InputField { }; renderHeading = () => { - const { error, placeholder, value } = this.props; + const { error, placeholder } = this.props; - const labelClasses = classnames( - `${baseClass}__label`, - { [`${baseClass}__label--hidden`]: !value }, - ); + const labelClasses = classnames(`${baseClass}__label`); if (error) { return
{error}
; diff --git a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss index 0375fc1a68d2..8ec61562fa72 100644 --- a/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss +++ b/frontend/components/forms/fields/InputFieldWithIcon/_styles.scss @@ -1,5 +1,5 @@ .input-icon-field { - margin-top: 22px; + margin-top: 16px; position: relative; width: 100%; @@ -20,10 +20,11 @@ } &__input { - border: 2px; - border-bottom: 2px solid $core-blue; - padding: 0 30px 8px 0; - font-size: 20px; + border: 1px solid $ui-borders; + background-color: $ui-light-grey; + border-radius: 4px; + padding: 9px 30px 9px 16px; + font-size: $small; text-indent: 1px; position: relative; width: 100%; @@ -43,33 +44,25 @@ border-bottom-color: $alert; } - &--password { - letter-spacing: 7px; - } } &__label { - color: $core-blue; - font-size: $small; - text-transform: lowercase; - - &--hidden { - visibility: hidden; - } + font-size: $x-small; + font-weight: $bold; + margin-bottom: 2px; } &__errors { - color: $alert; - font-size: $small; - text-transform: lowercase; + font-size: $x-small; } &__hint { - font-size: 14px; + font-size: $x-small; + font-style: italic; font-weight: $regular; - line-height: 1.57; - letter-spacing: 1px; - color: $core-medium-blue-grey; + line-height: 20px; + display: inline-block; + margin-top: 8px; code { color: $core-blue; diff --git a/frontend/layouts/CoreLayout/_styles.scss b/frontend/layouts/CoreLayout/_styles.scss index b8cc94e69a25..1fe46418bbdd 100644 --- a/frontend/layouts/CoreLayout/_styles.scss +++ b/frontend/layouts/CoreLayout/_styles.scss @@ -9,6 +9,7 @@ padding: 0 0 0 $pad-base; max-width: calc(100% - 217px); position: relative; + background-color: $white; &--small { max-width: calc(100% - 73px); diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx index 7fc359350657..53fe0d744f7e 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx +++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx @@ -43,8 +43,8 @@ class Breadcrumbs extends Component { return (
- - + +
); } diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss index e552bca195b1..ffbb90c50f41 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss +++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss @@ -2,9 +2,9 @@ display: flex; justify-content: space-between; align-content: center; - width: 665px; + width: 600px; height: 125px; - margin: 0 auto; + margin: 38px auto 0; @include breakpoint(tablet) { height: 75px; @@ -12,25 +12,20 @@ &__page { text-align: center; - width: 145px; - font-size: 14px; + width: 150px; + font-size: $small; font-weight: $regular; - line-height: 1.53; - letter-spacing: 0.5px; - color: $core-dark-blue-grey; + color: $white; position: relative; &::before { content: ''; position: absolute; - width: 235px; + width: 200px; height: 2px; - background-image: linear-gradient(to right, $ui-medium-grey 50%, transparent 50%); - background-position: left top; - background-repeat: repeat-x; - background-size: 17px 2px; + background-color: $core-blue; bottom: 43px; - left: 84px; + left: 87px; @include breakpoint(tablet) { bottom: 23px; @@ -40,7 +35,7 @@ &::after { @extend %kolidecon; @include size(24px); - background-color: $white; + background-color: transparent; display: block; border-radius: 50%; content: ''; @@ -61,23 +56,29 @@ &--active { font-weight: $bold; - color: $core-dark-blue-grey; + color: $white; } &--1 { &::after { - border: solid 2px $success; + border: 2px solid $white; } &.registration-breadcrumbs__page--active { + + &::before { + background: linear-gradient(to right, $white 50%, $core-blue 50%); + } + &::after { - background-color: $success; + background-color: transparent; + border: 2px solid $white; } } &.registration-breadcrumbs__page--complete { &::before { - background-image: linear-gradient(to right, $success 0%, $core-purple 100%); + background-color: $white; background-size: auto; z-index: 2; } @@ -85,7 +86,7 @@ &::after { @include size(28px); content: '\f035'; - color: $success; + color: $white; border: 0; } } @@ -93,26 +94,30 @@ &--2 { &::after { - border: solid 2px $core-purple; + border: solid 2px $core-blue; } &.registration-breadcrumbs__page--active { + &::before { + background: linear-gradient(to right, $white 50%, $core-blue 50%); + } + &::after { - background-color: $core-purple; + background-color: transparent; + border: 2px solid $white; } } &.registration-breadcrumbs__page--complete { &::before { - background-image: linear-gradient(to right, $core-purple 0%, $core-blue 100%); - background-size: auto; + background: $white; z-index: 2; } &::after { @include size(28px); content: '\f035'; - color: $core-purple; + color: $white; border: 0; } } @@ -128,8 +133,14 @@ } &.registration-breadcrumbs__page--active { + + &::before { + background: linear-gradient(to right, $white 50%, $core-blue 50%); + } + &::after { - background-color: $core-blue; + background-color: transparent; + border: 2px solid $white; } } @@ -137,7 +148,7 @@ &::after { @include size(28px); content: '\f035'; - color: $core-blue; + color: $white; border: 0; } } diff --git a/frontend/pages/RegistrationPage/RegistrationPage.jsx b/frontend/pages/RegistrationPage/RegistrationPage.jsx index bbea43d436b0..1a00fd09de4b 100644 --- a/frontend/pages/RegistrationPage/RegistrationPage.jsx +++ b/frontend/pages/RegistrationPage/RegistrationPage.jsx @@ -11,7 +11,7 @@ import { setup } from 'redux/nodes/auth/actions'; import { showBackgroundImage } from 'redux/nodes/app/actions'; import EnsureUnauthenticated from 'components/EnsureUnauthenticated'; -import fleetLogoText from '../../../assets/images/fleet-logo-text-black.svg'; +import fleetLogoText from '../../../assets/images/fleet-logo-text-white.svg'; export class RegistrationPage extends Component { static propTypes = { diff --git a/frontend/pages/RegistrationPage/_styles.scss b/frontend/pages/RegistrationPage/_styles.scss index 6857a4843a63..2dc9fbb165b5 100644 --- a/frontend/pages/RegistrationPage/_styles.scss +++ b/frontend/pages/RegistrationPage/_styles.scss @@ -8,7 +8,7 @@ &__logo { @include position(absolute, 15px null null 15px); - width: 200px; + width: 120px; @include breakpoint(tablet) { width: 125px; diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss index 9c7b374fac6d..83771cf7e89f 100644 --- a/frontend/styles/global/_global.scss +++ b/frontend/styles/global/_global.scss @@ -47,13 +47,9 @@ a { } .wrapper { - background: $white; + background: $core-gradient; margin: 0; - &--background { - background: url('../assets/images/background.png') center center; - background-size: cover; - } } .body-wrap {
Administrator Configuration