Login screen done

composer.json

@@ -13,7 +13,8 @@
         "larswiegers/laravel-translations-checker": "^0.9.1",
         "livewire/livewire": "^3.0",
         "predis/predis": "^2.2",
-        "sentry/sentry-laravel": "^4.3"
+        "sentry/sentry-laravel": "^4.3",
+        "spatie/laravel-google-fonts": "^1.4"
     },
     "require-dev": {
         "fakerphp/faker": "^1.23",

config/google-fonts.php

@@ -0,0 +1,51 @@
+<?php
+
+return [
+
+    /*
+     * Here you can register fonts to call from the @googlefonts Blade directive.
+     * The google-fonts:fetch command will prefetch these fonts.
+     */
+    'fonts' => [
+        'icons' => 'https://fonts.googleapis.com/icon?family=Material+Icons',
+    ],
+
+    /*
+     * This disk will be used to store local Google Fonts. The public disk
+     * is the default because it can be served over HTTP with storage:link.
+     */
+    'disk' => 'public',
+
+    /*
+     * Prepend all files that are written to the selected disk with this path.
+     * This allows separating the fonts from other data in the public disk.
+     */
+    'path' => 'fonts',
+
+    /*
+     * By default, CSS will be inlined to reduce the amount of round trips
+     * browsers need to make in order to load the requested font files.
+     */
+    'inline' => true,
+
+    /*
+     * When preload is set to true, preload meta tags will be generated
+     * in the HTML output to instruct the browser to start fetching the
+     * font files as early as possible, even before the CSS is fully parsed.
+     */
+    'preload' => false,
+
+    /*
+     * When something goes wrong fonts are loaded directly from Google.
+     * With fallback disabled, this package will throw an exception.
+     */
+    'fallback' => ! env('APP_DEBUG'),
+
+    /*
+     * This user agent will be used to request the stylesheet from Google Fonts.
+     * This is the Safari 14 user agent that only targets modern browsers. If
+     * you want to target older browsers, use different user agent string.
+     */
+    'user_agent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15',
+
+];

lang/en/auth.php

@@ -16,5 +16,5 @@
     'failed' => 'These credentials do not match our records.',
     'password' => 'The provided password is incorrect.',
     'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
-
+    'login_text' => 'Welcome back, adventurer!',
 ];

package.json

@@ -10,6 +10,7 @@
         "@tailwindcss/typography": "^0.5.10",
         "autoprefixer": "^10.4.16",
         "axios": "^1.6.4",
+        "daisyui": "^4.10.1",
         "laravel-vite-plugin": "^1.0",
         "postcss": "^8.4.32",
         "tailwindcss": "^3.4.0",

resources/views/auth/forgot-password.blade.php

@@ -19,10 +19,7 @@
         <form method="POST" action="{{ route('password.email') }}">
             @csrf
 
-            <div class="block">
-                <x-label for="email" value="{{ __('Email') }}" />
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
-            </div>
+            <x-input-group id="email" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" :label="__('Email')" />
 
             <div class="flex items-center justify-end mt-4">
                 <x-button>

resources/views/auth/login.blade.php

@@ -1,10 +1,11 @@
 <x-guest-layout>
     <x-authentication-card>
         <x-slot name="logo">
-            <x-authentication-card-logo />
+            {{--            <x-authentication-card-logo />--}}
+            <h1 class="text-4xl text-text dark:text-dm-text">{{ __('auth.login_text') }}</h1>
         </x-slot>
 
-        <x-validation-errors class="mb-4" />
+        <x-validation-errors class="mb-4"/>
 
         @if (session('status'))
             <div class="mb-4 font-medium text-sm text-green-600 dark:text-green-400">
@@ -15,26 +16,21 @@
         <form method="POST" action="{{ route('login') }}">
             @csrf
 
-            <div>
-                <x-label for="email" value="{{ __('Email') }}" />
-                <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
-            </div>
+            <x-input-group id="email" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" :label="__('Email')" />
 
-            <div class="mt-4">
-                <x-label for="password" value="{{ __('Password') }}" />
-                <x-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
-            </div>
+            <x-input-group id="password" type="password" name="password" required autocomplete="current-password" :label="__('Password')" divclass="mt-4" />
 
             <div class="block mt-4">
                 <label for="remember_me" class="flex items-center">
-                    <x-checkbox id="remember_me" name="remember" />
+                    <x-checkbox id="remember_me" name="remember"/>
                     <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
                 </label>
             </div>
 
             <div class="flex items-center justify-end mt-4">
                 @if (Route::has('password.request'))
-                    <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('password.request') }}">
+                    <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-se dark:focus:ring-dm-se dark:focus:ring-offset-gray-800"
+                       href="{{ route('password.request') }}">
                         {{ __('Forgot your password?') }}
                     </a>
                 @endif

resources/views/components/authentication-card.blade.php

@@ -1,9 +1,9 @@
-<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
+<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
     <div>
         {{ $logo }}
     </div>
 
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-pr/20 dark:bg-dm-pr/20 shadow-md overflow-hidden sm:rounded-lg">
         {{ $slot }}
     </div>
 </div>

resources/views/components/button.blade.php

@@ -1,3 +1,3 @@
-<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-200 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150']) }}>
+<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-pr dark:bg-dm-pr border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-800 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-white focus:bg-gray-700 dark:focus:bg-white active:bg-gray-900 dark:active:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-se dark:focus:ring-dm-se focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150']) }}>
     {{ $slot }}
 </button>

resources/views/components/checkbox.blade.php

@@ -1 +1 @@
-<input type="checkbox" {!! $attributes->merge(['class' => 'rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800']) !!}>
+<input type="checkbox" {!! $attributes->merge(['class' => 'rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-se dark:text-dm-se shadow-sm focus:ring-se dark:focus:ring-dm-se dark:focus:ring-offset-gray-800']) !!}>

resources/views/components/input-group.blade.php

@@ -0,0 +1,12 @@
+<div class="relative flex flex-col {{ $divclass ?? '' }}">
+    <div class="relative z-0">
+        <x-input {{ $attributes->except(['label', 'supporting_text', 'error', 'divclass']) }} placeholder=" "/>
+        <x-label for="{{$name}}" value="{{ $label }}"/>
+    </div>
+    @if(isset($supporting_text))
+    <div class="pt-1 px-4 text-xs tracking-[0.4px]">{{$supporting_text}}</div>
+    @endif
+    @if($error ?? false)
+    <x-input-error for="{{$name}}" class="mt-1"/>
+    @endif
+</div>

resources/views/components/input.blade.php

@@ -1,3 +1,3 @@
 @props(['disabled' => false])
 
-<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm']) !!}>
+<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'w-full h-14 block leading-5 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border border-2 focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-se focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-dm-se peer transition duration-300']) !!}>

resources/views/components/label.blade.php

@@ -1,5 +1,5 @@
 @props(['value'])
 
-<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700 dark:text-gray-300']) }}>
+<label {{ $attributes->merge(['class' => 'absolute tracking-[.03125em] text-white dark:text-white bg-gray-500 dark:bg-gray-400 rounded duration-300 transform px-1 -translate-y-7 scale-75 top-4 z-10 origin-[0] left-4 peer-focus:left-4 peer-focus:text-text dark:peer-focus:text-dm-text peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:text-gray-500 peer-placeholder-shown:bg-transparent dark:peer-placeholder-shown:bg-transparent dark:peer-placeholder-shown:text-gray-400 peer-focus:scale-75 peer-focus:-translate-y-7 peer-focus:bg-se dark:peer-focus:bg-dm-se peer-focus:px-1 peer-invalid:text-error-600 dark:peer-invalid:text-error-200']) }}>
     {{ $value ?? $slot }}
 </label>

resources/views/layouts/app.blade.php

@@ -23,6 +23,8 @@
 
         <!-- Styles -->
         @livewireStyles
+        <!-- googlefonts -->
+        <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
     </head>
     <body class="font-sans antialiased">
         <x-banner />

resources/views/layouts/guest.blade.php

@@ -7,28 +7,32 @@
       x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val)); first === 'false' ? localStorage.setItem('first', 'true') && location.reload() : null"
       x-bind:class="{'dark': darkMode === 'dark' || (darkMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)}"
 >
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta name="csrf-token" content="{{ csrf_token() }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
 
-        <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>{{ config('app.name', 'Laravel') }}</title>
 
-        <!-- Fonts -->
-        <link rel="preconnect" href="https://fonts.bunny.net">
-        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet"/>
 
-        <!-- Scripts -->
-        @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <!-- Scripts -->
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
 
-        <!-- Styles -->
-        @livewireStyles
-    </head>
-    <body>
-        <div class="font-sans text-gray-900 dark:text-gray-100 antialiased">
-            {{ $slot }}
-        </div>
-
-        @livewireScripts
-    </body>
+    <!-- Styles -->
+    @livewireStyles
+    <!-- googlefonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
+</head>
+<body class="bg-bg dark:bg-dm-bg transition-colors min-h-screen">
+<div class="absolute min-w-full">
+    <livewire:navigation-menu/>
+</div>
+<div class="font-sans text-gray-900 dark:text-gray-100 antialiased">
+    {{ $slot }}
+</div>
+@livewireScripts
+</body>
 </html>

resources/views/layouts/main.blade.php

@@ -32,6 +32,8 @@
 
     <!-- Styles -->
     @livewireStyles
+    <!-- googlefonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 </head>
 <body class="bg-bg dark:bg-dm-bg transition-colors">
 <livewire:navigation-menu/>

resources/views/navigation-menu.blade.php

@@ -4,9 +4,9 @@
         <div class="flex justify-between h-16">
             <div class="flex">
                 <!-- Logo -->
-                <div class="shrink-0 flex items-center">
+                <div class="shrink-0 ms-2 mt-2 flex items-center">
                     <a href="{{ route('home') }}">
-                        <x-application-mark class="block h-9 w-auto fill-text dark:fill-dm-text"/>
+                        <x-application-mark class="block text-text dark:text-dm-text"/>
                     </a>
                 </div>
 
@@ -31,7 +31,7 @@ class="relative inline-flex items-center overflow-hidden px-2 py-1 border border
                     case 'light':
                         return 'dark';
                     case 'dark':
-                        return 'system';
+                        return 'light';
                     case 'system':
                         return 'light';
                 }
@@ -200,10 +200,10 @@ class="w-6 h-6 p-1 absolute"
 
                             <x-slot name="content">
                                 <!-- Account Management -->
-                                <x-dropdown-link href="{{ route('login') }}">
+                                <x-dropdown-link href="{{ route('login') }}" wire:navigate>
                                     {{ __('Log in') }}
                                 </x-dropdown-link>
-                                <x-dropdown-link href="{{ route('register') }}">
+                                <x-dropdown-link href="{{ route('register') }}" wire:navigate>
                                     {{ __('Register') }}
                                 </x-dropdown-link>
                             </x-slot>

tailwind.config.js

@@ -1,6 +1,7 @@
 import defaultTheme from 'tailwindcss/defaultTheme';
 import forms from '@tailwindcss/forms';
 import typography from '@tailwindcss/typography';
+import daisyui from "daisyui";
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -131,6 +132,10 @@ export default {
             }
         },
     },
-
-    plugins: [forms, typography], darkMode: 'selector',
+    plugins: [forms, typography, daisyui], darkMode: 'selector',
+    daisyui: {
+        themes: false,
+        darkTheme: "synthwave",
+        lightTheme: "aqua"
+    }
 };