🔧 fix(frontend): update class names and colors in singleAlertComponent and NoticeAlert components to match the new design

🔧 fix(frontend): update class names and colors in index.css to match the new design
🔧 fix(frontend): update tailwind.config.js to use the new color variable name 'status-blue' instead of 'medium-dark-blue'

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -77,19 +77,19 @@ export default function SingleAlert({
         >
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-info-background"
+              className="h-5 w-5 text-status-blue "
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-info-background">
+            <p className="text-sm text-info-foreground font-medium">
               {dropItem.title}
             </p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-info-background hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-foreground hover:text-ring"
                 >
                   Details
                 </Link>

src/frontend/src/alerts/notice/index.tsx

@@ -36,22 +36,22 @@ export default function NoticeAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="rounded-md w-96 mt-6 shadow-xl bg-light-blue p-4"
+        className="rounded-md w-96 mt-6 shadow-xl bg-info-background p-4"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <Info
-              className="h-5 w-5 text-medium-dark-blue "
+              className="h-5 w-5 text-status-blue "
               aria-hidden="true"
             />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm text-ring">{title}</p>
+            <p className="text-sm text-info-foreground">{title}</p>
             <p className="mt-3 text-sm md:mt-0 md:ml-6">
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-ring hover:text-ring"
+                  className="whitespace-nowrap font-medium text-info-foreground hover:text-ring"
                 >
                   Details
                 </Link>

src/frontend/src/index.css

@@ -31,13 +31,6 @@
 
   --round-btn-shadow: #00000063;
 
-  --build-trigger: 	#dc735b;
-  --chat-trigger: #5c8be1;
-
-  --status-red: #ef4444;
-  --status-yellow: #eab308;
-  --status-green: #4ade80;
-
   --error-background: #fef2f2;
   --error-foreground: #991b1b;
 
@@ -49,10 +42,15 @@
 
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
-  --medium-dark-blue:#1d4ed8;
 
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923de;
+  --build-trigger: 	#dc735b;
+  --chat-trigger: #5c8be1;
+  --status-red: #ef4444;
+  --status-yellow: #eab308;
+  --status-green: #4ade80;
+  --status-blue:#2563eb;
 }
 
 .dark {
@@ -88,30 +86,28 @@
   --radius: 0.5rem;
 
   --round-btn-shadow: #00000063;
+  
+  --success-background: #022c22;
+  --success-foreground: #ecfdf5;
 
-  --build-trigger: 	#dc735b;
-  --chat-trigger: #5c8be1;
+  --error-foreground: #fef2f2;
+  --error-background: #450a0a;
 
-  --status-red: #ef4444;
-  --status-yellow: #eab308;
-  --status-green: #4ade80;
-
-  --success-background: #f0fdf4;
-  --success-foreground: #14532d;
-
-  --error-foreground: #c2b7b7;
-  --error-background: #3e1818;
-
-  --info-foreground: #b7b8c2;
-  --info-background: #18243e;
+  --info-foreground: #eff6ff;
+  --info-background: #172554;
 
 
   --high-indigo: #4338ca;
   --medium-indigo: #6366f1;
-  --medium-dark-blue:#1d4ed8;
 
   /* Colors that are shared in dark and light mode */
   --blur-shared: #151923d2;
+  --build-trigger: 	#dc735b;
+  --chat-trigger: #5c8be1;
+  --status-red: #ef4444;
+  --status-yellow: #eab308;
+  --status-green: #4ade80;
+  --status-blue: #2563eb;
 }}
 
 @layer base {

src/frontend/tailwind.config.js

@@ -43,7 +43,7 @@ module.exports = {
         'light-gray': "var(--light-gray)",
         'light-slate': "var(--light-slate)",
         'medium-blue': "var(--medium-blue)",
-        'medium-dark-blue': "var(--medium-dark-blue)",
+        'status-blue': "var(--status-blue)",
         'medium-dark-gray': "var(--medium-dark-gray)",
         'medium-dark-green': "var(--medium-dark-green)",
         'medium-dark-red': "var(--medium-dark-red)",