Skip to content

Commit 42b1911

Browse files
tnyleatnylea
committed
making design changes
1 parent 2b9b487 commit 42b1911

File tree

8 files changed

+51
-26
lines changed

8 files changed

+51
-26
lines changed

‎resources/css/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
--sidebar-primary: 240 5.9% 10%;
3030
--sidebar-primary-foreground: 0 0% 98%;
3131
--sidebar-accent: 240 4.8% 95.9%;
32-
--sidebar-accent-foreground: 240 5.9% 10%;
32+
--sidebar-accent-foreground: 240 5.9% 30%;
3333
--sidebar-border: 220 13% 91%;
3434
--sidebar-ring: 217.2 91.2% 59.8%;
3535
}

‎resources/js/components/NavFooter.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ defineProps<Props>();
1616
<SidebarGroupContent>
1717
<SidebarMenu>
1818
<SidebarMenuItem v-for="item in items" :key="item.title">
19-
<SidebarMenuButton as-child>
19+
<SidebarMenuButton class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100" as-child>
2020
<a :href="item.url" target="_blank" rel="noopener noreferrer">
2121
<component :is="item.icon" />
2222
<span>{{ item.title }}</span>
2323
</a>
2424
</SidebarMenuButton>
2525
<SidebarMenuAction show-on-hover>
26-
<ExternalLink />
26+
<ExternalLink class="text-neutral-600 dark:text-neutral-300" />
2727
</SidebarMenuAction>
2828
</SidebarMenuItem>
2929
</SidebarMenu>

‎resources/js/components/NavUser.vue‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,15 @@ import { type SharedData, type User } from '@/types';
1414
import { Link, usePage } from '@inertiajs/vue3';
1515
import { ChevronsUpDown, LogOut, Settings } from 'lucide-vue-next';
1616
17+
const page = usePage<SharedData>();
18+
const user = page.props.auth.user as User;
19+
1720
function getInitials(fullName: string): string {
1821
const names = fullName.trim().split(' ');
1922
if (names.length === 0) return '';
2023
if (names.length === 1) return names[0].charAt(0).toUpperCase();
2124
return `${names[0].charAt(0)}${names[names.length - 1].charAt(0)}`.toUpperCase();
2225
}
23-
24-
const page = usePage<SharedData>();
25-
const user = page.props.auth.user as User;
2626
</script>
2727

2828
<template>
@@ -31,9 +31,9 @@ const user = page.props.auth.user as User;
3131
<DropdownMenu>
3232
<DropdownMenuTrigger as-child>
3333
<SidebarMenuButton size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
34-
<Avatar class="h-8 w-8 rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
34+
<Avatar class="h-8 w-8 overflow-hidden rounded-full bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
3535
<AvatarImage v-if="user.avatar" :src="user.avatar" :alt="user.name" />
36-
<AvatarFallback class="rounded-md">
36+
<AvatarFallback>
3737
{{ getInitials(user.name) }}
3838
</AvatarFallback>
3939
</Avatar>
@@ -47,9 +47,11 @@ const user = page.props.auth.user as User;
4747
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" :side-offset="4">
4848
<DropdownMenuLabel class="p-0 font-normal">
4949
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
50-
<Avatar class="h-8 w-8 rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
50+
<Avatar class="h-8 w-8 overflow-hidden rounded-full bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
5151
<AvatarImage v-if="user.avatar" :src="user.avatar" :alt="user.name" />
52-
<AvatarFallback class="rounded-md">{{ getInitials(user.name) }}</AvatarFallback>
52+
<AvatarFallback>
53+
{{ getInitials(user.name) }}
54+
</AvatarFallback>
5355
</Avatar>
5456
<div class="grid flex-1 text-left text-sm leading-tight">
5557
<span class="truncate font-semibold">{{ user.name }}</span>

‎resources/js/components/TextLink.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script setup lang="ts">
2+
import { Link } from '@inertiajs/vue3';
3+
4+
interface Props {
5+
href: string;
6+
tabindex?: number;
7+
method?: string;
8+
as?: string;
9+
}
10+
11+
defineProps<Props>();
12+
</script>
13+
14+
<template>
15+
<Link
16+
:href="href"
17+
:tabindex="tabindex"
18+
:method="method"
19+
:as="as"
20+
class="underline decoration-neutral-400 underline-offset-2 duration-300 ease-out hover:decoration-neutral-700"
21+
>
22+
<slot />
23+
</Link>
24+
</template>

‎resources/js/pages/auth/ForgotPassword.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script setup lang="ts">
22
import InputError from '@/components/InputError.vue';
3+
import TextLink from '@/components/TextLink.vue';
34
import { Button } from '@/components/ui/button';
45
import { Input } from '@/components/ui/input';
56
import { Label } from '@/components/ui/label';
67
import AuthLayout from '@/layouts/AuthLayout.vue';
7-
import { Head, Link, useForm } from '@inertiajs/vue3';
8+
import { Head, useForm } from '@inertiajs/vue3';
89
import { LoaderCircle } from 'lucide-vue-next';
910
1011
defineProps<{
@@ -46,7 +47,7 @@ const submit = () => {
4647
</form>
4748
<div class="space-x-1 text-center text-sm">
4849
<span>Or, return to the</span>
49-
<Link :href="route('login')" class="underline underline-offset-4"> login page </Link>
50+
<TextLink :href="route('login')" class="underline underline-offset-4">login page</TextLink>
5051
</div>
5152
</div>
5253
</AuthLayout>

‎resources/js/pages/auth/Login.vue‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script setup lang="ts">
22
import InputError from '@/components/InputError.vue';
3+
import TextLink from '@/components/TextLink.vue';
34
import { Button } from '@/components/ui/button';
45
import { Input } from '@/components/ui/input';
56
import { Label } from '@/components/ui/label';
67
import AuthBase from '@/layouts/AuthLayout.vue';
7-
import { Head, Link, useForm } from '@inertiajs/vue3';
8+
import { Head, useForm } from '@inertiajs/vue3';
89
import { LoaderCircle } from 'lucide-vue-next';
910
1011
defineProps<{
@@ -44,14 +45,9 @@ const submit = () => {
4445
<div class="grid gap-2">
4546
<div class="flex items-center justify-between">
4647
<Label for="password">Password</Label>
47-
<Link
48-
v-if="canResetPassword"
49-
:href="route('password.request')"
50-
class="text-sm underline-offset-4 hover:underline"
51-
tabindex="5"
52-
>
48+
<TextLink v-if="canResetPassword" :href="route('password.request')" class="text-sm" tabindex="5">
5349
Forgot your password?
54-
</Link>
50+
</TextLink>
5551
</div>
5652
<Input id="password" type="password" required tabindex="2" autocomplete="current-password" v-model="form.password" />
5753
<InputError :message="form.errors.password" />
@@ -65,7 +61,7 @@ const submit = () => {
6561

6662
<div class="text-center text-sm">
6763
Don't have an account?
68-
<Link :href="route('register')" class="underline underline-offset-4" tabindex="4"> Sign up </Link>
64+
<TextLink :href="route('register')" :tabindex="4">Sign up</TextLink>
6965
</div>
7066
</form>
7167
</AuthBase>

‎resources/js/pages/auth/Register.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script setup lang="ts">
22
import InputError from '@/components/InputError.vue';
3+
import TextLink from '@/components/TextLink.vue';
34
import { Button } from '@/components/ui/button';
45
import { Input } from '@/components/ui/input';
56
import { Label } from '@/components/ui/label';
67
import AuthBase from '@/layouts/AuthLayout.vue';
7-
import { Head, Link, useForm } from '@inertiajs/vue3';
8+
import { Head, useForm } from '@inertiajs/vue3';
89
import { LoaderCircle } from 'lucide-vue-next';
910
1011
const form = useForm({
@@ -66,7 +67,7 @@ const submit = () => {
6667

6768
<div class="text-center text-sm">
6869
Already have an account?
69-
<Link :href="route('login')" class="underline underline-offset-4" tabindex="6"> Log in </Link>
70+
<TextLink :href="route('login')" class="underline underline-offset-4" tabindex="6">Log in</TextLink>
7071
</div>
7172
</form>
7273
</AuthBase>

‎resources/js/pages/auth/VerifyEmail.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script setup lang="ts">
2+
import TextLink from '@/components/TextLink.vue';
23
import { Button } from '@/components/ui/button';
34
import AuthLayout from '@/layouts/AuthLayout.vue';
4-
import { Head, Link, useForm } from '@inertiajs/vue3';
5+
import { Head, useForm } from '@inertiajs/vue3';
56
import { LoaderCircle } from 'lucide-vue-next';
67
78
defineProps<{
@@ -35,14 +36,14 @@ const submit = () => {
3536
Resend Verification Email
3637
</Button>
3738

38-
<Link
39+
<TextLink
3940
:href="route('logout')"
4041
method="post"
4142
as="button"
4243
class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
4344
>
4445
Log Out
45-
</Link>
46+
</TextLink>
4647
</div>
4748
</form>
4849
</AuthLayout>

0 commit comments

Comments
 (0)