From 3ee8faaa13ef87e42171d3f72a3c5db58f706876 Mon Sep 17 00:00:00 2001
From: Mahmoud Arafa <mahmoud.mohmed@check24.de>
Date: Mon, 14 Jul 2025 22:50:27 +0200
Subject: [PATCH] RAC-09: fix header colors

---
 .../organisms/ApiPanel/useApiPanel.ts         | 36 -------------------
 src/index.css                                 | 11 ++++++
 2 files changed, 11 insertions(+), 36 deletions(-)
 delete mode 100644 src/components/organisms/ApiPanel/useApiPanel.ts

diff --git a/src/components/organisms/ApiPanel/useApiPanel.ts b/src/components/organisms/ApiPanel/useApiPanel.ts
deleted file mode 100644
index aeb3f06..0000000
--- a/src/components/organisms/ApiPanel/useApiPanel.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { useApiSelectedPanel } from "@/hooks/useApiSelectedPanel";
-import { type HighlightMatch, findMatches } from "@/utils";
-import { useState, useEffect } from "react";
-
-export interface FilterState {
-  global: string;
-  perPanel: Record<string, string>;
-}
-
-export const useApiPanel = () => {
-  const { responses } = useApiSelectedPanel();
-
-  const [searchTerm, setSearchTerm] = useState("");
-  const [responseMatches, setResponseMatches] = useState<
-    Record<string, HighlightMatch[]>
-  >({});
-
-  useEffect(() => {
-    const matches: Record<string, HighlightMatch[]> = {};
-    if (searchTerm) {
-      responses.forEach((response) => {
-        const responseMatches = findMatches(response.data, searchTerm);
-        if (responseMatches.length > 0) {
-          matches[response.id] = responseMatches;
-        }
-      });
-    }
-    setResponseMatches(matches);
-  }, [searchTerm]);
-
-  return {
-    responseMatches,
-    searchTerm,
-    setSearchTerm,
-  };
-};
diff --git a/src/index.css b/src/index.css
index b79dbcd..b7dbb88 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,6 +17,8 @@
   --color-brand-500: #ff6b35;
   --color-brand-600: #e53e3e;
   --color-brand-700: #c53030;
+  --color-brand-800: #9b2c2c;
+  --color-brand-900: #742a2a;
 
   /* color orange */
 
@@ -28,11 +30,20 @@
   --color-orange-500: #ff6b35;
   --color-orange-600: #e53e3e;
   --color-orange-700: #c05621;
+  --color-orange-800: #9c4221;
+  --color-orange-900: #7b341e;
 
   --color-navy-50: #f8fafc;
   --color-navy-100: #f1f5f9;
   --color-navy-200: #e2e8f0;
   --color-navy-300: #cbd5e1;
+  --color-navy-400: #94a3b8;
+  --color-navy-500: #64748b;
+  --color-navy-600: #475569;
+  --color-navy-700: #334155;
+  --color-navy-800: #1e293b;
+  --color-navy-900: #0f172a;
+  --color-navy-950: #020617;
 }
 
 @layer utilities {