Fix alert background colors

domhhv · Feb 8, 2024 · d7c8d07 · d7c8d07
1 parent e594f82
commit d7c8d07
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/components/user/useAccount.ts b/src/components/user/useAccount.ts
@@ -18,9 +18,8 @@ export const useAccount = () => {
       return;
     }
 
-    setForbidden(false);
-
     setLoading(true);
+    setForbidden(false);
 
     const loadUserProfile = async () => {
       const [data] = await getUserAccount();

diff --git a/src/context/Auth/AuthProvider.tsx b/src/context/Auth/AuthProvider.tsx
@@ -2,11 +2,11 @@ import { useSnackbar, AuthContext } from '@context';
 import { signIn, signOut, signUp } from '@services';
 import React from 'react';
 
-type UserProviderProps = {
+type AuthProviderProps = {
   children: React.ReactNode;
 };
 
-const AuthProvider = ({ children }: UserProviderProps) => {
+const AuthProvider = ({ children }: AuthProviderProps) => {
   const { showSnackbar } = useSnackbar();
   const [authenticating, setAuthenticating] = React.useState(false);
 
@@ -50,13 +50,11 @@ const AuthProvider = ({ children }: UserProviderProps) => {
       try {
         const { error } = await signIn(email, password);
 
-        console.log('error:', error);
-
         if (error) {
           throw error;
         }
 
-        showSnackbar(`Welcome, ${email}!`, {
+        showSnackbar('Welcome back!', {
           variant: 'solid',
           color: 'success',
         });
@@ -80,7 +78,7 @@ const AuthProvider = ({ children }: UserProviderProps) => {
   const logout = React.useCallback(async () => {
     await signOut();
     showSnackbar('Logged out', {
-      variant: 'solid',
+      variant: 'soft',
       color: 'neutral',
       dismissible: true,
     });

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -1,6 +1,27 @@
 import { extendTheme } from '@mui/joy/styles';
 
 export const theme = extendTheme({
+  components: {
+    JoyAlert: {
+      styleOverrides: {
+        root: ({ ownerState, theme }) => {
+          if (ownerState.color !== 'neutral' && ownerState.variant !== 'soft') {
+            return null;
+          }
+
+          return theme.palette.mode === 'light'
+            ? {
+                backgroundColor: theme.palette.neutral[50],
+                color: theme.palette.neutral[800],
+              }
+            : {
+                backgroundColor: theme.palette.neutral[900],
+                color: theme.palette.neutral[100],
+              };
+        },
+      },
+    },
+  },
   colorSchemes: {
     light: {
       palette: {