bitstream/fuel-price
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

28
resources/js/views/dashboard/DashboardLayout.vue
View File

@@ -1,16 +1,16 @@
<template>
<div class="min-h-screen bg-[#f5ede5] flex flex-col">
<div class="min-h-screen bg-zinc-100 flex flex-col">
<!-- Top nav -->
<nav class="fixed top-0 w-full z-50 bg-[#faf6f3] border-b border-[#e5ded7] px-6 py-4">
<nav class="fixed top-0 w-full z-50 bg-zinc-50 border-b border-zinc-300 px-6 py-4">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<RouterLink to="/" class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-[#bb5b3e] flex items-center justify-center shadow-md">
<div class="w-10 h-10 rounded-lg bg-accent flex items-center justify-center shadow-md">
<iconify-icon icon="lucide:fuel" class="text-white text-xl"></iconify-icon>
</div>
<span class="text-2xl font-black tracking-tighter text-[#bb5b3e]">FuelAlert</span>
<span class="text-2xl font-black tracking-tighter text-accent">FuelAlert</span>
</RouterLink>
<div class="flex items-center gap-4">
<RouterLink to="/" class="text-sm font-bold text-[#89726c] hover:text-[#4a3f3b]">
<RouterLink class="text-sm font-bold text-zinc-500 hover:text-zinc-800" to="/">
← Find fuel
</RouterLink>
@@ -18,7 +18,7 @@
<div ref="dropdownRef" class="relative">
<button
@click="dropdownOpen = !dropdownOpen"
class="w-9 h-9 rounded-full bg-[#bb5b3e] flex items-center justify-center text-white text-sm font-black hover:bg-[#a34a31] transition-colors"
class="w-9 h-9 rounded-full bg-accent flex items-center justify-center text-white text-sm font-black hover:bg-accent-content transition-colors"
:aria-expanded="dropdownOpen ? 'true' : 'false'"
aria-haspopup="true"
>
@@ -34,24 +34,24 @@
>
<div
v-show="dropdownOpen"
class="absolute right-0 top-full mt-2 w-64 bg-white border border-[#e5ded7] rounded-2xl shadow-lg overflow-hidden z-50"
class="absolute right-0 top-full mt-2 w-64 bg-white border border-zinc-300 rounded-2xl shadow-lg overflow-hidden z-50"
>
<div class="px-4 py-3 border-b border-[#e5ded7]">
<p class="text-sm font-black text-[#4a3f3b]">{{ user?.name }}</p>
<p class="text-xs text-[#89726c] truncate">{{ user?.email }}</p>
<div class="px-4 py-3 border-b border-zinc-300">
<p class="text-sm font-black text-zinc-800">{{ user?.name }}</p>
<p class="text-xs text-zinc-500 truncate">{{ user?.email }}</p>
</div>
<div class="py-1">
<RouterLink
to="/dashboard/settings"
@click="dropdownOpen = false"
class="flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
class="flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-zinc-500 hover:bg-zinc-50 hover:text-zinc-800 transition-colors"
>
<iconify-icon icon="lucide:settings"></iconify-icon>
Settings
</RouterLink>
<button
@click="handleLogout"
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-[#89726c] hover:bg-[#faf6f3] hover:text-[#4a3f3b] transition-colors"
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm font-bold text-zinc-500 hover:bg-zinc-50 hover:text-zinc-800 transition-colors"
>
<iconify-icon icon="lucide:log-out"></iconify-icon>
Log out
@@ -74,8 +74,8 @@
:to="item.to"
class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-bold transition-colors"
:class="isActive(item.to)
? 'bg-[#bb5b3e] text-white'
: 'text-[#89726c] hover:bg-white hover:text-[#4a3f3b]'"
? 'bg-accent text-white'
: 'text-zinc-500 hover:bg-white hover:text-zinc-800'"
>
<iconify-icon :icon="item.icon"></iconify-icon>
{{ item.label }}