From e4f0ee0619e8a1635216953dd2abd120fb273182 Mon Sep 17 00:00:00 2001
From: Lucas Marques <lucas.mrqes@gmail.com>
Date: Fri, 18 Oct 2024 17:20:21 +0200
Subject: [PATCH] fix(ui): handle dark mode on sync sliding pane (#334)

---
 ui/src/components/tools/LayerChecklist.tsx |  2 ++
 ui/src/modals/SlidingPane.tsx              | 16 ++++++++++------
 ui/src/pages/Layers.tsx                    |  4 ++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/ui/src/components/tools/LayerChecklist.tsx b/ui/src/components/tools/LayerChecklist.tsx
index b123dcc8..02a9b10c 100644
--- a/ui/src/components/tools/LayerChecklist.tsx
+++ b/ui/src/components/tools/LayerChecklist.tsx
@@ -62,12 +62,14 @@ const LayerChecklist: React.FC<LayerChecklistProps> = ({
             <div className="flex justify-start items-center mb-4 space-x-2">
                 <Button
                     variant={"tertiary"}
+                    theme={variant}
                     className='text-sm px-0'
                     onClick={handleSelectAll}>
                     Select All
                 </Button>
                 <Button
                     variant={"tertiary"}
+                    theme={variant}
                     className='text-sm'
                     onClick={handleUnselectAll}>
                     Unselect All
diff --git a/ui/src/modals/SlidingPane.tsx b/ui/src/modals/SlidingPane.tsx
index 314b7ab5..2c577c0f 100644
--- a/ui/src/modals/SlidingPane.tsx
+++ b/ui/src/modals/SlidingPane.tsx
@@ -7,6 +7,7 @@ interface SlidingPaneProps {
   onClose: () => void;
   children?: React.ReactNode;
   width?: string; 
+  variant?: "light" | "dark";
 }
 
 const SlidingPane: React.FC<SlidingPaneProps> = ({
@@ -14,6 +15,7 @@ const SlidingPane: React.FC<SlidingPaneProps> = ({
   onClose,
   children,
   width = 'w-1/3',
+  variant = 'light',
 }) => {
   // Handle Escape key to close the pane
   useEffect(() => {
@@ -55,18 +57,20 @@ const SlidingPane: React.FC<SlidingPaneProps> = ({
       {/* Sliding Pane */}
       <FocusLock disabled={!isOpen}>
         <div
-          className={`fixed top-0 right-0 h-screen bg-primary-100 z-10 shadow-lg transform transition-transform duration-300 ease-in-out ${
+          className={`fixed top-0 right-0 h-screen z-10 shadow-lg transform transition-transform duration-300 ease-in-out ${
             isOpen ? 'translate-x-0' : 'translate-x-full'
-          } ${width}`}
+          } ${width} ${variant === 'light' ? 'bg-primary-100' : 'bg-nuances-black'}`}
         >
           {/* Close Button */}
-          <button
+            <button
             aria-label="Close"
-            className="absolute top-4 right-8 text-2xl text-gray-600 focus:outline-none"
+            className={`absolute top-4 right-8 text-2xl focus:outline-none ${
+              variant === 'light' ? 'text-gray-600' : 'text-nuances-50'
+            }`}
             onClick={onClose}
-          >
+            >
             &times;
-          </button>
+            </button>
           {/* Content */}
           <div className="p-8 pt-12 overflow-y-auto h-full">{children}</div>
         </div>
diff --git a/ui/src/pages/Layers.tsx b/ui/src/pages/Layers.tsx
index 6d10d51e..67d3436f 100644
--- a/ui/src/pages/Layers.tsx
+++ b/ui/src/pages/Layers.tsx
@@ -143,7 +143,7 @@ const Layers: React.FC = () => {
 
   return (
     <div className="flex flex-col flex-1 h-screen min-w-0">
-    <SlidingPane isOpen={showRefreshPane} onClose={() => setShowRefreshPane(false)}>
+    <SlidingPane isOpen={showRefreshPane} onClose={() => setShowRefreshPane(false)} variant={theme}>
       <div className="relative h-full">
       <div className="overflow-auto h-[calc(100%-90px)]">
         <h2
@@ -157,7 +157,7 @@ const Layers: React.FC = () => {
         </h2>
 
         {layersQuery.isSuccess && (
-        <LayerChecklist layers={layersQuery.data.results} variant={theme} onSelectionChange={(layers) => setSelectedLayersForSync(layers)}/>
+        <LayerChecklist layers={layersQuery.data.results} variant={theme} onSelectionChange={(layers) => setSelectedLayersForSync(layers)} />
         )}
       </div>
       <div className="absolute bottom-0 left-0 right-0 p-4 bg-white dark:bg-black">