change

client/src/app/globals.css

@@ -33,10 +33,11 @@ body {
 }
 
 .bg-oval-wrapper {
-  position: absolute;
+  position: relative;
   display: flex;
   justify-content: center;
   padding: 0px ;
+  overflow: hidden; 
 }
 
 .bg-oval-wrapper::before {
@@ -47,7 +48,7 @@ body {
   transform: translate(-40%, -60%) rotate(68deg);
   width: 800%;
   max-width: 1000px;
-  height: 154%;
+  height: 122%;
   background: white;
   border-radius: 60%;
   z-index: -1;

client/src/components/button/ButtonFillEx.tsx

@@ -2,6 +2,7 @@
 import { Button, ButtonProps } from '@mui/material';
 import React from 'react';
 import { useRouter } from 'next/navigation';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 
 // Button name, description, variant, and onClick event are customizable
 // Note that description and variant are optional
@@ -13,8 +14,8 @@ type Props = {
 };
 
 
-// By default, variant is contained
-const ButtonFillEx = ({ name, link, variant = "contained", className }: Props) => {
+// By default, variant is outlined
+const ButtonFillEx = ({ name, link, variant="outlined", className }: Props) => {
 
     const router = useRouter();
     const handleClick = (page: string) => {
@@ -27,6 +28,7 @@ const ButtonFillEx = ({ name, link, variant = "contained", className }: Props) =
             variant={variant}
             onClick={() => handleClick(link)}
             disableElevation>
+            <ArrowForwardIcon />
             {name}
         </Button>
     );

client/src/components/nav/NavBar.tsx

@@ -122,7 +122,7 @@ function NavBar() {
 
 
           {/* BELOW IS FOR RESPONSIVE NAVBAR (CONDENSED DROP DOWN) */}
-          <StarIcon sx={{ display: { xs: 'flex', md: 'flex', lg: 'none' }, mr: 1, fontSize: '30px' }} /> {/* REPLACE WITH STAR LOGO */}
+          <StarIcon sx={{ display: { xs: 'flex', md: 'flex', lg: 'none' }, mr: 1, fontSize: '30px', color: '#204cdc',  animation: `${slideIn} 1s ease-out` }} /> {/* REPLACE WITH STAR LOGO */}
           <Typography
             variant="h5"
             noWrap
@@ -134,8 +134,9 @@ function NavBar() {
               flexGrow: 1,
               fontWeight: 700,
               fontSize: '35px',
-              color: 'inherit',
+              color: '#204cdc',
               textDecoration: 'none',
+              animation: `${slideIn} 1s ease-out`,
             }}
             onClick={() => {
               setActivePage('Upcoming Elections');

client/src/pages/ballotInfo/districtForm.tsx

@@ -8,11 +8,8 @@ import { Button, Grid, TextField } from '@mui/material';
 
 
 // Set base URL for Axios
-// const api = axios.create({
-//     baseURL: 'https://pitne-voter-app-express-production.up.railway.app/', // Point this to server URL
-// });
 const api = axios.create({
-    baseURL: 'http://localhost:3001', // Point this to server URL
+    baseURL: 'https://pitne-voter-app-express-production.up.railway.app/', // Point this to server URL
 });
 
 

client/src/pages/dropBoxLocations/index.tsx

@@ -26,7 +26,7 @@ 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 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'/>
+                <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-white text-blue-700 border-blue-800  hover:bg-gray-200'/>
             </div>
 
 

client/src/pages/index.tsx

@@ -2,7 +2,6 @@
 'use client';
 
 import React from 'react';
-import NavBar from '../components/nav/NavBar';
 import UpcomingElections from '@/pages/upcomingElections'; // Ensure this is the correct import path
 
 const Home = () => {

client/src/pages/upcomingElections/electionCard.tsx

@@ -48,7 +48,7 @@ export default function ElectionCard({ electionName = 'Preliminary Municipal Ele
                         {displayRegistrationDate} @ 5PM
                     </p>
                     <p className="m-2 text-center">
-                        Deadline for registration of voters for <strong>{electionName}</strong>.
+                        Deadline for registration of voters for <strong>{electionName}</strong>
                     </p>
                 </div>
 
@@ -57,7 +57,7 @@ export default function ElectionCard({ electionName = 'Preliminary Municipal Ele
                         {displayElectionDate} @ 7AM - 8PM
                     </p>
                     <p className="m-2 text-center">
-                        <strong>{electionName}.</strong>
+                        <strong>{electionName}</strong>
                     </p>
                 </div>
             </div>

client/src/pages/upcomingElections/index.tsx

@@ -21,7 +21,7 @@ export default function UpcomingElections() {
 
             <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' variant='outlined' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
+                <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>
 

client/src/pages/voterInfo/index.tsx

@@ -52,7 +52,7 @@ export default function VoterInfo() {
 
             <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'>Curious about your voting status? Check it here!</h1>
-                <ButtonFillEx name='-> Registration Status' link='https://www.sec.state.ma.us/voterregistrationsearch/' variant='outlined' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
+                <ButtonFillEx name='Registration Status' link='https://www.sec.state.ma.us/voterregistrationsearch/' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
             </div>
 
             {/* Footer */}

client/src/pages/votingOptions/DropDownInfo.tsx

@@ -18,19 +18,19 @@ const dropdownData = [
     title: 'Request Absentee Ballot',
     content: {
       paragraph1: 'Start your early voting process by requesting a absentee ballot for you or a family member. A few clicks is all it takes to ensure your participation in the upcoming election.',
-      buttonEx1Text: '-> Official absentee ballot application',
+      buttonEx1Text: 'Official absentee ballot application',
       buttonEx1Link: 'https://www.sec.state.ma.us/divisions/elections/download/absentee-ballot-applications/Absentee-Ballot-Application-English.pdf',
       paragraph2: 'Mail your completed application to:',
       paragraph3: 'Living outside of the US but still want to engage in Boston area elections?',
-      buttonEx2Text: '-> Overseas Assistance',
+      buttonEx2Text: 'Overseas Assistance',
       buttonEx2Link: 'https://www.sec.state.ma.us/divisions/elections/voting-information/military-and-overseas-voters.htm',
     }
   },
   {
     title: 'Mail-In Ballot',
     content: {
       paragraph1: 'After completing and submitting your application, an Absentee Ballot will be sent to you in the mail with a set of return envelopes and mail-instructions. Follow the instructions and track your ballot to ensure it is received.',
-      buttonEx1Text: '-> Track Your Ballot',
+      buttonEx1Text: 'Track Your Ballot',
       buttonEx1Link: 'https://www.sec.state.ma.us/WhereDoIVoteMA/TrackMyBallot'
     }
   },
@@ -46,7 +46,7 @@ const dropdownData = [
     title: 'In-Person Early Voting',
     content: {
       paragraph1: "During the early voting period, you do not have to vote at your assigned polling location, but any location that is convenient for you.",
-      buttonEx1Text: '-> Early Voting Locations',
+      buttonEx1Text: 'Early Voting Locations',
       buttonEx1Link: 'https://www.boston.gov/departments/elections/early-voting-boston#map--737516',
       paragraphRed: 'You have until 12 p.m. the Monday before the election to vote in person.'
     }
@@ -163,7 +163,7 @@ const DropDownInfo = () => {
                   </Typography>
                 )}
                 {item.content.buttonEx2Text && (
-                  <ButtonFillEx name={item.content.buttonEx2Text} link={item.content.buttonEx2Link} variant='outlined' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
+                  <ButtonFillEx name={item.content.buttonEx2Text} link={item.content.buttonEx2Link} className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
 
                 )}
               </AccordionDetails>
@@ -175,7 +175,7 @@ const DropDownInfo = () => {
       {/* 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>
-        <ButtonFillEx name="-> Official Website" link="https://www.boston.gov/departments/elections/early-voting-boston" variant='outlined' className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
+        <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 */}

server/app/index.ts

@@ -8,8 +8,13 @@ import cors from 'cors';
 dotenv.config(); // Load environment variables
 
 const app = express();
+<<<<<<< HEAD
 // const port = process.env.PORT || 3001;
 const port = 3001;;
+=======
+const port = process.env.PORT || 3001;
+// const port = 3001;
+>>>>>>> fefdfacbee99b321eb7f5621d0c6b51cb16d9372
 
 app.use(cors()); // Needed to send data back to frontend