consistency styling for headers and footers

BU-Spark · Jun 20, 2024 · d1cc77e · d1cc77e
1 parent ff9acde
commit d1cc77e
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 16 deletions.
diff --git a/client/src/pages/ballotInfo/index.tsx b/client/src/pages/ballotInfo/index.tsx
@@ -26,7 +26,7 @@ export default function BallotInfo() {
             <div className='flex flex-col justify-center items-center p-4 text-center my-4'>
                 <h1 className='text-blue-700 font-bold text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'>Ballot Info</h1>
                 <h1 className='p-5 mt-2 text-blue-700 font-bold text-3xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'>LEARN. PLAN.</h1>
-                <h1 className='font-semibold text-xl p-3 mt-2'>Explore the elections, candidates, and crucial issues personalized to your community.</h1>
+                <h1 className='font-semibold text-2xl p-5'>Explore the elections, candidates, and crucial issues personalized to your community.</h1>
             </div>
 
 
@@ -56,9 +56,9 @@ export default function BallotInfo() {
 
             {/* Footer */}
             <div className='flex flex-col justify-center items-center p-4 text-center my-6'>
-                <h1 className='font-semibold text-l'>You may be wondering ...</h1>
-                <ButtonFill name='What are my Voting Options' link='/votingOptions' variant='outlined' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-100' />
-                <ButtonFill name='Basic Election Info' link='/upcomingElections' variant='outlined' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-100' />
+                <h1 className='font-semibold text-lg'>You may be wondering...</h1>
+                <ButtonFill name='What are my Voting Options' link='/votingOptions' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
+                <ButtonFill name='Basic Election Info' link='/upcomingElections' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
             </div>
         </div>
     )

diff --git a/client/src/pages/dropBoxLocations/index.tsx b/client/src/pages/dropBoxLocations/index.tsx
@@ -13,7 +13,7 @@ export default function DropBoxLocations() {
             {/* Header */}
             <div className='flex flex-col justify-center items-center p-4 text-center'>
                 <h1 className='text-blue-700 font-bold text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'>Drop Box Locations</h1>
-                <h1 className='font-semibold text-xl p-5'>Find the nearest ballot drop-off station in your area</h1>
+                <h1 className='font-semibold text-2xl p-5'>Find the nearest ballot drop-off station in your area</h1>
             </div>
 
 
@@ -31,8 +31,8 @@ export default function DropBoxLocations() {
 
 
             {/* Footer */}
-            <div className='flex flex-col justify-center items-center p-4 mb-10'>
-                <p className=' font-semibold p-4'>You may be wondering.....</p>
+            <div className='flex flex-col justify-center items-center p-4 text-center my-6'>
+                <h1 className='font-semibold text-lg'>You may be wondering...</h1>
                 <ButtonFill name='What&#39;s on the Ballot' link='/ballotInfo' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
                 <ButtonFill name='Basic Election Info' link='/upcomingElections' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
             </div>

diff --git a/client/src/pages/upcomingElections/index.tsx b/client/src/pages/upcomingElections/index.tsx
@@ -10,29 +10,35 @@ import NavBar from "@/components/nav/NavBar";
 export default function UpcomingElections() {
 
     return (
-        <div className=''>
+        <div>
             <NavBar />
+
+            {/* Header */}
             <div className='flex flex-wrap justify-center items-center p-4 text-center my-4'>
                 <h1 className='text-blue-700 font-bold text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent'>LET&#39;S VOTE! </h1>
                 <img src='/StarColor.png' alt='Star' className='ml-4 w-10 h-10' />
-                <p className='font-semibold text-xl p-5'>The most important information about Boston&#39;s municipal elections to help you navigate your voting journey</p>
+                <p className='font-semibold text-2xl p-5'>The most important information about Boston&#39;s municipal elections to help you navigate your voting journey</p>
             </div>
 
 
+            {/* Buttons */}
             <div className='flex flex-col justify-center items-center p-4' >
                 <ButtonFill name='Your Voter Info' link='/voterInfo' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
                 <ButtonFillEx name='How do I register' link='https://www.boston.gov/departments/elections/how-register-vote' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
                 <DeadlineToRegister />
             </div>
 
-            <h1 className="text-center font-semibold text-3xl m-10">Boston&#39;s Upcoming Election Dates</h1>
 
+            {/* Election Dates */}
+            <h1 className="text-center font-semibold text-3xl m-10">Boston&#39;s Upcoming Election Dates</h1>
             <div className="flex items-center justify-center flex-wrap">
                 <ElectionDates />
             </div>
 
-            <div className='flex flex-col justify-center items-center p-4 my-10'>
-                <p className=' font-semibold p-4'>You may be wondering.....</p>
+
+            {/* Footer */}
+            <div className='flex flex-col justify-center items-center p-4 text-center my-6'>
+                <h1 className='font-semibold text-lg'>You may be wondering...</h1>
                 <ButtonFill name='What&#39;s on the Ballot' link='/ballotInfo' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
                 <ButtonFill name='What are my voting options' link='/votingOptions' className='p-4 m-4 rounded-full bg-blue-700 text-white' />
             </div>

diff --git a/client/src/pages/voterInfo/index.tsx b/client/src/pages/voterInfo/index.tsx
@@ -57,7 +57,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-xl 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>
+                <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>
                 <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
@@ -173,13 +173,13 @@ const DropDownInfo = () => {
       </Grid>
 
       {/* Additional info button */}
-      <div className="w-full max-w-full mt-10 text-center">
-        <Typography sx={{ fontSize: '18px' }}>Want to learn more about early voting in Boston?</Typography>
+      <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"><strong>
+      <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>