Skip to content

Commit

Permalink
Update styling of profile page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ltan02
ltan02 committed Apr 12, 2024
1 parent 0e83b87 commit 03fb48c
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 103 deletions.
13 changes: 13 additions & 0 deletions frontend/src/components/buttons/EditProfileButton.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';

export default function EditProfileButton({ onClick }) {
return (
<button
type="button"
className="flex items-center justify-center rounded-[10px] border-solid border-[2px] border-mv-black py-2.5 px-[68.5px]"
onClick={onClick}
>
<p className="text-mv-black font-medium text-sm">Edit profile</p>
</button>
);
}
41 changes: 21 additions & 20 deletions frontend/src/pages/ListingsPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,10 @@ export default function ListingsPage() {
const [selectedMinPrice, setSelectedMinPrice] = useState(0);
const [selectedMaxPrice, setSelectedMaxPrice] = useState(0);
const { fetchData } = useAxios();
const wsURL = process.env.REACT_APP_NODE_ENV === 'dev'
? process.env.REACT_APP_DEV_BACKEND_WS_BASE_URL
: process.env.REACT_APP_PROD_BACKEND_WS_BASE_URL
const wsURL =
process.env.REACT_APP_NODE_ENV === 'dev'
? process.env.REACT_APP_DEV_BACKEND_WS_BASE_URL
: process.env.REACT_APP_PROD_BACKEND_WS_BASE_URL;
const sortByItems = ['All', 'Trucks', 'Equipment', 'Trailers'];

const updateMinPrice = ({ target: { value } }) => {
Expand All @@ -54,26 +55,26 @@ export default function ListingsPage() {

useEffect(() => {
const chatSocket = new WebSocket(wsURL);

chatSocket.onmessage = (event) => {
const message = JSON.parse(event.data);
if (message.bid_data) {
const bidData = message.bid_data;
setUnits(prevUnits =>
prevUnits.map(unit =>
unit.id === bidData.object_id
? { ...unit, current_price: bidData.amount }
: unit
)
);
}
const message = JSON.parse(event.data);

if (message.bid_data) {
const bidData = message.bid_data;

setUnits((prevUnits) =>
prevUnits.map((unit) =>
unit.id === bidData.object_id
? { ...unit, current_price: bidData.amount }
: unit
)
);
}
};

return () => chatSocket.close();
}, []);
}, []);

const updateMaxPrice = ({ target: { value } }) => {
if (value === '') {
setSelectedMaxPrice(0);
Expand Down
127 changes: 44 additions & 83 deletions frontend/src/pages/ProfilePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import SortByDropdown from '../components/dropdowns/SortByDropdown';
import BiddedItemCard from '../components/cards/BiddedItemCard';
import vehicleImage from '../assets/truck.png';
import SavedItemCard from '../components/cards/SavedItemCard';
import EditProfileButton from '../components/buttons/EditProfileButton';

export default function ProfilePage() {
const user = useUser();
Expand Down Expand Up @@ -74,121 +75,81 @@ export default function ProfilePage() {
<ScrollRestoration />
<NavBar />

<div className="w-[90%] flex mt-[43.94px] items-start gap-x-[52px] mb-[282px]">
<div className="w-[25%] flex flex-col items-start">
<div className="flex items-start gap-x-[13px] mb-[30px]">
<Avatar sx={{ width: '200px', height: '200px' }} />
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<div className="flex flex-col gap-y-[19.1px] items-start w-full">
<div className="w-[90%] flex mt-[43px] items-start gap-x-[52px] mb-[282px]">
<div className="w-[22.5%] flex flex-col items-start">
<div className="flex items-center gap-x-[16.5px] mb-[25px]">
<Avatar sx={{ width: '93px', height: '93px' }} />
<div className="flex flex-col gap-y-[10px]">
<p className="text-sm text-mv-black font-normal leading-4">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Bidder Number
</p>
<p className="text-base text-mv-black font-normal leading-4">
<p className="text-base text-mv-black font-normal leading-[120%]">
{user?.['custom:bidder_number']
? `#${user?.['custom:bidder_number']}`
: 'N/A'}
</p>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Name
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
</div>
<div className="flex flex-col gap-y-[17px] items-start w-full">
<div className="flex flex-col gap-y-[5px] w-[80%]">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Name
</p>
<input
className=" rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className=" rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={`${user?.given_name} ${user?.family_name}`}
disabled
/>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Email
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<div className="flex flex-col gap-y-[5px] w-[80%]">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Email
</p>
<input
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={user?.email}
disabled
/>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Phone Number
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<div className="flex flex-col gap-y-[5px] w-[80%]">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Phone Number
</p>
<input
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={user?.phone_number}
disabled
/>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Company Name
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<div className="flex flex-col gap-y-[5px] w-[80%]">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Company Name
</p>
<input
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={user?.['custom:company_name']}
disabled
/>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Company Address
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<p className="text-sm text-mv-black font-normal leading-[120%]">
Company Address
</p>
<input
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={user?.['custom:company_address']}
disabled
/>
</div>
</div>
<div className="mt-[20px]">
<SaveChangesButton onClick={() => {}} />
<div className="mt-[25px]">
<EditProfileButton onClick={() => {}} />
</div>
<div className="mt-[70px] w-full flex flex-col items-start">
<div className="mt-[40px] w-full flex flex-col items-start">
<h2 className="text-mv-black text-xl font-medium">
Notification Settings
</h2>
<div className="mt-[30px] flex items-center justify-start gap-x-[20px]">
<div className="mt-[20px] flex items-center justify-start gap-x-[20px]">
<Checkbox
checked={emailNotificationsEnabled}
onChange={() => setEmailNotificationsEnabled((prev) => !prev)}
Expand All @@ -197,31 +158,31 @@ export default function ProfilePage() {
Turn on email notifications
</p>
</div>
<div className="mt-[26px] flex items-center justify-start gap-x-[20px]">
<div className="mt-[23.5px] flex items-center justify-start gap-x-[20px]">
<Checkbox
checked={upcomingAuctionNotificationsEnabled}
onChange={() =>
setUpcomingAuctionNotificationsEnabled((prev) => !prev)
}
/>
<p className="text-mv-black text-sm font-normal leading-[120%]">
Get notified about upcoming auctions
Get notified about <br />
upcoming auctions
</p>
</div>
<div className="mt-[26px] flex items-center justify-start gap-x-[20px]">
<div className="mt-[19.25px] flex items-center justify-start gap-x-[20px]">
<Checkbox
checked={promotionNotificationsEnabled}
onChange={() =>
setPromotionNotificationsEnabled((prev) => !prev)
}
/>
<p className="text-mv-black text-sm font-normal leading-[120%]">
Receive promotional emails and updates
Receive promotional
<br />
emails and updates
</p>
</div>
<div className="mt-[30px]">
<SaveChangesButton onClick={() => {}} />
</div>
</div>
</div>
<div className="flex-1 flex flex-col">
Expand Down

0 comments on commit 03fb48c

Please sign in to comment.