Merge pull request #48 from BU-Spark/stylingBallot

Styling ballot
BU-Spark · Jun 25, 2024 · cc61371 · cc61371
2 parents c4ac8a0 + d91e2e2
commit cc61371
Showing 1 changed file with 18 additions and 15 deletions.
diff --git a/client/src/pages/ballotInfo/[candidate].tsx b/client/src/pages/ballotInfo/[candidate].tsx
@@ -7,10 +7,10 @@ import React, { use, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { localCandidateAPI, deployedCandidateAPI } from '@/common';
 import { all } from 'axios';
+import ButtonFillEx from '@/components/button/ButtonFillEx';
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
-
 interface CandidateAttributes {
     CampaignSiteLink: string | null;
     District: string;
@@ -125,24 +125,27 @@ export default function Candidate() {
 
 
     return (
-        <div>
+        <div className="p-4 #d1e4fa ">
             {candidateData ? (
                 <>
-                {/* Main content */}
-                <div className='max-w-2xl mx-auto p-4 #d1e4fa'></div>
-                <h1 className="text-4xl font-bold mb-4 justify-center text-center">{candidateData?.Name}</h1>
-                <div className="border-t border-gray-800 pt-4">
-                <div className="flex flex-col items-center">
-                    <p className="text-lg mb-2 font-semibold"> {candidateData.Party} </p>
-                    <p className="text-lg mb-2 font-semibold"> {candidateData.District} </p>
-                    <p className="text-lg mb-2 font-semibold"> {candidateData.ElectionName}</p>
+                <h1 className="text-6xl pb-2 font-bold mb-8 justify-center text-center bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">{candidateData?.Name}</h1>
+                <div className="border-t border-white pt-4">
+                <div className="flex flex-col ">
+                {/* <div className="bg-white rounded-lg shadow-xl p-18 flex flex-col"> */}
+
+                    <p className="text-3xl mb-2 font">{candidateData.Party} </p>
+                    <p className="text-xl mb-2">{candidateData.Role}</p>
+                    <p className="text-3xl mb-2">{candidateData.District} </p> {/*if all districts then do not display it*/}
+                    <p className="text-3xl mb-2">{candidateData.ElectionName}</p>
+
+                    <div className='flex flex-col justify-center items-center p-4 text-center my-6'>
                     {candidateData.CampaignSiteLink && (
-                        <p className="text-lg mb-2 font-semibold"> <a href={candidateData.CampaignSiteLink} className="text-blue-500">{candidateData.CampaignSiteLink}</a></p>
+                        <ButtonFillEx name='Campaign Site' link={candidateData.CampaignSiteLink} className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />
+
                     )}
                     {candidateData.LinkedinLink && (
-                        <p className="text-lg mb-2 font-semibold"> <a href={candidateData.LinkedinLink} className="text-blue-500">{candidateData.LinkedinLink}</a></p>
-                    )}
-                    <p className="text-lg mb-2 font-semibold"> {candidateData.Role}</p>
+                        <ButtonFillEx name='Linkedin Link' link={candidateData.LinkedinLink} className='p-4 m-4 rounded-full bg-white text-blue-700 border-blue-800  hover:bg-gray-200' />                    )}
+                    </div>
                 </div>
                 </div>
 
@@ -178,5 +181,5 @@ export default function Candidate() {
                 <p className="text-lg">Loading candidate data...</p>
             )}
         </div>
-    );
+    )
 }