Skip to content

Commit 6727c82

Browse files
SebKaySebKay
authored
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
1 parent ffb15c2 commit 6727c82

File tree

19 files changed

+409
-348
lines changed

19 files changed

+409
-348
lines changed

‎bun.lockb‎

15.1 KB
Binary file not shown.

‎composer.lock‎

Lines changed: 241 additions & 240 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/Components/Footer.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<footer class="border-t border-brand-200 px-4 sm:px-6 xl:px-8">
3+
<div class="mx-auto max-w-7xl py-4 xl:py-8">
4+
<p class="text-sm">
5+
&copy; 2024
6+
<a
7+
href="https://sebkay.com/"
8+
class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
9+
target="_blank"
10+
>Seb Kay</a
11+
>. All rights reserved.
12+
</p>
13+
</div>
14+
</footer>
15+
</template>

‎resources/js/Components/Header.vue‎

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,41 @@
11
<template>
2-
<header class="bg-white border-b border-slate-200">
2+
<header class="bg-white border-b border-brand-200 px-4 sm:px-6 xl:px-8">
33
<nav>
4-
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
4+
<div class="mx-auto max-w-7xl">
55
<div class="flex h-16 items-center justify-between">
66
<div class="flex items-center">
77
<Link :href="route('home')">
8-
<SparklesIcon class="h-8 w-8 flex-shrink-0" />
8+
<SparklesIcon class="h-8 w-8 flex-shrink-0 text-brand-800" />
99
</Link>
1010
</div>
1111

1212
<div class="hidden md:block">
13-
<div class="hidden md:block">
14-
<div class="ml-10 flex items-baseline space-x-4">
15-
<template
16-
v-for="link in menu"
17-
:key="link.label"
18-
>
19-
<Link
20-
v-if="link.condition"
21-
:href="link.route"
22-
:method="link?.method"
23-
:as="link?.method == 'post' ? 'button' : 'a'"
24-
v-text="link.label"
25-
class="rounded-xl px-3 py-2 text-sm font-medium"
26-
:class="{
27-
'bg-slate-100 text-slate-800': link.components.includes($page.component),
28-
'text-slate-500 hover:text-slate-900': !link.components.includes($page.component),
29-
}"
30-
/>
31-
</template>
32-
</div>
13+
<div class="ml-10 flex items-baseline space-x-4">
14+
<template
15+
v-for="link in menu"
16+
:key="link.label"
17+
>
18+
<Link
19+
v-if="link.condition"
20+
:href="link.route"
21+
:method="link?.method"
22+
:as="link?.method == 'post' ? 'button' : 'a'"
23+
v-text="link.label"
24+
class="rounded-xl px-3 py-2 text-sm font-medium transition-colors ease-in-out duration-200"
25+
:class="{
26+
'bg-brand-100 text-brand-950': link.components.includes($page.component),
27+
'text-brand-600 hover:text-brand-950 focus:text-brand-950': !link.components.includes($page.component),
28+
}"
29+
/>
30+
</template>
3331
</div>
3432
</div>
3533

3634
<div class="-mr-2 flex md:hidden">
3735
<button
3836
@click="mobileMenuOpen = !mobileMenuOpen"
3937
type="button"
40-
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"
38+
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"
4139
>
4240
<span class="sr-only">Open main menu</span>
4341
<XMarkIcon
@@ -68,8 +66,8 @@
6866
v-text="link.label"
6967
class="rounded-xl px-3 py-2 text-base font-medium block"
7068
:class="{
71-
'bg-slate-100 text-slate-800': link.components.includes($page.component),
72-
'text-slate-500 hover:text-slate-900': !link.components.includes($page.component),
69+
'bg-brand-100 text-brand-950': link.components.includes($page.component),
70+
'text-brand-600 focus:text-brand-950': !link.components.includes($page.component),
7371
}"
7472
aria-current="page"
7573
/>
@@ -81,11 +79,18 @@
8179
</template>
8280

8381
<script setup>
84-
import { ref } from 'vue';
82+
import { ref, onMounted } from "vue";
83+
import { router } from '@inertiajs/vue3'
8584
8685
const props = defineProps({
8786
menu: Array,
8887
});
8988
9089
const mobileMenuOpen = ref(false);
90+
91+
onMounted(() => {
92+
router.on("success", () => {
93+
mobileMenuOpen.value = false;
94+
});
95+
});
9196
</script>

‎resources/js/Components/PageTitle.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<h1
3+
v-text="text"
4+
class="xl:text-4xl text-3xl font-medium text-neutral-900 text-center"
5+
></h1>
6+
</template>
7+
8+
<script setup>
9+
const props = defineProps({
10+
text: String,
11+
});
12+
</script>

‎resources/js/Layouts/App.vue‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,31 @@
44
<title></title>
55
</Head>
66

7-
<div class="min-h-full">
7+
<div class="min-h-full flex flex-col">
88
<Header :menu="menu" />
99

1010
<main>
11-
<div class="mx-auto max-w-7xl lg:py-16 py-8 px-4 sm:px-6 lg:px-8">
11+
<div class="mx-auto max-w-7xl xl:py-16 py-8 px-4 sm:px-6 xl:px-8">
1212
<slot />
1313
</div>
1414
</main>
15+
16+
<Footer class="mt-auto" />
1517
</div>
1618

1719
<Notice />
1820
</template>
1921

2022
<script setup>
21-
import { ref, computed, onMounted } from "vue";
22-
import { usePage, router } from '@inertiajs/vue3'
23+
import { computed } from "vue";
24+
import { usePage } from '@inertiajs/vue3'
2325
2426
import Header from "@js/Components/Header.vue";
27+
import Footer from "@js/Components/Footer.vue";
2528
import Notice from "@js/Components/Notice.vue";
2629
2730
const page = usePage();
2831
29-
const mobileMenuOpen = ref(false);
30-
3132
const menu = computed(() => {
3233
if (page.props.auth.loggedIn) {
3334
return [
@@ -68,10 +69,4 @@
6869
},
6970
];
7071
});
71-
72-
onMounted(() => {
73-
router.on("success", () => {
74-
mobileMenuOpen.value = false;
75-
});
76-
});
7772
</script>

‎resources/js/Pages/Account/Edit.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44

55
<h1
66
v-text="title"
7-
class="lg:text-4xl text-3xl font-medium text-slate-800 lg:mb-8 mb-4"
7+
class="xl:text-4xl text-3xl font-medium text-neutral-900 xl:mb-8 mb-4"
88
></h1>
99

10-
<div class="bg-white rounded-2xl lg:p-10 p-6 border border-slate-200">
10+
<div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
1111
<form @submit.prevent="submitForm">
1212
<div class="form-row">
1313
<div class="form-col">

‎resources/js/Pages/Dashboard/Index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44

55
<h1
66
v-text="title"
7-
class="lg:text-4xl text-3xl font-medium text-slate-800 lg:mb-8 mb-4"
7+
class="xl:text-4xl text-3xl font-medium text-neutral-900 xl:mb-8 mb-4"
88
></h1>
99

10-
<div class="bg-white rounded-2xl lg:p-10 p-6 border border-slate-200">
10+
<div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
1111
<p v-if="userCan($page.props, 'create-posts')">User can create posts.</p>
1212
<p v-else>User can't create posts.</p>
1313
</div>

‎resources/js/Pages/EmailVerification/Show.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,9 @@
33
<Head :title="title" />
44

55
<div class="mx-auto max-w-2xl">
6-
<h1
7-
v-text="title"
8-
class="lg:text-4xl text-3xl font-medium text-slate-800 text-center lg:mb-8 mb-4"
9-
></h1>
6+
<PageTitle class="mb-4 xl:mb-8" :text="title" />
107

11-
<div class="bg-white rounded-2xl lg:p-10 p-6 border border-slate-200">
8+
<div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
129
<div class="text-center">
1310
<p>
1411
Please verify your email address by clicking on the link we just emailed to you.
@@ -28,6 +25,8 @@
2825
import { ref } from "vue";
2926
import { router } from "@inertiajs/vue3";
3027
28+
import PageTitle from "@js/Components/PageTitle.vue";
29+
3130
const title = ref("Verify Your Email");
3231
3332
const resend = () => {

‎resources/js/Pages/Login/Show.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,9 @@
33
<Head :title="title" />
44

55
<div class="mx-auto max-w-2xl">
6-
<h1
7-
v-text="title"
8-
class="lg:text-4xl text-3xl font-medium text-slate-800 text-center lg:mb-8 mb-4"
9-
></h1>
6+
<PageTitle class="mb-4 xl:mb-8" :text="title" />
107

11-
<div class="bg-white rounded-2xl lg:p-10 p-6 border border-slate-200">
8+
<div class="bg-white rounded-2xl xl:p-10 p-6 border border-brand-200">
129
<form @submit.prevent="submitForm">
1310
<div class="form-row">
1411
<div class="form-col">
@@ -71,18 +68,18 @@
7168
</div>
7269
</form>
7370

74-
<div class="mt-6 lg:mt-10">
75-
<p class="text-center text-slate-800">
71+
<div class="mt-6 xl:mt-10">
72+
<p class="text-center">
7673
<Link
77-
class="underline hover:no-underline"
74+
class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
7875
:href="route('password')"
7976
text="Forgot your password?"
8077
/>
8178
</p>
8279

83-
<p class="text-center text-slate-800 mt-3">
80+
<p class="text-center mt-3">
8481
<Link
85-
class="underline hover:no-underline"
82+
class="underline hover:decoration-transparent transition-colors ease-in-out duration-200"
8683
:href="route('register')"
8784
text="Register"
8885
/>
@@ -96,6 +93,8 @@
9693
import { ref } from "vue";
9794
import { useForm } from "@inertiajs/vue3";
9895
96+
import PageTitle from "@js/Components/PageTitle.vue";
97+
9998
const props = defineProps({
10099
email: String,
101100
password: String,

0 commit comments

Comments
 (0)