more uniformity styling

BU-Spark · Jun 24, 2024 · 618df48 · 618df48
1 parent b09e599
commit 618df48
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 27 deletions.
diff --git a/client/src/pages/ballotInfo/ballotInitDropDown.tsx b/client/src/pages/ballotInfo/ballotInitDropDown.tsx
@@ -23,7 +23,7 @@ export default function BallotInitDropDown() {
                         id={`panel${index + 1}-header`}
                     >
 
-                        <Typography className='text-blue-700 text-lg'>{item.title}</Typography>
+                        <Typography className='text-blue-700 text-xl'>{item.title}</Typography>
                     </AccordionSummary>
 
                     <AccordionDetails>

diff --git a/client/src/pages/ballotInfo/electionCheckBox/electionCheckbox.tsx b/client/src/pages/ballotInfo/electionCheckBox/electionCheckbox.tsx
@@ -89,7 +89,7 @@ const ElectionCheckbox: React.FC<ElectionCheckboxProps> = ({ onCheck }) => {
                 <div className='grid grid-cols-4 mt-8'>
                     <div className='md:col-span-1 hidden md:block'>
                     </div>
-                    <div className="space-y-4 mx-10 my-1 py-8 rounded-2xl shadow-2xl border border-gray-200 col-span-4 lg:col-span-2 bg-white">
+                    <div className="space-y-4 mx-10 py-4 rounded-2xl shadow-2xl border border-gray-200 col-span-4 lg:col-span-2 bg-white">
                         <div className="space-y-4 w-full px-4">
                             <div className="w-full px-4 text-left text-lg">
                                 {sortedElectionDates.length === 0 ? (

diff --git a/client/src/pages/ballotInfo/electionCheckBox/electionCheckboxCard.tsx b/client/src/pages/ballotInfo/electionCheckBox/electionCheckboxCard.tsx
@@ -61,10 +61,9 @@ export default function ElectionCheckboxCard({ electionName, electionDate, onChe
 
 
     return (
-        <div className="space-y-4 w-full px-4">
+        <div className="space-y-2 w-full px-4 my-6">
             <div className='flex justify-between items-center'>
                 <h1 className='text-xl text-gray-600'>{electionName}</h1>
-                {/* Replace with Checkbox component with proper props */}
                 <Checkbox
                     checked={isChecked}
                     onChange={handleChange}

diff --git a/client/src/pages/ballotInfo/index.tsx b/client/src/pages/ballotInfo/index.tsx
@@ -51,15 +51,15 @@ export default function BallotInfo() {
                 {/* Don't make instance of candidate data till form and election are done */}
                 {(isFormSubmitted && selectedElection) ? (
                     <>
-                    <h1 className='font-semibold text-left text-2xl mt-4'>Candidates</h1>
+                    <h1 className='font-semibold text-left text-3xl mt-4'>Candidates</h1>
                     <CandidateData />
-                    <h1 className='font-semibold text-left text-2xl mt-4'>Ballot Initiatives</h1>
-                    <p>Put description here when Yawu sends it</p>
+                    <h1 className='font-semibold text-left text-3xl mt-4'>Ballot Initiatives</h1>
+                    <p className="text-xl my-2">Put description here when Yawu sends it</p>
                     <BallotInitDropDown />
                     </>
 
                 ) : (
-                    <p className="text-xl font-semibold text-red-600">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">Please fill out the <u>address form</u> above and <u>select an election</u> to see your ballot information</p>
                 )}
             </div>
 

diff --git a/client/src/pages/ballotInfo/whatsOnTheBallot/candidateData.tsx b/client/src/pages/ballotInfo/whatsOnTheBallot/candidateData.tsx
@@ -153,7 +153,7 @@ export default function CandidateData() {
                                 aria-controls={`panel${index + 1}-content`}
                                 id={`panel${index + 1}-header`}
                             >
-                                <Typography className='text-blue-700 text-lg'>{role}</Typography>
+                                <Typography className='text-blue-700 text-xl'>{role}</Typography>
                             </AccordionSummary>
                             <AccordionDetails>
 

diff --git a/client/src/pages/voterInfo/index.tsx b/client/src/pages/voterInfo/index.tsx
@@ -25,7 +25,7 @@ export default function VoterInfo() {
 
                 {/* County (fixed for all Boston voters) */}
                 <div className='flex flex-col justify-center items-center p-4 my-6'>
-                    <h1 className='font-semibold text-center my-4 text-2xl'>Basic Voter Info</h1>
+                    <h1 className='font-semibold text-center my-4 text-3xl'>Basic Voter Info</h1>
                     <div className='grid grid-cols-4 mt-1'>
                         <div className='md:col-span-1 hidden md:block'>
                         </div>
@@ -44,8 +44,8 @@ export default function VoterInfo() {
 
                 {/* Polling location address form */}
                 <div className='flex flex-col justify-center items-center p-4 my-6'>
-                    <h1 className='font-semibold text-left mb-2 text-2xl' >Polling Location</h1>
-                    <p className='text-lg my-2 text-center md:w-1/2 lg:w-1/2 italic'>Reminder: You can vote at any polling location during the early voting period, but you <strong>MUST</strong> vote at the location below during election day based on your address.</p>
+                    <h1 className='font-semibold text-left mb-2 text-3xl' >Polling Location</h1>
+                    <p className='text-xl my-2 text-center md:w-1/2 lg:w-1/2 italic'>Reminder: You can vote at any polling location during the early voting period, but you <strong>MUST</strong> vote at the location below during election day based on your address.</p>
                     <AddressForm />
                 </div>
 
@@ -56,7 +56,7 @@ export default function VoterInfo() {
 
                 {/* Footer */}
                 <div className='flex flex-col justify-center items-center p-4 text-center my-6'>
-                    <h1 className='font-semibold text-lg md:w-1/4 lg:w-1/4 sm:w-1/2'>Now that you know where you can vote, let&#39;s explore exactly who and what you are voting for.</h1>
+                    <h1 className='font-semibold text-xl w-full sm:w-1/2 md:w-1/2 lg:w-1/2'>Now that you know where you can vote, let&#39;s explore exactly who and what you are voting for.</h1>
                     <ButtonFill name='Ballot Info' link='/ballotInfo' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
                 </div>
             </div>

diff --git a/client/src/pages/votingOptions/DropDownInfo.tsx b/client/src/pages/votingOptions/DropDownInfo.tsx
@@ -171,20 +171,6 @@ const DropDownInfo = () => {
           </Grid>
         ))}
       </Grid>
-
-      {/* Additional info button */}
-      <div className='flex flex-col justify-center items-center p-4 text-center my-6'>
-        <h1 className='font-semibold text-lg'>Want to learn more about early voting in Boston?</h1>
-        <ButtonFillEx name="Official Website" link="https://www.boston.gov/departments/elections/early-voting-boston" className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
-      </div>
-
-      {/* Contact info of Boston Elections Department */}
-      <div className="my-6 text-center text-lg"><strong>
-        <p>Need more information?</p>
-        <p>Contact Boston Elections Department:</p>
-        <p>617-635-8683</p>
-        <p>[email protected]</p>
-      </strong></div>
     </>
   );
 };

diff --git a/client/src/pages/votingOptions/index.tsx b/client/src/pages/votingOptions/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import DropDownInfo from './DropDownInfo';
 import NavBar from '@/components/nav/NavBar';
+import ButtonFillEx from '@/components/button/ButtonFillEx';
 
 const VotingOptions = () => {
     return (
@@ -10,6 +11,22 @@ const VotingOptions = () => {
                 <h1 className='font-semibold text-2xl p-5'>Everything you need to know about your voting options made simple!</h1>
             </div>
             <DropDownInfo />
+
+            {/* Additional info button */}
+            <div className='flex flex-col justify-center items-center p-4 text-center my-6'>
+                <h1 className='text-xl'>Want to learn more about early voting in Boston?</h1>
+                <ButtonFillEx name="Official Website" link="https://www.boston.gov/departments/elections/early-voting-boston" className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
+            </div>
+
+            {/* Contact info of Boston Elections Department */}
+            <div className="my-6 text-center text-xl">
+                <p>Need more information?</p>
+                <p>Contact Boston Elections Department:</p>
+                <strong>
+                <p>617-635-8683</p>
+                <p>[email protected]</p>
+                </strong>
+            </div>
         </div>
     )
 }