refactor: update app.vue and various components to enhance UI consistency, replace color classes for improved accessibility, and refine layout for better user experience

This commit is contained in:
Jennie Robinson Faber 2025-09-10 11:02:54 +01:00
parent 7b4fb6c2fd
commit 24e8b7a3a8
41 changed files with 2395 additions and 1603 deletions

26
app.vue
View file

@ -9,11 +9,9 @@
<div class="relative flex items-center justify-center">
<NuxtLink
to="/"
class="flex items-center gap-2 hover:opacity-80 transition-opacity"
>
class="flex items-center gap-2 hover:opacity-80 transition-opacity">
<h1
class="text-black dark:text-white text-center text-2xl font-mono uppercase font-bold"
>
class="text-black dark:text-white text-center text-2xl font-mono uppercase font-bold">
Urgent Tools
</h1>
</NuxtLink>
@ -24,16 +22,14 @@
<nav
class="mt-4 flex items-center justify-center gap-1"
role="navigation"
aria-label="Main navigation"
>
aria-label="Main navigation">
<NuxtLink
to="/coop-planner"
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
:class="{
'bg-neutral-100 dark:bg-neutral-800': isCoopBuilderSection,
}"
>
Co-Op Builder
}">
Budget Builder
</NuxtLink>
<!-- Coach feature - hidden for now -->
<!-- <NuxtLink
@ -49,18 +45,18 @@
to="/wizards"
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
:class="{
'bg-neutral-100 dark:bg-neutral-800': $route.path === '/wizards',
}"
>
'bg-neutral-100 dark:bg-neutral-800':
$route.path === '/wizards',
}">
Wizards
</NuxtLink>
<NuxtLink
to="/resources"
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
:class="{
'bg-neutral-100 dark:bg-neutral-800': $route.path === '/resources',
}"
>
'bg-neutral-100 dark:bg-neutral-800':
$route.path === '/resources',
}">
More Resources & Templates
</NuxtLink>
</nav>