Style savings dialog with dark green theme and empty default values

src/components/SavingsSetupDialog.tsx

@@ -44,8 +44,8 @@ export function SavingsSetupDialog({
 }: SavingsSetupDialogProps) {
   const [costPerUnit, setCostPerUnit] = useState('');
   const [unitsPerDay, setUnitsPerDay] = useState('');
-  const [currency, setCurrency] = useState('USD');
-  const [substance, setSubstance] = useState<'nicotine' | 'weed'>('nicotine');
+  const [currency, setCurrency] = useState('');
+  const [substance, setSubstance] = useState<'nicotine' | 'weed' | ''>('');
   const [savingsGoal, setSavingsGoal] = useState('');
   const [goalName, setGoalName] = useState('');
 
@@ -60,8 +60,8 @@ export function SavingsSetupDialog({
     } else {
       setCostPerUnit('');
       setUnitsPerDay('');
-      setCurrency('USD');
-      setSubstance('nicotine');
+      setCurrency('');
+      setSubstance('');
       setSavingsGoal('');
       setGoalName('');
     }
@@ -90,18 +90,20 @@ export function SavingsSetupDialog({
   const isValid =
     costPerUnit &&
     unitsPerDay &&
+    currency &&
+    substance &&
     parseFloat(costPerUnit) > 0 &&
     parseFloat(unitsPerDay) > 0;
 
   return (
     <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>
-          <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" />
             {existingConfig ? 'Edit Savings Tracker' : 'Set Up Savings Tracker'}
           </DialogTitle>
-          <DialogDescription>
+          <DialogDescription className="text-emerald-200">
             Enter your usage costs to track how much you&apos;re saving
           </DialogDescription>
         </DialogHeader>
@@ -109,10 +111,10 @@ export function SavingsSetupDialog({
         <div className="space-y-4 py-4">
           {/* Substance Selection */}
           <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')}>
-              <SelectTrigger>
-                <SelectValue />
+              <SelectTrigger className="border-emerald-700 bg-emerald-900/50 text-white">
+                <SelectValue placeholder="Select substance" />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="nicotine">Nicotine (Vape/Cigarettes)</SelectItem>
@@ -123,10 +125,10 @@ export function SavingsSetupDialog({
 
           {/* Currency Selection */}
           <div className="space-y-2">
-            <Label>Currency</Label>
+            <Label className="text-white">Currency</Label>
             <Select value={currency} onValueChange={setCurrency}>
-              <SelectTrigger>
-                <SelectValue />
+              <SelectTrigger className="border-emerald-700 bg-emerald-900/50 text-white">
+                <SelectValue placeholder="Select currency" />
               </SelectTrigger>
               <SelectContent>
                 {CURRENCIES.map((curr) => (
@@ -140,11 +142,11 @@ export function SavingsSetupDialog({
 
           {/* Cost Per Unit */}
           <div className="space-y-2">
-            <Label htmlFor="costPerUnit">
+            <Label htmlFor="costPerUnit" className="text-white">
               Cost per pack/cartridge/unit
             </Label>
             <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 || '$'}
               </span>
               <Input
@@ -154,18 +156,18 @@ export function SavingsSetupDialog({
                 step="0.01"
                 value={costPerUnit}
                 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"
               />
             </div>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-xs text-emerald-300">
               How much does one pack or cartridge cost?
             </p>
           </div>
 
           {/* Units Per Week */}
           <div className="space-y-2">
-            <Label htmlFor="unitsPerDay">
+            <Label htmlFor="unitsPerDay" className="text-white">
               Packs/vapes per week (before quitting)
             </Label>
             <Input
@@ -176,23 +178,24 @@ export function SavingsSetupDialog({
               value={unitsPerDay}
               onChange={(e) => setUnitsPerDay(e.target.value)}
               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?
             </p>
           </div>
 
           {/* Optional: Savings Goal */}
-          <div className="pt-4 border-t space-y-4">
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <div className="pt-4 border-t border-emerald-800 space-y-4">
+            <div className="flex items-center gap-2 text-sm text-emerald-300">
               <Target className="h-4 w-4" />
               <span>See your real time savings:</span>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="savingsGoal">Target amount</Label>
+              <Label htmlFor="savingsGoal" className="text-white">Target amount</Label>
               <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 || '$'}
                 </span>
                 <Input
@@ -202,33 +205,34 @@ export function SavingsSetupDialog({
                   step="1"
                   value={savingsGoal}
                   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"
                 />
               </div>
             </div>
 
             <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
                 id="goalName"
                 type="text"
                 value={goalName}
                 onChange={(e) => setGoalName(e.target.value)}
                 placeholder="e.g., New Phone, Vacation"
+                className="border-emerald-700 bg-emerald-900/50 text-white placeholder:text-emerald-400"
               />
             </div>
           </div>
 
           {/* Actions */}
           <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
             </Button>
             <Button
               onClick={handleSave}
               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'}
             </Button>