Improve the Button library component.

[kuv2707]

Description

The button component works fine, but exposes too many options as props, when in reality, we might never need more than a small set of configurable options.

We should make the button component a bit more user friendly by providing some more default options.

type ButtonProps = {
    text: string;
    textColor?: string;
    backgroundColor?: string;
    fontSize?: string;
    rounded?: string;
    buttonSize?: string;
    type?: 'submit' | 'reset' | 'button';
    borderColor?: string;
    hoverColor?: string;
    hoverScale?: boolean;
    px?: string;
    py?: string;
    className?: string;
    onClick?: () => void;
};

• The button type should be sufficient to determine the borderColor, hoverColor etc. Let's go with the accept and reject types for now, which have a bunch of preconfigured appearance - accept is green, reject is red etc. If the type is an empty string, we then consider the values of the other props for styling. The hoverColor can be replaced by a brightness filter.
• We can similarly introduce a size prop from which we can infer some predetermined values for rounded, px, py, fontSize etc.
• We should accept the button content as children, not as props.
• We don't need to remove the preexisting options - just add some defaults over them.

Notes

• Post some sample button screenshots using the implemented defaults in the PR description.

[issue-assigner[bot]]

Comment '@csoc-bot claim' to get this issue assigned or '@csoc-bot abandon' to get this issue unassigned.

[sksmagr23]

@csoc-bot claim

[issue-assigner[bot]]

@sksmagr23 This issue has been successfully assigned to you! 🚀