Fixed error color and padding

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -191,11 +191,9 @@ export default function CodeAreaModal({
               (error?.detail?.error !== undefined ? "h-2/6" : "h-0")
             }
           >
-            <div className="mt-1 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
-              <h1 className="text-lg text-destructive">
-                {error?.detail?.error}
-              </h1>
-              <div className="ml-2 w-full text-sm text-status-red word-break-break-word">
+            <div className="mt-5 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
+              <h1 className="text-lg text-error">{error?.detail?.error}</h1>
+              <div className="ml-2 mt-2 w-full text-sm text-destructive word-break-break-word">
                 <span className="w-full word-break-break-word">
                   {error?.detail?.traceback}
                 </span>

src/frontend/src/style/index.css

@@ -32,6 +32,7 @@
 
     --error-background: #fef2f2;
     --error-foreground: #991b1b;
+    --error: #991b1b;
 
     --success-background: #f0fdf4;
     --success-foreground: #14532d;
@@ -111,6 +112,7 @@
 
     --error-foreground: #fef2f2;
     --error-background: #450a0a;
+    --error: #991b1b;
 
     --info-foreground: #eff6ff;
     --info-background: #172554;

src/frontend/tailwind.config.js

@@ -64,8 +64,11 @@ module.exports = {
         "dark-blue": "var(--dark-blue)",
         "dark-gray": "var(--dark-gray)",
         "dark-red": "var(--dark-red)",
-        "error-background": "var(--error-background)",
-        "error-foreground": "var(--error-foreground)",
+        error: {
+          DEFAULT: "var(--error)",
+          background: "var(--error-background)",
+          foreground: "var(--error-foreground)",
+        },
         "high-dark-gray": "var(--high-dark-gray)",
         "high-indigo": "var(--high-indigo)",
         "high-light-gray": "var(--high-light-gray)",