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

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

View File

@@ -1,12 +1,12 @@
<template>
<div class="space-y-6">
<h1 class="text-2xl font-black text-[#4a3f3b]">Saved Stations</h1>
<h1 class="text-2xl font-black text-zinc-800">Saved Stations</h1>
<div v-if="loading" class="space-y-2">
<div v-for="i in 3" :key="i" class="h-16 bg-white rounded-xl animate-pulse border border-[#e5ded7]"></div>
<div v-for="i in 3" :key="i" class="h-16 bg-white rounded-xl animate-pulse border border-zinc-300"></div>
</div>
<div v-else-if="savedStations.length === 0" class="p-8 bg-white rounded-2xl border border-[#e5ded7] text-center text-[#89726c]">
<div v-else-if="savedStations.length === 0" class="p-8 bg-white rounded-2xl border border-zinc-300 text-center text-zinc-500">
<iconify-icon icon="lucide:bookmark" class="text-3xl mb-2"></iconify-icon>
<p class="font-medium">No saved stations yet.</p>
<p class="text-sm mt-1">Search for fuel and bookmark stations to see them here.</p>
@@ -16,11 +16,11 @@
<div
v-for="station in savedStations"
:key="station.station_id"
class="flex items-center justify-between p-4 bg-white rounded-xl border border-[#e5ded7]"
class="flex items-center justify-between p-4 bg-white rounded-xl border border-zinc-300"
>
<div>
<p class="font-bold text-[#4a3f3b]">{{ station.name }}</p>
<p class="text-sm text-[#89726c]">{{ station.postcode }}</p>
<p class="font-bold text-zinc-800">{{ station.name }}</p>
<p class="text-sm text-zinc-500">{{ station.postcode }}</p>
</div>
<button
@click="remove(station.station_id)"