UI tweaks/redesign

[carletex]

Opening this as a discussion-starter for a sharper, less-soft visual direction for SE-2.

In this first iteration, I included:

• Removed all the radius and shadows.
• full height menu item (instead of "pill" item)
• /test page so we can see and test different palettes. (we should test way more palettes!). When you select a palette, it's stored in local storage, so you can refresh + navigate to the home, etc.

Once we agree on some of this basic stuff, we could ***merge and iterate later.

*** we need to adapt scaffold-ui too

But there is something about "semantics" that we could also fix here (this is something that has been bugging me for a long time). Some examples:

1. secondary has two jobs. Used both as a button color (btn-secondary, correct per DaisyUI) and as a muted surface background (bg-secondary in Header active link, /debug banner, contract-picker hover, theme toggle base... incorrect per DaisyUI, which intends base-200/base-300 for muted surfaces). The current default palette gets away with it because bg-secondary is #dae8ff (light) and dark text remains readable. Any palette where secondary isn't a near-white surface immediately breaks readability. Patched the immediate bleed with text-secondary-content pairings; the cleaner fix is to migrate surface usages to bg-base-300.

2. btn-primary vs btn-secondary swapped. Header CTAs (Connect Wallet, Faucet) are btn-secondary; Footer dev tools (price chip, Faucet modal trigger, Block Explorer link) are btn-primary. Backwards... primary should be the user-facing CTA, not the dev-tool decoration.

3. text-neutral used as muted-text. DaisyUI defines neutral as a non-saturated dark/light, not a "muted text" role.

Would love to hear some first impressions!

PS. Be open-minded! We are so used to the SE-2 style that we need to be open-minded to accept a new style (it happened to me haha)

[rin-st]

Love how it looks overall, predefined color schemes and how you show all the examples!

1. Colors
   I think we need to use latest daisyui version so it will be up to date with current docs. There's an update in #1280, but we can also make it here

But there is something about "semantics" that we could also fix here (this is something that has been bugging me for a long time). Some examples:

1. ... the cleaner fix is to migrate surface usages to bg-base-300.
2. Backwards... primary should be the user-facing CTA, not the dev-tool decoration.
3. text-neutral used as muted-text. DaisyUI defines neutral as a non-saturated dark/light, not a "muted text" role.

Completely agree, let's fix all of these! Let's figure out our inconsistencies with the color docs https://daisyui.com/docs/colors/#list-of-all-daisyui-color-names and refactor colors to match it. For example, accent and info different from primary (or don't use them at all), maybe even use base-100 as default bg color to have better elevations. I didn't find many bugs, though, just one text-accent, and I'll add comments in the code for others

2. Themes
   I like our current theme, we can leave it with maybe some minor changes. And I like Ethereum light theme, but dark bg is too dark, and dark base shades are mixed up, from darker to lighter base-200 -> base-100 -> base 300

3. Radius/shadows/height/other styles.
   I like how it looks. But first thing I'm thinking of when I see this is what we need to change so it will look good everywhere. scaffold-ui -> se-2/create-eth -> SRE challenges custom non-scaffold-ui styles to match new ones (better with new images) -> other extensions custom styles if needed. Scaffold-ui bump with those changes should be major to not break the scaffold-ui styles of the apps where it's already used (if any). Assuming we're agree to change all of it

Removed all the radius and shadows.

There are still shadows in the code

---

And since we're continuing to work with daisy, let's close #1079?

[carletex]

Thanks Rinat. Pushed some tweaks.

Let's figure out our inconsistencies with the color docs
maybe even use base-100 as default bg color to have better elevations

Yeah, there are some inconsistencies in the current palette that we should fix!

Maybe I good iteration would be to use the same current palette (+ removing border-radious and shadows + fixing inconsistencies). I guess it'll be easier to fix the surrounding stuff (s-ui, website, etc)

I think we need to use latest daisyui version

Updated here just in case too.

There are still shadows in the code

I left the ones for the dropdown and notifications (which I think make sense). Anything else?

[rin-st]

Maybe I good iteration would be to use the same current palette (+ removing border-radious and shadows + fixing inconsistencies). I guess it'll be easier to fix the surrounding stuff (s-ui, website, etc)

Agree!

I left the ones for the dropdown and notifications (which I think make sense). Anything else?

Oh, I thought you wanted to remove all the shadows. Makes sense!

Yeah, there are some inconsistencies in the current palette that we should fix!

What do you think, should we fix those inconsistencies in this branch? I think in that case it will be a bit easier to update s-ui/sre - one time instead of 2 or more. But in the case of N iterations, it will be easier to track and fix bugs

[technophile-04]

But there is something about "semantics" that we could also fix here (this is something that has been bugging me for a long time).
~ Carlos

SAME! Especially with AI, when you ask it to update the theme, some things get a bit out of contrast. Thanks for tackling this, really like the changes!

same current palette (+ removing border-radious and shadows + fixing inconsistencies). I guess it'll be easier to fix the surrounding stuff (s-ui, website, etc)
~ Carlos

Agree, while switching to other themes more small inconsistencies in contrast appeared

I think in that case it will be a bit easier to update s-ui/sre - one time instead of 2 or more
~ Riant

++ would be really nice if we fix the major ones before updating the s-ui, but testing this PR not too deeply seems like we've covered most of the cases ...one which I found was:

We've btn-circle for Faucet, RevealPrivateKeyModal, etc., we need to remove that

[damianmarti]

@carletex This looks great!

I like sunset palette :-)

Makes sense to be able to select the color palette at the scaffold.config file? So the devs can choose the colors easily...

There are still some rounded boxes, like the notifications and the components on the debug page.

I agree that the classes should be fixed, using better semantics for them, using primary for the real primary components.

Thanks!!