Tailwind/design improvements (#82)

* Update NPM dependencies

* Add "brand" color palette to Tailwind config

* Apply "brand" color palette

* Add custom breakpoints

* Update tailwind.config.cjs

* Better apply custom breakpoints

* Add custom font families

* Change text colors

* Apply heading font

* Create `PageTitle` component

* Move button styles to dedicated file

* Add styling for checkboxes, radio buttons and select dropdowns

* Add transitions

* Fix menu not closing after navigating

* Add footer

* Update Footer.vue

* Update Composer dependencies

Author: SebKay

bun.lockb

@@ -0,0 +1,15 @@
+<template>
+    <footer class="border-t border-brand-200 px-4 sm:px-6 xl:px-8">
+        <div class="mx-auto max-w-7xl py-4 xl:py-8">
+            <p class="text-sm">
+                &copy; 2024
+                <a
+                    href="https://sebkay.com/"
+                    class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
+                    target="_blank"
+                    >Seb Kay</a
+                >. All rights reserved.
+            </p>
+        </div>
+    </footer>
+</template>

composer.lock

@@ -1,43 +1,41 @@
 <template>
-    <header class="bg-white border-b border-slate-200">
+    <header class="bg-white border-b border-brand-200 px-4 sm:px-6 xl:px-8">
         <nav>
-            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div class="mx-auto max-w-7xl">
                 <div class="flex h-16 items-center justify-between">
                     <div class="flex items-center">
                         <Link :href="route('home')">
-                        <SparklesIcon class="h-8 w-8 flex-shrink-0" />
+                        <SparklesIcon class="h-8 w-8 flex-shrink-0 text-brand-800" />
                         </Link>
                     </div>
 
                     <div class="hidden md:block">
-                        <div class="hidden md:block">
-                            <div class="ml-10 flex items-baseline space-x-4">
-                                <template
-                                    v-for="link in menu"
-                                    :key="link.label"
-                                >
-                                    <Link
-                                        v-if="link.condition"
-                                        :href="link.route"
-                                        :method="link?.method"
-                                        :as="link?.method == 'post' ? 'button' : 'a'"
-                                        v-text="link.label"
-                                        class="rounded-xl px-3 py-2 text-sm font-medium"
-                                        :class="{
-                                            'bg-slate-100 text-slate-800': link.components.includes($page.component),
-                                            'text-slate-500 hover:text-slate-900': !link.components.includes($page.component),
-                                        }"
-                                    />
-                                </template>
-                            </div>
+                        <div class="ml-10 flex items-baseline space-x-4">
+                            <template
+                                v-for="link in menu"
+                                :key="link.label"
+                            >
+                                <Link
+                                    v-if="link.condition"
+                                    :href="link.route"
+                                    :method="link?.method"
+                                    :as="link?.method == 'post' ? 'button' : 'a'"
+                                    v-text="link.label"
+                                    class="rounded-xl px-3 py-2 text-sm font-medium transition-colors ease-in-out duration-200"
+                                    :class="{
+                                        'bg-brand-100 text-brand-950': link.components.includes($page.component),
+                                        'text-brand-600 hover:text-brand-950 focus:text-brand-950': !link.components.includes($page.component),
+                                    }"
+                                />
+                            </template>
                         </div>
                     </div>
 
                     <div class="-mr-2 flex md:hidden">
                         <button
                             @click="mobileMenuOpen = !mobileMenuOpen"
                             type="button"
-                            class="relative inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-900 hover:bg-slate-900 hover:text-white"
+                            class="relative inline-flex items-center justify-center rounded-md bg-brand-100 p-2 text-brand-900 hover:bg-brand-900 hover:text-white"
                         >
                             <span class="sr-only">Open main menu</span>
                             <XMarkIcon
@@ -68,8 +66,8 @@
                             v-text="link.label"
                             class="rounded-xl px-3 py-2 text-base font-medium block"
                             :class="{
-                                'bg-slate-100 text-slate-800': link.components.includes($page.component),
-                                'text-slate-500 hover:text-slate-900': !link.components.includes($page.component),
+                                'bg-brand-100 text-brand-950': link.components.includes($page.component),
+                                'text-brand-600 focus:text-brand-950': !link.components.includes($page.component),
                             }"
                             aria-current="page"
                         />
@@ -81,11 +79,18 @@
 </template>
 
 <script setup>
-    import { ref } from 'vue';
+    import { ref, onMounted } from "vue";
+    import { router } from '@inertiajs/vue3'
 
     const props = defineProps({
         menu: Array,
     });
 
     const mobileMenuOpen = ref(false);
+
+    onMounted(() => {
+        router.on("success", () => {
+            mobileMenuOpen.value = false;
+        });
+    });
 </script>

resources/js/Components/Footer.vue

@@ -0,0 +1,12 @@
+<template>
+    <h1
+        v-text="text"
+        class="xl:text-4xl text-3xl font-medium text-neutral-900 text-center"
+    ></h1>
+</template>
+
+<script setup>
+    const props = defineProps({
+        text: String,
+    });
+</script>

resources/js/Components/Header.vue

@@ -4,30 +4,31 @@
         <title></title>
     </Head>
 
-    <div class="min-h-full">
+    <div class="min-h-full flex flex-col">
         <Header :menu="menu" />
 
         <main>
-            <div class="mx-auto max-w-7xl lg:py-16 py-8 px-4 sm:px-6 lg:px-8">
+            <div class="mx-auto max-w-7xl xl:py-16 py-8 px-4 sm:px-6 xl:px-8">
                 <slot />
             </div>
         </main>
+
+        <Footer class="mt-auto" />
     </div>
 
     <Notice />
 </template>
 
 <script setup>
-    import { ref, computed, onMounted } from "vue";
-    import { usePage, router } from '@inertiajs/vue3'
+    import { computed } from "vue";
+    import { usePage } from '@inertiajs/vue3'
 
     import Header from "@js/Components/Header.vue";
+    import Footer from "@js/Components/Footer.vue";
     import Notice from "@js/Components/Notice.vue";
 
     const page = usePage();
 
-    const mobileMenuOpen = ref(false);
-
     const menu = computed(() => {
         if (page.props.auth.loggedIn) {
             return [
@@ -68,10 +69,4 @@
             },
         ];
     });
-
-    onMounted(() => {
-        router.on("success", () => {
-            mobileMenuOpen.value = false;
-        });
-    });
 </script>

resources/js/Components/PageTitle.vue

@@ -4,10 +4,10 @@
 
     <h1
         v-text="title"
-        class="lg:text-4xl text-3xl font-medium text-slate-800 lg:mb-8 mb-4"
+        class="xl:text-4xl text-3xl font-medium text-neutral-900 xl:mb-8 mb-4"
     ></h1>
 
-    <div class="bg-white rounded-2xl lg:p-10 p-6 border border-slate-200">
+    <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
         <form @submit.prevent="submitForm">
             <div class="form-row">
                 <div class="form-col">

resources/js/Layouts/App.vue

@@ -4,10 +4,10 @@
 
     <h1
         v-text="title"
-        class="lg:text-4xl text-3xl font-medium text-slate-800 lg:mb-8 mb-4"
+        class="xl:text-4xl text-3xl font-medium text-neutral-900 xl:mb-8 mb-4"
     ></h1>
 
-    <div class="bg-white rounded-2xl lg:p-10 p-6 border border-slate-200">
+    <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
         <p v-if="userCan($page.props, 'create-posts')">User can create posts.</p>
         <p v-else>User can't create posts.</p>
     </div>

resources/js/Pages/Account/Edit.vue

@@ -3,12 +3,9 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <h1
-            v-text="title"
-            class="lg:text-4xl text-3xl font-medium text-slate-800 text-center lg:mb-8 mb-4"
-        ></h1>
+        <PageTitle class="mb-4 xl:mb-8" :text="title" />
 
-        <div class="bg-white rounded-2xl lg:p-10 p-6 border border-slate-200">
+        <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <div class="text-center">
                 <p>
                     Please verify your email address by clicking on the link we just emailed to you.
@@ -28,6 +25,8 @@
     import { ref } from "vue";
     import { router } from "@inertiajs/vue3";
 
+    import PageTitle from "@js/Components/PageTitle.vue";
+
     const title = ref("Verify Your Email");
 
     const resend = () => {

resources/js/Pages/Dashboard/Index.vue

@@ -3,12 +3,9 @@
     <Head :title="title" />
 
     <div class="mx-auto max-w-2xl">
-        <h1
-            v-text="title"
-            class="lg:text-4xl text-3xl font-medium text-slate-800 text-center lg:mb-8 mb-4"
-        ></h1>
+        <PageTitle class="mb-4 xl:mb-8" :text="title" />
 
-        <div class="bg-white rounded-2xl lg:p-10 p-6 border border-slate-200">
+        <div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
             <form @submit.prevent="submitForm">
                 <div class="form-row">
                     <div class="form-col">
@@ -71,18 +68,18 @@
                 </div>
             </form>
 
-            <div class="mt-6 lg:mt-10">
-                <p class="text-center text-slate-800">
+            <div class="mt-6 xl:mt-10">
+                <p class="text-center">
                     <Link
-                        class="underline hover:no-underline"
+                        class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
                         :href="route('password')"
                         text="Forgot your password?"
                     />
                 </p>
 
-                <p class="text-center text-slate-800 mt-3">
+                <p class="text-center mt-3">
                     <Link
-                        class="underline hover:no-underline"
+                        class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
                         :href="route('register')"
                         text="Register"
                     />
@@ -96,6 +93,8 @@
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
 
+    import PageTitle from "@js/Components/PageTitle.vue";
+
     const props = defineProps({
         email: String,
         password: String,