Skip to content

Commit 007223d

Browse files
Mugisha146Mugisha146
committed
fix toasty on signup page
1 parent a36b93f commit 007223d

File tree

1 file changed

+82
-53
lines changed

1 file changed

+82
-53
lines changed

‎src/components/form/RegisterForm.tsx‎

Lines changed: 82 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -171,24 +171,31 @@ function SignupForm() {
171171
};
172172
return (
173173
<>
174-
175-
<div className="flex items-center justify-center mx-auto bg-white dark:bg-[#374151] h-screen">
176-
174+
<div className="relative flex items-center justify-center mx-auto bg-white dark:bg-[#374151] h-screen">
177175
{isAnError && (
178-
<Toasty message={isAnError} type="error" onClose={() => setError(null)} />
176+
<div className="absolute top-10 z-50">
177+
<Toasty
178+
message={isAnError}
179+
type="error"
180+
onClose={() => setError(null)}
181+
/>
182+
</div>
179183
)}
180184
{isSuccess ? (
181185
<div className="bg-[#1F2A37] w-[30vw] flex h-[70vh] flex-col items-center justify-center rounded-sm sm:w-5/6 lg:w-[45vw]">
182186
<div
183-
className={`rounded-full flex items-center justify-center ${isAnError ? "bg-white" : "bg-green"
184-
} p-4 mx-auto mb-4`}
187+
className={`rounded-full flex items-center justify-center ${
188+
isAnError ? "bg-white" : "bg-green"
189+
} p-4 mx-auto mb-4`}
185190
>
186191
<AiOutlineCheck className="text-white text-4xl" />
187192
</div>
188193
<div className="text-[#afb1b4] text-lg mb-4 font-inter">
189194
<p>Account created, Check your email to verify your account !</p>
190195
</div>
191-
<Link to="/login" ><Button label="Continue" className="w-[80px]" /></Link>
196+
<Link to="/login">
197+
<Button label="Continue" className="w-[80px]" />
198+
</Link>
192199
</div>
193200
) : (
194201
<form
@@ -245,9 +252,15 @@ function SignupForm() {
245252
className=" absolute right-4 top-4"
246253
>
247254
{showPassword[0] ? (
248-
<FontAwesomeIcon icon={faEye} className="text-black dark:text-white" />
255+
<FontAwesomeIcon
256+
icon={faEye}
257+
className="text-black dark:text-white"
258+
/>
249259
) : (
250-
<FontAwesomeIcon icon={faEyeSlash} className="text-black dark:text-white" />
260+
<FontAwesomeIcon
261+
icon={faEyeSlash}
262+
className="text-black dark:text-white"
263+
/>
251264
)}
252265
</div>
253266
</div>
@@ -264,66 +277,78 @@ function SignupForm() {
264277
className=" absolute right-4 top-4"
265278
>
266279
{showPassword[1] ? (
267-
<FontAwesomeIcon icon={faEye} className="text-black dark:text-white" />
280+
<FontAwesomeIcon
281+
icon={faEye}
282+
className="text-black dark:text-white"
283+
/>
268284
) : (
269-
<FontAwesomeIcon icon={faEyeSlash} className="text-black dark:text-white" />
285+
<FontAwesomeIcon
286+
icon={faEyeSlash}
287+
className="text-black dark:text-white"
288+
/>
270289
)}
271290
</div>
272291
</div>
273292
<div className="flex items-center w-[25vw] gap-10 sm:w-5/6 lg:w-[25vw] justify-between">
274293
<div className="w-[50%]">
275-
<InputField
276-
placeholder="Country"
277-
list="countries"
278-
className="w-full rounded-md px-2 py-3 border border-white placeholder:text-gray-400 text-black dark:text-white sm:text-[12px] outline-none autofill:bg-transparent autofill:text-white bg-gray-100 dark:bg-[#1F2A37]"
279-
{...register("country", {
280-
onChange: (e) => handleCountryChange(e),
281-
})}
282-
error={errors?.country}
294+
<InputField
295+
placeholder="Country"
296+
list="countries"
297+
className="w-full rounded-md px-2 py-3 border border-white placeholder:text-gray-400 text-black dark:text-white sm:text-[12px] outline-none autofill:bg-transparent autofill:text-white bg-gray-100 dark:bg-[#1F2A37]"
298+
{...register("country", {
299+
onChange: (e) => handleCountryChange(e),
300+
})}
301+
error={errors?.country}
283302
/>
284303
<datalist id="countries">
285-
{filteredCountries.map((country) => (
286-
<option key={country.code} value={country.name} />
287-
))}
304+
{filteredCountries.map((country) => (
305+
<option key={country.code} value={country.name} />
306+
))}
288307
</datalist>
289-
290308
</div>
291309
<div className="relative w-full">
292-
<select
293-
{...register("gender")}
294-
className="w-full rounded-md px-2 py-2 border border-white
310+
<select
311+
{...register("gender")}
312+
className="w-full rounded-md px-2 py-2 border border-white
295313
placeholder:text-gray-400 text-white sm:text-[12px]
296314
outline-none bg-[#1F2A37] appearance-none"
297-
>
298-
<option value="" disabled selected>Gender</option>
299-
<option value="female">female</option>
300-
<option value="male">male</option>
301-
<option value="other">other</option>
302-
</select>
303-
304-
{/* Dropdown arrow */}
305-
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
306-
<svg
307-
className="w-4 h-4 text-white"
308-
fill="none"
309-
stroke="currentColor"
310-
viewBox="0 0 24 24"
311-
>
312-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
313-
</svg>
314-
</div>
315-
</div>
315+
>
316+
<option value="" disabled selected>
317+
Gender
318+
</option>
319+
<option value="female">female</option>
320+
<option value="male">male</option>
321+
<option value="other">other</option>
322+
</select>
323+
324+
{/* Dropdown arrow */}
325+
<div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
326+
<svg
327+
className="w-4 h-4 text-white"
328+
fill="none"
329+
stroke="currentColor"
330+
viewBox="0 0 24 24"
331+
>
332+
<path
333+
strokeLinecap="round"
334+
strokeLinejoin="round"
335+
strokeWidth="2"
336+
d="M19 9l-7 7-7-7"
337+
/>
338+
</svg>
339+
</div>
340+
</div>
316341
</div>
317342

318343
<div className="flex items-center w-[25vw] sm:w-5/6 lg:w-[25vw] justify-between">
319344
<div className="w-[20%] ">
320-
<InputField
321-
placeholder="Country Code"
322-
type="text"
323-
className="w-full rounded-md px-2 py-3 border border-white placeholder:text-gray-400 text-black dark:text-white sm:text-[12px] outline-none autofill:bg-transparent autofill:text-white bg-gray-100 dark:bg-[#1F2A37]"
324-
{...register("countryCode")}
325-
error={errors?.countryCode}
326-
/>
345+
<InputField
346+
placeholder="Country Code"
347+
type="text"
348+
className="w-full rounded-md px-2 py-3 border border-white placeholder:text-gray-400 text-black dark:text-white sm:text-[12px] outline-none autofill:bg-transparent autofill:text-white bg-gray-100 dark:bg-[#1F2A37]"
349+
{...register("countryCode")}
350+
error={errors?.countryCode}
351+
/>
327352
</div>
328353
<div className=" w-[65%]">
329354
<InputField
@@ -380,7 +405,11 @@ function SignupForm() {
380405
</Button>
381406
</>
382407
) : (
383-
<Button type="submit" label="Signup" className="my-1 mb-4 sm:w-full w-5/6 " />
408+
<Button
409+
type="submit"
410+
label="Signup"
411+
className="my-1 mb-4 sm:w-full w-5/6 "
412+
/>
384413
)}
385414
</div>
386415
</form>

0 commit comments

Comments
 (0)