fix(dashboard-v2): fix styles of Button component

This commit is contained in:
Michał Leszczyk 2022-03-01 16:48:37 +01:00
parent 44331e93d6
commit 97240d128b
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 8 additions and 28 deletions

View File

@ -1,41 +1,21 @@
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import styled from "styled-components";
/** /**
* Primary UI component for user interaction * Primary UI component for user interaction
*/ */
export const Button = ({ primary, label, ...props }) => { export const Button = styled.button.attrs(({ $primary }) => ({
return ( type: "button",
<button className: `px-6 py-3 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600
type="button" ${$primary ? "bg-primary" : "bg-white border-2 border-black"}`,
className={`min-w-button min-h-button rounded-full font-sans uppercase tracking-wide text-button }))``;
${primary ? "bg-primary" : "bg-white border-2 border-black"}`}
{...props}
>
{label}
</button>
);
};
Button.propTypes = { Button.propTypes = {
/** /**
* Is this the principal call to action on the page? * Is this the principal call to action on the page?
*/ */
primary: PropTypes.bool, $primary: PropTypes.bool,
/**
* What background color to use
*/
backgroundColor: PropTypes.string,
/**
* Button contents
*/
label: PropTypes.string.isRequired,
/**
* Optional click handler
*/
onClick: PropTypes.func,
}; };
Button.defaultProps = { Button.defaultProps = {
primary: false, $primary: false,
onClick: undefined,
}; };