refactor

Author: lucasgoral

src/components/Ui/Infobox/Infobox.module.scss

@@ -20,26 +20,26 @@
 
   // Variant variations
   &.variant-normal {
-    border-color: #ccc;
-    background-color: #f5f5f5;
-    color: #333;
+    border-color: var(--sapNeutralTextColor);
+    background-color: var(--sapNeutralBackground);
+    color: var(--sapNeutralTextColor);
   }
 
   &.variant-success {
-    border-color: #2ecc71;
-    background-color: #ecf9f2;
-    color: #27ae60;
+    border-color: var(--sapPositiveTextColor);
+    background-color: var(--sapPositiveBackground);
+    color: var(--sapPositiveTextColor);
   }
 
   &.variant-warning {
-    border-color: #f1c40f;
-    background-color: #fef9e7;
-    color: #f39c12;
+    border-color: var(--sapCriticalTextColor);
+    background-color: var(--sapCriticalBackground);
+    color: var(--sapCriticalTextColor);
   }
 
   &.variant-danger {
-    border-color: #e74c3c;
-    background-color: #fdedec;
-    color: #c0392b;
+    border-color: var(--sapNegativeTextColor);
+    background-color: var(--sapErrorBackground);
+    color: var(--sapNegativeTextColor);
   }
 }

src/components/Ui/Infobox/Infobox.tsx

@@ -1,4 +1,4 @@
-import React, {ReactNode} from 'react';
+import React, { ReactNode } from 'react';
 import cx from 'clsx';
 
 import styles from './Infobox.module.scss';
@@ -16,7 +16,7 @@ export const Infobox: React.FC<LabelProps> = ({
                                                 size = 'md', // Default to medium size
                                                 variant = 'normal', // Default to normal variant
                                                 children,
-                                                className
+                                                className,
                                               }) => {
   const infoboxClasses = cx(styles.infobox, {
     [styles['size-sm']]: size === 'sm',
@@ -29,11 +29,11 @@ export const Infobox: React.FC<LabelProps> = ({
   }, className);
 
   return (
-    <span
+    <div><span
       className={infoboxClasses}
       id={id}
     >
       {children}
-    </span>
+    </span></div>
   );
 };