Fix sizing of closing cross icons.

fortanix · Dec 13, 2024 · b911cff · b911cff
1 parent ffbbb93
commit b911cff
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
     }
   }