badge color and border color matched

src/components/Error/ErrorCard.jsx

@@ -1,23 +1,34 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { MdKeyboardArrowLeft, MdOutlineArrowRightAlt } from "react-icons/md";
 import ErrorSolutions from "./ErrorSolutions";
 import ErrorType from "./ErrorType";
 
 function ErrorCard({ error }) {
   const [showSolution, setShowSolution] = useState(false);
-  const [errorTypeColor, setErrorTypeColor] = useState(() => {
+  const [errorTypeColor, setErrorTypeColor] = useState('#7e1aa5');
+  useEffect(() => {
     if (error.type == "add") {
-      return "#4024e0";
+      return setErrorTypeColor("#4024e0");
     }
-    if (error.type == "commit" || error.type == "push") {
-      return "#1a5ba5";
+    if (error.type == "branch") {
+      return setErrorTypeColor("#40e4f0");
     }
-    return "#7e1aa5";
-  });
+    if (error.type == "push") {
+      return setErrorTypeColor("#8d54e1");
+    }
+    if (error.type == "merge") {
+      return setErrorTypeColor("#118d7c");
+    }
+    if (error.type == "commit") {
+      return setErrorTypeColor("#1a5ba5");
+    }
+    return setErrorTypeColor("#7e1aa5");
+  }, [errorTypeColor])
+
 
   return (
     <div
-      className="py-4 mb-4 col-span-12 xl:col-span-6 px-6 border-l-4 rounded-lg rounded-tl-none rounded-bl-none  items-start bg-dark-secondary flex flex-col"
+      className="py-4 mb-4 col-span-12 xl:col-span-6 px-6 border-l-4 rounded-lg   items-start bg-dark-secondary flex flex-col"
       style={{
         borderColor: errorTypeColor,
       }}

src/components/Error/ErrorType.jsx

@@ -6,8 +6,12 @@ function ErrorType({ type }) {
           ? "before:bg-[#4024e0]"
           : type === "commit"
           ? "before:bg-[#1a5ba5]"
+          : type === "merge"
+          ? "before:bg-[#118d7c]"
           : type === "push"
-          ? "before:bg-[#1a5ba5]"
+          ? "before:bg-[#8d54e1]"
+          : type === "branch"
+          ? "before:bg-[#40E4F0]"
           : "before:bg-[#7e1aa5]"
       }`}
     >

src/components/Search/SearchInput.jsx

@@ -34,7 +34,22 @@ function SearchInput({ search, setSearch, setType }) {
                         <ul className={`flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 px-6 rounded-lg bg-white w-full md:w-12/12  md:w-auto`}>
                             {
                                 errorType.map((item, i) => (
-                                    <li key={i} className={`${item === "add" ? "bg-[#4024e0]" : item === "commit" ? "bg-[#1a5ba5]" : item === "push" ? "bg-[#1aa0a5]" : "bg-[#7e1aa5]"} w-full md:w-auto rounded-md text-white font-bold py-1 px-3 cursor-pointer`}
+                                    <li 
+                                    key={i} 
+                                    className={`${
+                                        item === "add"
+                                        ? "bg-[#4024e0]"
+                                        : item === "commit"
+                                        ? "bg-[#1a5ba5]"
+                                        : item === "merge"
+                                        ? "bg-[#118d7c]"
+                                        : item === "push"
+                                        ? "bg-[#8d54e1]"
+                                        : item === "branch"
+                                        ? "bg-[#40E4F0]"
+                                        : "bg-[#7e1aa5]"
+                                    }
+                                         w-full md:w-auto rounded-md text-white font-bold py-1 px-3 cursor-pointer`}
                                         onClick={() => setType(item)}
                                     >{item}</li>
                                 ))