UX Improvments

src/Components/AppShell/NavBar.tsx

@@ -32,8 +32,12 @@ export default function NavBar({ appName, useAuth }: { appName: string, useAuth:
           // other options
           icon: "✌️",
         },
-        error: 'Error',
-        pending: '123 ...'
+        error: {
+          render( {data} ) {        
+            return `${data}`
+          },
+        },
+        pending: 'creating new user ...'
       });
     setSignupOpen(false);
   }
@@ -49,7 +53,11 @@ export default function NavBar({ appName, useAuth }: { appName: string, useAuth:
           // other options
           icon: "✌️",
         },
-        error: 'Error',
+        error: {
+          render( {data} ) {        
+            return `${data}`
+          },
+        },
         pending: 'logging in ...'
       });
     setLoginOpen(false);
@@ -66,7 +74,11 @@ export default function NavBar({ appName, useAuth }: { appName: string, useAuth:
           // other options
           icon: "👋",
         },
-        error: 'Error',
+        error: {
+          render( {data} ) {   
+            return `${data}`
+          },
+        },
         pending: 'logging out ..'
       });
   }

src/Components/Auth/useAuth.tsx

@@ -67,6 +67,7 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
       return undefined;
     }
   }
+  
 
   const login = async (credentials: AuthCredentials): Promise<UserItem | undefined> => {
     setLoading(true);
@@ -76,8 +77,7 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
       return (await loadUser());
     } catch (error: any) {
       setLoading(false);
-      console.log(error.response.data.error[0]);
-      return error.response.data.error[0];
+      throw error;
     };
   }
 
@@ -88,16 +88,20 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
       return (await login(credentials));
     } catch (error: any) {
       setLoading(false);
-      console.log(error);
-      return error.response.data.error[0];
+      throw error;
     };
   }
 
 
   const logout = async () => {
-    await userApi.logout();
-    setUser(null);
-  };
+    try {
+      await userApi.logout();
+      setUser(null);
+    } catch (error: any) {
+      setLoading(false);
+      throw error;
+    };
+  }
 
   const updateUser = async (user: UserItem) => {
     setLoading(true);
@@ -108,12 +112,10 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
       setUser(res as any);
       setLoading(false);
       return res as any;
-
     } catch (error: any) {
       setLoading(false);
-      return error.response.data.error[0];
-    }
-
+      throw error;
+    };
   }
 
 

src/Components/Map/Subcomponents/AddButton.tsx

@@ -14,7 +14,7 @@ export default function AddButton({ setSelectMode }: { setSelectMode: React.Disp
                     <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                 </svg>
             </label>
-            <ul tabIndex={0} className="tw-dropdown-content tw-pr-2 tw-mb-0 tw-list-none">
+            <ul tabIndex={0} className="tw-dropdown-content tw-pr-1 tw-mb-1 tw-list-none">
                 {layers.map((layer) => (
                     layer.api?.createItem && (
                         <li key={layer.name} >

src/Components/Map/UtopiaMap.tsx

@@ -77,8 +77,8 @@ function UtopiaMap({
                             </MapContainer>
                             <AddButton setSelectMode={setSelectMode}></AddButton>
                             {selectMode != null &&
-                                <div className="tw-button tw-z-500 tw-absolute tw-right-5 tw-top-20 tw-drop-shadow-md">
-                                    <div className="tw-alert tw-bg-white tw-text-green-900">
+                                <div className="tw-button tw-z-500 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
+                                    <div className="tw-alert tw-bg-base-100 tw-text-base-content">
                                         <div>
                                             <span>Select {selectMode.name} position!</span>
                                         </div>