From 9df533dbe9e19d3a1a95135cfcd588d496743539 Mon Sep 17 00:00:00 2001
From: LeoKle <leon.kleinschmidt@outlook.de>
Date: Tue, 25 Jul 2023 19:01:11 +0200
Subject: [PATCH] add black background to cells

---
 frontend/src/App.css                |  5 ++++
 frontend/src/components/Markers.tsx | 36 ++++++++++++++---------------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 82c49f5..263bcc3 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -55,4 +55,9 @@
 
 .custom-icon {
   color: white;
+}
+
+.background-black {
+  background-color: rgb(10,10,10);
+  color: white;
 }
\ No newline at end of file
diff --git a/frontend/src/components/Markers.tsx b/frontend/src/components/Markers.tsx
index 9c3f47c..e48cfd0 100644
--- a/frontend/src/components/Markers.tsx
+++ b/frontend/src/components/Markers.tsx
@@ -127,41 +127,41 @@ function ConditionTableIcon({ zoom, conditions }: PropsTable) {
             <thead>
                 <tr>
                     <th className="center" colSpan={columnSpan} />
-                    <th className="center line" colSpan={2}>
+                    <th className="center line background-black" colSpan={2}>
                         Sector
                     </th>
-                    <th className="center line " colSpan={2}>
+                    <th className="center line background-black " colSpan={2}>
                         FIR
                     </th>
                 </tr>
                 <tr>
-                    <th className="line">AD</th>
-                    <th className="line">COP</th>
-                    <th className="line">Level</th>
-                    {hasSpecialConditions ? <th className="line">Special Conditions</th> : null}
-                    <th className="line">From</th>
-                    <th className="line">To</th>
-                    <th className="line">From</th>
-                    <th className="line">To</th>
+                    <th className="line background-black background-black">AD</th>
+                    <th className="line background-black">COP</th>
+                    <th className="line background-black">Level</th>
+                    {hasSpecialConditions ? <th className="line background-black">Special Conditions</th> : null}
+                    <th className="line background-black">From</th>
+                    <th className="line background-black">To</th>
+                    <th className="line background-black">From</th>
+                    <th className="line background-black">To</th>
                 </tr>
             </thead>
             <tbody>
                 {agreements.map((condition, index) => (
                     <tr key={index}>
-                        <td className="line">
+                        <td className="line background-black">
                             {condition.adep_ades === 'ADEP' ? '\u2191' : condition.adep_ades === 'ADES' ? '\u2193' : ''} {condition.aerodrome}
                         </td>
-                        <td className="line">{condition.cop}</td>
-                        <td className="line">
+                        <td className="line background-black">{condition.cop}</td>
+                        <td className="line background-black">
                             {condition.feet ? 'A' : 'FL'}
                             {condition.level}
                             {condition.xc}
                         </td>
-                        {hasSpecialConditions ? <td className="line">{condition.special_conditions}</td> : null}
-                        <td className="line">{condition.from_sector}</td>
-                        <td className="line">{condition.to_sector}</td>
-                        <td className="line">{condition.from_fir}</td>
-                        <td className="line">{condition.to_fir}</td>
+                        {hasSpecialConditions ? <td className="line background-black">{condition.special_conditions}</td> : null}
+                        <td className="line background-black">{condition.from_sector}</td>
+                        <td className="line background-black">{condition.to_sector}</td>
+                        <td className="line background-black">{condition.from_fir}</td>
+                        <td className="line background-black">{condition.to_fir}</td>
                     </tr>
                 ))}
             </tbody>