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

packages/dashboard-v2/src/components/Button/Button.js

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