feature: button color scheme

[phamhieu]

Feature request

Is your feature request related to a problem? Please describe.

Primary color is too bright compare to the current Supabase button color. It's difficult to see the white label.

@MildTomato edits -
A couple of other issues -

• Button to be less rounded

• Add text-shadows

• font inheritance not working

[MildTomato]

We have a bit of a mismatch across all the websites - I'll fix it up

[kiwicopple]

A couple of others

• The button is more rounded
• There is no dark-green text shadow

[MildTomato]

Fixing this now

[MildTomato]

We do have a few mismatch of colours in a few places.

in the auth home screen in /app we use green-600 on the large buttons, but in the button component we use green-500. the tailwind config doesn't actually contain our brand color of #3ECF8, although green-600 is close (ish).

I think @kiwicopple text shadow should fix how it looks though - so i'll test it out.

we should probably update the tailwind config in /app to use our brand palette (same as used by the marketing site, and ui lib), rather than the old green colors.

// ui and marketing site
brand: {
          50: '#82dab0',
          100: '#82dab0',
          200: '#69d3a0',
          300: '#50cb90',
          400: '#C5F1DD',
          500: '#9FE7C7',
          600: '#65D9A5',
          700: '#3ECF8E',
          800: '#38BC81',
          900: '#10633E',
 },
 // dashboard app
 green: {
          '100': '#c5f1dd',
          '200': '#c5f1dd',
          '300': '#9fe7c7',
          '400': '#65d9a5',
          '500': '#24b47e',
          '600': '#38bc81',
          '700': '#1c8656',
          '800': '#10633e',
          '900': '#10633e',
        }

[MildTomato]

made some improvements - looks good with shadows.
i'll leave this issue open though for now.

[kiwicopple]

Nice one - also:

left side of the button -> icon
vs
right side of the icon -> text

The space between these looks different yeah? Should they be even?

[MildTomato]

let's make a right icon option 👍 (also I want it for @joshenlim's chevron 😄 )
created issue #26

i think the alignment might be caused by feathericons taking some liberty with their margins - might not be the best icon pack to use.

created issue #25

[MildTomato]

Nice one - also:

left side of the button -> icon
vs
right side of the icon -> text

The space between these looks different yeah? Should they be even?

right icon support has been added in a previous release now 👍 @kiwicopple

[kiwicopple]

legend, thanks Jonny!

i think the alignment might be caused by feathericons taking some liberty with their margins - might not be the best icon pack to use.

That's pretty annoying. Can we set the icon somehow to always be square, then center the icon within the space? That would create even margins on both sides right?

[MildTomato]

That's pretty annoying. Can we set the icon somehow to always be square, then center the icon within the space? That would create even margins on both sides right?

oh yea, i was going to do that 🚀 great minds..

[MildTomato]

closing this as outstanding remarks are in other issues
icon alignment - #25