From b558f1b76feb5d90f43e5837bb78e8fd05e5cdb8 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 26 Oct 2025 15:27:55 +0200
Subject: [PATCH] Fix log out button icon size

---
 app/components/elements/Button.module.css | 4 ++--
 app/components/elements/Button.tsx        | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index 5d2004fa8..cd107c029 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -114,13 +114,13 @@
 	margin-inline-end: 0 !important;
 }
 
-.small > .buttonIcon {
+.buttonIconSmall {
 	min-width: 1rem;
 	max-width: 1rem;
 	margin-inline-end: var(--s-1);
 }
 
-.miniscule > .buttonIcon {
+.buttonIconMiniscule {
 	min-width: 0.857rem;
 	max-width: 0.857rem;
 	margin-inline-end: var(--s-1);
diff --git a/app/components/elements/Button.tsx b/app/components/elements/Button.tsx
index 48c8da937..7e1351ffa 100644
--- a/app/components/elements/Button.tsx
+++ b/app/components/elements/Button.tsx
@@ -42,7 +42,7 @@ export function SendouButton({
 		>
 			{icon &&
 				React.cloneElement(icon, {
-					className: iconClassName(icon.props.className, children),
+					className: iconClassName(icon.props.className, children, size),
 				})}
 			{children}
 		</ReactAriaButton>
@@ -88,7 +88,7 @@ export function LinkButton({
 			>
 				{icon &&
 					React.cloneElement(icon, {
-						className: iconClassName(icon.props.className, children),
+						className: iconClassName(icon.props.className, children, size),
 					})}
 				{children}
 			</a>
@@ -105,7 +105,7 @@ export function LinkButton({
 		>
 			{icon &&
 				React.cloneElement(icon, {
-					className: iconClassName(icon.props.className, children),
+					className: iconClassName(icon.props.className, children, size),
 				})}
 			{children}
 		</Link>
@@ -155,8 +155,11 @@ function buttonClassName({
 function iconClassName(
 	baseClassName: string | undefined,
 	children: React.ReactNode,
+	size: SendouButtonProps["size"],
 ) {
 	return clsx(baseClassName, styles.buttonIcon, {
 		[styles.lonely]: !children,
+		[styles.buttonIconSmall]: size === "small",
+		[styles.buttonIconMiniscule]: size === "miniscule",
 	});
 }