Apply responsiveness to RWP (nav, signin, privacy, survey)

[Carla-Moz]

Closes #243
In this PR, the signin cards, navbar, onboarding pages for privacy/terms and the demographic survey are made responsive with css-grid and flexbox. I've also removed the pop-up for google to have users continue with google within the same page.

Next steps are having design review the components for the screen sizes which will likely lead to another responsive PR. I didn't want to overwhelm with one huge massive styles PR.

Also looks like my new responsive styles broke one of the ux tests so will also investigate.

Updated storybook: RWP Storybook

[rhelmer]

Also looks like my new responsive styles broke one of the ux tests so will also investigate.

I think the test failure is just the switch from signInWithPoup to signInWithRedirect (which looks great btw!), this whole part here is waiting for the pop-up to open, switching to that window, interacting, and switching back, which could be simplified now:

rally-web-platform/tests/integration/ux.test.ts

Lines 111 to 137 in bf6c357

	// Google sign-in prompt should open
	await driver.wait(async () => {
	return (await driver.getAllWindowHandles()).length === 2;
	}, WAIT_FOR_PROPERTY);
	await driver.switchTo().window((await driver.getAllWindowHandles())[1]);
	await driver.wait(
	until.titleIs("Auth Emulator IDP Login Widget"),
	WAIT_FOR_PROPERTY
	);
	// FIXME this emulator auth pop-up isn't ready on the default "loaded" event, the window will close anyway so retry until it responds.
	await driver.executeScript(
	`window.setInterval(() => document.querySelector(".mdc-button").click(), 1000)`
	);
	await findAndAct(driver, By.id("autogen-button"), (e) => e.click());
	await findAndAct(driver, By.id("sign-in"), (e) => e.click());
	// Google sign-in prompt should close.
	await driver.wait(async () => {
	return (await driver.getAllWindowHandles()).length === 1;
	}, WAIT_FOR_PROPERTY);
	// Switch back to original window.
	await driver.switchTo().window((await driver.getAllWindowHandles())[0]);

[rhelmer]

This looks much better on a smaller screen, but completing all the various tasks (join/leave, account settings etc) is pretty cramped on a smaller screen (iPhone 12 Pro dimensions used here via Chrome devtools):

[rhelmer]

I find the way the menu behavior changes when going across the CSS breakpoint from the hamburger menu button to the user icon a little jarring, the only thing I've found that is really a bug per se is that there's no way to dismiss the menu if you:

1. click the hamburger menu while the window is smaller then leaving the menu open, and
2. expand the browser window horizontally so the control changes from the "X" to the user icon. I can't figure out how to dismiss the menu now, unless I resize the window to be smaller again:

[rhelmer]

I think this isn't necessarily new (the pop-up have this same behavior but it's more noticeable with the redirect) - after completing login with the Google sign-in redirect, the sign-in page is shown again briefly, before the redirect to the studies page happens.

This is relatively minor, but I bet there's a way to deal with this in the UI using the SDK, maybe by disabling the login fields and making it look inactive etc. until the signInWithRedirect either resolves or rejects.

I think users on slower connections are more likely to see this, and may try to interact with the sign-in page while the auth provider response is still pending.

[Carla-Moz]

Hi Rob, yes the studies page, authenticated profile pages and privacy pages haven't be worked on yet. Only the nav, sign-in, onboarding privacy and terms pages. I will fix the bugs on the nav along with the redirect login issue. Thank you!

[tangcasey]

Approved for merge