Theme update

[shannonwells]

Goal

The goal of this PR is to pull in the Style Guide and use it where possible, and otherwise make the style match what is on Frequency.xyz and other branded sites.

Known bug: after changing networks the path is appended and not cleared first. One result is the Nav indicator for the current page disappears. See #197

Not included: updates to styles, given we do not have mocks for the new style for this site.

Closes #195

Checklist

• PR Self-Review and Commenting
• Tests updated

How To Test the Changes

git fetch && git checkout theme-update
npm run dev

1. Click through steps to: connect to network, connect a provider, start to Add an Account Id or Stake, change networks, Become a Provider
2. Make sure the style is consistent and all links are visible, modals can be canceled, etc.

[claireclark1]

The FAQ container is not centered on the screen.

[claireclark1]

Additionally, it doesn't seem to match the style guide. Either import the one from the SG, or abide by the styles here: https://www.figma.com/design/EjFt1XdacOogDZoQ7RetrI/Frequency-Style-Guidelines?node-id=1072-1096&node-type=frame&t=M9rvMiiDpjs2zIh5-0

[claireclark1]

The "Provider Dashboard" seems pretty far away from the header. The dropdown's don't abide by the styleguide either. I'm not seeing the placeholder text, or the disabled state, and the icon looks very small and pushed to the right.

[claireclark1]

If we're going to change the `Provider Login` width, we should also change the `Become a Provider` with to match. They should all be using a reusable component and be centered on the screen.

[claireclark1]

The spacing is too tight (I don't think there is any) in tablet or smaller desktop sizes.

[claireclark1]

Screen.Recording.2024-12-03.at.12.31.00.PM.mov

Doesn't look like the button is disabled on hover.

[claireclark1]

A couple of places I think need improvements but can be done in other stories.

• There should be a spinner or loading period when trying to connect to a network. Currently there is no user feedback.
• There is still a hover state on drop downs when they should be disabled.
• We're still displaying the Questions button in the header of the FAQs page. Seems redundant.
• If you go to "Become a provider" then reload, the active state on the nav bar disappears.
• The size of the elements in the footer don't match the size in the SG.
• The footer does not stick to the bottom when content heights are less than viewport heights.

[claireclark1]

This component looks like it lost the spacing between the underline and body text.

[claireclark1]

This hover state is not defined anywhere. The text changing color to the teal is more standard.

[claireclark1]

We lost spacing here

[claireclark1]

The input and dropdown should have consistent styling.

[claireclark1]

Screen.Recording.2024-12-03.at.1.03.43.PM.mov

The copy button is white now so you cant see it. change to black or navy. Also needs to be centered.

[claireclark1]

The Become a Provider transaction succeeded but we are no longer automatically being logged in when we should be.

[claireclark1]

• There is a lot of extra spacing here that wasn't there before.
• This modal also used to have the current network and accountId selected on open.
• Button should be disabled unless there is a new account and network selected.

[claireclark1]

Spacing does not seem right here either.

[claireclark1]

Spacing does not seem right here either.

[claireclark1]

When navigating to Activity Log, the side nav doesn't change.

[claireclark1]

Screen.Recording.2024-12-03.at.1.13.51.PM.mov

The switch SVG in the upper right is not rendering correctly in all pages.

[claireclark1]

FAQ font sizes don't align with the styleguide. https://www.figma.com/design/EjFt1XdacOogDZoQ7RetrI/Frequency-Style-Guidelines?node-id=1072-1096&node-type=frame&t=llKhFYOQ6Fu0XvWe-0

[claireclark1]

Screen.Recording.2024-12-03.at.1.15.52.PM.mov

There is no longer a hover state on the nav bar.