More Button Variants

[SeiKasahara]

Basic Information

To make it easier and more convenient for everyone to correctly reference all button styles, we need to create a button page as an example and improve the styles of all button components.

Other Information

1. button-test.tsx page will be created.
2. new button variant will be deployed.

[github-actions[bot]]

Branch issue-70-Request_to_Add_More_Button_Variant_and_Create_a_Button_Reference_Example_Page created!

[SodaVolcano]

How about we have a single page displaying all the components? Since we have a page for fonts already and I think some components are showcased on index.tsx on some branches, would be better to have a page dedicated to showing all the components.

Also, what are the button variants? I only know the default blue button and the greyed-out deactivated button

[SeiKasahara]

1. I agree to set a united showcase page to let people know how to reference the components properly. Maybe we can merge font.tsx with the button-test.tsx.

2. I plan to working forward due to the floating button here: reference They have different border radius which is 100px And when some button components activated, they are considered to become grey, however, I can't find those grey style in tailwind.config.ts, which is shown in [HiFi Designs- #Account - "Submit report]. I am not sure if we need to conclude it.

   
   /* Buttons */

/ Auto layout / display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 16px; gap: 10px;

width: 335px; height: 54px;

/ Greys/Neutral BG / background: #F4F4F4; border-radius: 100px;

/ Inside auto layout / flex: none; order: 0; flex-grow: 0;

This is my plan to modify the `button.tsx`
```tsx
    variants: {
      variant: {
        default: `bg-penni-main text-white headline rounded-lg ${hoverStyles}`, // Default blue
        link: `bg-white text-penni-main headline rounded-lg`,
        inactive: `bg-penni-grey-inactive text-white text-opacity-50 headline rounded-lg`,
        floating: `bg-penni-main text-white subheadline-medium rounded-penni-special`,
        pay: `bg-penni-main text-white subheadline rounded-penni-special`,
        finish: `bg-penni-grey-finished text-penni-text-finish body-medium rounded-penni-special`,
        cutout: `bg-white text-penni-main headline border border-2 border-penni-main rounded-lg border-solid`,
      }, 

[SodaVolcano]

I can't remember if I asked or someone else asked to work on the inactive button, in hindsight I should've opened an issue for it, will do it now. Not sure about the different buttons variants since I don't think they are used anywhere? That page seemed like a general template.

EDIT: here #71

[SodaVolcano]

Spoke to @yunho7687 , make a single page showcasing all the components. I've edited the title and created issue here #80

[Mingyu-Lian]

I think I will create a new page to put all the components inside to make it easier for front-end developers.

[Mingyu-Lian]

Tian qi and I will do that referring to branch 80 Issue

[SeiKasahara]

I can't remember if I asked or someone else asked to work on the inactive button, in hindsight I should've opened an issue for it, will do it now. Not sure about the different buttons variants since I don't think they are used anywhere? That page seemed like a general template.

EDIT: here #71

for other variants, did anyone do that?

[SodaVolcano]

for other variants, did anyone do that?

Don't think so, feel free to add that in

[SodaVolcano]

Closed by #107