fix

Author: lucasgoral

src/components/Ui/Infobox/Infobox.module.css

@@ -1,22 +1,34 @@
-.infobox {
+.wrapper {
+  width: 100%;
+  background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8), rgba(0, 0, 2055, 0.2)) border-box;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
   box-sizing: border-box;
+  padding: 2px;
+  margin-bottom: 2rem;
+  border-radius: 15px;
+}
+
+.wrapper.dark-mode {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2))
+    border-box;
+}
+
+.infobox {
+  padding: 3px;
   display: flex;
   align-items: center;
   border-radius: 12px;
   padding: 1rem;
   margin: 0;
-  margin-bottom: 2rem;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
   overflow: hidden;
-  border: 3px solid rgba(255, 0, 0, 0.5);
 }
 
 .icon {
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
   color: var(--sapBackgroundColor);
-  margin-right: 1rem;
+  margin-right: 0.75rem;
 }
 
 .content {

src/components/Ui/Infobox/Infobox.tsx

@@ -4,7 +4,6 @@ import { Icon } from '@ui5/webcomponents-react';
 
 import styles from './Infobox.module.css';
 import { useTheme } from '../../../hooks/useTheme';
-import FadeVisibility from '../FadeVisibility/FadeVisibility';
 
 interface LabelProps {
   id?: string;
@@ -44,17 +43,18 @@ export const Infobox: React.FC<LabelProps> = ({
       [styles['variant-warning']]: variant === 'warning',
       [styles['variant-danger']]: variant === 'danger',
       [styles['full-width']]: fullWidth,
-      [styles['dark-mode']]: isDarkTheme,
     },
     className,
   );
 
   const iconName = icon || variantIcons[variant];
 
   return (
-    <div className={infoboxClasses} id={id}>
-      {iconName && <Icon name={iconName} className={styles.icon} />}
-      <div className={styles.content}>{children}</div>
+    <div className={cx(styles['wrapper'], { [styles['dark-mode']]: isDarkTheme })}>
+      <div className={infoboxClasses} id={id}>
+        {iconName && <Icon name={iconName} className={styles.icon} />}
+        <div className={styles.content}>{children}</div>
+      </div>
     </div>
   );
 };