Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix some styling with buttons #80

Merged
merged 2 commits into from
Apr 12, 2024
Merged

Fix some styling with buttons #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
df61746
Some design fixes
ltan02 Apr 12, 2024
0c5e5c9
Merge remote-tracking branch 'origin/main' into lance/fix-some-stylings
ltan02 Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion backend/vehicle/helpers.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/buttons/AddToListButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/buttons/AwaitingApprovalButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/buttons/LogInButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/buttons/LogInJoinAuctionButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/buttons/RegisterForAuctionButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/buttons/StartBiddingButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
2 changes: 1 addition & 1 deletion frontend/src/components/buttons/ViewModelButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}`}>
Expand Down
4 changes: 1 addition & 3 deletions frontend/src/components/cards/CurrentAuctionCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion ...omponents/inputs/OnboardingInputField.jsx → .../components/inputs/RegisterInputField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

export default function OnboardingInputField({
export default function RegisterInputField({
placeholder,
type,
value,
Expand Down
18 changes: 18 additions & 0 deletions frontend/src/components/inputs/SignInInputField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
/>
);
}
8 changes: 4 additions & 4 deletions frontend/src/components/navBars/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
)}
Expand Down Expand Up @@ -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"
/>
)}
Expand Down
7 changes: 3 additions & 4 deletions frontend/src/pages/ListingsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -381,8 +380,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}
/>
Expand Down Expand Up @@ -426,7 +425,7 @@ export default function ListingsPage() {
</div>
</div>

<div className="mt-[40px]">
<div className="mt-[74px]">
<Footer />
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/pages/VehicleDetailsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/pages/auth/bidders/BidderLogInPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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="[email protected]"
<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}
Expand All @@ -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
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/pages/auth/bidders/BidderRegisterPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand All @@ -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="[email protected]"
type="email"
value={email}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/pages/auth/bidders/ForgotPasswordPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand Down Expand Up @@ -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="[email protected]"
className="w-full h-full"
type="email"
Expand All @@ -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
Expand Down
Loading