Adjust BW theme error color

marmelab · Feb 25, 2025 · 0fcfb7c · 0fcfb7c
1 parent c3d60d4
commit 0fcfb7c
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 12 deletions.
diff --git a/examples/demo/src/reviews/RejectButton.tsx b/examples/demo/src/reviews/RejectButton.tsx
@@ -25,14 +25,14 @@ const RejectButton = () => {
         {
             mutationMode: 'undoable',
             onSuccess: () => {
-                notify('resources.reviews.notification.rejected_success', {
+                notify('resources.reviews.notifications.rejected_success', {
                     type: 'info',
                     undoable: true,
                 });
                 redirectTo('/reviews');
             },
             onError: () => {
-                notify('resources.reviews.notification.rejected_error', {
+                notify('resources.reviews.notifications.rejected_error', {
                     type: 'error',
                 });
             },

diff --git a/packages/ra-ui-materialui/src/layout/Notification.stories.tsx b/packages/ra-ui-materialui/src/layout/Notification.stories.tsx
@@ -34,19 +34,28 @@ export const Basic = () => (
     </Wrapper>
 );
 
-const TypeNotification = () => {
+const TypeNotification = ({ type }) => {
     const notify = useNotify();
     React.useEffect(() => {
-        notify('hello, world', { type: 'warning' });
-    }, [notify]);
+        notify('hello, world', { type });
+    }, [notify, type]);
     return null;
 };
 
-export const Type = () => (
+export const Type = ({ type }) => (
     <Wrapper>
-        <TypeNotification />
+        <TypeNotification type={type} />
     </Wrapper>
 );
+Type.args = {
+    type: 'warning',
+};
+Type.argTypes = {
+    type: {
+        control: { type: 'select' },
+        options: ['info', 'warning', 'error', 'success'],
+    },
+};
 
 const MultilineNotification = () => {
     const notify = useNotify();

diff --git a/packages/ra-ui-materialui/src/theme/bwTheme.stories.tsx b/packages/ra-ui-materialui/src/theme/bwTheme.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Resource } from 'ra-core';
+import fakerestDataProvider from 'ra-data-fakerest';
+import englishTranslations from 'ra-language-english';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+
+import { AdminContext } from '../AdminContext';
+import { AdminUI } from '../AdminUI';
+import { ListGuesser } from '../list';
+import { EditGuesser } from '../detail';
+import { bwLightTheme, bwDarkTheme } from './bwTheme';
+import { testData } from './testData';
+
+export default {
+    title: 'ra-ui-materialui/theme/BW',
+};
+
+export const BW = () => (
+    <AdminContext
+        dataProvider={fakerestDataProvider(testData)}
+        lightTheme={bwLightTheme}
+        darkTheme={bwDarkTheme}
+        defaultTheme="light"
+        i18nProvider={polyglotI18nProvider(() => englishTranslations, 'en')}
+    >
+        <AdminUI>
+            <Resource
+                name="products"
+                list={ListGuesser}
+                edit={EditGuesser}
+                recordRepresentation="name"
+            />
+            <Resource
+                name="categories"
+                list={ListGuesser}
+                edit={EditGuesser}
+                recordRepresentation="name"
+            />
+            <Resource
+                name="tags"
+                list={ListGuesser}
+                edit={EditGuesser}
+                recordRepresentation="name"
+            />
+        </AdminUI>
+    </AdminContext>
+);
diff --git a/packages/ra-ui-materialui/src/theme/bwTheme.ts b/packages/ra-ui-materialui/src/theme/bwTheme.ts
@@ -1,6 +1,7 @@
 import {
     amber,
     common,
+    deepOrange,
     green,
     grey,
     lightBlue,
@@ -27,16 +28,16 @@ const createBWTheme = (mode: 'light' | 'dark'): RaThemeOptions => {
                 main: isDarkMode ? grey['100'] : grey['800'],
             },
             success: {
-                main: green['900'],
+                main: isDarkMode ? green['500'] : green['900'],
             },
             error: {
-                main: red['900'],
+                main: isDarkMode ? deepOrange['600'] : red['900'],
             },
             info: {
-                main: lightBlue['900'],
+                main: isDarkMode ? lightBlue['500'] : lightBlue['900'],
             },
             warning: {
-                main: amber['900'],
+                main: isDarkMode ? amber['500'] : amber['900'],
             },
             divider: GREY,
             background: {
@@ -171,13 +172,27 @@ const createBWTheme = (mode: 'light' | 'dark'): RaThemeOptions => {
                     root: {
                         textTransform: 'none',
                         boxShadow: 'none',
-                        '&.MuiButton-outlined': {
+                        '&.MuiButton-outlinedPrimary': {
                             '--variant-outlinedBorder': GREY,
                             '&:hover': {
                                 backgroundColor: GREY,
                                 '--variant-outlinedBorder': GREY,
                             },
                         },
+                        '&.MuiButton-outlinedError': {
+                            '--variant-outlinedBorder': isDarkMode
+                                ? deepOrange['600']
+                                : red['900'],
+                            '&:hover': {
+                                backgroundColor: isDarkMode
+                                    ? deepOrange['600']
+                                    : red['900'],
+                                color: common['white'],
+                                '--variant-outlinedBorder': isDarkMode
+                                    ? deepOrange['600']
+                                    : red['900'],
+                            },
+                        },
                     },
                     sizeSmall: {
                         padding: '4px 12px',