diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index 66842d06a34b1774d7ba6442c85eff3b2c657c83..7e14d63ae4a2ea2def9c9d7026f6ed3139bf9edc 100644 --- a/src/components/Button/Button.module.scss +++ b/src/components/Button/Button.module.scss @@ -1,6 +1,6 @@ -.button { +.customButton { font-size: 0.75rem; - color: #5e72e4 !important; + color: #5e72e4; position: relative; transition: all 0.15s ease !important; letter-spacing: 0.025em; @@ -10,7 +10,7 @@ padding: 0.25rem 0.5rem !important; border-radius: 0.25rem !important; border-color: #fff; - background-color: #fff !important; + background-color: #fff; box-shadow: 0 4px 6px rgba(0.1, 0.1, 0.1, 0.11), 0 1px 3px rgba(0.1, 0.1, 0.1, 0.8); font-weight: 600; @@ -32,11 +32,11 @@ transform: translateY(-1px); box-shadow: 0 7px 14px rgba(0.5, 0.5, 0.93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.8); - color: #212529 !important; - border-color: #fff !important; - background-color: #fff !important; + color: #212529; + border-color: #fff; + background-color: #fff; } - &.filledbutton { + &.filledButton { color: #fff; background-color: #5e72e4; } diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index e3f6dbfd649200dfd915a57aed174179cca694eb..e73ff80b0876aef51106eb267fbc8a70e15aed36 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -8,7 +8,7 @@ function Button(props) { return ( <button onClick={handleButtonClick} - className={cs(style.button, style[variant], customClass)} + className={cs(style.customButton, style[variant], customClass)} disabled={disabled} > {label} @@ -20,13 +20,13 @@ Button.propTypes = { customClass: PropTypes.string, label: PropTypes.string, disabled: PropTypes.bool, - variant: PropTypes.oneOf(["filledbutton"]), + variant: PropTypes.oneOf(["filledButton"]), handleButtonClick: PropTypes.func, }; Button.defaultProps = { label: "Button", - variant: "filledbutton", + variant: "filledButton", customClass: "", };