feat: Upgrade to Tailwind CSS v4.1.18
- Migrate from tailwindcss v3.3 to v4.1.18 - Replace @tailwind directives with @import 'tailwindcss' - Move custom colors to @theme block in globals.css - Convert custom utilities to @utility syntax - Update PostCSS config to use @tailwindcss/postcss - Remove autoprefixer (now built-in)
This commit is contained in:
@@ -49,7 +49,7 @@ export default async function OcrLogsPage() {
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xs">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
||||
<Camera size={20} className="text-blue-600 dark:text-blue-400" />
|
||||
@@ -60,7 +60,7 @@ export default async function OcrLogsPage() {
|
||||
<div className="text-xs text-zinc-500 mt-1">All time</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xs">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
|
||||
<Calendar size={20} className="text-green-600 dark:text-green-400" />
|
||||
@@ -71,7 +71,7 @@ export default async function OcrLogsPage() {
|
||||
<div className="text-xs text-zinc-500 mt-1">Scans today</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xs">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg">
|
||||
<Percent size={20} className="text-amber-600 dark:text-amber-400" />
|
||||
@@ -82,7 +82,7 @@ export default async function OcrLogsPage() {
|
||||
<div className="text-xs text-zinc-500 mt-1">Recognition quality</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xs">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
|
||||
<TrendingUp size={20} className="text-purple-600 dark:text-purple-400" />
|
||||
@@ -100,7 +100,7 @@ export default async function OcrLogsPage() {
|
||||
|
||||
{/* Top Distilleries */}
|
||||
{stats.topDistilleries.length > 0 && (
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xs">
|
||||
<h2 className="text-xl font-black text-zinc-900 dark:text-white mb-4">Most Scanned Distilleries</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{stats.topDistilleries.map((d, i) => (
|
||||
@@ -119,7 +119,7 @@ export default async function OcrLogsPage() {
|
||||
)}
|
||||
|
||||
{/* OCR Logs Grid */}
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-sm">
|
||||
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 border border-zinc-200 dark:border-zinc-800 shadow-xs">
|
||||
<h2 className="text-xl font-black text-zinc-900 dark:text-white mb-4">Recent OCR Scans</h2>
|
||||
|
||||
{logs.length === 0 ? (
|
||||
@@ -136,7 +136,7 @@ export default async function OcrLogsPage() {
|
||||
className="bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-4 border border-zinc-200 dark:border-zinc-700 hover:border-orange-500/50 transition-colors"
|
||||
>
|
||||
{/* Image Preview */}
|
||||
<div className="relative aspect-[4/3] rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-700 mb-3">
|
||||
<div className="relative aspect-4/3 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-700 mb-3">
|
||||
{log.image_thumbnail ? (
|
||||
<img
|
||||
src={log.image_thumbnail}
|
||||
@@ -175,7 +175,7 @@ export default async function OcrLogsPage() {
|
||||
{log.distillery}
|
||||
</span>
|
||||
{log.distillery_source && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-700 rounded text-zinc-500">
|
||||
<span className="text-[10px] px-1.5 py-0.5 bg-zinc-200 dark:bg-zinc-700 rounded-sm text-zinc-500">
|
||||
{log.distillery_source}
|
||||
</span>
|
||||
)}
|
||||
@@ -190,22 +190,22 @@ export default async function OcrLogsPage() {
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{log.abv && (
|
||||
<span className="px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded text-[10px] font-bold">
|
||||
<span className="px-2 py-0.5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-400 rounded-sm text-[10px] font-bold">
|
||||
{log.abv}%
|
||||
</span>
|
||||
)}
|
||||
{log.age && (
|
||||
<span className="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded text-[10px] font-bold">
|
||||
<span className="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 rounded-sm text-[10px] font-bold">
|
||||
{log.age}y
|
||||
</span>
|
||||
)}
|
||||
{log.vintage && (
|
||||
<span className="px-2 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 rounded text-[10px] font-bold">
|
||||
<span className="px-2 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400 rounded-sm text-[10px] font-bold">
|
||||
{log.vintage}
|
||||
</span>
|
||||
)}
|
||||
{log.volume && (
|
||||
<span className="px-2 py-0.5 bg-zinc-100 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400 rounded text-[10px] font-bold">
|
||||
<span className="px-2 py-0.5 bg-zinc-100 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400 rounded-sm text-[10px] font-bold">
|
||||
{log.volume}
|
||||
</span>
|
||||
)}
|
||||
@@ -218,7 +218,7 @@ export default async function OcrLogsPage() {
|
||||
<summary className="text-[10px] font-bold text-zinc-400 cursor-pointer hover:text-orange-500 uppercase">
|
||||
Raw Text
|
||||
</summary>
|
||||
<pre className="mt-2 p-2 bg-zinc-100 dark:bg-zinc-900 rounded text-[9px] text-zinc-500 overflow-x-auto max-h-20 whitespace-pre-wrap">
|
||||
<pre className="mt-2 p-2 bg-zinc-100 dark:bg-zinc-900 rounded-sm text-[9px] text-zinc-500 overflow-x-auto max-h-20 whitespace-pre-wrap">
|
||||
{log.raw_text}
|
||||
</pre>
|
||||
</details>
|
||||
|
||||
Reference in New Issue
Block a user