Fixed Hovering

MysticalMike60t · Sep 10, 2024 · a004fe1 · a004fe1
1 parent 41cf1e1
commit a004fe1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
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}`,