manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(medical): dark mode support and tab wrapping fix

Browse source 
Added dark: variants to all cards, inputs, selects, text, and buttons
throughout the medical page. Added whitespace-nowrap + flex-shrink-0 to
all tab buttons to prevent labels like "Doctor Visit" from wrapping.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-17 13:22:14 +05:30
parent bc2eb9a50f
commit 70aa35384b
1 changed files with 54 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
src/app/medical/page.tsx
View file

@ -436,7 +436,7 @@ const SUPPLEMENTS = [
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50"> <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800">
<div className="p-4"> <div className="p-4">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<a href="/menu" className="p-2">←</a> <a href="/menu" className="p-2">←</a>
@ -446,31 +446,31 @@ const SUPPLEMENTS = [
<div className="flex gap-2 mb-6 overflow-x-auto"> <div className="flex gap-2 mb-6 overflow-x-auto">
<button <button
onClick={() => setTab("vaccinations")} onClick={() => setTab("vaccinations")}
className={`px-4 p-3 rounded-xl ${tab === "vaccinations" ? "bg-rose-400 text-white" : "bg-white"}`} className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "vaccinations" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
> >
Vaccines Vaccines
</button> </button>
<button <button
onClick={() => setTab("medicine")} onClick={() => setTab("medicine")}
className={`px-4 p-3 rounded-xl ${tab === "medicine" ? "bg-rose-400 text-white" : "bg-white"}`} className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "medicine" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
> >
Medicine Medicine
</button> </button>
<button <button
onClick={() => setTab("allergies")} onClick={() => setTab("allergies")}
className={`px-4 p-3 rounded-xl ${tab === "allergies" ? "bg-rose-400 text-white" : "bg-white"}`} className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "allergies" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
> >
Allergies Allergies
</button> </button>
<button <button
onClick={() => setTab("visits")} onClick={() => setTab("visits")}
className={`px-4 p-3 rounded-xl ${tab === "visits" ? "bg-rose-400 text-white" : "bg-white"}`} className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "visits" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
> >
Doctor Visit Doctor Visit
</button> </button>
<button <button
onClick={() => setTab("illness")} onClick={() => setTab("illness")}
className={`px-4 p-3 rounded-xl ${tab === "illness" ? "bg-rose-400 text-white" : "bg-white"}`} className={`px-4 p-3 rounded-xl whitespace-nowrap flex-shrink-0 ${tab === "illness" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
> >
Illness Illness
</button> </button>
@ -481,19 +481,19 @@ const SUPPLEMENTS = [
<div className="flex gap-2 mb-4 overflow-x-auto"> <div className="flex gap-2 mb-4 overflow-x-auto">
<button <button
onClick={() => setVaccineTab("upcoming")} onClick={() => setVaccineTab("upcoming")}
className={`px-4 py-2 rounded-xl whitespace-nowrap ${vaccineTab === "upcoming" ? "bg-rose-400 text-white" : "bg-white"}`} className={`px-4 py-2 rounded-xl whitespace-nowrap flex-shrink-0 ${vaccineTab === "upcoming" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
> >
Upcoming ({getVaccinesByStatus("upcoming").length}) Upcoming ({getVaccinesByStatus("upcoming").length})
</button> </button>
<button <button
onClick={() => setVaccineTab("completed")} onClick={() => setVaccineTab("completed")}
className={`px-4 py-2 rounded-xl whitespace-nowrap ${vaccineTab === "completed" ? "bg-rose-400 text-white" : "bg-white"}`} className={`px-4 py-2 rounded-xl whitespace-nowrap flex-shrink-0 ${vaccineTab === "completed" ? "bg-rose-400 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
> >
Completed ({getVaccinesByStatus("completed").length}) Completed ({getVaccinesByStatus("completed").length})
</button> </button>
<button <button
onClick={() => setVaccineTab("overdue")} onClick={() => setVaccineTab("overdue")}
className={`px-4 py-2 rounded-xl whitespace-nowrap ${vaccineTab === "overdue" ? "bg-red-500 text-white" : "bg-white"}`} className={`px-4 py-2 rounded-xl whitespace-nowrap flex-shrink-0 ${vaccineTab === "overdue" ? "bg-red-500 text-white" : "bg-white dark:bg-gray-800 dark:text-white"}`}
> >
Overdue ({getVaccinesByStatus("overdue").length}) Overdue ({getVaccinesByStatus("overdue").length})
</button> </button>
@ -513,12 +513,12 @@ const SUPPLEMENTS = [
return ( return (
<div <div
key={vaccine.name} key={vaccine.name}
className={`p-4 bg-white rounded-xl ${status === "completed" ? "opacity-60" : ""} ${status === "overdue" ? "border-l-4 border-red-500" : ""}`} className={`p-4 bg-white dark:bg-gray-800 rounded-xl ${status === "completed" ? "opacity-60" : ""} ${status === "overdue" ? "border-l-4 border-red-500" : ""}`}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="font-medium">{vaccine.name}</div> <div className="font-medium">{vaccine.name}</div>
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500 dark:text-gray-400">
Due: {new Date(dueDate).toLocaleDateString()} Due: {new Date(dueDate).toLocaleDateString()}
{actualDate && ` · Given: ${new Date(actualDate).toLocaleDateString()}`} {actualDate && ` · Given: ${new Date(actualDate).toLocaleDateString()}`}
</div> </div>
@ -534,7 +534,7 @@ const SUPPLEMENTS = [
type="date" type="date"
value={givenDate} value={givenDate}
onChange={(e) => setGivenDate(e.target.value)} onChange={(e) => setGivenDate(e.target.value)}
className="p-1 text-sm border rounded" className="p-1 text-sm border dark:border-gray-600 rounded dark:bg-gray-700 dark:text-white"
placeholder="Date given" placeholder="Date given"
/> />
<button <button
@ -572,33 +572,33 @@ const SUPPLEMENTS = [
{/* Add Form */} {/* Add Form */}
{showAddMed && ( {showAddMed && (
<div className="p-4 bg-white rounded-xl space-y-3"> <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
<input <input
type="text" type="text"
value={newMedName} value={newMedName}
onChange={(e) => setNewMedName(e.target.value)} onChange={(e) => setNewMedName(e.target.value)}
placeholder="Medicine name" placeholder="Medicine name"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<input <input
type="text" type="text"
value={newMedDose} value={newMedDose}
onChange={(e) => setNewMedDose(e.target.value)} onChange={(e) => setNewMedDose(e.target.value)}
placeholder="Dose (e.g., 5ml, 1 tablet)" placeholder="Dose (e.g., 5ml, 1 tablet)"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<input <input
type="text" type="text"
value={newMedNotes} value={newMedNotes}
onChange={(e) => setNewMedNotes(e.target.value)} onChange={(e) => setNewMedNotes(e.target.value)}
placeholder="Notes" placeholder="Notes"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={saveMedicine} className="flex-1 py-2 bg-rose-400 text-white rounded-lg"> <button onClick={saveMedicine} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
{editingMed ? "Update" : "Add"} {editingMed ? "Update" : "Add"}
</button> </button>
<button onClick={resetMedForm} className="flex-1 py-2 bg-gray-200 rounded-lg"> <button onClick={resetMedForm} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-lg">
Cancel Cancel
</button> </button>
</div> </div>
@ -606,16 +606,16 @@ const SUPPLEMENTS = [
)} )}
{medicines.length === 0 && !showAddMed ? ( {medicines.length === 0 && !showAddMed ? (
<div className="p-4 bg-white rounded-xl"> <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<p className="text-gray-500">No medicines added</p> <p className="text-gray-500 dark:text-gray-400">No medicines added</p>
</div> </div>
) : ( ) : (
medicines.map((med) => ( medicines.map((med) => (
<div key={med.id} className="p-4 bg-white rounded-xl"> <div key={med.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="font-medium">{med.name}</div> <div className="font-medium">{med.name}</div>
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500 dark:text-gray-400">
{med.dose} {med.notes && `· ${med.notes}`} {med.dose} {med.notes && `· ${med.notes}`}
{med.reminderTime && ` · ⏰ ${med.reminderTime}`} {med.reminderTime && ` · ⏰ ${med.reminderTime}`}
</div> </div>
@ -630,7 +630,7 @@ const SUPPLEMENTS = [
)} )}
{!showAddMed && ( {!showAddMed && (
<button onClick={() => setShowAddMed(true)} className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500"> <button onClick={() => setShowAddMed(true)} className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400">
+ Add Medicine + Add Medicine
</button> </button>
)} )}
@ -642,18 +642,18 @@ const SUPPLEMENTS = [
<h2 className="font-semibold mb-3">Known Allergies</h2> <h2 className="font-semibold mb-3">Known Allergies</h2>
{showAddAllergy && ( {showAddAllergy && (
<div className="p-4 bg-white rounded-xl space-y-3"> <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
<input <input
type="text" type="text"
value={newAllergyName} value={newAllergyName}
onChange={(e) => setNewAllergyName(e.target.value)} onChange={(e) => setNewAllergyName(e.target.value)}
placeholder="Allergy name (e.g., Peanut, Milk)" placeholder="Allergy name (e.g., Peanut, Milk)"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<select <select
value={newAllergySeverity} value={newAllergySeverity}
onChange={(e) => setNewAllergySeverity(e.target.value)} onChange={(e) => setNewAllergySeverity(e.target.value)}
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
> >
<option value="mild">Mild</option> <option value="mild">Mild</option>
<option value="moderate">Moderate</option> <option value="moderate">Moderate</option>
@ -664,13 +664,13 @@ const SUPPLEMENTS = [
value={newAllergyNotes} value={newAllergyNotes}
onChange={(e) => setNewAllergyNotes(e.target.value)} onChange={(e) => setNewAllergyNotes(e.target.value)}
placeholder="Notes" placeholder="Notes"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={saveAllergy} className="flex-1 py-2 bg-rose-400 text-white rounded-lg"> <button onClick={saveAllergy} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
{editingAllergy ? "Update" : "Add"} {editingAllergy ? "Update" : "Add"}
</button> </button>
<button onClick={resetAllergyForm} className="flex-1 py-2 bg-gray-200 rounded-lg"> <button onClick={resetAllergyForm} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-lg">
Cancel Cancel
</button> </button>
</div> </div>
@ -678,16 +678,16 @@ const SUPPLEMENTS = [
)} )}
{allergies.length === 0 && !showAddAllergy ? ( {allergies.length === 0 && !showAddAllergy ? (
<div className="p-4 bg-white rounded-xl"> <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<p className="text-gray-500">No allergies recorded</p> <p className="text-gray-500 dark:text-gray-400">No allergies recorded</p>
</div> </div>
) : ( ) : (
allergies.map((allergy) => ( allergies.map((allergy) => (
<div key={allergy.id} className="p-4 bg-white rounded-xl"> <div key={allergy.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="font-medium">{allergy.name}</div> <div className="font-medium">{allergy.name}</div>
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500 dark:text-gray-400">
<span className={allergy.severity === "severe" ? "text-red-500" : "text-orange-500"}> <span className={allergy.severity === "severe" ? "text-red-500" : "text-orange-500"}>
{allergy.severity.toUpperCase()} {allergy.severity.toUpperCase()}
</span> </span>
@ -704,7 +704,7 @@ const SUPPLEMENTS = [
)} )}
{!showAddAllergy && ( {!showAddAllergy && (
<button onClick={() => setShowAddAllergy(true)} className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500"> <button onClick={() => setShowAddAllergy(true)} className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400">
+ Add Allergy + Add Allergy
</button> </button>
)} )}
@ -716,39 +716,39 @@ const SUPPLEMENTS = [
<h2 className="font-semibold mb-3">Doctor Visits</h2> <h2 className="font-semibold mb-3">Doctor Visits</h2>
{showAddVisit && ( {showAddVisit && (
<div className="p-4 bg-white rounded-xl space-y-3"> <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
<input <input
type="text" type="text"
value={newVisitDoctor} value={newVisitDoctor}
onChange={(e) => setNewVisitDoctor(e.target.value)} onChange={(e) => setNewVisitDoctor(e.target.value)}
placeholder="Doctor name" placeholder="Doctor name"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<input <input
type="text" type="text"
value={newVisitReason} value={newVisitReason}
onChange={(e) => setNewVisitReason(e.target.value)} onChange={(e) => setNewVisitReason(e.target.value)}
placeholder="Reason (e.g., Checkup, Fever)" placeholder="Reason (e.g., Checkup, Fever)"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<input <input
type="date" type="date"
value={newVisitDate} value={newVisitDate}
onChange={(e) => setNewVisitDate(e.target.value)} onChange={(e) => setNewVisitDate(e.target.value)}
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
/> />
<input <input
type="text" type="text"
value={newVisitNotes} value={newVisitNotes}
onChange={(e) => setNewVisitNotes(e.target.value)} onChange={(e) => setNewVisitNotes(e.target.value)}
placeholder="Notes" placeholder="Notes"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={saveVisit} className="flex-1 py-2 bg-rose-400 text-white rounded-lg"> <button onClick={saveVisit} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
{editingVisit ? "Update" : "Add"} {editingVisit ? "Update" : "Add"}
</button> </button>
<button onClick={resetVisitForm} className="flex-1 py-2 bg-gray-200 rounded-lg"> <button onClick={resetVisitForm} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-lg">
Cancel Cancel
</button> </button>
</div> </div>
@ -756,16 +756,16 @@ const SUPPLEMENTS = [
)} )}
{visits.length === 0 && !showAddVisit ? ( {visits.length === 0 && !showAddVisit ? (
<div className="p-4 bg-white rounded-xl"> <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<p className="text-gray-500">No visits recorded</p> <p className="text-gray-500 dark:text-gray-400">No visits recorded</p>
</div> </div>
) : ( ) : (
visits.map((visit) => ( visits.map((visit) => (
<div key={visit.id} className="p-4 bg-white rounded-xl"> <div key={visit.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="font-medium">{visit.doctorName}</div> <div className="font-medium">{visit.doctorName}</div>
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500 dark:text-gray-400">
{new Date(visit.date).toLocaleDateString()} {new Date(visit.date).toLocaleDateString()}
{visit.reason && ` · ${visit.reason}`} {visit.reason && ` · ${visit.reason}`}
{visit.notes && ` · ${visit.notes}`} {visit.notes && ` · ${visit.notes}`}
@ -781,7 +781,7 @@ const SUPPLEMENTS = [
)} )}
{!showAddVisit && ( {!showAddVisit && (
<button onClick={() => setShowAddVisit(true)} className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500"> <button onClick={() => setShowAddVisit(true)} className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400">
+ Add Visit + Add Visit
</button> </button>
)} )}
@ -793,13 +793,13 @@ const SUPPLEMENTS = [
<h2 className="font-semibold mb-3">Illness Log</h2> <h2 className="font-semibold mb-3">Illness Log</h2>
{showAddIllness && ( {showAddIllness && (
<div className="p-4 bg-white rounded-xl space-y-3"> <div className="p-4 bg-white dark:bg-gray-800 rounded-xl space-y-3">
<input <input
type="text" type="text"
value={newIllnessName} value={newIllnessName}
onChange={(e) => setNewIllnessName(e.target.value)} onChange={(e) => setNewIllnessName(e.target.value)}
placeholder="Illness (e.g., Cold, Fever, Flu)" placeholder="Illness (e.g., Cold, Fever, Flu)"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<input <input
@ -807,14 +807,14 @@ const SUPPLEMENTS = [
value={newIllnessStart} value={newIllnessStart}
onChange={(e) => setNewIllnessStart(e.target.value)} onChange={(e) => setNewIllnessStart(e.target.value)}
placeholder="Start date" placeholder="Start date"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
/> />
<input <input
type="date" type="date"
value={newIllnessEnd} value={newIllnessEnd}
onChange={(e) => setNewIllnessEnd(e.target.value)} onChange={(e) => setNewIllnessEnd(e.target.value)}
placeholder="End date" placeholder="End date"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
/> />
</div> </div>
<input <input
@ -822,13 +822,13 @@ const SUPPLEMENTS = [
value={newIllnessNotes} value={newIllnessNotes}
onChange={(e) => setNewIllnessNotes(e.target.value)} onChange={(e) => setNewIllnessNotes(e.target.value)}
placeholder="Notes" placeholder="Notes"
className="w-full p-2 border rounded-lg" className="w-full p-2 border dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
/> />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={saveIllness} className="flex-1 py-2 bg-rose-400 text-white rounded-lg"> <button onClick={saveIllness} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
{editingIllness ? "Update" : "Add"} {editingIllness ? "Update" : "Add"}
</button> </button>
<button onClick={resetIllnessForm} className="flex-1 py-2 bg-gray-200 rounded-lg"> <button onClick={resetIllnessForm} className="flex-1 py-2 bg-gray-200 dark:bg-gray-600 dark:text-white rounded-lg">
Cancel Cancel
</button> </button>
</div> </div>
@ -836,16 +836,16 @@ const SUPPLEMENTS = [
)} )}
{illnesses.length === 0 && !showAddIllness ? ( {illnesses.length === 0 && !showAddIllness ? (
<div className="p-4 bg-white rounded-xl"> <div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<p className="text-gray-500">No illnesses recorded</p> <p className="text-gray-500 dark:text-gray-400">No illnesses recorded</p>
</div> </div>
) : ( ) : (
illnesses.map((illness) => ( illnesses.map((illness) => (
<div key={illness.id} className="p-4 bg-white rounded-xl"> <div key={illness.id} className="p-4 bg-white dark:bg-gray-800 rounded-xl">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="font-medium">{illness.name}</div> <div className="font-medium">{illness.name}</div>
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500 dark:text-gray-400">
{new Date(illness.startDate).toLocaleDateString()} {new Date(illness.startDate).toLocaleDateString()}
{illness.endDate && ` - ${new Date(illness.endDate).toLocaleDateString()}`} {illness.endDate && ` - ${new Date(illness.endDate).toLocaleDateString()}`}
{illness.notes && ` · ${illness.notes}`} {illness.notes && ` · ${illness.notes}`}
@ -861,7 +861,7 @@ const SUPPLEMENTS = [
)} )}
{!showAddIllness && ( {!showAddIllness && (
<button onClick={() => setShowAddIllness(true)} className="w-full p-4 border-2 border-dashed border-gray-300 rounded-xl text-gray-500"> <button onClick={() => setShowAddIllness(true)} className="w-full p-4 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl text-gray-500 dark:text-gray-400">
+ Log Illness + Log Illness
</button> </button>
)} )}