Skip to content

Commit e67d159

Browse files
suvanbanerjeesuvanbanerjee
committed
dark colours
1 parent 1394180 commit e67d159

1 file changed

Lines changed: 27 additions & 27 deletions

File tree

‎app/q/page.tsx‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -137,14 +137,14 @@ const DataDisplayPage = () => {
137137
}
138138
}
139139
return (
140-
<div className="flex items-center justify-center min-h-screen p-4 sm:p-8">
140+
<div className="flex items-center justify-center min-h-screen p-4 sm:p-8 dark:bg-black">
141141
<div className="w-full max-w-2xl">
142-
<h1 className="font-bold text-3xl text-center mb-8">
142+
<h1 className="font-bold text-3xl text-center mb-8 dark:text-white">
143143
OpenTag <span className="text-red-500 italic">Serverless</span>
144144
</h1>
145145
{!decodedData && (
146-
<div className="bg-white shadow-md rounded-lg p-6">
147-
<h2 className="text-xl font-semibold mb-4">Enter PIN</h2>
146+
<div className="bg-white shadow-md rounded-lg p-6 dark:bg-stone-800">
147+
<h2 className="text-xl font-semibold mb-4 dark:text-white">Enter PIN</h2>
148148
<div className="space-y-4">
149149
<Input
150150
type="password"
@@ -156,36 +156,36 @@ const DataDisplayPage = () => {
156156
maxLength={4}
157157
/>
158158
<Button onClick={handleDecrypt} className="w-full">
159-
Decrypt Data
159+
Verify PIN
160160
</Button>
161-
{error && <p className="text-red-500">{error}</p>}
161+
{error && <p className="text-red-500 dark:text-red-400">{error}</p>}
162162
</div>
163163
</div>
164164
)}
165165
{decodedData && (
166-
<div className="bg-white shadow-md rounded-lg p-6">
167-
<h2 className="text-3xl sm:text-4xl font-bold text-center mb-4">
166+
<div className="bg-white shadow-md rounded-lg p-6 dark:bg-stone-800">
167+
<h2 className="text-3xl sm:text-4xl font-bold text-center mb-4 dark:text-white">
168168
{decodedData.name} - <span className="text-4xl font-bold text-red-500">{decodedData.bloodGroup}</span>
169169
</h2>
170170
<div className="space-y-4">
171171
<div>
172-
<h3 className="text-2xl font-semibold">Personal Details</h3>
173-
<div className="mt-2">
172+
<h3 className="text-2xl font-semibold dark:text-white">Personal Details</h3>
173+
<div className="mt-2 dark:text-stone-300">
174174
<span>Date of Birth: {decodedData.dob}</span>
175175
</div>
176-
<div className="mt-2">
176+
<div className="mt-2 dark:text-stone-300">
177177
<span>Age: {decodedData.age} years</span>
178178
</div>
179-
<div className="mt-2">
179+
<div className="mt-2 dark:text-stone-300">
180180
<span>Height: {parseInt(decodedData.height)} cm ({(parseFloat(decodedData.height) / 2.54).toFixed(2)} inches)</span>
181181
</div>
182-
<div className="mt-2">
182+
<div className="mt-2 dark:text-stone-300">
183183
<span>Weight: {parseInt(decodedData.weight)} kg ({(parseFloat(decodedData.weight) * 2.20462).toFixed(2)} lbs)</span>
184184
</div>
185185
</div>
186186
<div>
187-
<span className="text-xl font-semibold">Emergency Contact</span>
188-
<ul className="list-disc list-inside">
187+
<span className="text-xl font-semibold dark:text-white">Emergency Contact</span>
188+
<ul className="list-disc list-inside dark:text-stone-300">
189189
<li className="flex items-center gap-2 my-2">
190190
<span>{decodedData.emergencyContact}</span>
191191
<button
@@ -198,53 +198,53 @@ const DataDisplayPage = () => {
198198
</ul>
199199
</div>
200200
<div>
201-
<span className="text-xl font-semibold">Substance Use</span>
201+
<span className="text-xl font-semibold dark:text-white">Substance Use</span>
202202
<div className="mt-2">
203-
<span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full">{decodedData.substanceUse}</span>
203+
<span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full dark:bg-blue-900 dark:text-blue-200">{decodedData.substanceUse}</span>
204204
</div>
205205
</div>
206206
<div>
207-
<span className="text-xl font-semibold">Pregnant</span>
207+
<span className="text-xl font-semibold dark:text-white">Pregnant</span>
208208
<div className="mt-2">
209-
<span className={`px-2 py-1 rounded-full ${decodedData.pregnant ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}>
209+
<span className={`px-2 py-1 rounded-full ${decodedData.pregnant ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"}`}>
210210
{decodedData.pregnant ? "Yes" : "No"}
211211
</span>
212212
</div>
213213
</div>
214214
<div>
215-
<span className="text-xl font-semibold">Organ Donor</span>
215+
<span className="text-xl font-semibold dark:text-white">Organ Donor</span>
216216
<div className="mt-2">
217-
<span className={`px-2 py-1 rounded-full ${decodedData.organDonor ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}>
217+
<span className={`px-2 py-1 rounded-full ${decodedData.organDonor ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200" : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"}`}>
218218
{decodedData.organDonor ? "Yes" : "No"}
219219
</span>
220220
</div>
221221
</div>
222222
{decodedData.allergies.length > 0 && (
223223
<div>
224-
<span className="text-xl font-semibold">Allergies</span>
224+
<span className="text-xl font-semibold dark:text-white">Allergies</span>
225225
<div className="mt-2 flex flex-wrap gap-2">
226226
{decodedData.allergies.map((allergy, index) => (
227-
<span key={index} className="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">{allergy}</span>
227+
<span key={index} className="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full dark:bg-yellow-900 dark:text-yellow-200">{allergy}</span>
228228
))}
229229
</div>
230230
</div>
231231
)}
232232
{decodedData.medications.length > 0 && (
233233
<div>
234-
<span className="text-xl font-semibold">Medications</span>
234+
<span className="text-xl font-semibold dark:text-white">Medications</span>
235235
<div className="mt-2 flex flex-wrap gap-2">
236236
{decodedData.medications.map((medication, index) => (
237-
<span key={index} className="bg-purple-100 text-purple-800 px-2 py-1 rounded-full">{medication}</span>
237+
<span key={index} className="bg-purple-100 text-purple-800 px-2 py-1 rounded-full dark:bg-purple-900 dark:text-purple-200">{medication}</span>
238238
))}
239239
</div>
240240
</div>
241241
)}
242242
{decodedData.medicalConditions.length > 0 && (
243243
<div>
244-
<span className="text-xl font-semibold">Medical Conditions</span>
244+
<span className="text-xl font-semibold dark:text-white">Medical Conditions</span>
245245
<div className="mt-2 flex flex-wrap gap-2">
246246
{decodedData.medicalConditions.map((condition, index) => (
247-
<span key={index} className="bg-red-100 text-red-800 px-2 py-1 rounded-full">{condition}</span>
247+
<span key={index} className="bg-red-100 text-red-800 px-2 py-1 rounded-full dark:bg-red-900 dark:text-red-200">{condition}</span>
248248
))}
249249
</div>
250250
</div>

0 commit comments

Comments
 (0)