From d0f5be7269381df10e83d38e05dc41d3d6f1c968 Mon Sep 17 00:00:00 2001
From: MarcoJayUsai <marco.jay.usai@hotmail.it>
Date: Wed, 26 Mar 2025 14:01:48 +0100
Subject: [PATCH] refactor(drawings): changed styles for visible / hidden
 drawing layers

---
 frontend/react/src/ui/panels/drawingmenu.tsx | 27 +++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/react/src/ui/panels/drawingmenu.tsx b/frontend/react/src/ui/panels/drawingmenu.tsx
index a873d37a..f106b63a 100644
--- a/frontend/react/src/ui/panels/drawingmenu.tsx
+++ b/frontend/react/src/ui/panels/drawingmenu.tsx
@@ -16,7 +16,7 @@ import { DrawSubState, ERAS_ORDER, IADSTypes, NO_SUBSTATE, OlympusState, Olympus
 import { AppStateChangedEvent, CoalitionAreasChangedEvent, CoalitionAreaSelectedEvent, DrawingsInitEvent, DrawingsUpdatedEvent } from "../../events";
 import { FaXmark } from "react-icons/fa6";
 import { deepCopyTable } from "../../other/utils";
-import { DCSDrawingsContainer, DCSEmptyLayer } from "../../map/drawings/drawingsmanager";
+import { DCSDrawing, DCSDrawingsContainer, DCSEmptyLayer } from "../../map/drawings/drawingsmanager";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { OlSearchBar } from "../components/olsearchbar";
 
@@ -63,6 +63,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
     CoalitionAreasChangedEvent.on((coalitionAreas) => setCoalitionAreas([...coalitionAreas]));
   }, []);
 
+  function getDrawingLabelColor(drawing: DCSDrawingsContainer | DCSDrawing) {
+    return drawing.getVisibility() ? `text-gray-200` : `text-gray-600`;
+  }
+
   function renderDrawingsContainerControls(container: DCSDrawingsContainer) {
     if (container.hasSearchString(searchString)) {
       return (
@@ -88,8 +92,10 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
               <FontAwesomeIcon
                 icon={container.getVisibility() ? faEye : faEyeSlash}
                 className={`
-                  my-auto w-6 cursor-pointer text-gray-400 transition-transform
-                  hover:scale-125 hover:text-gray-200
+                  my-auto w-6 cursor-pointer
+                  ${getDrawingLabelColor(container)}
+                  transition-transform
+                  hover:scale-125 hover:text-gray-50
                 `}
                 onClick={() => {
                   if (container === mainDrawingsContainer.container) {
@@ -101,7 +107,9 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
               />
               <div
                 className={`
-                  w-40 w-max-40 overflow-hidden text-ellipsis text-nowrap bg-
+                  w-40
+                  ${getDrawingLabelColor(container)}
+                  w-max-40 overflow-hidden text-ellipsis text-nowrap bg-
                 `}
               >
                 {container.getName()}
@@ -127,15 +135,20 @@ export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
                   <FontAwesomeIcon
                     icon={drawing.getVisibility() ? faEye : faEyeSlash}
                     className={`
-                      my-auto w-6 cursor-pointer text-gray-400
+                      my-auto w-6 cursor-pointer
+                      ${getDrawingLabelColor(drawing)}
                       transition-transform
-                      hover:scale-125 hover:text-gray-200
+                      hover:scale-125 hover:text-gray-50
                     `}
                     onClick={() => {
                       drawing.setVisibility(!drawing.getVisibility());
                     }}
                   />
-                  <div className={`overflow-hidden text-ellipsis text-nowrap`}>{drawing.getName()}</div>
+                  <div className={`
+                    overflow-hidden
+                    ${getDrawingLabelColor(drawing)}
+                    text-ellipsis text-nowrap
+                  `}>{drawing.getName()}</div>
                 </div>
               );
             })}