update design

app/Http/Controllers/AuthController.php

@@ -27,11 +27,8 @@ public function login(Login $request)
 
     public function register(Register $request)
     {
-        error_log("Registering user");
         $user = User::create($request->validated());
 
-
-
         return redirect("/login");
     }
 

resources/css/app.scss

@@ -1,13 +1,21 @@
-@import '@fortawesome/fontawesome-free/css/fontawesome.css';
-@import '@fortawesome/fontawesome-free/css/regular.css';
-@import '@fortawesome/fontawesome-free/css/solid.css';
-@import '@fortawesome/fontawesome-free/css/brands.css';
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/regular.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
+@import "@fortawesome/fontawesome-free/css/brands.css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-
 #app {
     @apply h-full;
-}
+}
+
+.rainbow {
+    margin-bottom: 20px;
+    background: linear-gradient(315deg, #42d392 25%, #647eff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 3rem;
+    font-weight: 900;
+}

resources/js/Components/Form.vue

@@ -1,12 +1,12 @@
 <template>
     <form method="post" enctype="multipart/form-data" class="drop-shadow-lg mx-auto px-8 py-4 rounded-md max-w-[max(20rem,40%)] flex flex-col items-center">
         <div v-if="title" class="px-4 py-2">
-            <h1 class="text-3xl">{{ title }}</h1>
+            <h1 class="rainbow">{{ title }}</h1>
         </div>
         <slot class="w-full"></slot>
         <input type="hidden" name="_token" :value="csrf">        
         <div class="w-80 mt-4">
-            <button :disabled="disabled" type="submit" class="w-full py-2 bg-[#240d4b] rounded-md">
+            <button :disabled="disabled" type="submit" class="w-full py-2 bg-[#42d392] rounded-md text-black">
                 Submit
             </button>
         </div>

resources/js/Components/Input.vue

@@ -5,7 +5,7 @@
             <input v-bind="$attrs" :value="modelValue"
                 @input="modelValue = $event.target.value; $emit('update:modelValue', $event.target.value)" :maxlength="max"
                 :minlength="min" :required="required" :type="state_type" :placeholder="placeholder"
-                class="bg-[#1d2432] px-4 py-2 rounded-md w-full" @invalid="invalid">
+                class="bg-[#333333] px-4 py-2 rounded-md w-full" @invalid="invalid">
             <i v-if="isPassword" class="fa-solid fa-eye absolute right-2 bottom-[13px] cursor-pointer"
                 @click="togglePassword"></i>
         </div>

resources/js/Pages/Auth/Login.vue

@@ -3,8 +3,8 @@
         <form-group title="Login" label="Name" for="name">
             <form-input v-model="values.email" name="email" type="email" label="Email" placeholder="Your Email" required />
             <form-input :customError="customError" v-model="values.password" name="password" type="password" label="Password" placeholder="Your Password" @change:modelValue="errors = []" required />
-            <a href="#" class="text-blue-600">Forgot your password?</a>
-            <a href="register" class="text-blue-600">Create an account</a>
+            <a href="#" class="text-gray-300 hover:text-gray-400 font-bold">Forgot your password?</a>
+            <a href="register" class="text-gray-300 hover:text-gray-400 pt-2 font-bold pb-2">Create an account</a>
         </form-group>
     </div>
 </template>

resources/js/Pages/Auth/Register.vue

@@ -6,7 +6,7 @@
             <form-input v-model="values.email" name="email" type="email" label="Email" placeholder="Your Email" required @update:modelValue="resetErrors" />
             <form-input v-model="values.password" name="password" type="password" label="Password" placeholder="Your Password" required />
             <form-input v-model="values.password_confirmation" :customError="customError" name="password_confirmation" type="password" label="Confirm Password" placeholder="Confirm Password" required />
-            <a href="login" class="text-blue-600">Already have an account?</a>
+            <a href="login" class="text-gray-300 hover:text-gray-400 font-bold pb-2">Already have an account?</a>
         </form-group>
 </div>
 </template>

resources/views/app.blade.php

@@ -20,42 +20,43 @@
 
 <body class="font-sans antialiased text-white">
     <header class="bg-transparent w-full h-16 absolute px-4 border-b z-10 border-gray-700 flex items-center justify-between">
-        <h1 class="inline-block font-bold text-3xl">M306</h1>
-        <div id="actions" class="relative">
+        <h1 class="inline-block font-bold text-3xl">BetterLet</h1>
+        <div id="actions" class="relative flex">
             @if (Auth::check())
-            <a href="/logout" class="mx-3 border border-gray-600 py-3 px-2 rounded-md cursor-pointer">
+            <a href="/logout" class="mx-3 py-3 px-2 rounded-md cursor-pointer">
                 <i class="fa-solid fa-sign-out mr-2"></i>
                 Logout
             </a>
             @else
-            <a href="/register" class="mx-3 border border-gray-600 py-3 px-2 rounded-md cursor-pointer">
+            <a href="/register" class="mx-3 hover:text-gray-200 py-3 px-2 rounded-md cursor-pointer">
                 Register
             </a>
-            <a href="/login" class="mx-3 border border-gray-600 py-3 px-2 rounded-md cursor-pointer">
-                <i class="fa-solid fa-lock mr-2"></i>
+            <div class="h-10 my-auto w-[1px] bg-[#333333]">
+            </div>
+            <a href="/login" class="mx-3 hover:text-gray-400 py-3 px-2 rounded-md cursor-pointer">
                 Login
             </a>
             @endif
         </div>
     </header>
-    <main class="!h-[calc(100vh-3rem)] bg-[#111827] p-4 pt-20 backdrop-blur-md overflow-hidden">
+    <main class="!h-[calc(100vh-3rem)] bg-[#222222] p-4 pt-20 backdrop-blur-md overflow-hidden">
         <div class="z-50 h-full">
             @inertia
         </div>
         <div id="bg-1"></div>
         <div id="bg-2"></div>
     </main>
     <footer class="bg-[#0d1117] w-full h-12 flex items-center justify-between px-4 border-t border-gray-700">
-        <span>&copy; bbzbl-it.dev 2024</span>
+        <span>&copy; Betterlet 2024 - All rights reserved</span>
         <span id="links">
             <a href="mailto:support@bbzbl-it.dev">
-                <i class="fa-regular fa-envelope"></i>
+                <i class="fa-regular fa-envelope hover:text-green-400"></i>
             </a>
             <a href="https://github.com/bbzblit">
-                <i class="fa-brands fa-github cursor-pointer px-4"></i>
+                <i class="fa-brands fa-github cursor-pointer px-4 hover:text-green-400"></i>
             </a>
             <a href="https://github.com/bbzblit/m306">
-                <i class="fa-solid fa-code"></i>
+                <i class="fa-solid fa-code hover:text-green-400"></i>
             </a>
         </span>
     </footer>