fix: home action btns hover state

[alter-eggo]

Try out this version of Leather — Extension build, Test report

Pr to fix home action btns hover state, @mica000 wonder if colour is right here?

[markmhendrickson]

Please link issue to PR 🙏

[mica000]

cc @fabric-8: could you check this issue as it was smt related to the [vertical buttons]?(https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?type=design&node-id=10034-90763&mode=design&t=TU0nXcSkYbX7r1VI-4)

[pete-watters]

You can use panda to set this rather than having to use the hook

variant={{ base: 'ghost', md: 'ghost-secondary' }}

I think that will make it cleaner and avoid mixing hooks here

[alter-eggo]

seems variant prop doesn't support it

[pete-watters]

🤔 thats odd.

I checked further and maybe we don't even need this variant at all?

We can change the color of 'ghost' in the recipe based on the screen size?

 ghost: {
        _hover: { bg: { base: 'brown.2', md: 'brown.4' } },
        ...
      },

[alter-eggo]

it will affect all "ghost" buttons, not sure if this is right direction here

[pete-watters]

It looks like you are adding a new variant so that we can change the hover colour on small screens?

So we can:

• add the new variant as you did but pass it as a prop and don't use the hook
• change the hover for all ghost on small screen

You are affecting all ghost buttons anyway as if the viewport it small you switch them to another variant which is the same but has a different hover colour

[alter-eggo]

add the new variant as you did but pass it as a prop and don't use the hook

hm, how can I can get rid of hook? if I pass variant as prop I'll need this hook in parent component, no?

You are affecting all ghost buttons anyway

I here affect only action btns on home screen: send/recieve/buy/swap
If I change ghost variant directly it will affect all these ghost btns

[kyranjamie]

Thanks for taking on @alter-eggo, but IMO we should hold off for the moment.

We have 4 button variants, none that work with this one particular home page use case. It's up to the designers to either add a new variant, or change the design to work with the constraints of the current set of buttons. There is no ghost-secondary in design system atm. So I reckon we should wait it's added to figma before proceeding with implementation.

This issue also impacted the settings menu button 👇🏼

2 months ago, we had a conversation about removing the off white background colour, which would remedy this problem & avoid having to add a new design system button for this edge-case

@mica000 @fabric-8 any chance we can revisit this. Reckon this is a much better solution.

[alter-eggo]

added new color here leather-io/mono#40