diff --git a/package.json b/package.json index ec52607..1c0acc0 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,8 @@ { - "name": "@MysticalMike60t/caden", - "version": "1.0.5", + "name": "caden", + "version": "1.0.6", "description": "UI Npm Package", "main": "lib/index.js", - "publishConfig": { - "@MysticalMike60t:registry": "https://npm.pkg.github.com" - }, "scripts": { "webpack": "webpack", "build": "babel src --out-dir lib && webpack", diff --git a/src/components/UI/Buttons/Submit.js b/src/components/UI/Buttons/Submit.js index ec50216..b662013 100644 --- a/src/components/UI/Buttons/Submit.js +++ b/src/components/UI/Buttons/Submit.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import PropTypes from "prop-types"; import styles from "../../../styles"; import css from "./Submit.style"; @@ -6,16 +6,19 @@ import css from "./Submit.style"; console.log(styles); // Add this line to log the styles object const getButtonStyles = (type) => { + const [hovering, setHovering] = useState(false); switch (type) { case "submit": - console.log(css( - styles.defaults.buttons.primary.background, - styles.defaults.buttons.primary.color, - styles.defaults.buttons.primary.border.color, - styles.defaults.buttons.primary.hover.background, - styles.defaults.buttons.primary.hover.color, - styles.defaults.buttons.primary.hover.border.color - )); + console.log( + css( + styles.defaults.buttons.primary.background, + styles.defaults.buttons.primary.color, + styles.defaults.buttons.primary.border.color, + styles.defaults.buttons.primary.hover.background, + styles.defaults.buttons.primary.hover.color, + styles.defaults.buttons.primary.hover.border.color + ) + ); return css( styles.defaults.buttons.primary.background, styles.defaults.buttons.primary.color, @@ -54,7 +57,14 @@ const Submit = ({ const style = getButtonStyles(type); return ( - ); diff --git a/src/components/UI/Buttons/Submit.style.js b/src/components/UI/Buttons/Submit.style.js index 0ae950f..6ffadd5 100644 --- a/src/components/UI/Buttons/Submit.style.js +++ b/src/components/UI/Buttons/Submit.style.js @@ -7,13 +7,15 @@ const css = ( primaryHoverBorder ) => { return { - background: primaryBackground, - color: primaryColor, - border: `1px solid ${primaryBorder}`, - borderRadius: "10px", - padding: "10px 20px", - transition: "100ms ease all", - ":hover": { + base: { + background: primaryBackground, + color: primaryColor, + border: `1px solid ${primaryBorder}`, + borderRadius: "10px", + padding: "10px 20px", + transition: "100ms ease all", + }, + hover: { background: primaryHoverBackground, color: primaryHoverColor, border: `1px solid ${primaryHoverBorder}`,