From 59ebe1919e95713e59847449f527f7137620ee96 Mon Sep 17 00:00:00 2001
From: Pradhumansinh Padhiyar <pradhu619@gmail.com>
Date: Wed, 17 Jan 2024 16:43:11 +0530
Subject: [PATCH] [fix-#19246] --Fix darkmode is not working properly in
 Settings/Recommendations tab (#19249)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix:- #19246

Resolved an issue with dark mode in the recommendation tabs footer by
making TailwindCSS adjustments. Previously, the footer stayed in light
mode when transitioning from light mode to dark mode.

**Changes Made:**

Implemented a TailwindCSS class for a dark background in the table
footer to ensure consistency with dark mode.

**Before Fix:**

![288238357-1801884e-a8a4-48ac-b59a-0b2260561cdd](https://github.com/TryGhost/Ghost/assets/24241624/787f695c-fa7c-4ae8-aa34-9c9c53df4686)

**After Fix:**
![Screenshot 2023-12-06 at 11 15
19 AM](https://github.com/TryGhost/Ghost/assets/24241624/4bb65ffe-735a-440c-801c-520f991585e6)

**This fix enhances the user experience when working with
Recommendations Tab in settings.**

Please let me know if any further adjustments or clarifications are
needed. Thank you!
---
 .../admin-x-design-system/src/global/Table.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/Table.tsx b/apps/admin-x-design-system/src/global/Table.tsx
index 927b3e2d48..96a1f0c63d 100644
--- a/apps/admin-x-design-system/src/global/Table.tsx
+++ b/apps/admin-x-design-system/src/global/Table.tsx
@@ -155,7 +155,7 @@ const Table: React.FC<TableProps> = ({
     );
 
     const footerClasses = clsx(
-        'sticky bottom-0 -mt-px bg-white pb-3',
+        'sticky bottom-0 -mt-px bg-white pb-3 dark:bg-black',
         paddingXClassName
     );
 
@@ -180,14 +180,14 @@ const Table: React.FC<TableProps> = ({
                 {isLoading && <div className='p-5'><LoadingIndicator delay={200} size='lg' style={loadingStyle} /></div>}
 
                 {(hint || pagination || showMore) &&
-                <footer className={footerClasses}>
-                    {(hintSeparator || pagination) && <Separator />}
-                    <div className="mt-1 flex flex-col-reverse items-start justify-between gap-1 pt-2 md:flex-row md:items-center md:gap-0 md:pt-0">
-                        <OptionalShowMore showMore={showMore} />
-                        <Hint>{hint ?? ' '}</Hint>
-                        <OptionalPagination pagination={pagination} />
-                    </div>
-                </footer>}
+                    <footer className={footerClasses}>
+                        {(hintSeparator || pagination) && <Separator />}
+                        <div className="mt-1 flex flex-col-reverse items-start justify-between gap-1 pt-2 md:flex-row md:items-center md:gap-0 md:pt-0">
+                            <OptionalShowMore showMore={showMore} />
+                            <Hint>{hint ?? ' '}</Hint>
+                            <OptionalPagination pagination={pagination} />
+                        </div>
+                    </footer>}
             </div>
         </>
     );