fix: Expose Generate Zone button and refine styling (remove italics/caps, improve contrast)
This commit is contained in:
fullsizemalt
parent
1950651102
commit
e88814afef
7 changed files with 37 additions and 37 deletions
|
|
@ -40,7 +40,7 @@
|
|||
/* Light mode text */
|
||||
--color-text-primary: #0F172A;
|
||||
--color-text-secondary: #334155;
|
||||
--color-text-tertiary: #64748B;
|
||||
--color-text-tertiary: #475569;
|
||||
--color-text-quaternary: #94A3B8;
|
||||
--color-text-inverse: #F9FAFB;
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ export default function AuditLogPage() {
|
|||
header: 'Timestamp',
|
||||
cell: (log) => (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-extra-bold text-[var(--color-text-primary)] font-mono tracking-tight">
|
||||
<span className="text-xs font-bold text-[var(--color-text-primary)] font-mono tracking-tight">
|
||||
{new Date(log.timestamp).toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||
</span>
|
||||
<span className="text-[10px] text-[var(--color-text-tertiary)] font-bold uppercase tracking-tighter">
|
||||
|
|
@ -122,7 +122,7 @@ export default function AuditLogPage() {
|
|||
const Icon = config.icon;
|
||||
return (
|
||||
<div className={cn(
|
||||
"inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-black uppercase tracking-[0.15em]",
|
||||
"inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-bold uppercase tracking-[0.15em]",
|
||||
config.color
|
||||
)}>
|
||||
<Icon size={10} />
|
||||
|
|
@ -136,7 +136,7 @@ export default function AuditLogPage() {
|
|||
header: 'Resource',
|
||||
cell: (log) => (
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-bold text-[var(--color-text-primary)] uppercase italic tracking-tight">
|
||||
<span className="text-xs font-bold text-[var(--color-text-primary)] tracking-tight">
|
||||
{ENTITY_LABELS[log.entity] || log.entity}
|
||||
</span>
|
||||
{log.entityName && (
|
||||
|
|
@ -218,7 +218,7 @@ export default function AuditLogPage() {
|
|||
>
|
||||
<Terminal size={14} className="rotate-180" />
|
||||
</button>
|
||||
<div className="flex items-center px-4 text-xs font-black text-[var(--color-text-primary)] bg-slate-100 dark:bg-slate-800 rounded border border-[var(--color-border-subtle)]">
|
||||
<div className="flex items-center px-4 text-xs font-bold text-[var(--color-text-primary)] bg-slate-100 dark:bg-slate-800 rounded border border-[var(--color-border-subtle)]">
|
||||
{pagination.page} / {pagination.pages}
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -254,9 +254,9 @@ export default function AuditLogPage() {
|
|||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Terminal size={14} className="text-[var(--color-accent)]" />
|
||||
<h3 className="text-xs font-black text-[var(--color-text-tertiary)] uppercase tracking-[0.2em]">Transaction_Inspector</h3>
|
||||
<h3 className="text-xs font-bold text-[var(--color-text-tertiary)] uppercase tracking-wide">Transaction_Inspector</h3>
|
||||
</div>
|
||||
<h3 className="text-xl font-extra-bold text-white uppercase italic tracking-tight">Record Object Detail</h3>
|
||||
<h3 className="text-xl font-bold text-white tracking-tight">Record Object Detail</h3>
|
||||
</div>
|
||||
<button onClick={() => setSelectedLog(null)} className="p-2 text-[var(--color-text-tertiary)] hover:text-white transition-colors">
|
||||
<X size={20} />
|
||||
|
|
@ -283,7 +283,7 @@ export default function AuditLogPage() {
|
|||
<div className="space-y-3">
|
||||
{Object.entries(selectedLog.changes).map(([key, val]: [string, any]) => (
|
||||
<div key={key} className="p-4 bg-slate-900/50 rounded-xl border border-slate-800/50">
|
||||
<div className="text-[10px] font-black text-[var(--color-text-tertiary)] mb-3 uppercase tracking-widest italic">{key}</div>
|
||||
<div className="text-[10px] font-bold text-[var(--color-text-tertiary)] mb-3 uppercase tracking-widest italic">{key}</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-[1fr,24px,1fr] items-center gap-4">
|
||||
<div className="p-3 bg-[var(--color-error)]/5 border border-rose-500/10 rounded font-mono text-xs text-[var(--color-error)]/80 whitespace-pre-wrap break-all">
|
||||
<div className="text-[8px] uppercase font-bold text-[var(--color-error)]/50 mb-1">Previous_State</div>
|
||||
|
|
|
|||
|
|
@ -66,11 +66,11 @@ export default function BatchDetailPage() {
|
|||
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-4xl font-black tracking-tight text-[var(--color-text-primary)] uppercase italic">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-[var(--color-text-primary)] ">
|
||||
{batch.name}
|
||||
</h1>
|
||||
<span className={cn(
|
||||
"px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.2em] border shadow-sm",
|
||||
"px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide border shadow-sm",
|
||||
batch.stage === 'FLOWERING'
|
||||
? "bg-purple-500/10 border-purple-500/20 text-purple-500"
|
||||
: "bg-[var(--color-primary)]/10 border-emerald-500/20 text-[var(--color-primary)]"
|
||||
|
|
@ -122,7 +122,7 @@ export default function BatchDetailPage() {
|
|||
{/* Vertical Timeline - Left Column */}
|
||||
<div className="xl:col-span-3 space-y-6">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Batch Lifecycle</h3>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Batch Lifecycle</h3>
|
||||
<History size={14} className="text-[var(--color-text-tertiary)]" />
|
||||
</div>
|
||||
|
||||
|
|
@ -347,7 +347,7 @@ function TimelineEvent({ status, title, date, desc, icon: Icon }: any) {
|
|||
<div className="flex items-center gap-2">
|
||||
<Icon size={12} className={status === 'completed' ? "text-[var(--color-primary)]" : "text-[var(--color-text-tertiary)]"} />
|
||||
<h5 className={cn(
|
||||
"text-[11px] font-black uppercase tracking-widest",
|
||||
"text-[11px] font-bold uppercase tracking-widest",
|
||||
status === 'completed' ? "text-[var(--color-text-primary)]" : "text-[var(--color-text-tertiary)]"
|
||||
)}>{title}</h5>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ function StageBadge({ stage }: { stage: string }) {
|
|||
const Icon = info.icon;
|
||||
|
||||
return (
|
||||
<span className={cn("inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-black uppercase tracking-widest", info.color)}>
|
||||
<span className={cn("inline-flex items-center gap-1.5 px-2 py-0.5 rounded border text-[9px] font-bold uppercase tracking-widest", info.color)}>
|
||||
{Icon && <Icon size={10} />}
|
||||
{info.label}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -65,11 +65,11 @@ export default function RoomDetailPage() {
|
|||
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-4xl font-black tracking-tight text-[var(--color-text-primary)] uppercase italic">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-[var(--color-text-primary)] ">
|
||||
{room.name?.replace('[DEMO] ', '')}
|
||||
</h1>
|
||||
<span className={cn(
|
||||
"px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.2em] border shadow-sm",
|
||||
"px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide border shadow-sm",
|
||||
room.type === 'FLOWER'
|
||||
? "bg-purple-500/10 border-purple-500/20 text-purple-500"
|
||||
: "bg-[var(--color-primary)]/10 border-emerald-500/20 text-[var(--color-primary)]"
|
||||
|
|
|
|||
|
|
@ -60,22 +60,22 @@ export default function RoomsPage() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{isManager && (
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setIsWizardOpen(true)}
|
||||
className="flex items-center gap-2 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/50 px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all"
|
||||
className="flex items-center gap-2 bg-[var(--color-primary)]/10 hover:bg-[var(--color-primary)]/20 text-[var(--color-primary)] border border-[var(--color-primary)]/20 px-4 py-2.5 rounded-xl font-bold text-sm shadow-sm transition-all"
|
||||
>
|
||||
<Wand2 size={18} />
|
||||
Generate Zone
|
||||
</button>
|
||||
{isManager && (
|
||||
<button className="flex items-center gap-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-[var(--color-text-inverse)] px-4 py-2.5 rounded-xl font-bold text-sm shadow-lg transition-all">
|
||||
<Plus size={18} />
|
||||
Add Zone
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Strip */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
|
|
@ -171,7 +171,7 @@ export default function RoomsPage() {
|
|||
<div className={cn("px-5 py-4 border-b border-[var(--color-border-subtle)] flex items-center justify-between", accentClasses[accent as keyof typeof accentClasses])}>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon size={16} />
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em]">{room.type}</span>
|
||||
<span className="text-xs font-bold">{room.type}</span>
|
||||
</div>
|
||||
<ArrowRight size={14} className="opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
|
|
@ -179,10 +179,10 @@ export default function RoomsPage() {
|
|||
{/* Body */}
|
||||
<div className="p-5 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-extra-bold text-[var(--color-text-primary)] uppercase italic tracking-tight">
|
||||
<h3 className="text-lg font-bold text-[var(--color-text-primary)]">
|
||||
{room.name?.replace('[DEMO] ', '')}
|
||||
</h3>
|
||||
<p className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest mt-1">
|
||||
<p className="text-xs font-medium text-[var(--color-text-tertiary)] mt-1">
|
||||
{room.sqft?.toLocaleString()} sqft • Capacity {room.capacity || '—'}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -190,18 +190,18 @@ export default function RoomsPage() {
|
|||
{/* Environmental Vitals */}
|
||||
<div className="grid grid-cols-2 gap-4 py-4 border-y border-[var(--color-border-subtle)]">
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-1.5 text-xl font-black tracking-tighter text-[var(--color-text-primary)]">
|
||||
<div className="flex items-center justify-center gap-1.5 text-xl font-bold tracking-tight text-[var(--color-text-primary)]">
|
||||
<Thermometer size={14} className="text-[var(--color-error)]" />
|
||||
{room.targetTemp || '—'}°F
|
||||
</div>
|
||||
<span className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">Target Temp</span>
|
||||
<span className="text-xs font-medium text-[var(--color-text-tertiary)]">Target Temp</span>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="flex items-center justify-center gap-1.5 text-xl font-black tracking-tighter text-[var(--color-text-primary)]">
|
||||
<div className="flex items-center justify-center gap-1.5 text-xl font-bold tracking-tight text-[var(--color-text-primary)]">
|
||||
<Droplets size={14} className="text-[var(--color-accent)]" />
|
||||
{room.targetHumidity || '—'}%
|
||||
</div>
|
||||
<span className="text-[9px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">Target RH</span>
|
||||
<span className="text-xs font-medium text-[var(--color-text-tertiary)]">Target RH</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -213,7 +213,7 @@ export default function RoomsPage() {
|
|||
{room.batches?.length || 0} Active Batch{room.batches?.length === 1 ? '' : 'es'}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-[var(--color-primary)] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span className="text-xs font-bold text-[var(--color-primary)] opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
Enter →
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ export default function TasksPage() {
|
|||
{/* Active Tasks Section */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Active Board</h3>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Active Board</h3>
|
||||
<span className="text-[10px] font-bold text-[var(--color-text-tertiary)]">{pendingTasks.length} ITEMS</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -176,7 +176,7 @@ export default function TasksPage() {
|
|||
{completedTasks.length > 0 && (
|
||||
<div className="space-y-4 pt-4 border-t border-[var(--color-border-subtle)]">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<h3 className="text-xs font-bold uppercase tracking-[0.2em] text-[var(--color-text-tertiary)]">Archive / Verification</h3>
|
||||
<h3 className="text-xs font-bold uppercase tracking-wide text-[var(--color-text-tertiary)]">Archive / Verification</h3>
|
||||
<button className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest hover:text-[var(--color-primary)]">View History</button>
|
||||
</div>
|
||||
<div className="opacity-60 saturate-50 hover:opacity-100 transition-all duration-500 space-y-2">
|
||||
|
|
@ -266,7 +266,7 @@ function TaskRow({ task, onComplete }: any) {
|
|||
{task.title}
|
||||
</h4>
|
||||
{task.priority === 'URGENT' && (
|
||||
<span className="px-2 py-0.5 rounded text-[8px] font-black uppercase tracking-[0.2em] bg-[var(--color-error)] text-white animate-pulse">
|
||||
<span className="px-2 py-0.5 rounded text-[8px] font-bold uppercase tracking-wide bg-[var(--color-error)] text-white animate-pulse">
|
||||
Priority: High
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue