From 6cd5225ceb1e18bfccafb9d63e050cb4e5f6ec66 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 27 May 2022 22:34:41 +0300
Subject: [PATCH] No margin-right on button icon if no text

---
 app/components/Button.tsx | 5 ++++-
 app/styles/global.css     | 6 +++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 26e21e828..e68fad5c1 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -47,7 +47,10 @@ export function Button(props: ButtonProps) {
       type={type}
       {...rest}
     >
-      {icon && React.cloneElement(icon, { className: "button-icon" })}
+      {icon &&
+        React.cloneElement(icon, {
+          className: clsx("button-icon", { lonely: !children }),
+        })}
       {loading && loadingText ? loadingText : children}
     </button>
   );
diff --git a/app/styles/global.css b/app/styles/global.css
index 61f3b9edc..fb62d0d0b 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -186,11 +186,15 @@ a {
   opacity: 0.6;
 }
 
-:is(button, .button) > .button-icon {
+.button-icon {
   width: 1.25rem;
   margin-inline-end: var(--s-1-5);
 }
 
+.button-icon.lonely {
+  margin-inline-end: 0;
+}
+
 :is(button, .button).tiny > .button-icon {
   width: 1rem;
   margin-inline-end: var(--s-1);