fix(medical): dark mode support and tab wrapping fix
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:
parent
bc2eb9a50f
commit
70aa35384b
1 changed files with 54 additions and 54 deletions
|
|
@ -436,7 +436,7 @@ const SUPPLEMENTS = [
|
|||
};
|
||||
|
||||
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="flex justify-between items-center">
|
||||
<a href="/menu" className="p-2">←</a>
|
||||
|
|
@ -446,31 +446,31 @@ const SUPPLEMENTS = [
|
|||
<div className="flex gap-2 mb-6 overflow-x-auto">
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
|
|
@ -481,19 +481,19 @@ const SUPPLEMENTS = [
|
|||
<div className="flex gap-2 mb-4 overflow-x-auto">
|
||||
<button
|
||||
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})
|
||||
</button>
|
||||
<button
|
||||
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})
|
||||
</button>
|
||||
<button
|
||||
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})
|
||||
</button>
|
||||
|
|
@ -513,12 +513,12 @@ const SUPPLEMENTS = [
|
|||
return (
|
||||
<div
|
||||
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-1">
|
||||
<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()}
|
||||
{actualDate && ` · Given: ${new Date(actualDate).toLocaleDateString()}`}
|
||||
</div>
|
||||
|
|
@ -534,7 +534,7 @@ const SUPPLEMENTS = [
|
|||
type="date"
|
||||
value={givenDate}
|
||||
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"
|
||||
/>
|
||||
<button
|
||||
|
|
@ -572,33 +572,33 @@ const SUPPLEMENTS = [
|
|||
|
||||
{/* Add Form */}
|
||||
{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
|
||||
type="text"
|
||||
value={newMedName}
|
||||
onChange={(e) => setNewMedName(e.target.value)}
|
||||
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
|
||||
type="text"
|
||||
value={newMedDose}
|
||||
onChange={(e) => setNewMedDose(e.target.value)}
|
||||
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
|
||||
type="text"
|
||||
value={newMedNotes}
|
||||
onChange={(e) => setNewMedNotes(e.target.value)}
|
||||
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">
|
||||
<button onClick={saveMedicine} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
|
||||
{editingMed ? "Update" : "Add"}
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -606,16 +606,16 @@ const SUPPLEMENTS = [
|
|||
)}
|
||||
|
||||
{medicines.length === 0 && !showAddMed ? (
|
||||
<div className="p-4 bg-white rounded-xl">
|
||||
<p className="text-gray-500">No medicines added</p>
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
|
||||
<p className="text-gray-500 dark:text-gray-400">No medicines added</p>
|
||||
</div>
|
||||
) : (
|
||||
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-1">
|
||||
<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.reminderTime && ` · ⏰ ${med.reminderTime}`}
|
||||
</div>
|
||||
|
|
@ -630,7 +630,7 @@ const SUPPLEMENTS = [
|
|||
)}
|
||||
|
||||
{!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
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -642,18 +642,18 @@ const SUPPLEMENTS = [
|
|||
<h2 className="font-semibold mb-3">Known Allergies</h2>
|
||||
|
||||
{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
|
||||
type="text"
|
||||
value={newAllergyName}
|
||||
onChange={(e) => setNewAllergyName(e.target.value)}
|
||||
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
|
||||
value={newAllergySeverity}
|
||||
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="moderate">Moderate</option>
|
||||
|
|
@ -664,13 +664,13 @@ const SUPPLEMENTS = [
|
|||
value={newAllergyNotes}
|
||||
onChange={(e) => setNewAllergyNotes(e.target.value)}
|
||||
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">
|
||||
<button onClick={saveAllergy} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
|
||||
{editingAllergy ? "Update" : "Add"}
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -678,16 +678,16 @@ const SUPPLEMENTS = [
|
|||
)}
|
||||
|
||||
{allergies.length === 0 && !showAddAllergy ? (
|
||||
<div className="p-4 bg-white rounded-xl">
|
||||
<p className="text-gray-500">No allergies recorded</p>
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
|
||||
<p className="text-gray-500 dark:text-gray-400">No allergies recorded</p>
|
||||
</div>
|
||||
) : (
|
||||
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-1">
|
||||
<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"}>
|
||||
{allergy.severity.toUpperCase()}
|
||||
</span>
|
||||
|
|
@ -704,7 +704,7 @@ const SUPPLEMENTS = [
|
|||
)}
|
||||
|
||||
{!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
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -716,39 +716,39 @@ const SUPPLEMENTS = [
|
|||
<h2 className="font-semibold mb-3">Doctor Visits</h2>
|
||||
|
||||
{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
|
||||
type="text"
|
||||
value={newVisitDoctor}
|
||||
onChange={(e) => setNewVisitDoctor(e.target.value)}
|
||||
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
|
||||
type="text"
|
||||
value={newVisitReason}
|
||||
onChange={(e) => setNewVisitReason(e.target.value)}
|
||||
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
|
||||
type="date"
|
||||
value={newVisitDate}
|
||||
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
|
||||
type="text"
|
||||
value={newVisitNotes}
|
||||
onChange={(e) => setNewVisitNotes(e.target.value)}
|
||||
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">
|
||||
<button onClick={saveVisit} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
|
||||
{editingVisit ? "Update" : "Add"}
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -756,16 +756,16 @@ const SUPPLEMENTS = [
|
|||
)}
|
||||
|
||||
{visits.length === 0 && !showAddVisit ? (
|
||||
<div className="p-4 bg-white rounded-xl">
|
||||
<p className="text-gray-500">No visits recorded</p>
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
|
||||
<p className="text-gray-500 dark:text-gray-400">No visits recorded</p>
|
||||
</div>
|
||||
) : (
|
||||
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-1">
|
||||
<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()}
|
||||
{visit.reason && ` · ${visit.reason}`}
|
||||
{visit.notes && ` · ${visit.notes}`}
|
||||
|
|
@ -781,7 +781,7 @@ const SUPPLEMENTS = [
|
|||
)}
|
||||
|
||||
{!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
|
||||
</button>
|
||||
)}
|
||||
|
|
@ -793,13 +793,13 @@ const SUPPLEMENTS = [
|
|||
<h2 className="font-semibold mb-3">Illness Log</h2>
|
||||
|
||||
{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
|
||||
type="text"
|
||||
value={newIllnessName}
|
||||
onChange={(e) => setNewIllnessName(e.target.value)}
|
||||
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">
|
||||
<input
|
||||
|
|
@ -807,14 +807,14 @@ const SUPPLEMENTS = [
|
|||
value={newIllnessStart}
|
||||
onChange={(e) => setNewIllnessStart(e.target.value)}
|
||||
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
|
||||
type="date"
|
||||
value={newIllnessEnd}
|
||||
onChange={(e) => setNewIllnessEnd(e.target.value)}
|
||||
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>
|
||||
<input
|
||||
|
|
@ -822,13 +822,13 @@ const SUPPLEMENTS = [
|
|||
value={newIllnessNotes}
|
||||
onChange={(e) => setNewIllnessNotes(e.target.value)}
|
||||
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">
|
||||
<button onClick={saveIllness} className="flex-1 py-2 bg-rose-400 text-white rounded-lg">
|
||||
{editingIllness ? "Update" : "Add"}
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -836,16 +836,16 @@ const SUPPLEMENTS = [
|
|||
)}
|
||||
|
||||
{illnesses.length === 0 && !showAddIllness ? (
|
||||
<div className="p-4 bg-white rounded-xl">
|
||||
<p className="text-gray-500">No illnesses recorded</p>
|
||||
<div className="p-4 bg-white dark:bg-gray-800 rounded-xl">
|
||||
<p className="text-gray-500 dark:text-gray-400">No illnesses recorded</p>
|
||||
</div>
|
||||
) : (
|
||||
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-1">
|
||||
<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()}
|
||||
{illness.endDate && ` - ${new Date(illness.endDate).toLocaleDateString()}`}
|
||||
{illness.notes && ` · ${illness.notes}`}
|
||||
|
|
@ -861,7 +861,7 @@ const SUPPLEMENTS = [
|
|||
)}
|
||||
|
||||
{!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
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue