robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Industrial Dark UI Overhaul: Updated colors, typography, navigation, and component styling across the application

Browse Source
This commit is contained in:
robin
2025-12-22 00:05:31 +01:00
parent cf491d83b6
commit f0588418c8
28 changed files with 582 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/PlanManagementClient.tsx
View File

@@ -129,11 +129,11 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
return (
<div className="space-y-6">
{/* Actions Bar */}
<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-zinc-900 rounded-2xl p-6 border border-zinc-800 shadow-sm">
<div className="flex gap-3">
<button
onClick={handleCreate}
className="flex-1 py-3 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-colors flex items-center justify-center gap-2"
className="flex-1 py-3 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-2xl transition-colors flex items-center justify-center gap-2"
>
<Plus size={18} />
Create New Plan
@@ -141,7 +141,7 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
<button
onClick={handleGrantCredits}
disabled={loading}
className="flex-1 py-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded-xl transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
className="flex-1 py-3 bg-zinc-800 hover:bg-zinc-700 text-white font-bold rounded-2xl transition-colors flex items-center justify-center gap-2 disabled:opacity-50 border border-zinc-700"
>
<Zap size={18} />
Grant Monthly Credits
@@ -151,8 +151,8 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
{message && (
<div className={`p-4 rounded-xl flex items-center gap-3 ${message.type === 'success'
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500'
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-500'
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-500'
: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-500'
}`}>
{message.type === 'success' ? <Check size={20} /> : <AlertCircle size={20} />}
{message.text}
@@ -164,27 +164,27 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
{plans.map((plan) => (
<div
key={plan.id}
className={`bg-white dark:bg-zinc-900 rounded-2xl p-6 border-2 ${plan.is_active
? 'border-amber-200 dark:border-amber-800'
: 'border-zinc-200 dark:border-zinc-800 opacity-60'
className={`bg-zinc-900 rounded-[32px] p-6 border-2 ${plan.is_active
? 'border-orange-500/30'
: 'border-zinc-800 opacity-60'
} shadow-sm relative`}
>
{!plan.is_active && (
<div className="absolute top-4 right-4 px-2 py-1 bg-zinc-200 dark:bg-zinc-700 text-zinc-600 dark:text-zinc-400 text-xs font-bold rounded">
<div className="absolute top-4 right-4 px-2 py-1 bg-zinc-800 text-zinc-400 text-[8px] font-bold uppercase tracking-widest rounded">
Inactive
</div>
)}
<div className="mb-4">
<h3 className="text-2xl font-black text-zinc-900 dark:text-white">{plan.display_name}</h3>
<p className="text-xs text-zinc-500 mt-1">{plan.name}</p>
<h3 className="text-2xl font-bold text-white uppercase tracking-tighter">{plan.display_name}</h3>
<p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest mt-1">{plan.name}</p>
</div>
<div className="mb-4">
<div className="text-3xl font-black text-amber-600">{plan.monthly_credits}</div>
<div className="text-xs text-zinc-500">Credits/Month</div>
<div className="text-3xl font-bold text-orange-600 tracking-tighter">{plan.monthly_credits}</div>
<div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Credits/Month</div>
</div>
<div className="mb-4">
<div className="text-2xl font-bold text-zinc-900 dark:text-white">€{plan.price.toFixed(2)}</div>
<div className="text-xs text-zinc-500">per month</div>
<div className="text-2xl font-bold text-white tracking-tight">€{plan.price.toFixed(2)}</div>
<div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest leading-none mt-1">per month</div>
</div>
{plan.description && (
<p className="text-sm text-zinc-600 dark:text-zinc-400 mb-4">{plan.description}</p>
@@ -192,14 +192,14 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
<div className="flex gap-2">
<button
onClick={() => handleEdit(plan)}
className="flex-1 py-2 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 font-bold rounded-lg text-sm transition-colors flex items-center justify-center gap-2"
className="flex-1 py-2 bg-zinc-800 hover:bg-zinc-700 text-white font-bold rounded-xl text-[10px] uppercase tracking-widest transition-colors flex items-center justify-center gap-2 border border-zinc-700"
>
<Edit size={14} />
Edit
</button>
<button
onClick={() => handleDelete(plan.id)}
className="px-3 py-2 bg-red-600 hover:bg-red-700 text-white font-bold rounded-lg text-sm transition-colors"
className="px-3 py-2 bg-red-600/20 hover:bg-red-600 text-red-500 hover:text-white font-bold rounded-xl text-sm transition-colors border border-red-900/50"
>
<Trash2 size={14} />
</button>
@@ -210,15 +210,15 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
{/* Edit/Create Modal */}
{(editingPlan || isCreating) && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 max-w-2xl w-full border border-zinc-200 dark:border-zinc-800">
<div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
<div className="bg-zinc-900 rounded-[32px] p-6 max-w-2xl w-full border border-zinc-800 shadow-2xl">
<div className="flex items-center justify-between mb-6">
<h3 className="text-2xl font-black text-zinc-900 dark:text-white">
<h3 className="text-2xl font-bold text-white uppercase tracking-tighter">
{isCreating ? 'Create Plan' : 'Edit Plan'}
</h3>
<button
onClick={() => { setEditingPlan(null); setIsCreating(false); }}
className="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors"
className="p-2 hover:bg-zinc-800 rounded-xl transition-colors text-zinc-500"
>
<X size={20} />
</button>
@@ -227,79 +227,79 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Name (ID)</label>
<label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Name (ID)</label>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
placeholder="e.g. starter"
className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
/>
</div>
<div>
<label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Display Name</label>
<label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Display Name</label>
<input
type="text"
value={formData.display_name}
onChange={(e) => setFormData({ ...formData, display_name: e.target.value })}
placeholder="e.g. Starter"
className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
/>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Monthly Credits</label>
<label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Monthly Credits</label>
<input
type="number"
value={formData.monthly_credits}
onChange={(e) => setFormData({ ...formData, monthly_credits: parseInt(e.target.value) || 0 })}
className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
/>
</div>
<div>
<label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Price (€)</label>
<label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Price (€)</label>
<input
type="number"
step="0.01"
value={formData.price}
onChange={(e) => setFormData({ ...formData, price: parseFloat(e.target.value) || 0 })}
className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
/>
</div>
</div>
<div>
<label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Description</label>
<label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Description</label>
<textarea
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
placeholder="Brief description of the plan"
rows={3}
className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-xs font-bold text-zinc-400 uppercase mb-2">Sort Order</label>
<label className="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest mb-2">Sort Order</label>
<input
type="number"
value={formData.sort_order}
onChange={(e) => setFormData({ ...formData, sort_order: parseInt(e.target.value) || 0 })}
className="w-full px-4 py-2 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-500/50"
className="w-full px-4 py-2 bg-zinc-800 border border-zinc-700 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-orange-600/50 text-white"
/>
</div>
<div className="flex items-end">
<label className="flex items-center gap-2 cursor-pointer">
<label className="flex items-center gap-2 cursor-pointer pb-2">
<input
type="checkbox"
checked={formData.is_active}
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
className="w-5 h-5 rounded border-zinc-300 text-amber-600 focus:ring-amber-500"
className="w-5 h-5 rounded border-zinc-700 bg-zinc-800 text-orange-600 focus:ring-orange-600"
/>
<span className="text-sm font-bold text-zinc-900 dark:text-white">Active</span>
<span className="text-sm font-bold text-white">Active</span>
</label>
</div>
</div>
@@ -307,7 +307,7 @@ export default function PlanManagementClient({ initialPlans }: PlanManagementCli
<button
onClick={handleSave}
disabled={loading}
className="w-full py-3 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-xl transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-2xl transition-all shadow-lg shadow-orange-950/20 disabled:opacity-50 flex items-center justify-center gap-2 mt-4"
>
<Check size={18} />
{isCreating ? 'Create Plan' : 'Save Changes'}