From 97240d128bd84ee97b58ec2e45f71c4511e56ce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 1 Mar 2022 16:48:37 +0100
Subject: [PATCH] fix(dashboard-v2): fix styles of Button component

---
 .../src/components/Button/Button.js           | 36 +++++--------------
 1 file changed, 8 insertions(+), 28 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Button/Button.js b/packages/dashboard-v2/src/components/Button/Button.js
index 230a5a93..165935a2 100644
--- a/packages/dashboard-v2/src/components/Button/Button.js
+++ b/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,
 };