From 160f0f82978efd8287e9e696d4deb298dc3ade19 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Wed, 8 Mar 2023 20:20:24 +0100
Subject: [PATCH] fix: fixes sizing problems of icon buttons

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../__snapshots__/icon-button.test.tsx.snap   | 24 +++++++++----------
 .../icon-button/icon-button.module.scss       | 21 +++++++---------
 .../common/icon-button/icon-button.tsx        |  6 ++---
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/common/icon-button/__snapshots__/icon-button.test.tsx.snap b/frontend/src/components/common/icon-button/__snapshots__/icon-button.test.tsx.snap
index b480d4475..e669a4842 100644
--- a/frontend/src/components/common/icon-button/__snapshots__/icon-button.test.tsx.snap
+++ b/frontend/src/components/common/icon-button/__snapshots__/icon-button.test.tsx.snap
@@ -3,17 +3,17 @@
 exports[`IconButton correctly uses the onClick callback 1`] = `
 <div>
   <button
-    class="btn-icon p-0 d-inline-flex align-items-stretch   btn btn-primary"
+    class="btn-icon d-inline-flex align-items-stretch   btn btn-primary"
     data-testid="icon-button"
     type="button"
   >
     <span
-      class="icon-part d-flex align-items-center"
+      class="icon-part"
     >
       BootstrapIconMock_Heart
     </span>
     <span
-      class="text-part d-flex align-items-center"
+      class="text-part"
     >
       test with onClick
     </span>
@@ -24,17 +24,17 @@ exports[`IconButton correctly uses the onClick callback 1`] = `
 exports[`IconButton renders heart icon 1`] = `
 <div>
   <button
-    class="btn-icon p-0 d-inline-flex align-items-stretch   btn btn-primary"
+    class="btn-icon d-inline-flex align-items-stretch   btn btn-primary"
     data-testid="icon-button"
     type="button"
   >
     <span
-      class="icon-part d-flex align-items-center"
+      class="icon-part"
     >
       BootstrapIconMock_Heart
     </span>
     <span
-      class="text-part d-flex align-items-center"
+      class="text-part"
     >
       test
     </span>
@@ -45,17 +45,17 @@ exports[`IconButton renders heart icon 1`] = `
 exports[`IconButton renders with additional className 1`] = `
 <div>
   <button
-    class="btn-icon p-0 d-inline-flex align-items-stretch  testClass btn btn-primary"
+    class="btn-icon d-inline-flex align-items-stretch  testClass btn btn-primary"
     data-testid="icon-button"
     type="button"
   >
     <span
-      class="icon-part d-flex align-items-center"
+      class="icon-part"
     >
       BootstrapIconMock_Heart
     </span>
     <span
-      class="text-part d-flex align-items-center"
+      class="text-part"
     >
       test with additional className
     </span>
@@ -66,17 +66,17 @@ exports[`IconButton renders with additional className 1`] = `
 exports[`IconButton renders with border 1`] = `
 <div>
   <button
-    class="btn-icon p-0 d-inline-flex align-items-stretch with-border  btn btn-primary"
+    class="btn-icon d-inline-flex align-items-stretch with-border  btn btn-primary"
     data-testid="icon-button"
     type="button"
   >
     <span
-      class="icon-part d-flex align-items-center"
+      class="icon-part"
     >
       BootstrapIconMock_Heart
     </span>
     <span
-      class="text-part d-flex align-items-center"
+      class="text-part"
     >
       test with border
     </span>
diff --git a/frontend/src/components/common/icon-button/icon-button.module.scss b/frontend/src/components/common/icon-button/icon-button.module.scss
index 8b48b252c..8ff609e41 100644
--- a/frontend/src/components/common/icon-button/icon-button.module.scss
+++ b/frontend/src/components/common/icon-button/icon-button.module.scss
@@ -7,26 +7,23 @@
 .btn-icon {
 
   &.with-border {
-    .icon-part {
-      border-right: 1px solid rgba(0, 0, 0, 0.2);
-    }
-
     .text-part {
-      padding: 0.375rem 0.75rem;
+      border-left: 1px solid rgba(0, 0, 0, 0.2);
+      padding-left: var(--bs-btn-padding-x);
     }
   }
 
-  .icon-part {
-    padding: 0.375rem 0.375rem;
-    display: flex;
+  gap: var(--bs-btn-padding-x);
 
-    .social-icon {
-      font-size: 1.5em;
-    }
+  .icon-part {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .text-part {
-    padding: 0.375rem 0.75rem 0.375rem 0;
+    display: flex;
+    align-items: center;
   }
 }
 
diff --git a/frontend/src/components/common/icon-button/icon-button.tsx b/frontend/src/components/common/icon-button/icon-button.tsx
index b4ebf8df2..65051f48b 100644
--- a/frontend/src/components/common/icon-button/icon-button.tsx
+++ b/frontend/src/components/common/icon-button/icon-button.tsx
@@ -42,15 +42,15 @@ export const IconButton: React.FC<IconButtonProps> = ({
   return (
     <Button
       {...props}
-      className={`${styles['btn-icon']} p-0 d-inline-flex align-items-stretch ${border ? styles['with-border'] : ''} ${
+      className={`${styles['btn-icon']} d-inline-flex align-items-stretch ${border ? styles['with-border'] : ''} ${
         className ?? ''
       }`}
       {...testId('icon-button')}>
-      <span className={`${styles['icon-part']} d-flex align-items-center`}>
+      <span className={`${styles['icon-part']}`}>
         <UiIcon size={iconSize} icon={icon} className={'icon'} />
       </span>
       <ShowIf condition={!!children}>
-        <span className={`${styles['text-part']} d-flex align-items-center`}>{children}</span>
+        <span className={`${styles['text-part']}`}>{children}</span>
       </ShowIf>
     </Button>
   )