averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style savings dialog with dark green theme and empty default values

Browse Source
This commit is contained in:
Avery Felts 2026-01-24 12:29:35 -07:00
parent 94a4f3adfd
commit 359908caf5
1 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/SavingsSetupDialog.tsx
View File

@ -44,8 +44,8 @@ export function SavingsSetupDialog({
}: SavingsSetupDialogProps) { }: SavingsSetupDialogProps) {
const [costPerUnit, setCostPerUnit] = useState(''); const [costPerUnit, setCostPerUnit] = useState('');
const [unitsPerDay, setUnitsPerDay] = useState(''); const [unitsPerDay, setUnitsPerDay] = useState('');
const [currency, setCurrency] = useState('USD'); const [currency, setCurrency] = useState('');
const [substance, setSubstance] = useState<'nicotine' | 'weed'>('nicotine'); const [substance, setSubstance] = useState<'nicotine' | 'weed' | ''>('');
const [savingsGoal, setSavingsGoal] = useState(''); const [savingsGoal, setSavingsGoal] = useState('');
const [goalName, setGoalName] = useState(''); const [goalName, setGoalName] = useState('');
@ -60,8 +60,8 @@ export function SavingsSetupDialog({
} else { } else {
setCostPerUnit(''); setCostPerUnit('');
setUnitsPerDay(''); setUnitsPerDay('');
setCurrency('USD'); setCurrency('');
setSubstance('nicotine'); setSubstance('');
setSavingsGoal(''); setSavingsGoal('');
setGoalName(''); setGoalName('');
} }
@ -90,18 +90,20 @@ export function SavingsSetupDialog({
const isValid = const isValid =
costPerUnit && costPerUnit &&
unitsPerDay && unitsPerDay &&
currency &&
substance &&
parseFloat(costPerUnit) > 0 && parseFloat(costPerUnit) > 0 &&
parseFloat(unitsPerDay) > 0; parseFloat(unitsPerDay) > 0;
return ( return (
<Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}> <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
<DialogContent className="sm:max-w-md"> <DialogContent className="sm:max-w-md bg-emerald-950 border-emerald-800 text-white">
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2 text-white">
<DollarSign className="h-5 w-5 text-emerald-400" /> <DollarSign className="h-5 w-5 text-emerald-400" />
{existingConfig ? 'Edit Savings Tracker' : 'Set Up Savings Tracker'} {existingConfig ? 'Edit Savings Tracker' : 'Set Up Savings Tracker'}
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription className="text-emerald-200">
Enter your usage costs to track how much you&apos;re saving Enter your usage costs to track how much you&apos;re saving
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
@ -109,10 +111,10 @@ export function SavingsSetupDialog({
<div className="space-y-4 py-4"> <div className="space-y-4 py-4">
{/* Substance Selection */} {/* Substance Selection */}
<div className="space-y-2"> <div className="space-y-2">
<Label>What are you tracking?</Label> <Label className="text-white">What are you tracking?</Label>
<Select value={substance} onValueChange={(v) => setSubstance(v as 'nicotine' | 'weed')}> <Select value={substance} onValueChange={(v) => setSubstance(v as 'nicotine' | 'weed')}>
<SelectTrigger> <SelectTrigger className="border-emerald-700 bg-emerald-900/50 text-white">
<SelectValue /> <SelectValue placeholder="Select substance" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="nicotine">Nicotine (Vape/Cigarettes)</SelectItem> <SelectItem value="nicotine">Nicotine (Vape/Cigarettes)</SelectItem>
@ -123,10 +125,10 @@ export function SavingsSetupDialog({
{/* Currency Selection */} {/* Currency Selection */}
<div className="space-y-2"> <div className="space-y-2">
<Label>Currency</Label> <Label className="text-white">Currency</Label>
<Select value={currency} onValueChange={setCurrency}> <Select value={currency} onValueChange={setCurrency}>
<SelectTrigger> <SelectTrigger className="border-emerald-700 bg-emerald-900/50 text-white">
<SelectValue /> <SelectValue placeholder="Select currency" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{CURRENCIES.map((curr) => ( {CURRENCIES.map((curr) => (
@ -140,11 +142,11 @@ export function SavingsSetupDialog({
{/* Cost Per Unit */} {/* Cost Per Unit */}
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="costPerUnit"> <Label htmlFor="costPerUnit" className="text-white">
Cost per pack/cartridge/unit Cost per pack/cartridge/unit
</Label> </Label>
<div className="relative"> <div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"> <span className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-300">
{CURRENCIES.find((c) => c.code === currency)?.symbol || '$'} {CURRENCIES.find((c) => c.code === currency)?.symbol || '$'}
</span> </span>
<Input <Input
@ -154,18 +156,18 @@ export function SavingsSetupDialog({
step="0.01" step="0.01"
value={costPerUnit} value={costPerUnit}
onChange={(e) => setCostPerUnit(e.target.value)} onChange={(e) => setCostPerUnit(e.target.value)}
className="pl-8" className="pl-8 border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
placeholder="10.00" placeholder="10.00"
/> />
</div> </div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-emerald-300">
How much does one pack or cartridge cost? How much does one pack or cartridge cost?
</p> </p>
</div> </div>
{/* Units Per Week */} {/* Units Per Week */}
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="unitsPerDay"> <Label htmlFor="unitsPerDay" className="text-white">
Packs/vapes per week (before quitting) Packs/vapes per week (before quitting)
</Label> </Label>
<Input <Input
@ -176,23 +178,24 @@ export function SavingsSetupDialog({
value={unitsPerDay} value={unitsPerDay}
onChange={(e) => setUnitsPerDay(e.target.value)} onChange={(e) => setUnitsPerDay(e.target.value)}
placeholder="1" placeholder="1"
className="border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
/> />
<p className="text-xs text-muted-foreground"> <p className="text-xs text-emerald-300">
How many packs/vapes did you typically use per week? How many packs/vapes did you typically use per week?
</p> </p>
</div> </div>
{/* Optional: Savings Goal */} {/* Optional: Savings Goal */}
<div className="pt-4 border-t space-y-4"> <div className="pt-4 border-t border-emerald-800 space-y-4">
<div className="flex items-center gap-2 text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-emerald-300">
<Target className="h-4 w-4" /> <Target className="h-4 w-4" />
<span>See your real time savings:</span> <span>See your real time savings:</span>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="savingsGoal">Target amount</Label> <Label htmlFor="savingsGoal" className="text-white">Target amount</Label>
<div className="relative"> <div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"> <span className="absolute left-3 top-1/2 -translate-y-1/2 text-emerald-300">
{CURRENCIES.find((c) => c.code === currency)?.symbol || '$'} {CURRENCIES.find((c) => c.code === currency)?.symbol || '$'}
</span> </span>
<Input <Input
@ -202,33 +205,34 @@ export function SavingsSetupDialog({
step="1" step="1"
value={savingsGoal} value={savingsGoal}
onChange={(e) => setSavingsGoal(e.target.value)} onChange={(e) => setSavingsGoal(e.target.value)}
className="pl-8" className="pl-8 border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
placeholder="500" placeholder="500"
/> />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="goalName">What are you saving for?</Label> <Label htmlFor="goalName" className="text-white">What are you saving for?</Label>
<Input <Input
id="goalName" id="goalName"
type="text" type="text"
value={goalName} value={goalName}
onChange={(e) => setGoalName(e.target.value)} onChange={(e) => setGoalName(e.target.value)}
placeholder="e.g., New Phone, Vacation" placeholder="e.g., New Phone, Vacation"
className="border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
/> />
</div> </div>
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex gap-2 pt-4"> <div className="flex gap-2 pt-4">
<Button variant="outline" onClick={onClose} className="flex-1"> <Button onClick={onClose} className="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white">
Cancel Cancel
</Button> </Button>
<Button <Button
onClick={handleSave} onClick={handleSave}
disabled={!isValid} disabled={!isValid}
className="flex-1 bg-emerald-500 hover:bg-emerald-600" className="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white"
> >
{existingConfig ? 'Update' : 'Save'} {existingConfig ? 'Update' : 'Save'}
</Button> </Button>