fix

Author: lucasgoral

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

@@ -7,12 +7,11 @@
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
   transform: translateY(-2px);
   color: #fff;
-  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 }
 
 .icon {
   margin-right: 1rem;
-  font-size: 1.5rem;
+  font-size: 4.5rem;
   flex-shrink: 0;
 }
 
@@ -55,3 +54,7 @@
 .variant-danger {
   background: linear-gradient(135deg, #e53935, #e35d5b);
 }
+
+.content > *:not(:last-child) {
+  margin-bottom: 1rem;
+}

src/components/Ui/Infobox/Infobox.tsx

@@ -14,6 +14,13 @@ interface LabelProps {
   icon?: string;
 }
 
+const variantIcons = {
+  normal: 'message-information',
+  success: 'message-success',
+  warning: 'message-warning',
+  danger: 'message-error',
+};
+
 export const Infobox: React.FC<LabelProps> = ({
   id,
   size = 'md', // Default to medium size
@@ -38,9 +45,11 @@ export const Infobox: React.FC<LabelProps> = ({
     className,
   );
 
+  const iconName = icon || variantIcons[variant];
+
   return (
     <div className={infoboxClasses} id={id}>
-      {icon && <Icon name={icon} className={styles.icon} />}
+      {iconName && <Icon name={iconName} className={styles.icon} />}
       <div className={styles.content}>{children}</div>
     </div>
   );