OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix-#19246] --Fix darkmode is not working properly in Settings/Recommendations tab (#19249)

Browse Source 
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!
This commit is contained in:
Pradhumansinh Padhiyar 2024-01-17 16:43:11 +05:30 committed by GitHub
parent 73a2776fe9
commit 59ebe1919e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apps/admin-x-design-system/src/global/Table.tsx
View File

@ -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>
</>
);