[EP-2362] Implement left panel/header from design

[canac]

Description

• Implement the left panel from the new design for the sign in and sign up modals. On small screens, the left panel becomes a header.
• Also, I did some styling cleanup of the modals inside the register account modal.

It is not reflected in the Figma design, but when a user is logged in or identified, we show a minimal version of the modals that doesn't include the left panel or header.

I've tested this thoroughly, but there are a lot of combinations of states, so it would be great to get another pair of eyes on it in case I missed something.

Testing

• Completely log yourself out and test the sign in and sign up modals with a large and small screen width.
• Delete the give-session cookie to test the minimal mode of the sign in and sign up modals with a large and small screen width. (Or set this.newUser = false in registerAccountModal.component.js)
• In the subscription callback in $onInit in registerAccountModal.component.js, add return this.stateChanged('contact-info') to test the contact info modal with a large and small screen.
• Override the registration-state locally to test the user match modal.

[dr-bizz]

This is looking amazing! Thank you for making this so good. I just had a few comments.

The "Powered by Okta" text is more faded out on the design.

During responsive testing, when I get to 380 px (some phones), the background image doesn't go all the way down to the button of the div and the text prob needs to get smaller.

You could fix this by changing the image to a background image.

    background: url("/assets/img/register-account-header.jpeg");
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: cover;
    background-position: center;
  }

[canac]

The "Powered by Okta" text is more faded out on the design.

@dr-bizz I mentioned to Ryan that the contrast didn't pass WCAG guidelines, and he updated it in one of the screens but not all of them.

[canac]

During responsive testing, when I get to 380 px (some phones), the background image doesn't go all the way down to the button of the div and the text prob needs to get smaller.
You could fix this by changing the image to a background image.

@dr-bizz I opted to not use a background image because the layout was easier to implement if the image takes up space in the desktop view. I adjusted the styles to fill the whole vertical area even at very small screen widths.

[rguinee]

Can confirm contrast issue.

…

On Mon, Feb 10, 2025 at 3:54 PM Caleb Cox ***@***.***> wrote: The "Powered by Okta" text is more faded out on the design. @dr-bizz <https://github.com/dr-bizz> I mentioned to Ryan that the contrast didn't pass WCAG guidelines, and he updated it in one of the screens but not all of them. — Reply to this email directly, view it on GitHub <#1148 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BBNX2D4LGC4RGY2XLBTT5AT2PEGYHAVCNFSM6AAAAABWW6YELWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBZGIYTEOBVHE> . You are receiving this because your review was requested.Message ID: ***@***.***>

[dr-bizz]

Thank you for those changes! The code is looking great!

[rguinee]

Looks great!

One thing that may not be an issue when it's merged with the register modal changes.

Background color issue when modal height expands from initial height.