Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#279 contact information page made responsive #334

Merged
merged 9 commits into from
May 28, 2024
Merged

#279 contact information page made responsive #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7a86e9e
made contact page responsive
Riddhi162 May 15, 2024
e29302e
Added breakpoints to tailwind file
Riddhi162 May 15, 2024
0684da3
Merge branch 'main' into ridzi
rishicds May 16, 2024
522ee27
Made the requied changes in ContactInformationPage.jsx
Riddhi162 May 16, 2024
ccd73c9
Merge branch 'main' into ridzi
Riddhi162 May 16, 2024
839dea3
Incvcreased the size of buttons and gap betweeen them in ContactInfo…
Riddhi162 May 19, 2024
4390f36
Merge branch 'main' into ridzi
Riddhi162 May 19, 2024
e306949
Update ContactInformationPage.jsx
Riddhi162 May 20, 2024
52d9ec9
Merge branch 'main' into ridzi
codewarnab May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 23 additions & 18 deletions src/pages/user/ReportIncidentPages/ContactInformationPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import InputField from "../../../Components/shared/InputField";
import Background from "../../../Components/shared/Background";
import Button from "../../../Components/shared/Button";


function ContactInformationPage({
formData,
setFormData,
Expand Down Expand Up @@ -35,14 +36,14 @@ function ContactInformationPage({
return (
<div className="h-screen w-screen font-breeSerif">
<Background />
<div className=" flex flex-col justify-center items-center relative">
<div className="mt-24 relative w-full gap-[20px] flex flex-col items-center ">
<h1 className="text-center mt-[20px] pb-1 z-[3] text-[#0B0553DE] font-black tracking-wide text-[2rem] underline">CONTACT DETAILS</h1>
<div className="bg-gray-200 bg-opacity-40 w-[90%] py-8 px-4 rounded-3xl backdrop-blur-[6px] flex flex-col justify-evenly items-center gap-[10px] shadow-dashBoardCardImageShadow">
<div className="flex flex-col gap-[10px]">

<div className=" flex flex-col justify-center md:h-[100%] items-center relative ">
<div className="my-10 xs:py-8 relative w-full gap-[20px] flex flex-col items-center ">
<h1 className="text-center mt-[20px] xs:text-[25px] pb-1 z-[3] text-[#0B0553DE] font-black tracking-wide text-[2rem] underline">CONTACT DETAILS</h1>
<div className="bg-gray-200 bg-opacity-20 w-[90%] md:w-[75%]C py-8 px-4 rounded-3xl backdrop-blur-[6px] flex flex-col justify-evenly items-center gap-[10px] shadow-dashBoardCardImageShadow">
<div className="flex flex-col gap-[7px]">
<InputField
className=" h-16 bg-opacity-15 backdrop-blur-[6px] w-[300px] px-4 leading-[px] items-center outline-0 rounded-[30px] text-lg placeholder-stone bg-white bg-opacity-47 shadow-dashBoardCardImageShadow"
className=" h-16 bg-opacity-15 backdrop-blur-[6px] w-[300px] md:w-[250px] xs:w-[200px] xs:h-12 px-4 leading-[px] items-center outline-0 rounded-[30px] text-lg xs:text-[16px] placeholder-stone bg-white bg-opacity-47 shadow-dashBoardCardImageShadow"
type="text"
placeholder="Name"
name="user_name"
Expand All @@ -56,9 +57,9 @@ function ContactInformationPage({
<div className="error">{errors.first_name}</div>
</div>
<div className="flex flex-col gap-[10px]">

<InputField
className=" h-16 bg-opacity-15 backdrop-blur-[6px] w-[300px] px-4 leading-[px] items-center outline-0 rounded-[30px] text-lg placeholder-stone bg-white bg-opacity-47 shadow-dashBoardCardImageShadow"
className=" h-16 bg-opacity-15 backdrop-blur-[6px] w-[300px] md:w-[250px] xs:w-[200px] xs:h-12 px-4 leading-[px] items-center outline-0 rounded-[30px] text-lg xs:text-[16px] placeholder-stone bg-white bg-opacity-47 shadow-dashBoardCardImageShadow"
type="tel"
placeholder="Phone Number"
name="user_phone"
Expand All @@ -70,9 +71,9 @@ function ContactInformationPage({
<small className="text-sm text-red-500">{errors.user_phone}</small>
</div>
<div className="flex flex-col gap-[10px]">

<input
className=" h-16 bg-opacity-15 backdrop-blur-[6px] w-[300px] px-4 leading-[px] items-center outline-0 rounded-[30px] text-lg placeholder-stone bg-white bg-opacity-47 shadow-dashBoardCardImageShadow"
className=" h-16 bg-opacity-15 backdrop-blur-[6px] w-[300px] md:w-[250px] xs:w-[200px] xs:h-12 px-4 leading-[px] items-center outline-0 rounded-[30px] text-lg xs:text-[16px] placeholder-stone bg-white bg-opacity-47 shadow-dashBoardCardImageShadow"
type="email"
placeholder="E-mail"
name="user_email"
Expand All @@ -84,10 +85,10 @@ function ContactInformationPage({
<small className="text-sm text-red-500">{errors.user_email}</small>
</div>
</div>
<p className="text-breeSerif font-medium text-center w-9/10 mx-auto text-violet-900 cursor-pointer underline text-[18px]" onClick={() => setModalIsOpen(true)}>Learn why we need that data</p>
<div className="flex justify-center gap-5 items-center w-full">
<Button text="Back" clas="tracking-wider px-6 text-white focus:outline-none" onClick={handleBackPage}/>
<Button text="Submit" clas="tracking-wider px-6 text-white bg-gradient-to-b from-blue-600 to-blue-800 shadow-buttonShadow focus:outline-none" onClick={(e) => {
<p className="text-breeSerif xs:text-[16px] font-medium text-center w-9/10 mx-auto text-violet-900 cursor-pointer underline text-[18px]" onClick={() => setModalIsOpen(true)}>Learn why we need that data</p>
<div className="flex justify-evenly sm:justify-center gap-5 items-center w-full">
<Button text="Back" clas="tracking-wider md:text-[23px] md:px-7 xs:text-[20px] xs:px-7 px-16 text-white focus:outline-none" onClick={handleBackPage}/>
<Button text="Submit" clas="tracking-wider md:text-[23px] md:px-5 xs:text-[20px] xs:px-5 px-14 text-white bg-gradient-to-b from-blue-600 to-blue-800 shadow-buttonShadow focus:outline-none" onClick={(e) => {
if (validatePage()) {
handleNextPage();
handleSubmit(e);
Expand All @@ -102,12 +103,16 @@ function ContactInformationPage({
onClose={() => { setModalIsOpen(false) }}
closeOnEsc
className="bg-black bg-opacity-60 backdrop-blur-md"
width={320} height={290} >
<p className="font-breeSerif text-xl font-normal text-balance">Your name, email, and phone number are essential for us to contact you and coordinate the rescue process effectively. Providing accurate information will help us rescue animals promptly and ensure their safety and well-being. Thank you for your cooperation.</p>
width={300} height={290} >
<div className="font-breeSerif text-[17px] pt-3 px-2 flex flex-col space-y-4 text-justify">
<p className="">Your name, email, and phone number are essential for us to contact you and coordinate the rescue process effectively.</p>
<p> Providing accurate information will help us rescue animals promptly and ensure their safety and well-being. Thank you for your cooperation.</p>
</div>

</Rodal>
</div>
</div>
);
}

export default ContactInformationPage;
export default ContactInformationPage;
9 changes: 8 additions & 1 deletion tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,14 @@ module.exports = {
}
},
screens: {
'h-md': {'raw': '(max-height: 768px)'}
'h-md': {'raw': '(max-height: 768px)'},
sm: { max: "600px" },
lg: { max: "1800px" },
lgm: { max: "1140px" },
md: { max: "990px" },
xs: { max: "400px" },
minmd: "1700px",
minlg: "2100px",
},
animation: {
'fade-in': 'fade-in 0.5s ease-out',
Expand Down