Clean up Notification and Profile modals

frontend/.eslintrc.json

@@ -21,7 +21,8 @@
 		"react/no-array-index-key": "warn",
 		"no-return-assign": "off",
 		"react/jsx-props-no-spreading": "off",
-		"eslint-plugin-import/no-cycle": "off"
+		"eslint-plugin-import/no-cycle": "off",
+		"no-nested-ternary": "off"
 	},
 	"ignorePatterns": ["build/", "node_modules/"]
 }

frontend/src/components/buttons/LogOutButton.jsx

@@ -4,12 +4,10 @@ export default function LogOutButton({ onClick }) {
 	return (
 		<button
 			type="button"
-			className="bg-mv-white w-100% h-100% items-center justify-center"
+			className="bg-mv-white w-full px-[24px] py-[10px] items-center justify-center rounded-[10px] border border-solid border-mid-grey"
 			onClick={onClick}
 		>
-			<div className="font-poppins text-base font-medium leading-6 text-center">
-				Log Out
-			</div>
+			<div className="text-mv-black text-sm font-medium">Log Out</div>
 		</button>
 	);
 }

frontend/src/components/cards/DefaultUpcomingAuctionCard.jsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 export default function DefaultUpcomingAuctionCard() {
 	return (
-		<div className="w-[315px] px-[62px] pt-[166px] pb-[178px] flex items-center justify-center rounded-[20px] bg-mv-grey shadow-defaultAuctionCardShadow">
-			<p className="text-sm font-medium text-mv-green text-center">
-				There are no upcoming auctions planned just yet. Please check back in at
-				a later date.
+		<div className="w-full px-[345px] pt-[233px] pb-[250px] flex items-center justify-center rounded-[20px] bg-mv-grey shadow-defaultAuctionCardShadow">
+			<p className="text-mv-green text-xl font-normal text-center">
+				There are no current auctions ongoing! Please check back in at a later
+				date.
 			</p>
 		</div>
 	);

frontend/src/components/cards/UpcomingAuctionCard.jsx

@@ -1,24 +1,24 @@
 import React from 'react';
-import defaultImage from '../../assets/truck.png';
 import { formatDateAuctionCard } from '../../utils/dateTime';
+import defaultImage from '../../assets/truck.png';
 import UpcomingAuctionCountdown from '../timers/UpcomingAuctionCountdown';
 
-export default function UpcomingAuctionCard({
+export default function CurrentAuctionCard({
 	imageUrls,
 	startDate,
 	endDate,
+	numberOfTrucks,
 	numberOfEquipment,
 	numberOfTrailers,
-	numberOfTrucks,
 	button,
 }) {
 	while (imageUrls.length < 4) {
 		imageUrls.push(defaultImage);
 	}
 
-	const gridHeight = 335;
-	const bottomHeightCard = 94;
-	const joinAuctionButtonHeight = 60;
+	const gridHeight = 452;
+	const bottomHeightCard = 100;
+	const joinAuctionButtonHeight = 72;
 
 	const adjustedCenter =
 		(gridHeight - bottomHeightCard) / 2 + bottomHeightCard / 2;
@@ -34,24 +34,23 @@ export default function UpcomingAuctionCard({
 				className="grid grid-cols-2 grid-rows-2 w-full"
 				style={{ height: `${gridHeight}px` }}
 			>
-				<div className="absolute top-[18px] right-[13px] z-10">
+				<div className="absolute top-[27px] right-[27px] z-10">
 					<UpcomingAuctionCountdown endDate={startDate} />
 				</div>
+
 				<div
-					className="absolute z-10 items-center justify-center w-[75%]"
+					className="absolute z-10 flex items-center justify-center w-full"
 					style={{
 						height: joinAuctionButtonHeight,
 						top: `${joinAuctionButtonTopOffset}px`,
-						left: '50%',
-						transform: 'translate(-50%, 0)',
 					}}
 				>
 					{button}
 				</div>
 
 				<div className="relative w-full h-full">
 					<img
-						src={imageUrls[0]}
+						src={defaultImage}
 						alt="Vehicle 1"
 						className="w-full h-full object-cover absolute rounded-tl-[20px]"
 					/>
@@ -83,15 +82,15 @@ export default function UpcomingAuctionCard({
 				</div>
 			</div>
 			<div
-				className="flex px-6 justify-between items-center w-full"
+				className="flex px-9 justify-between items-center w-full"
 				style={{ height: `${bottomHeightCard}px` }}
 			>
-				<h3 className="text-mv-black text-xl font-normal">
-					{`${formatDateAuctionCard(startDate)} -`}
-					<br />
-					{formatDateAuctionCard(endDate)}
+				<h3 className="text-mv-black text-2xl font-normal">
+					{`${formatDateAuctionCard(startDate)} - ${formatDateAuctionCard(
+						endDate
+					)}`}
 				</h3>
-				<div className="text-right text-mv-black text-[10px] font-normal leading-relaxed">
+				<div className="text-right text-mv-black text-xs font-normal leading-relaxed">
 					Featuring:
 					<br />
 					{numberOfTrucks > 0 && (