Merge pull request #15 from celestiaorg/hotfix/icon-button-hover-issu…

…es-on-mobile Fix icon buton hover issues on mobile
celestiaorg · Jan 7, 2025 · 408a2aa · 408a2aa
2 parents 39c1e7b + 0159b88
commit 408a2aa
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 110 deletions.
diff --git a/src/macros/Buttons/PrimaryButton.js b/src/macros/Buttons/PrimaryButton.js
@@ -34,7 +34,7 @@ const PrimaryButton = ({
 
 	return (
 		<Button
-			className={`group relative 
+			className={`group relative block
 				${baseClasses} 
 				${sizeClasses[size]}
 				${lightMode ? lightModeClasses : darkModeClasses}

diff --git a/src/macros/Buttons/SecondaryButton.js b/src/macros/Buttons/SecondaryButton.js
@@ -2,64 +2,62 @@ import Link from "@/macros/Link/Link";
 import { getButtonType } from "@/utils/getButtonType";
 
 const SecondaryButton = ({
-  children,
-  className,
-  onClick = null,
-  href = null,
-  self = null,
-  lightMode = false,
-  noBorder = false,
-  hover = true,
-  size = "md",
+	children,
+	className,
+	onClick = null,
+	href = null,
+	self = null,
+	lightMode = false,
+	noBorder = false,
+	hover = true,
+	size = "md",
 }) => {
-  const baseClasses = `leading-none text-center uppercase rounded-full block no-underline transform transition-all duration-150`;
-  const lightModeClasses = `text-purple-dark border-purple-dark ${
-    hover ? "hover:text-white transition-all duration-300" : null
-  }`;
-  const darkModeClasses = `bg-purple text-white border-white ${
-    hover
-      ? "hover:text-purple-dark hover:border-purple-dark transition-all duration-300"
-      : null
-  }`;
-  const borderClasses = noBorder ? `border-0` : `border`;
-  const sizeClasses = {
-    sm: `text-xs px-3 py-2`,
-    md: `text-xs px-5 py-3`,
-    lg: `text-base px-10 py-5`,
-  };
+	const baseClasses = `leading-none text-center uppercase rounded-full block no-underline transform transition-all duration-150`;
+	const lightModeClasses = `text-purple-dark border-purple-dark ${hover ? "hover:text-white transition-all duration-300" : null}`;
+	const darkModeClasses = `bg-purple text-white border-white ${
+		hover ? "hover:text-purple-dark hover:border-purple-dark transition-all duration-300" : null
+	}`;
+	const borderClasses = noBorder ? `border-0` : `border`;
+	const sizeClasses = {
+		sm: `text-xs px-3 py-2`,
+		md: `text-xs px-5 py-3`,
+		lg: `text-base px-10 py-5`,
+	};
 
-  // define what element the button should render as
-  const buttonType = getButtonType(href, onClick);
-  const ButtonTypes = {
-    anchor: Link,
-    button: "button",
-    div: "div",
-  };
-  const Button = ButtonTypes[buttonType];
+	// define what element the button should render as
+	const buttonType = getButtonType(href, onClick);
+	const ButtonTypes = {
+		anchor: Link,
+		button: "button",
+		div: "div",
+	};
+	const Button = ButtonTypes[buttonType];
 
-  return (
-    <Button
-      className={`group relative block overflow-hidden 
+	return (
+		<Button
+			className={`group relative 
         ${baseClasses} 
         ${sizeClasses[size]}
         ${lightMode ? lightModeClasses : darkModeClasses}
         ${borderClasses} 
         ${className}
         `}
-      onClick={onClick}
-      href={href}
-      self={self}
-    >
-      {hover && (
-        <div
-          className={`z-0 absolute w-1/2 h-full top-full left-1/2 -translate-x-1/2 block rounded-full transition-all duration-200 group-hover:top-0 group-hover:w-full group-hover:scale-125 ${
-            lightMode ? "bg-purple" : "bg-white"
-          }`}
-        ></div>
-      )}
-      <div className={`relative z-10`}>{children}</div>
-    </Button>
-  );
+			onClick={onClick}
+			href={href}
+			self={self}
+		>
+			<div className='absolute inset-0 overflow-hidden rounded-full'>
+				{hover && (
+					<div
+						className={`absolute w-1/2 h-full top-full left-1/2 -translate-x-1/2 block rounded-full transition-all duration-200 group-hover:top-0 group-hover:w-full group-hover:scale-125 ${
+							lightMode ? "bg-purple" : "bg-white"
+						}`}
+					></div>
+				)}
+			</div>
+			<div className={`relative z-10`}>{children}</div>
+		</Button>
+	);
 };
 
 export default SecondaryButton;
diff --git a/src/macros/Icons/Icon.js b/src/macros/Icons/Icon.js
@@ -3,76 +3,68 @@ import { rotateClass } from "@/utils/rotateClassName";
 import ArrowLongSVG from "../SVGs/ArrowLongSVG";
 
 const Icon = ({
-  Icon = <ArrowLongSVG />,
-  direction = "up",
-  hover = false,
-  HoverIcon = <ArrowLongSVG />,
-  hoverDirection = "up",
-  className,
-  size = "md", // xs, sm, md, lg || 16px, 24px, 48px, 64px
-  border = true,
-  dark = false,
-  transparentBg = false,
+	Icon = <ArrowLongSVG />,
+	direction = "up",
+	hover = false,
+	HoverIcon = <ArrowLongSVG />,
+	hoverDirection = "up",
+	className,
+	size = "md", // xs, sm, md, lg || 16px, 24px, 48px, 64px
+	border = true,
+	dark = false,
+	transparentBg = false,
 }) => {
-  const sizeClasses = {
-    xs: "h-4 w-4",
-    sm: "h-6 w-6",
-    40: "h-10 w-10",
-    md: "h-12 w-12",
-    lg: "h-16 w-16",
-  };
+	const sizeClasses = {
+		xs: "h-4 w-4",
+		sm: "h-6 w-6",
+		40: "h-10 w-10",
+		md: "h-12 w-12",
+		lg: "h-16 w-16",
+	};
 
-  return (
-    <div
-      className={`
-        ${
-          hover ? "group" : ""
-        } transition-colors duration-200 relative overflow-hidden rounded-full 
+	return (
+		<div
+			className={`
+        ${hover ? "group" : ""} transition-colors duration-200 relative overflow-hidden rounded-full 
         ${sizeClasses[size]}
         ${
-          border
-            ? `border ${
-                dark
-                  ? `border-white ${hover ? "group-hover:border-black" : ""}`
-                  : `border-black ${hover ? "group-hover:border-white" : ""}`
-              }`
-            : ``
-        }
+			border
+				? `border ${
+						dark ? `border-white ${hover ? "group-hover:border-black" : ""}` : `border-black ${hover ? "group-hover:border-white" : ""}`
+				  }`
+				: ``
+		}
         ${
-          transparentBg
-            ? `bg-transparent`
-            : dark
-            ? `bg-black ${hover ? "group-hover:bg-white" : ""}`
-            : `bg-white ${hover ? "group-hover:bg-black" : ""}`
-        }
+			transparentBg
+				? `bg-transparent`
+				: dark
+				? `bg-black ${hover ? "group-hover:bg-white" : ""}`
+				: `bg-white ${hover ? "group-hover:bg-black" : ""}`
+		}
         ${className}
         `}
-    >
-      <div
-        className={`absolute top-0 left-0 h-full w-full transition-transform 
+		>
+			<div
+				className={`absolute top-0 left-0 h-full w-full transition-transform 
             ${rotateClass(direction)}`}
-      >
-        <div
-          className={`absolute top-0 left-0 h-full w-full transition-all duration-300
+			>
+				<div
+					className={`absolute top-0 left-0 h-full w-full transition-all duration-300
             ${hover ? "group-hover:-top-full" : ""}`}
-        >
-          <div
-            className={`top-0 left-0 absolute h-full w-full flex justify-center items-center`}
-          >
-            {Icon}
-          </div>
-          {hover && (
-            <div
-              className={`top-full left-0 absolute h-full w-full flex justify-center items-center transition-transform 
+				>
+					<div className={`top-0 left-0 absolute h-full w-full flex justify-center items-center`}>{Icon}</div>
+					{hover && (
+						<div
+							className={`top-full left-0 absolute h-full w-full flex justify-center items-center transition-transform 
                 ${rotateClass(hoverDirection)}`}
-            >
-              {HoverIcon}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
+						>
+							{HoverIcon}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default Icon;