From b911cffe651642efd476370c5a6bbb8025659825 Mon Sep 17 00:00:00 2001
From: mkrause <maikel.krause@fortanix.com>
Date: Fri, 13 Dec 2024 16:09:28 +0100
Subject: [PATCH] Fix sizing of closing cross icons.

---
 src/components/containers/Banner/Banner.module.scss | 7 +++----
 src/components/overlays/Modal/Modal.module.scss     | 3 ++-
 src/components/overlays/Toast/Toast.module.scss     | 5 +++--
 src/components/overlays/Toast/Toast.tsx             | 2 +-
 src/components/text/Tag/Tag.module.scss             | 7 ++-----
 5 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/containers/Banner/Banner.module.scss b/src/components/containers/Banner/Banner.module.scss
index b7b2b46..6147829 100644
--- a/src/components/containers/Banner/Banner.module.scss
+++ b/src/components/containers/Banner/Banner.module.scss
@@ -10,6 +10,7 @@
 
     display: flex;
     flex-direction: row;
+    align-items: center;
     
     border-radius: bk.$spacing-1;
     border-style: solid;
@@ -21,11 +22,9 @@
     line-height: 22px; // non-standard sizing
 
     .bk-banner__icon {
-      font-size: 18px;
+      font-size: 1.4em;
       margin-right: bk.$spacing-3;
       margin-left: bk.$spacing-2;
-      position: relative;
-      top: -1px;
     }
 
     .bk-banner__title {
@@ -61,7 +60,7 @@
 
     .bk-banner__close-button {
       color: bk.$theme-banner-icon-default;
-      font-size: bk.$font-size-xs;
+      font-size: 1.2em;
       padding: bk.$spacing-1;
     }
 
diff --git a/src/components/overlays/Modal/Modal.module.scss b/src/components/overlays/Modal/Modal.module.scss
index 7720d75..f28d425 100644
--- a/src/components/overlays/Modal/Modal.module.scss
+++ b/src/components/overlays/Modal/Modal.module.scss
@@ -72,8 +72,9 @@
     .bk-modal__close {
       position: absolute;
       right: bk.$spacing-8;
-      top: bk.$spacing-8;
+      top: calc(bk.$spacing-8 - 8px);
       z-index: 1;
+      font-size: 1.6em;
     }
     .bk-modal__container {
       padding: bk.$spacing-8;
diff --git a/src/components/overlays/Toast/Toast.module.scss b/src/components/overlays/Toast/Toast.module.scss
index 7a1dda9..e5115fa 100644
--- a/src/components/overlays/Toast/Toast.module.scss
+++ b/src/components/overlays/Toast/Toast.module.scss
@@ -9,7 +9,7 @@
     padding: 0 !important; // Override style for .Toastify__toast-container
     width: 400px !important; // Override style for .Toastify__toast-container
 
-    &:has(.bk-close--dark) {
+    &:has(.bk-toast__action-close) {
       .bk-toast__body {
         margin-right: bk.$spacing-4 !important; // Override style for .Toastify__toast-body
       }
@@ -60,12 +60,13 @@
       color: #{bk.$theme-notification-alert-border-default};
     }
 
-    .bk-close--dark {
+    .bk-toast__action-close {
       position: absolute;
       top: bk.$spacing-4;
       right: bk.$spacing-4;
       color: #{bk.$theme-notification-icon-default};
       cursor: pointer;
+      font-size: 1.2em;
     }
 
     .bk-toast__body {
diff --git a/src/components/overlays/Toast/Toast.tsx b/src/components/overlays/Toast/Toast.tsx
index 47db116..6ba5196 100644
--- a/src/components/overlays/Toast/Toast.tsx
+++ b/src/components/overlays/Toast/Toast.tsx
@@ -181,7 +181,7 @@ type CloseToastButtonProps = {
   closeToast?: () => void,
 };
 const CloseToastButton = ({ closeToast }: CloseToastButtonProps) => (
-  <Icon icon="cross" className={cx(cl['bk-close--dark'])} onClick={closeToast} />
+  <Icon icon="cross" className={cx(cl['bk-toast__action-close'])} onClick={closeToast} />
 );
 
 type ToastProviderProps = Omit<ToastifyContainerProps, 'className'> & {
diff --git a/src/components/text/Tag/Tag.module.scss b/src/components/text/Tag/Tag.module.scss
index bfa9d4f..b15ef76 100644
--- a/src/components/text/Tag/Tag.module.scss
+++ b/src/components/text/Tag/Tag.module.scss
@@ -21,12 +21,9 @@
     }
 
     .bk-tag__icon {
-      --icon-size: 7px;
-
-      width: var(--icon-size);
-      height: var(--icon-size);
-      color: bk.$theme-tag-icon-default;
       cursor: pointer;
+      font-size: 1.2em;
+      color: bk.$theme-tag-icon-default;
       padding: bk.$size-2 bk.$spacing-2 bk.$size-2 bk.$spacing-2;
     }
   }