Build [v1.14.24]
This commit is contained in:
@@ -56,16 +56,16 @@ export default function QuantityAdjustmentModal({
|
||||
|
||||
return (
|
||||
<div className={`fixed inset-0 z-50 bg-black/50 flex items-center justify-center transition-opacity ${isClosing ? 'opacity-0' : 'opacity-100'}`}>
|
||||
<div className={`bg-slate-950 rounded-lg shadow-lg w-full max-w-md mx-4 transition-transform ${isClosing ? 'scale-95' : 'scale-100'}`}>
|
||||
<div className={`bg-background shadow-lg w-full max-w-md mx-4 transition-transform ${isClosing ? 'scale-95' : 'scale-100'}`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-slate-800">
|
||||
<div className="flex items-center justify-between p-4 border-b border-outline/30">
|
||||
<h2 className="text-lg font-normal">Adjust quantity</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
aria-label="Close quantity adjustment modal"
|
||||
className="p-2 hover:bg-slate-800 rounded-lg transition-colors"
|
||||
className="p-2 hover:bg-surface-container transition-colors"
|
||||
>
|
||||
<X size={20} className="text-slate-400" />
|
||||
<X size={20} className="text-secondary" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -73,10 +73,10 @@ export default function QuantityAdjustmentModal({
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Item Details */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-normal text-slate-100 mb-2">
|
||||
<h3 className="text-2xl font-normal text-foreground mb-2">
|
||||
{item.name}
|
||||
</h3>
|
||||
<div className="text-sm text-slate-500 space-y-1">
|
||||
<div className="text-sm text-secondary space-y-1">
|
||||
{item.part_number && (
|
||||
<div>Part Number: {item.part_number}</div>
|
||||
)}
|
||||
@@ -91,14 +91,14 @@ export default function QuantityAdjustmentModal({
|
||||
|
||||
{/* Success Message */}
|
||||
{successMessage && (
|
||||
<div className="p-3 bg-green-500/10 border border-green-500/20 rounded-lg text-green-500 text-sm">
|
||||
<div className="p-3 bg-success/10 border border-success/20 text-success text-sm">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quantity Adjustment */}
|
||||
<div>
|
||||
<label className="text-sm font-normal text-slate-400 mb-3 block">
|
||||
<label className="text-sm font-normal text-secondary mb-3 block">
|
||||
Current quantity
|
||||
</label>
|
||||
<QuantityDisplay
|
||||
@@ -112,7 +112,7 @@ export default function QuantityAdjustmentModal({
|
||||
<div className="flex gap-2 pt-2">
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-100 rounded-lg font-normal transition-colors"
|
||||
className="flex-1 px-4 py-2 bg-surface-container hover:bg-surface-bright text-foreground font-normal transition-colors"
|
||||
>
|
||||
Keep Current Quantity
|
||||
</button>
|
||||
|
||||
@@ -83,12 +83,12 @@ export default function QuantityDisplay({
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 bg-slate-900/50 rounded-lg px-3 py-2">
|
||||
<div className="flex items-center gap-2 bg-background/50 px-3 py-2">
|
||||
<button
|
||||
onClick={handleDecrement}
|
||||
disabled={isLoading}
|
||||
aria-label="Decrease quantity"
|
||||
className="p-1 hover:bg-slate-800 rounded text-secondary hover:text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="p-1 hover:bg-surface-container text-secondary hover:text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Minus size={16} />
|
||||
</button>
|
||||
@@ -110,7 +110,7 @@ export default function QuantityDisplay({
|
||||
onClick={handleIncrement}
|
||||
disabled={isLoading}
|
||||
aria-label="Increase quantity"
|
||||
className="p-1 hover:bg-slate-800 rounded text-secondary hover:text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="p-1 hover:bg-surface-container text-secondary hover:text-primary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Plus size={16} />
|
||||
</button>
|
||||
@@ -123,7 +123,7 @@ export default function QuantityDisplay({
|
||||
onClick={handleTapToEdit}
|
||||
disabled={isLoading}
|
||||
aria-label={`Quantity: ${currentQuantity}. Tap to edit`}
|
||||
className="text-lg font-normal text-primary hover:bg-slate-900/30 px-3 py-2 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="text-lg font-normal text-primary hover:bg-background/30 px-3 py-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{currentQuantity}
|
||||
</button>
|
||||
|
||||
@@ -109,23 +109,23 @@ export default function SearchModal({
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 bg-black/50 flex items-start justify-center pt-20">
|
||||
<div className="bg-slate-950 rounded-lg shadow-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col">
|
||||
<div className="bg-background shadow-lg w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col border border-outline/30">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-4 border-b border-slate-800">
|
||||
<div className="flex items-center justify-between p-4 border-b border-outline/30">
|
||||
<h2 className="text-xl font-normal">Search inventory</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label="Close search modal"
|
||||
className="p-2 hover:bg-slate-800 rounded-lg transition-colors"
|
||||
className="p-2 hover:bg-surface-container transition-colors"
|
||||
>
|
||||
<X size={20} className="text-slate-400" />
|
||||
<X size={20} className="text-secondary" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search Input */}
|
||||
<div className="p-4 border-b border-slate-800">
|
||||
<div className="p-4 border-b border-outline/30">
|
||||
<div className="relative">
|
||||
<Search size={18} className="absolute left-3 top-3 text-slate-500 pointer-events-none" />
|
||||
<Search size={18} className="absolute left-3 top-3 text-secondary pointer-events-none" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
@@ -133,7 +133,7 @@ export default function SearchModal({
|
||||
value={query}
|
||||
onChange={handleInputChange}
|
||||
aria-label="Search items"
|
||||
className="w-full bg-slate-900 border border-slate-800 rounded-lg pl-10 pr-4 py-2 text-slate-100 placeholder-slate-600 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/50"
|
||||
className="w-full bg-surface-container border border-outline/30 pl-10 pr-4 py-2 text-foreground placeholder-secondary/50 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,48 +141,48 @@ export default function SearchModal({
|
||||
{/* Results */}
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{error && (
|
||||
<div className="p-4 text-rose-500 bg-rose-500/10 border border-rose-500/20 m-4 rounded-lg">
|
||||
<div className="p-4 text-error bg-error/10 border border-error/20 m-4">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="text-slate-400">
|
||||
<div className="inline-block animate-spin rounded-full h-6 w-6 border border-slate-600 border-t-primary"></div>
|
||||
<div className="text-secondary">
|
||||
<div className="inline-block animate-spin h-6 w-6 border border-outline/30 border-t-primary"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !error && results.length === 0 && query.length > 0 && (
|
||||
<div className="p-4 text-slate-500 text-center">
|
||||
<div className="p-4 text-secondary text-center">
|
||||
No items found matching "{query}"
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !error && results.length === 0 && query.length === 0 && (
|
||||
<div className="p-4 text-slate-500 text-center">
|
||||
<div className="p-4 text-secondary text-center">
|
||||
Start typing to search
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && results.length > 0 && (
|
||||
<div className="divide-y divide-slate-800">
|
||||
<div className="divide-y divide-outline/30">
|
||||
{results.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => handleSelectItem(item)}
|
||||
className="w-full p-4 text-left hover:bg-slate-900 transition-colors focus:outline-none focus:bg-slate-900 focus:ring-2 focus:ring-primary/50"
|
||||
className="w-full p-4 text-left hover:bg-surface-container transition-colors focus:outline-none focus:bg-surface-container focus:ring-2 focus:ring-primary/50"
|
||||
>
|
||||
<div className="flex justify-between items-start gap-2 mb-1">
|
||||
<h3 className="font-normal text-slate-100 flex-1">
|
||||
<h3 className="font-normal text-foreground flex-1">
|
||||
{item.name}
|
||||
</h3>
|
||||
<span className="text-primary font-normal text-sm whitespace-nowrap">
|
||||
Qty: {item.quantity}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 space-y-1">
|
||||
<div className="text-xs text-secondary space-y-1">
|
||||
{item.part_number && (
|
||||
<div>PN: {item.part_number}</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user