Contact section #208

[kire21]

• Fixed responsiveness for the contact section
• Created textArea reusable component
• Used TextInput, TextArea and Button components in the contact form
• Made some changes for better responsive in textInput
• Changed file names to small letter cases
• The images for desktop and mobile on the bottom have 2px empty space and it is not good, the designer needs to fix this
• Deleted some code in the globals/boilerplate added from @Mikivitkovski for auto field input, because it makes problems for the textInput

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 19, 2024 4:57pm

[edichoska]

General reponsiveness issues as shown on the images. Can you on mobiles make the image contain so it is not cut off. On smaller desktops you could move the pattern and image a little bit to the right. I wont comment for now on the tablet design because we are still waiting on the design team

[edichoska]

Also fix validation problems. Most critical is that it throws an error when you type space after entering first Name

[kire21]

@edichoska I fixed image responsiveness and form validation for full name (max 100 characters, accept Latin, Cyrillic characters, and space between first and last name and other things for check validations), email (I found the best practice for email validation and used that, but it also, in the end, can accept different characters I didn't see how to solve this), and message (min 100 characters, Latin and Cyrillic characters).

[edichoska]

@edichoska I fixed image responsiveness and form validation for full name (max 100 characters, accept Latin, Cyrillic characters, and space between first and last name and other things for check validations), email (I found the best practice for email validation and used that, but it also, in the end, can accept different characters I didn't see how to solve this), and message (min 100 characters, Latin and Cyrillic characters).

Thank you @kire21 for fixing the validation. Much better now. I would shorten the requirement for the textarea to 20? Maybe someone just wants to ask a short question. They should be able to do that. Also the email, now we can enter something like emi@m.c and it goes through

The image on mobile devices looks cut of from the sides.

[kire21]

@edichoska I fixed image responsiveness and form validation for full name (max 100 characters, accept Latin, Cyrillic characters, and space between first and last name and other things for check validations), email (I found the best practice for email validation and used that, but it also, in the end, can accept different characters I didn't see how to solve this), and message (min 100 characters, Latin and Cyrillic characters).

Thank you @kire21 for fixing the validation. Much better now. I would shorten the requirement for the textarea to 20? Maybe someone just wants to ask a short question. They should be able to do that. Also the email, now we can enter something like emi@m.c and it goes through

The image on mobile devices looks cut of from the sides.

@edichoska I am done with the changes...

[edichoska]

• Error messages should be using error text color
• Придружи ни се button should lead to our discord(you can find the link in the Footer social media section)

[kire21]

• Error messages should be using error text color
• Придружи ни се button should lead to our discord(you can find the link in the Footer social media section)

If I use the error text color (red) for error messages, it is unreadable with very bad contrast... also the font-size is 12px, and many people have problems with their eyesight.

[kire21]

• Error messages should be using error text color
• Придружи ни се button should lead to our discord(you can find the link in the Footer social media section)

If I use the error text color (red) for error messages, it is unreadable with very bad contrast... also the font-size is 12px, and many people have problems with their eyesight.

Or our audience will be only young people with sharp vision. :D

[edichoska]

• Error messages should be using error text color
• Придружи ни се button should lead to our discord(you can find the link in the Footer social media section)

If I use the error text color (red) for error messages, it is unreadable with very bad contrast... also the font-size is 12px, and many people have problems with their eyesight.

Or our audience will be only young people with sharp vision. :D

12-13-14px for error messages is pretty standard. I have communicated with the design team about the error color not having enough contrast with the dark background. Lets just add it now so we can merge this. And when they are done we will change the color in colors.scss

[kire21]

@edichoska I am done.