diff --git a/frontend/components/AuthenticationFormWrapper/AuthenticationFormWrapper.tsx b/frontend/components/AuthenticationFormWrapper/AuthenticationFormWrapper.tsx index 3ddb86b50b..e87cabb74e 100644 --- a/frontend/components/AuthenticationFormWrapper/AuthenticationFormWrapper.tsx +++ b/frontend/components/AuthenticationFormWrapper/AuthenticationFormWrapper.tsx @@ -44,7 +44,7 @@ const AuthenticationFormWrapper = ({ {breadcrumbs}
- + {(header || headerCta) && (
{header && } diff --git a/frontend/components/AuthenticationFormWrapper/_styles.scss b/frontend/components/AuthenticationFormWrapper/_styles.scss index e893250410..4a9e5de1c9 100644 --- a/frontend/components/AuthenticationFormWrapper/_styles.scss +++ b/frontend/components/AuthenticationFormWrapper/_styles.scss @@ -1,9 +1,8 @@ .auth-form-wrapper { display: flex; flex-direction: column; - justify-content: center; flex-grow: 1; - padding: $pad-medium 0; + padding: $pad-xxlarge 0; gap: 2.5rem; align-items: center; @include gradient-background; diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss index 4f5515475a..357ac0ac4c 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss +++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss @@ -3,22 +3,17 @@ display: flex; justify-content: center; width: 100%; - height: 125px; &__wrapper { display: flex; justify-content: center; - height: 125px; - padding-top: $pad-medium; - - @include breakpoint(tablet) { - height: 75px; - } + height: 54px; + padding-top: 48px; } &__page { text-align: center; - min-width: 156px; + min-width: 250px; font-size: $small; font-weight: $regular; color: $ui-fleet-black-75; @@ -33,29 +28,17 @@ &::before { content: ""; position: absolute; - width: 84.5%; + width: 225px; height: 2px; background-color: $ui-fleet-black-25; - bottom: 36%; - left: 90px; - - // Firefox-specific - @-moz-document url-prefix() { - bottom: 38.2%; - } - - @include breakpoint(tablet) { - bottom: 26.5%; - // Firefox-specific - @-moz-document url-prefix() { - bottom: 30%; - } - } + top: 42px; + left: 137px; } &::after { @extend %fleeticon; @include size(24px); + min-height: 24px; background-color: transparent; display: block; border-radius: 50%; @@ -65,14 +48,10 @@ position: relative; z-index: 1; cursor: pointer; - - @include breakpoint(tablet) { - margin-top: $pad-xsmall; - } } - &:focus { - outline: 1px dashed $ui-fleet-black-75; + &:focus-visible { + outline: 1px solid $core-fleet-black; border-radius: $border-radius; } @@ -82,8 +61,7 @@ &--1 { &::after { - border: 2px solid $ui-fleet-black-75; - margin-top: 11px; + outline: 2px solid $ui-fleet-black-75; } &.registration-breadcrumbs__page--active { @@ -97,7 +75,7 @@ &::after { background-color: transparent; - border: 2px solid $ui-fleet-black-75; + outline: 2px solid $ui-fleet-black-75; } } @@ -112,15 +90,14 @@ @include size(28px); content: "\f035"; color: $ui-fleet-black-75; - border: 0; + outline: 0; } } } &--2 { &::after { - border: solid 1px $ui-fleet-black-25; - margin-top: 11px; + outline: solid 1px $ui-fleet-black-25; } &.registration-breadcrumbs__page--active { @@ -134,7 +111,7 @@ &::after { background-color: transparent; - border: 2px solid $ui-fleet-black-75; + outline: 2px solid $ui-fleet-black-75; } } @@ -148,7 +125,7 @@ @include size(28px); content: "\f035"; color: $ui-fleet-black-75; - border: 0; + outline: 0; } } } @@ -159,8 +136,7 @@ } &::after { - border: solid 1px $ui-fleet-black-25; - margin-top: 11px; + outline: solid 1px $ui-fleet-black-25; } &.registration-breadcrumbs__page--active { @@ -174,7 +150,7 @@ &::after { background-color: transparent; - border: 2px solid $ui-fleet-black-75; + outline: 2px solid $ui-fleet-black-75; } } @@ -183,7 +159,7 @@ @include size(28px); content: "\f035"; color: $ui-fleet-black-75; - border: 0; + outline: 0; } } } diff --git a/frontend/pages/RegistrationPage/_styles.scss b/frontend/pages/RegistrationPage/_styles.scss index d23861caa1..40a28a8d6c 100644 --- a/frontend/pages/RegistrationPage/_styles.scss +++ b/frontend/pages/RegistrationPage/_styles.scss @@ -21,4 +21,10 @@ &__flash-message { top: 180px; } + + .button-wrap { + button { + width: 200px; + } + } }