Fixed Colors and HorizontalNav

apps/hub/app/(auth)/login/_components/Login.tsx

@@ -1,12 +1,12 @@
-'use client';
+"use client";
-import { zodResolver } from '@hookform/resolvers/zod';
+import { zodResolver } from "@hookform/resolvers/zod";
-import { signIn } from 'next-auth/react';
+import { signIn } from "next-auth/react";
-import Link from 'next/link';
+import Link from "next/link";
-import { redirect, useSearchParams } from 'next/navigation';
+import { redirect, useSearchParams } from "next/navigation";
-import { useState } from 'react';
+import { useState } from "react";
-import { useForm } from 'react-hook-form';
+import { useForm } from "react-hook-form";
-import { Toaster, toast } from 'react-hot-toast';
+import { Toaster, toast } from "react-hot-toast";
-import { z } from 'zod';
+import { z } from "zod";
 
 export const Login = () => {
   const [isLoading, setIsLoading] = useState(false);
@@ -27,32 +27,30 @@ export const Login = () => {
       className="card-body"
       onSubmit={form.handleSubmit(async () => {
         setIsLoading(true);
-        const data = await signIn('credentials', {
+        const data = await signIn("credentials", {
           redirect: false,
-          email: form.getValues('email'),
+          email: form.getValues("email"),
-          password: form.getValues('password'),
+          password: form.getValues("password"),
         });
         setIsLoading(false);
         if (!data || data.error) {
-          toast.error('E-Mail / Passwort ist falsch!', {
+          toast.error("E-Mail / Passwort ist falsch!", {
             style: {
-              background:
+              background: "var(--color-base-100)",
-                'var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
+              color: "var(--color-base-content)",
-              color:
-                'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
             },
           });
           return;
         }
-        redirect(searchParams.get('redirect') || '/');
+        redirect(searchParams.get("redirect") || "/");
       })}
     >
       <div>
         <Toaster position="top-center" reverseOrder={false} />
       </div>
-      <h1 className="text-3xl font-bold ">Login</h1>
+      <h1 className="text-3xl font-bold">Login</h1>
       <span className="text-sm font-medium">
-        Noch keinen Account? Zur{' '}
+        Noch keinen Account? Zur{" "}
         <Link href="/register" className="link link-accent link-hover">
           Registrierung
         </Link>
@@ -70,14 +68,14 @@ export const Login = () => {
         <input
           type="text"
           className="grow"
-          {...form.register('email')}
+          {...form.register("email")}
           placeholder="Email"
         />
       </label>
       <p className="text-error">
-        {typeof form.formState.errors.email?.message === 'string'
+        {typeof form.formState.errors.email?.message === "string"
           ? form.formState.errors.email.message
-          : ''}
+          : ""}
       </p>
       <label className="input input-bordered flex items-center gap-2 mt-2 w-full">
         <svg
@@ -95,7 +93,7 @@ export const Login = () => {
         <input
           autoComplete="current-password"
           type="password"
-          {...form.register('password')}
+          {...form.register("password")}
           placeholder="Passwort"
           className="grow"
         />
@@ -105,7 +103,7 @@ export const Login = () => {
           {isLoading && (
             <span className="loading loading-spinner loading-sm"></span>
           )}
-          Login{isLoading && '...'}
+          Login{isLoading && "..."}
         </button>
       </div>
     </form>

apps/hub/app/_components/Nav.tsx

@@ -4,8 +4,8 @@ import {
   GearIcon,
   ExitIcon,
   LockClosedIcon,
-} from '@radix-ui/react-icons';
+} from "@radix-ui/react-icons";
-import Link from 'next/link';
+import Link from "next/link";
 
 export const VerticalNav = () => {
   return (
@@ -51,12 +51,12 @@ export const VerticalNav = () => {
 
 export const HorizontalNav = () => (
   <div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
-    <div className="flex-1">
+    <div className="flex items-center">
       <a className="btn btn-ghost normal-case text-xl">
         Virtual Air Rescue - HUB
       </a>
     </div>
-    <div className="flex-none">
+    <div className="flex items-center ml-auto">
       <ul className="flex space-x-2 px-1">
         <li>
           <Link href="/">