@@ -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