Merge pull request #59 from nolanblakethompson/UI-edits

UI edits

README.md

@@ -31,7 +31,7 @@ The Boston Voter App provides a comprehensive solution by offering:
 2. Install dependencies:
     ```bash
     npm install
-    ```
+    ``` 
 
 3. Navigate to the client directory, install dependencies, and start client server
     ```bash

client/.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

client/src/app/globals.css

@@ -3,9 +3,10 @@
 @tailwind utilities;
 
 body {
-    background-color: #d1e4fa;
+    background-color: #f0f9ff;
     margin: 0;
     padding: 0;
+    color:#172554;
   }
 
   @media (max-width: 640px) {
@@ -32,7 +33,7 @@ body {
     }
 }
 
-.bg-oval-wrapper {
+/*.bg-oval-wrapper {
   position: relative;
   display: flex;
   justify-content: center;
@@ -49,10 +50,10 @@ body {
   width: 800%;
   max-width: 1000px;
   height: 122%;
-  background: white;
+  background: rgba(255, 255, 255, 0.314);
   border-radius: 60%;
   z-index: -1;
-}
+}*/
 
 .people-card {
   background-color: #2196f3; /* Default background color */
@@ -69,4 +70,16 @@ body {
 
 .inline-block-child {
   display: inline-block;
-}
+}
+
+
+.bg-gradient-custom {
+  background: #f0f9ff;
+  transition: box-shadow 0.3s; /* Smooth transition effect */
+}
+
+.bg-gradient-custom:hover {
+
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
+}
+

client/src/components/button/CustomCard.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Card, CardContent, CardMedia, Typography, CardActions } from '@mui/material';
+import ButtonFill from './ButtonFill';
+
+interface CustomCardProps {
+  image: string;
+  title?: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+  className?: string;
+  disableTitle?: boolean;
+  variant?: 'primary' | 'secondary' | 'custom';
+  customBgColor?: string; 
+}
+
+const CustomCard: React.FC<CustomCardProps> = ({
+  image,
+  title,
+  description,
+  buttonText,
+  buttonLink,
+  className,
+  disableTitle = false,
+  variant = 'primary', // Default variant
+  customBgColor,
+}) => {
+
+
+
+  let bgColor;
+  switch (variant) {
+    case 'primary':
+      bgColor = '#ede9fe'; 
+      break;
+    case 'secondary':
+      bgColor = '#ddd6fe';
+      break;
+    case 'custom':
+      bgColor = customBgColor || '#ffffff'; 
+      break;
+    default:
+      bgColor = '#ffffff'; 
+  }
+
+  return (
+    <Card sx={{ width: '100%', maxWidth: 600, maxHeight: 600, backgroundColor: bgColor }}>
+      <CardMedia
+        component="img"
+        height="140"
+        image={image}
+        alt={title}
+      />
+
+      <CardContent>
+        {!disableTitle && title && (
+          <Typography gutterBottom variant="h5" component="div">
+            {title}
+          </Typography>
+        )}
+        <Typography variant="body2" color="#172554">
+          {description}
+        </Typography>
+
+      </CardContent>
+      <CardActions sx={{ justifyContent: 'flex-end' }}>
+        <ButtonFill
+          name={buttonText}
+          link={buttonLink}
+          className={className || ''}
+          variant="text"
+        />
+      </CardActions>
+    </Card>
+  );
+}
+
+export default CustomCard;

client/src/components/nav/NavBar.tsx

@@ -59,11 +59,11 @@ function NavBar() {
 
 
   return (
-    <AppBar position="static" className="bg-transparent shadow-none text-gray-800 my-4">
+    <AppBar position="fixed" className="bg-gradient-custom shadow-none text-gray-800 my-0" style={{ zIndex: 1000, top: 0, width: '100%' }}>
       <Container maxWidth="xl">
         <Toolbar disableGutters>
           {/* BELOW IS FOR STANDARD NAVBAR */}
-          <StarIcon sx={{ display: { xs: 'none', md: 'none', lg: 'flex' }, mr: 1, fontSize: '26px', color: '#204cdc', animation: `${slideIn} 1s ease-out` }} /> {/* REPLACE WITH STAR LOGO */}
+          <StarIcon sx={{ display: { xs: 'none', md: 'none', lg: 'flex' }, mr: 1, fontSize: '20px', color: '#204cdc' }} /> {/* REPLACE WITH STAR LOGO */}
           <Typography
             variant="h6"
             noWrap
@@ -72,10 +72,10 @@ function NavBar() {
             sx={{
               display: { xs: 'none', md: 'none', lg: 'flex' },
               fontWeight: 700,
-              fontSize: '28px',
+              fontSize: '20px',
               color: '#204cdc',
               textDecoration: 'none',
-              animation: `${slideIn} 1s ease-out`, 
+
             }}
             onClick={() => {
               handleClick('Upcoming Elections');
@@ -125,7 +125,12 @@ function NavBar() {
 
 
           {/* BELOW IS FOR RESPONSIVE NAVBAR (CONDENSED DROP DOWN) */}
-          <StarIcon sx={{ display: { xs: 'flex', md: 'flex', lg: 'none' }, mr: 1, fontSize: '30px', color: '#204cdc',  animation: `${slideIn} 1s ease-out` }} /> {/* REPLACE WITH STAR LOGO */}
+          <Box sx={{
+                display: 'flex',
+                justifyContent: 'flex-end', // Align items to the right
+                alignItems: 'center', // Center items vertically
+               }}>
+          <StarIcon sx={{ display: { xs: 'flex', md: 'flex', lg: 'none' }, mr: 1, fontSize: '20px', color: '#204cdc',  justifyContent: 'flex-end', }} /> {/* REPLACE WITH STAR LOGO */}
           <Typography
             variant="h5"
             noWrap
@@ -136,24 +141,37 @@ function NavBar() {
               display: { xs: 'flex', md: 'flex', lg: 'none' },
               flexGrow: 1,
               fontWeight: 700,
-              fontSize: '35px',
+              fontSize: '20px',
               color: '#204cdc',
               textDecoration: 'none',
-              animation: `${slideIn} 1s ease-out`,
+              justifyContent: 'flex-end',
             }}
+
             onClick={() => {
               handleClick('Upcoming Elections');
-            }}
-          >
+            }} >
             Boston Voter
           </Typography>
+          </Box>
+
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'none', lg: 'flex' }, justifyContent: 'right' }}>
             {pages.map((page) => (
               <Button
                 key={page}
                 onClick={() => handleClick(page)}
-                className={`hover:underline hover:bg-transparent m-4 ${isActive(links[page]) ? 'bg-blue-700 rounded-full text-white px-2 hover:text-blue-700' : ''}`}
-                sx={{ my: 2, display: 'block' }}
+                className={`m-4 ${isActive(links[page]) ? 'border-b-4 border-red-600 text-blue-950 px-2 ' : ''}`}
+
+
+              sx={{
+                 my: 2,
+                display: 'block',
+                transition: 'font-size 0.3s ease',
+                '&:hover': {
+                fontSize: '100%',
+                color: '#172554',
+                backgroundColor: 'transparent',
+                 },
+               }}
               >
                 {page}
               </Button>
@@ -165,3 +183,4 @@ function NavBar() {
   );
 }
 export default NavBar;
+

client/src/pages/ballotInfo/[candidate].tsx

@@ -148,25 +148,22 @@ export default function Candidate() {
     return (
         <>
             <header className="flex border-b border-solid border-b-white px-10 py-3"></header>
-
-            {/* Go Back button */}
-            <div className="mt-6">
+            {/* Actual candidate data */}
+            <div className="relative flex min-h-screen flex-col bg-[#d1e4fa] overflow-x-hidden justify-center bg-sky-100">
+            <div className="mt-20 m-10">
+                 {/* Go Back button */}
                 <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] 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 bg-transparent hover:bg-blue-200"
                 >
                     <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-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="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 bg-sky-50 rounded">
                         <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">
 
@@ -183,13 +180,13 @@ export default function Candidate() {
                                         </div>
                                         {/* Name, role, party */}
                                         <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">
+                                            <h1 className="pb-2 text-3xl md:text-4xl lg:text-6xl font-bold mb-2 bg-blue-950 bg-clip-text text-transparent">
                                                 {candidateData?.Name}
                                             </h1>
-                                            <p className="text-blue-700 text-xl md:text-2xl leading-normal">
+                                            <p className="text-xl md:text-2xl leading-normal">
                                                 {candidateData?.Role}
                                             </p>
-                                            <p className="text-blue-700 text-xl md:text-2xl leading-normal">
+                                            <p className=" text-xl md:text-2xl leading-normal">
                                                 {candidateData?.Party}
                                             </p>
 
@@ -222,7 +219,7 @@ export default function Candidate() {
                         {/* 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'>
@@ -237,11 +234,15 @@ export default function Candidate() {
                                                 <Typography className='mb-4 text-xl text-center'>{qa.answer}</Typography>
                                             </AccordionDetails>
                                         </Accordion>
+
                                     ) : null
                                 ))}
+                                 <p className="font-semibold mb-4 text-center mt-10">Questions curated by the founder, journalist Yawu Miller.</p>
                             </div>
+
                         }
                     </div>
+
                 </div>
             ) : (null)}
             </div>