Buttons and styling for dropbox updated

BU-Spark · Jun 18, 2024 · b03c11e · b03c11e
1 parent 733de9a
commit b03c11e
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/client/src/pages/dropBoxLocations/index.tsx b/client/src/pages/dropBoxLocations/index.tsx
@@ -12,7 +12,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 '>Drop Box Locations</h1>
+                <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>
             </div>
 
@@ -25,16 +25,16 @@ export default function DropBoxLocations() {
 
             {/* Early voting button */}
             <div className='flex flex-col justify-center items-center p-4 m-10'>
-                <p className='md:w-3/4 lg:w-3/4 sm:w-1/2 text-xl text-center'>Need to know the early voting locations? They are typically available 1-2 weeks before the early voting period starts for an election. See the link below to find the location nearest to you.</p>
-                <ButtonFillEx name='Early Voting Locations' link='https://www.boston.gov/departments/elections/early-voting-boston#map--737516' className='p-4 m-4 rounded-full bg-blue-700 text-white'/>
+                <p className='md:w-3/4 lg:w-3/4 sm:w-1/2 text-xl text-center font-semibold'>Need to know the early voting locations? They are typically available 1-2 weeks before the early voting period starts for an election. See the link below to find the location nearest to you.</p>
+                <ButtonFillEx name='-> Early Voting Locations' link='https://www.boston.gov/departments/elections/early-voting-boston#map--737516' variant = 'outlined' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200'/>
             </div>
 
 
             {/* 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>
-                <ButtonFill name='What&#39;s on the Ballot' link='/ballotInfo' 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' />
+                <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>
         </div>
     )