Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Fix default theme and store #575

Merged
merged 4 commits into from
Jul 31, 2024
Merged

Fix default theme and store #575

merged 4 commits into from
Jul 31, 2024

Conversation

fzaninotto
Copy link
Contributor

@fzaninotto fzaninotto commented Jul 27, 2024

Problem

The default HydraAdmin differs from react-admin in 2 ways:

  1. The default store is memoryStore instead of localStorageStore. As a consequence, filters and sort preferences aren't persisted between sessions (and aren't auditable in devtools)
  2. The inputs aren't legible in dark theme because they lack a background color

Also, it is not possible to customize the darkTheme.

Solution

Use similar defaults as react-admin

Before After
image image
Q A
Branch? main for features / current stable version branch for bug fixes
Tickets N/A
License MIT
Doc PR N/A

## Problem

The default HydraAdmin differs from react-admin in 2 ways:

1. The default store is memoryStore instead of localStorageStore. As a consequence, filters and sort preferences aren't persisted between sessions (and aren't auditable in devtools)
2. The inputs aren't legible in dark theme because they lack a background color

## Solution

Use similar defaults as react-admin
@fzaninotto fzaninotto added the RFR label Jul 27, 2024
@@ -34,6 +34,9 @@ export const darkTheme: RaThemeOptions = {
},
},
},
MuiFilledInput: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The custom darkTheme here extends react-admin's defaultTheme, which is in fact the defaultLightTheme and contains light-theme specific changes for inputs that should not apply to dark theme.

@@ -98,7 +105,6 @@ const AdminGuesser = ({
queryClient={queryClient}
theme={theme}
darkTheme={darkTheme}
lightTheme={lightTheme}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lightTheme isn't documented in react-admin - theme is the prop to use.

https://marmelab.com/react-admin/Admin.html#theme

@@ -42,7 +48,8 @@ const AdminGuesser = ({
layout = Layout,
loginPage = LoginPage,
loading: loadingPage,
theme = lightTheme,
theme = defaultLightTheme,
darkTheme = defaultDarkTheme,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was a bug here - the dark theme couldn't be overridden

@@ -33,7 +39,7 @@ const AdminGuesser = ({
basename,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
error = DefaultError as any,
store,
store = defaultStore,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React-admin defines the default store in react-adminù 's Admincomponent. SinceAdminGuesserrelies on the lower-levelAdminContext`, we have to repeat the same initialization.

@adguernier adguernier self-requested a review July 30, 2024 13:06
Copy link
Contributor

@adguernier adguernier left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good to me 👍

CHANGELOG.md Outdated
@@ -1,5 +1,8 @@
# Changelog

* Fix Inputs background in darkTheme
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no need to update the CHANGELOG as it will be automatically updated upon the release

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

@adguernier adguernier merged commit 5b67925 into main Jul 31, 2024
4 checks passed
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants