From df61746493be4e70ec633c5a1909bd18926ed4bd Mon Sep 17 00:00:00 2001
From: Lance Tan <ltan0521@gmail.com>
Date: Thu, 11 Apr 2024 17:54:49 -0700
Subject: [PATCH] Some design fixes

---
 backend/vehicle/helpers.py                     |  2 +-
 .../src/components/buttons/AddToListButton.jsx |  2 +-
 .../buttons/AwaitingApprovalButton.jsx         |  2 +-
 .../src/components/buttons/LogInButton.jsx     |  2 +-
 .../buttons/LogInJoinAuctionButton.jsx         |  2 +-
 .../buttons/RegisterForAuctionButton.jsx       |  2 +-
 .../components/buttons/StartBiddingButton.jsx  |  4 ++--
 .../src/components/buttons/ViewModelButton.jsx |  2 +-
 .../components/cards/CurrentAuctionCard.jsx    |  4 +---
 ...ngInputField.jsx => RegisterInputField.jsx} |  2 +-
 .../src/components/inputs/SignInInputField.jsx | 18 ++++++++++++++++++
 frontend/src/components/navBars/NavBar.jsx     |  8 ++++----
 frontend/src/pages/ListingsPage.jsx            |  7 +++----
 frontend/src/pages/VehicleDetailsPage.jsx      |  6 +++++-
 .../src/pages/auth/bidders/BidderLogInPage.jsx | 16 ++++++++--------
 .../pages/auth/bidders/BidderRegisterPage.jsx  | 18 +++++++++---------
 .../pages/auth/bidders/ForgotPasswordPage.jsx  |  8 ++++----
 17 files changed, 62 insertions(+), 43 deletions(-)
 rename frontend/src/components/inputs/{OnboardingInputField.jsx => RegisterInputField.jsx} (89%)
 create mode 100644 frontend/src/components/inputs/SignInInputField.jsx

diff --git a/backend/vehicle/helpers.py b/backend/vehicle/helpers.py
index 37107b4..c240841 100644
--- a/backend/vehicle/helpers.py
+++ b/backend/vehicle/helpers.py
@@ -50,7 +50,7 @@ def parse_excel_to_vehicle(excel_file):
         if brand is None or type is None:
             continue
         vehicle, created = Vehicle.objects.get_or_create(
-            brand=brand, vehicle_type=type, **vehicle_data
+            brand=brand, type=type, **vehicle_data
         )
 
         vehicles.append(vehicle)
diff --git a/frontend/src/components/buttons/AddToListButton.jsx b/frontend/src/components/buttons/AddToListButton.jsx
index 26255d6..1e24a8b 100644
--- a/frontend/src/components/buttons/AddToListButton.jsx
+++ b/frontend/src/components/buttons/AddToListButton.jsx
@@ -6,7 +6,7 @@ export default function AddToListButton({ onClick, size = 'sm' }) {
 		<button
 			type="button"
 			className={`bg-mv-white border-mv-green border-solid border rounded-[5px] shadow-searchBarShadow w-full flex items-center justify-center whitespace-nowrap ${
-				size === 'sm' ? 'px-[20px] py-[10px]' : 'py-[16px]'
+				size === 'sm' ? 'px-[20px] py-[10px]' : 'px-[65px] py-[16px]'
 			}`}
 			onClick={onClick}
 		>
diff --git a/frontend/src/components/buttons/AwaitingApprovalButton.jsx b/frontend/src/components/buttons/AwaitingApprovalButton.jsx
index 0972114..ba6fe51 100644
--- a/frontend/src/components/buttons/AwaitingApprovalButton.jsx
+++ b/frontend/src/components/buttons/AwaitingApprovalButton.jsx
@@ -4,7 +4,7 @@ export default function AwaitingApprovalButton() {
 	return (
 		<button
 			type="button"
-			className="bg-[#ECECEC] rounded-[10px] inline-flex px-[24px] py-[10px] flex-start shrink-0 items-center justify-center h-[60px] hover:cursor-default"
+			className="bg-[#ECECEC] rounded-[10px] max-w-[286px] w-full inline-flex px-[24px] py-[10px] flex-start shrink-0 items-center justify-center h-[60px] hover:cursor-default"
 		>
 			<div className="text-dark-grey text-sm font-semibold italic">
 				Awaiting Deposit Approval
diff --git a/frontend/src/components/buttons/LogInButton.jsx b/frontend/src/components/buttons/LogInButton.jsx
index 6b3be50..1aeed14 100644
--- a/frontend/src/components/buttons/LogInButton.jsx
+++ b/frontend/src/components/buttons/LogInButton.jsx
@@ -4,7 +4,7 @@ export default function LogInButton({ onClick }) {
 	return (
 		<button
 			type="button"
-			className="bg-mv-white border-solid border-2 border-mv-green rounded-[10px] w-[45%] h-[59px] items-center justify-center"
+			className="bg-mv-white border-solid border-2 border-mv-green rounded-[10px] w-full h-[59px] items-center justify-center"
 			onClick={onClick}
 		>
 			<div className="text-mv-green text-xl font-normal">Log In</div>
diff --git a/frontend/src/components/buttons/LogInJoinAuctionButton.jsx b/frontend/src/components/buttons/LogInJoinAuctionButton.jsx
index ce2b044..b0d8cf3 100644
--- a/frontend/src/components/buttons/LogInJoinAuctionButton.jsx
+++ b/frontend/src/components/buttons/LogInJoinAuctionButton.jsx
@@ -11,7 +11,7 @@ export default function LogInJoinAuctionButton() {
 	return (
 		<button
 			type="button"
-			className="bg-mv-green rounded-[10px] flex w-full flex-start shrink-0 items-center justify-center h-full"
+			className="bg-mv-green rounded-[10px] flex w-full max-w-[231px] flex-start shrink-0 items-center justify-center h-full"
 			onClick={handleClick}
 		>
 			<div className="text-mv-white text-sm font-medium">
diff --git a/frontend/src/components/buttons/RegisterForAuctionButton.jsx b/frontend/src/components/buttons/RegisterForAuctionButton.jsx
index 802960d..b521427 100644
--- a/frontend/src/components/buttons/RegisterForAuctionButton.jsx
+++ b/frontend/src/components/buttons/RegisterForAuctionButton.jsx
@@ -11,7 +11,7 @@ export default function RegisterForAuctionButton() {
 	return (
 		<button
 			type="button"
-			className="bg-mv-green rounded-[10px] inline-flex px-[36.5px] py-[25px] flex-start shrink-0 items-center justify-center h-[74px]"
+			className="bg-mv-green rounded-[10px] inline-flex px-[36.5px] py-[25px] max-w-[231px] flex-start shrink-0 items-center justify-center h-[74px]"
 			onClick={handleClick}
 		>
 			<div className="text-mv-white text-sm font-medium">
diff --git a/frontend/src/components/buttons/StartBiddingButton.jsx b/frontend/src/components/buttons/StartBiddingButton.jsx
index ffd06e2..71242b7 100644
--- a/frontend/src/components/buttons/StartBiddingButton.jsx
+++ b/frontend/src/components/buttons/StartBiddingButton.jsx
@@ -4,10 +4,10 @@ export default function StartBiddingButton({ onClick }) {
 	return (
 		<button
 			type="button"
-			className="bg-mv-green rounded-[10px] inline-flex px-[55px] py-[23.5px] flex-start shrink-0 items-center justify-center h-[74px]"
+			className="bg-mv-green rounded-[10px] inline-flex px-[55px] py-[23.5px] max-w-[231px] flex-start shrink-0 items-center justify-center h-[74px]"
 			onClick={onClick}
 		>
-			<div className="text-mv-white text-lg font-medium">Start Bidding!</div>
+			<div className="text-mv-white text-lg font-normal">Start Bidding!</div>
 		</button>
 	);
 }
diff --git a/frontend/src/components/buttons/ViewModelButton.jsx b/frontend/src/components/buttons/ViewModelButton.jsx
index ad4be14..28d324c 100644
--- a/frontend/src/components/buttons/ViewModelButton.jsx
+++ b/frontend/src/components/buttons/ViewModelButton.jsx
@@ -14,7 +14,7 @@ export default function ViewModelButton({ onClick, size = 'sm' }) {
 	return (
 		<button
 			type="button"
-			className={`bg-mv-green border-solid border-mv-green rounded-[5px] shadow-searchBarShadow flex items-center justify-center gap-2.5 ${buttonStyle[size]}`}
+			className={`bg-mv-green border-solid border-mv-green rounded-[5px] shadow-searchBarShadow w-full flex items-center justify-center gap-2.5 ${buttonStyle[size]}`}
 			onClick={onClick}
 		>
 			<div className={`text-mv-white font-medium ${textStyle[size]}`}>
diff --git a/frontend/src/components/cards/CurrentAuctionCard.jsx b/frontend/src/components/cards/CurrentAuctionCard.jsx
index 3d43429..f4fed2c 100644
--- a/frontend/src/components/cards/CurrentAuctionCard.jsx
+++ b/frontend/src/components/cards/CurrentAuctionCard.jsx
@@ -41,12 +41,10 @@ export default function CurrentAuctionCard({
 				/>
 
 				<div
-					className="absolute z-10 items-center justify-center w-[23%]"
+					className="absolute z-10 flex items-center justify-center w-full"
 					style={{
 						height: joinAuctionButtonHeight,
 						top: `${joinAuctionButtonTopOffset}px`,
-						left: '50%',
-						transform: 'translate(-50%, 0)',
 					}}
 				>
 					{button}
diff --git a/frontend/src/components/inputs/OnboardingInputField.jsx b/frontend/src/components/inputs/RegisterInputField.jsx
similarity index 89%
rename from frontend/src/components/inputs/OnboardingInputField.jsx
rename to frontend/src/components/inputs/RegisterInputField.jsx
index 3796819..3b8072e 100644
--- a/frontend/src/components/inputs/OnboardingInputField.jsx
+++ b/frontend/src/components/inputs/RegisterInputField.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function OnboardingInputField({
+export default function RegisterInputField({
 	placeholder,
 	type,
 	value,
diff --git a/frontend/src/components/inputs/SignInInputField.jsx b/frontend/src/components/inputs/SignInInputField.jsx
new file mode 100644
index 0000000..5bfa4a4
--- /dev/null
+++ b/frontend/src/components/inputs/SignInInputField.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function SignInInputField({
+	placeholder,
+	type,
+	value,
+	onChange,
+}) {
+	return (
+		<input
+			placeholder={placeholder}
+			type={type}
+			className="border-solid rounded-[10px] border-[2px] border-border-dark-grey pt-[15px] pl-[21px] pb-[11px] text-base font-medium focus:outline-none w-full placeholder:text-onboarding-placeholder text-mv-black"
+			value={value}
+			onChange={onChange}
+		/>
+	);
+}
diff --git a/frontend/src/components/navBars/NavBar.jsx b/frontend/src/components/navBars/NavBar.jsx
index d16af95..9a868ea 100644
--- a/frontend/src/components/navBars/NavBar.jsx
+++ b/frontend/src/components/navBars/NavBar.jsx
@@ -95,12 +95,12 @@ export default function NavBar() {
 				>
 					{notificationHover ? (
 						<NotificationsIcon
-							sx={{ fontSize: 35 }}
+							sx={{ fontSize: 24 }}
 							className="text-mv-green hover:cursor-pointer"
 						/>
 					) : (
 						<NotificationsOutlinedIcon
-							sx={{ fontSize: 35 }}
+							sx={{ fontSize: 24 }}
 							className="text-mv-black hover:cursor-pointer"
 						/>
 					)}
@@ -131,12 +131,12 @@ export default function NavBar() {
 				>
 					{personHover || isProfilePage ? (
 						<PersonIcon
-							sx={{ fontSize: 35 }}
+							sx={{ fontSize: 24 }}
 							className="text-mv-green hover:cursor-pointer"
 						/>
 					) : (
 						<PersonOutlinedIcon
-							sx={{ fontSize: 35 }}
+							sx={{ fontSize: 24 }}
 							className="text-mv-black hover:cursor-pointer"
 						/>
 					)}
diff --git a/frontend/src/pages/ListingsPage.jsx b/frontend/src/pages/ListingsPage.jsx
index 2fb3506..229c601 100644
--- a/frontend/src/pages/ListingsPage.jsx
+++ b/frontend/src/pages/ListingsPage.jsx
@@ -13,7 +13,6 @@ import vehicleImage from '../assets/truck.png';
 import Footer from '../components/footers/Footer';
 import PriceInputField from '../components/inputs/PriceInputField';
 import useAxios from '../hooks/useAxios';
-import { priceToString } from '../utils/priceUtil';
 import {
 	formatListingsTodayDate,
 	formatFlexibleDateRange,
@@ -357,8 +356,8 @@ export default function ListingsPage() {
 									chassisNumber={vehicle.chassis_number}
 									price={
 										vehicle.current_price === 0
-											? priceToString(vehicle.starting_price)
-											: priceToString(vehicle.current_price)
+											? vehicle.starting_price
+											: vehicle.current_price
 									}
 									imageUrl={vehicleImage}
 								/>
@@ -402,7 +401,7 @@ export default function ListingsPage() {
 				</div>
 			</div>
 
-			<div className="mt-[40px]">
+			<div className="mt-[74px]">
 				<Footer />
 			</div>
 		</div>
diff --git a/frontend/src/pages/VehicleDetailsPage.jsx b/frontend/src/pages/VehicleDetailsPage.jsx
index 7469100..2fedaff 100644
--- a/frontend/src/pages/VehicleDetailsPage.jsx
+++ b/frontend/src/pages/VehicleDetailsPage.jsx
@@ -146,7 +146,11 @@ export default function VehicleDetailsPage() {
 									Current bid:
 								</p>
 								<p className="text-mv-black text-3xl font-medium leading-6 tracking-[0.125px]">
-									₱210,000
+									{`₱${
+										vehicle?.current_price === 0
+											? vehicle?.starting_price
+											: vehicle?.current_price
+									}`}
 								</p>
 							</div>
 							<div className="mt-[43px] w-full flex gap-x-[17px]">
diff --git a/frontend/src/pages/auth/bidders/BidderLogInPage.jsx b/frontend/src/pages/auth/bidders/BidderLogInPage.jsx
index c5895ba..80540ff 100644
--- a/frontend/src/pages/auth/bidders/BidderLogInPage.jsx
+++ b/frontend/src/pages/auth/bidders/BidderLogInPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate, ScrollRestoration } from 'react-router-dom';
 import logo from '../../../assets/microvan_logo.svg';
-import OnboardingInputField from '../../../components/inputs/OnboardingInputField';
+import SignInInputField from '../../../components/inputs/SignInInputField';
 import LogInButton from '../../../components/buttons/LogInButton';
 import { useAuth } from '../../../providers/AuthProvider';
 
@@ -52,20 +52,20 @@ export default function BidderLogInPage() {
 					Microvan Inc.
 				</h1>
 				<h2 className="text-mv-green text-3xl font-normal">Virtual Auctions</h2>
-				<div className="flex flex-col items-start w-[60%] mt-[22px] gap-y-[5px]">
+				<div className="flex flex-col items-start w-[60%] mt-[22px] gap-y-[5px] max-w-[700px]">
 					<p className="text-dark-grey text-xl font-normal">Email</p>
-					<OnboardingInputField
-						placeholder="johndoe@gmail.com"
+					<SignInInputField
+						placeholder="Email"
 						className="w-full h-[56px]"
 						type="email"
 						value={email}
 						onChange={handleEmailChange}
 					/>
 				</div>
-				<div className="flex flex-col items-start w-[60%] mt-[22px] gap-y-[5px]">
+				<div className="flex flex-col items-start w-[60%] mt-[22px] gap-y-[5px] max-w-[700px]">
 					<p className="text-dark-grey text-xl font-normal">Password</p>
-					<OnboardingInputField
-						placeholder="**********"
+					<SignInInputField
+						placeholder="Password"
 						className="w-full h-[56px]"
 						type="password"
 						value={password}
@@ -78,7 +78,7 @@ export default function BidderLogInPage() {
 					</p>
 				)}
 
-				<div className="mt-[49px] w-full flex items-center justify-center">
+				<div className="mt-[49px] w-full flex items-center justify-center max-w-[525px]">
 					<LogInButton onClick={handleLogIn} />
 				</div>
 				<button
diff --git a/frontend/src/pages/auth/bidders/BidderRegisterPage.jsx b/frontend/src/pages/auth/bidders/BidderRegisterPage.jsx
index 8716fa0..6914e83 100644
--- a/frontend/src/pages/auth/bidders/BidderRegisterPage.jsx
+++ b/frontend/src/pages/auth/bidders/BidderRegisterPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate, ScrollRestoration } from 'react-router-dom';
 import logo from '../../../assets/microvan_logo.svg';
-import OnboardingInputField from '../../../components/inputs/OnboardingInputField';
+import RegisterInputField from '../../../components/inputs/RegisterInputField';
 import RegisterButton from '../../../components/buttons/RegisterButton';
 import useAxios from '../../../hooks/useAxios';
 
@@ -78,7 +78,7 @@ export default function BidderRegisterPage() {
 						</h2>
 						<div className="flex flex-col w-full">
 							<p className="text-mv-black text-base font-normal">First Name</p>
-							<OnboardingInputField
+							<RegisterInputField
 								placeholder="Paul"
 								type="text"
 								value={firstName}
@@ -87,7 +87,7 @@ export default function BidderRegisterPage() {
 						</div>
 						<div className="flex flex-col w-full">
 							<p className="text-mv-black text-base font-normal">Surname</p>
-							<OnboardingInputField
+							<RegisterInputField
 								placeholder="Dos Santos"
 								type="text"
 								value={surname}
@@ -96,7 +96,7 @@ export default function BidderRegisterPage() {
 						</div>
 						<div className="flex flex-col w-full">
 							<p className="text-mv-black text-base font-normal">Email</p>
-							<OnboardingInputField
+							<RegisterInputField
 								placeholder="pauldossantos@gmail.com"
 								type="email"
 								value={email}
@@ -107,7 +107,7 @@ export default function BidderRegisterPage() {
 							<p className="text-mv-black text-base font-normal">
 								Phone Number
 							</p>
-							<OnboardingInputField
+							<RegisterInputField
 								placeholder="+63 (917) 123 4567"
 								type="tel"
 								value={phoneNumber}
@@ -122,7 +122,7 @@ export default function BidderRegisterPage() {
 						</h2>
 						<div className="flex flex-col w-full">
 							<p className="text-mv-black text-base font-normal">Company</p>
-							<OnboardingInputField
+							<RegisterInputField
 								placeholder="Bank of Manila"
 								type="text"
 								value={company}
@@ -133,7 +133,7 @@ export default function BidderRegisterPage() {
 							<p className="text-mv-black text-base font-normal">
 								Company Address
 							</p>
-							<OnboardingInputField
+							<RegisterInputField
 								placeholder="1234 Manila Street, Manila, Philippines"
 								type="text"
 								value={companyAddress}
@@ -150,7 +150,7 @@ export default function BidderRegisterPage() {
 							<p className="text-mv-black text-base font-normal">
 								Input Password
 							</p>
-							<OnboardingInputField
+							<RegisterInputField
 								placeholder=""
 								type="password"
 								value={password}
@@ -161,7 +161,7 @@ export default function BidderRegisterPage() {
 							<p className="text-mv-black text-base font-normal">
 								Confirm Password
 							</p>
-							<OnboardingInputField
+							<RegisterInputField
 								placeholder=""
 								type="password"
 								value={confirmPassword}
diff --git a/frontend/src/pages/auth/bidders/ForgotPasswordPage.jsx b/frontend/src/pages/auth/bidders/ForgotPasswordPage.jsx
index 3d9e48d..4d080dc 100644
--- a/frontend/src/pages/auth/bidders/ForgotPasswordPage.jsx
+++ b/frontend/src/pages/auth/bidders/ForgotPasswordPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router';
 import logo from '../../../assets/microvan_logo.svg';
-import OnboardingInputField from '../../../components/inputs/OnboardingInputField';
+import SignInInputField from '../../../components/inputs/SignInInputField';
 
 export default function ForgotPasswordPage() {
 	const navigate = useNavigate();
@@ -44,8 +44,8 @@ export default function ForgotPasswordPage() {
 					</p>
 					<div className="w-full gap-y-[5px]">
 						<p className="text-mv-black text-xl font-medium">Email Address</p>
-						<div className="flex flex-row items-center justify-between w-full gap-x-[27px] h-[56px]">
-							<OnboardingInputField
+						<div className="flex flex-row items-center justify-between w-full gap-x-[27px]">
+							<SignInInputField
 								placeholder="johndoe@gmail.com"
 								className="w-full h-full"
 								type="email"
@@ -54,7 +54,7 @@ export default function ForgotPasswordPage() {
 							/>
 							<button
 								type="button"
-								className="bg-mv-white w-[15%] h-full rounded-[10px] border-solid border-2 border-mv-green text-mv-green font-normal text-xl"
+								className="bg-mv-white w-[15%] max-w-[150px] py-[11px] px-[33.5px] h-full rounded-[10px] border-solid border-2 border-mv-green text-mv-green font-normal text-xl"
 								onClick={handlePress}
 							>
 								Next