Fleet UI: Update setup page styling (#39846)

frontend/components/AuthenticationFormWrapper/AuthenticationFormWrapper.tsx

@@ -44,7 +44,7 @@ const AuthenticationFormWrapper = ({
       </nav>
       {breadcrumbs}
       <div className={classNames}>
-        <Card className={`${baseClass}__card`} paddingSize="xxlarge">
+        <Card className={`${baseClass}__card`} paddingSize="xlarge">
           {(header || headerCta) && (
             <div className={`${baseClass}__header-container`}>
               {header && <CardHeader header={header} />}

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;

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;
         }
       }
     }

frontend/pages/RegistrationPage/_styles.scss

@@ -21,4 +21,10 @@
   &__flash-message {
     top: 180px;
   }
+
+  .button-wrap {
+    button {
+      width: 200px;
+    }
+  }
 }