Skip to content

Commit

Permalink
Merge branch 'dev' of github.com:BU-Spark/pitne-voter-app into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonjiang9142
jasonjiang9142 committed Jun 28, 2024
2 parents e1212c1 + caf5c95 commit 0d65fca
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 52 deletions.
105 changes: 56 additions & 49 deletions client/src/pages/ballotInfo/[candidate].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,29 +146,31 @@ export default function Candidate() {


return (
<div className="relative flex min-h-screen flex-col bg-[#d1e4fa] overflow-x-hidden">
<>
<header className="flex border-b border-solid border-b-white px-10 py-3"></header>

{/* Go Back button */}
<div className="flex mt-6">
<div className="mt-6">
<button
type="button"
onClick={() => router.back()}
className="rounded-full bg-[#d1e4fa] text-blue-700 flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden h-10 px-4 text-sm font-bold leading-normal tracking-[0.015em] w-full max-w-[480px] lg:w-auto"
className="rounded-full bg-[#d1e4fa] text-blue-700 flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden h-10 px-4 text-sm font-bold leading-normal tracking-[0.015em] max-w-[480px] lg:w-auto"
>
<ArrowBackIcon className="mr-2" /> {/* Add some margin to the right */}
<ArrowBackIcon className="mr-4" />
Go Back
</button>
</div>


{/* Actual candidate data */}
<div className="relative flex min-h-screen flex-col bg-[#d1e4fa] overflow-x-hidden justify-center">
{candidateData ? (
<div className="lg:px-40 md:px-20 px-10 flex flex-1 justify-center py-5">
<div className="lg:px-36 md:px-10 sm:px-10 px-6 flex flex-1 justify-center pb-5">
<div className="layout-content-container flex flex-col max-w-[960px] flex-1">
<div className="grid grid-cols-1 xl:grid-cols-4 gap-4 p-4">
<div className="flex p-4 md:col-span-3">
<div className="grid grid-cols-1 py-4">
<div className="flex justify-center lg:p-4 md:p-4 sm:p-4 md:col-span-3">

<div className="flex w-full flex-col gap-4 md:flex-row md:justify-between md:items-center">
<div className="flex w-full flex-col gap-4 md:flex-row md:justify-center md:items-center">
<div className="flex gap-4 flex-col md:flex-row">
{/* Candidate image */}
<div className="flex justify-center items-center h-full">
Expand All @@ -180,8 +182,8 @@ export default function Candidate() {
></div>
</div>
{/* Name, role, party */}
<div className="flex flex-col justify-center text-center lg:text-left">
<h1 className="text-3xl md:text-4xl lg:text-6xl font-bold mb-2 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
<div className="flex flex-col justify-center text-center lg:text-left md:text-left">
<h1 className="pb-2 text-3xl md:text-4xl lg:text-6xl font-bold mb-2 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
{candidateData?.Name}
</h1>
<p className="text-blue-700 text-xl md:text-2xl leading-normal">
Expand All @@ -190,54 +192,59 @@ export default function Candidate() {
<p className="text-blue-700 text-xl md:text-2xl leading-normal">
{candidateData?.Party}
</p>


{/* Links */}
<div className="flex flex-row items-center justify-center lg:justify-normal md:justify-normal pt-4 text-center md:col-span-1">
{candidateData.CampaignSiteLink && (
<ButtonFillEx
name="Campaign Site"
link={candidateData.CampaignSiteLink}
className="p-4 mr-2 xl:my-2 rounded-full bg-white text-blue-700 border-blue-800 hover:bg-gray-200"
/>
)}
{candidateData.LinkedinLink && (
<ButtonFillEx
name="Linkedin"
link={candidateData.LinkedinLink}
className="p-4 ml-2 xl:my-2 rounded-full bg-white text-blue-700 border-blue-800 hover:bg-gray-200"
/>
)}
</div>

</div>
</div>
</div>
</div>

{/* Links */}
<div className="flex flex-row xl:flex-col justify-center items-center p-4 text-center md:col-span-1">
{candidateData.CampaignSiteLink && (
<ButtonFillEx
name="Campaign Site"
link={candidateData.CampaignSiteLink}
className="p-4 mx-2 xl:my-2 rounded-full bg-white text-blue-700 border-blue-800 hover:bg-gray-200"
/>
)}
{candidateData.LinkedinLink && (
<ButtonFillEx
name="Linkedin"
link={candidateData.LinkedinLink}
className="p-4 mx-2 xl:my-2 rounded-full bg-white text-blue-700 border-blue-800 hover:bg-gray-200"
/>
)}
</div>
</div>


{/* Questions and Answers */}
<div className="flex flex-col justify-center items-center py-8 my-2">
<p className="text-4xl font-semibold mb-8 text-center">Questions curated by the founder, journalist Yawu Miller</p>
{Object.entries(questionsAndAnswers).map(([index, qa]) => (
qa.question && qa.answer ? (
<Accordion key={index} className='bg-white w-full lg:w-3/4 md:w-3/4 mb-3 rounded-md'>

{/* Question */}
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`panel${index}-content`} id={`panel${index}-header`}>
<Typography className='text-blue-700 text-xl'>{qa.question}</Typography>
</AccordionSummary>

{/* Answer */}
<AccordionDetails>
<Typography className='mb-8 text-xl text-center'>{qa.answer}</Typography>
</AccordionDetails>
</Accordion>
) : null
))}
</div>
{/* Questions and Answers if filled out */}
{Object.entries(questionsAndAnswers) &&
<div className="flex flex-col justify-center items-center py-8 my-2">
<p className="text-4xl font-semibold mb-4 text-center">Questions curated by the founder, journalist Yawu Miller</p>
{Object.entries(questionsAndAnswers).map(([index, qa]) => (
qa.question && qa.answer ? (
<Accordion key={index} className='bg-white w-full lg:w-3/4 md:w-3/4 mb-3 rounded-md'>

{/* Question */}
<AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls={`panel${index}-content`} id={`panel${index}-header`}>
<Typography className='text-blue-700 text-xl'>{qa.question}</Typography>
</AccordionSummary>

{/* Answer */}
<AccordionDetails>
<Typography className='mb-4 text-xl text-center'>{qa.answer}</Typography>
</AccordionDetails>
</Accordion>
) : null
))}
</div>
}
</div>
</div>
) : (null)}
</div>
</div>
</>
);
}
2 changes: 1 addition & 1 deletion client/src/pages/ballotInfo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export default function BallotInfo() {
<BallotInitative />
</>
) : (
<p className="text-xl font-semibold text-red-500">Please fill out the <u>address form</u> above and <u>select an election</u> to see your ballot information</p>
<p className="text-xl font-semibold text-red-500 text-center">Please fill out the <u>address form</u> above and <u>select an election</u> to see your ballot information.</p>
)}
</div>

Expand Down
4 changes: 2 additions & 2 deletions client/src/pages/ballotInfo/whatsOnTheBallot/ballotInitative.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default function BallotInitiative() {
<Card className="flex-1 my-8" sx={{ backgroundColor: '#f4f4f4', minWidth: 275 }}>
<CardContent>
<Typography className="text-xl underline">What is a vote YES?</Typography>
<ul className="list-disc list-outside text-lg pr-8 text-left pl-16 py-2">
<ul className="list-disc list-outside text-lg pr-8 text-left pl-8 lg:pl-16 md:pl-16 sm:pl-16 py-2">
{item.WhatIsYes.split('\n').map((line, index) => (
<li key={index}>{line}</li>
))}
Expand All @@ -143,7 +143,7 @@ export default function BallotInitiative() {
<Card className="flex-1 lg:my-8 mb-8" sx={{ backgroundColor: '#f4f4f4', minWidth: 275 }}>
<CardContent>
<Typography className="text-xl underline">What is a vote NO?</Typography>
<ul className="list-disc list-outside text-lg pr-8 text-left pl-16 py-2">
<ul className="list-disc list-outside text-lg pr-8 text-left pl-8 lg:pl-16 md:pl-16 sm:pl-16 py-2">
{item.WhatIsNo.split('\n').map((line, index) => (
<li key={index}>{line}</li>
))}
Expand Down

0 comments on commit 0d65fca

Please sign in to comment.