bitstream/fuel-alert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate from hardcoded hex colors to Tailwind CSS color tokens
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (8.3) (push) Has been cancelled
Details
tests / ci (8.4) (push) Has been cancelled
Details
tests / ci (8.5) (push) Has been cancelled
Details

Browse Source 
Replace all hardcoded hex color values with semantic Tailwind design tokens:
- `#bb5b3e` → `accent`
- `#a34a31` → `accent-content` / `primary-dark`
- `#4a3f3b`, `#89726c` → `zinc-800`, `zinc-500`
- `#e5ded7`, `#faf6f3` → `zinc-300`, `zinc-50`
- `#8
This commit is contained in:
Ovidiu U
2026-04-11 16:26:34 +01:00
parent 02b004f381
commit 069a85cf11
15 changed files with 581 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/js/views/dashboard/settings/Profile.vue
View File

@@ -1,27 +1,27 @@
<template>
<div class="space-y-6 max-w-lg">
<!-- Profile form -->
<form @submit.prevent="saveProfile" class="p-6 bg-white rounded-2xl border border-[#e5ded7] space-y-5">
<h2 class="text-lg font-black text-[#4a3f3b]">Profile information</h2>
<form class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-5" @submit.prevent="saveProfile">
<h2 class="text-lg font-black text-zinc-800">Profile information</h2>
<div class="space-y-2">
<label class="text-sm font-bold text-[#4a3f3b]">Full name</label>
<label class="text-sm font-bold text-zinc-800">Full name</label>
<input
v-model="profileForm.name"
type="text"
class="w-full h-12 px-4 bg-[#faf6f3] border rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
:class="profileErrors.name ? 'border-red-400' : 'border-[#e5ded7]'"
:class="profileErrors.name ? 'border-red-400' : 'border-zinc-300'"
class="w-full h-12 px-4 bg-zinc-50 border rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
/>
<p v-if="profileErrors.name" class="text-xs text-red-600">{{ profileErrors.name[0] }}</p>
</div>
<div class="space-y-2">
<label class="text-sm font-bold text-[#4a3f3b]">Email address</label>
<label class="text-sm font-bold text-zinc-800">Email address</label>
<input
v-model="profileForm.email"
type="email"
class="w-full h-12 px-4 bg-[#faf6f3] border rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
:class="profileErrors.email ? 'border-red-400' : 'border-[#e5ded7]'"
:class="profileErrors.email ? 'border-red-400' : 'border-zinc-300'"
class="w-full h-12 px-4 bg-zinc-50 border rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-accent"
/>
<p v-if="profileErrors.email" class="text-xs text-red-600">{{ profileErrors.email[0] }}</p>
</div>
@@ -32,7 +32,7 @@
<button
type="submit"
:disabled="profileSaving"
class="px-8 py-3 bg-[#bb5b3e] text-white rounded-xl font-bold hover:bg-[#a34a31] transition-all disabled:opacity-50"
class="px-8 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent-content transition-all disabled:opacity-50"
>
{{ profileSaving ? 'Saving…' : 'Save changes' }}
</button>
@@ -41,9 +41,9 @@
</form>
<!-- Delete account -->
<div class="p-6 bg-white rounded-2xl border border-[#e5ded7] space-y-4">
<h2 class="text-lg font-black text-[#4a3f3b]">Delete account</h2>
<p class="text-sm text-[#89726c]">Permanently delete your account and all associated data. This cannot be undone.</p>
<div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-4">
<h2 class="text-lg font-black text-zinc-800">Delete account</h2>
<p class="text-sm text-zinc-500">Permanently delete your account and all associated data. This cannot be undone.</p>
<button
@click="deleteModalOpen = true"
class="px-6 py-2.5 bg-red-600 text-white rounded-xl text-sm font-bold hover:bg-red-700 transition-colors"
@@ -59,16 +59,16 @@
@click.self="closeDeleteModal"
>
<div class="bg-white rounded-2xl p-6 w-full max-w-md mx-4 space-y-5">
<h3 class="text-lg font-black text-[#4a3f3b]">Are you sure?</h3>
<p class="text-sm text-[#89726c]">Enter your password to confirm account deletion.</p>
<h3 class="text-lg font-black text-zinc-800">Are you sure?</h3>
<p class="text-sm text-zinc-500">Enter your password to confirm account deletion.</p>
<div class="space-y-2">
<label class="text-sm font-bold text-[#4a3f3b]">Password</label>
<label class="text-sm font-bold text-zinc-800">Password</label>
<input
v-model="deletePassword"
type="password"
class="w-full h-12 px-4 bg-[#faf6f3] border rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-red-400"
:class="deleteError ? 'border-red-400' : 'border-[#e5ded7]'"
:class="deleteError ? 'border-red-400' : 'border-zinc-300'"
class="w-full h-12 px-4 bg-zinc-50 border rounded-xl font-medium text-zinc-800 focus:outline-none focus:ring-2 focus:ring-red-400"
/>
<p v-if="deleteError" class="text-xs text-red-600">{{ deleteError }}</p>
</div>
@@ -76,7 +76,7 @@
<div class="flex gap-3">
<button
@click="closeDeleteModal"
class="flex-1 py-3 border border-[#e5ded7] rounded-xl text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] transition-colors"
class="flex-1 py-3 border border-zinc-300 rounded-xl text-sm font-bold text-zinc-500 hover:bg-zinc-50 transition-colors"
>
Cancel
</button>