fix(ui): handle dark mode on sync sliding pane (#334)

padok-team · Oct 18, 2024 · e4f0ee0 · e4f0ee0
1 parent 04ed680
commit e4f0ee0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -7,13 +7,15 @@ interface SlidingPaneProps {
   onClose: () => void;
   children?: React.ReactNode;
   width?: string; 
+  variant?: "light" | "dark";
 }
 
 const SlidingPane: React.FC<SlidingPaneProps> = ({
   isOpen,
   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
@@ -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">