Merge pull request #6 from MysticalMike60t/dev

Dev
MysticalMike60t · Sep 10, 2024 · a1ed423 · a1ed423
2 parents 7c61fd5 + 3d46fd5
commit a1ed423
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git 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
@@ -1,21 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import styles from "../../../styles";
 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 (
-    <button type={type} className={className} style={style} {...props}>
+    <button
+      type={type}
+      className={className}
+      style={hovering ? { ...style.base, ...style.hover } : style.base}
+      onMouseEnter={() => setHovering(true)}
+      onMouseLeave={() => setHovering(false)}
+      {...props}
+    >
       <span className="button-content">{children}</span>
     </button>
   );

diff --git 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}`,