Skip to content

Commit 26c3f9b

Browse files
JtendersenJtendersen
authored
Merge pull request #88 from FacundoInza/feature/general-styling
fix: several bug fixes in the UI UX and styling
2 parents a953f8a + c57123c commit 26c3f9b

File tree

10 files changed

+196
-175
lines changed

10 files changed

+196
-175
lines changed

‎app/dealer/home/page.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const Home: FC = async () => {
2323
res = await getDeliveries({ status: 'on-course' });
2424

2525
const totalItemsOnCourse = res.totalItems;
26+
2627
return (
2728
<>
2829
<nav className='bg-primary'>

‎components/ui/cards/DeliveryCard.tsx

+38-23
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,15 @@ import React, { useEffect, useState } from 'react';
44
import { StatusBadge } from '../statusBadge/StatusBadge';
55
import { MdOutlineDeliveryDining } from 'react-icons/md';
66
import { FaMapLocationDot } from 'react-icons/fa6';
7-
7+
import { motion } from 'framer-motion';
88
import { TiDeleteOutline } from 'react-icons/ti';
99
import { useAppDispatch } from '@/hooks';
10-
1110
import Notification from '../modal/Notification';
12-
1311
import Link from 'next/link';
1412
import MapModal from '../modal/MapModal';
1513
import { updateDelivery } from '@/redux/features/deliveries/deliveriesThunk';
1614

15+
1716
interface CardProps {
1817
deliveryID: string;
1918
deliveryAddress: string;
@@ -56,6 +55,8 @@ export const DeliveryCard: React.FC<CardProps> = ({
5655
}, []);
5756

5857
const dispatch = useAppDispatch();
58+
const router = useRouter();
59+
5960

6061
const handleDelete = () => {
6162
if (status === 'pending') {
@@ -80,24 +81,28 @@ export const DeliveryCard: React.FC<CardProps> = ({
8081
<div className='bg-white border border-primary rounded-2xl p-1 flex justify-center items-center space-x-2 text-primary relative h-[90px] mb-2'>
8182
<Link href={`detailed-view/${deliveryID}`}>
8283
<div className='ml-1 w-1/8'>
83-
<span className={colorMap[status]}>
84-
<MdOutlineDeliveryDining size={40} />
85-
</span>
84+
<motion.div whileHover={{ scale: 1.1 }}>
85+
<span className={colorMap[status]}>
86+
<MdOutlineDeliveryDining size={40} />
87+
</span>
88+
</motion.div>
8689
</div>
8790
</Link>
8891
<div className='flex-grow flex-col space-y-1 border-l border-dashed border-gray-400 mx-1 px-2 relative group'>
8992
<div className='flex justify-between items-start'>
9093
<h3 className='text-sm md:text-lg font-semibold'>
9194
{deliveryIdFriendly}
9295
</h3>
93-
<span className={colorMap[status]}>
94-
<FaMapLocationDot
95-
size={20}
96-
color='#22577A'
97-
className='ml-2 mr-32 md:mr-60 text-gray-500 cursor-pointer'
98-
onClick={() => setShowMapModal(true)}
99-
/>
100-
</span>
96+
<motion.div whileHover={{ scale: 1.1 }}>
97+
<span className={colorMap[status]}>
98+
<FaMapLocationDot
99+
size={20}
100+
color='#22577A'
101+
className='ml-2 mr-32 md:mr-60 text-gray-500 cursor-pointer'
102+
onClick={() => setShowMapModal(true)}
103+
/>
104+
</span>
105+
</motion.div>
101106
</div>
102107

103108
<div className='text-sm md:text-lg mr-[80px]'>
@@ -110,17 +115,26 @@ export const DeliveryCard: React.FC<CardProps> = ({
110115
</div>
111116
</div>
112117
</div>
113-
<div className='flex flex-col align-bottom absolute top-4 right-1'>
118+
<div className='flex flex-col align-bottom absolute top-4 z-10 right-1'>
114119
<StatusBadge status={status} />
120+
121+
{(status === 'pending' || status === 'on-course') && (
122+
115123
{status === 'pending' || status === 'on-course' ? (
124+
116125
<div className='mt-2 flex flex-col justify-end'>
117-
<button
118-
className='flex items-center justify-end text-sm md:text-lg text-red-500 hover:text-red-700'
119-
onClick={() => setShowModal(true)}
120-
>
121-
Cancel
122-
<TiDeleteOutline color='red' size={30} />
123-
</button>
126+
<motion.div whileHover={{ scale: 1.1 }}>
127+
<button
128+
className='flex items-center justify-end text-sm md:text-lg text-red-500 hover:text-red-700'
129+
onClick={() => setShowModal(true)}
130+
>
131+
{status === 'pending'
132+
? 'Cancel'
133+
: 'Postpone'}
134+
135+
<TiDeleteOutline color='red' size={30} />
136+
</button>
137+
</motion.div>
124138
</div>
125139
) : (
126140
<></>
@@ -130,10 +144,11 @@ export const DeliveryCard: React.FC<CardProps> = ({
130144

131145
<Notification
132146
showModal={showModal}
147+
133148
buttonText={buttonText}
134149
message={message}
135150
isSuccess={false}
136-
onNotSuccess={handleDelete}
151+
onNotSuccess={handleAction}
137152
onCloseModal={() => setShowModal(false)}
138153
/>
139154
<MapModal

‎components/ui/lists/DeliveryList.tsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,17 @@ interface Props {
1111
export const DeliveryList: FC<Props> = ({ deliveries }) => {
1212
return (
1313
<>
14-
{deliveries.map((delivery) => (
15-
<DeliveryCard
16-
key={delivery._id}
17-
deliveryID={delivery._id}
18-
coords={delivery.orderId.coords}
19-
deliveryAddress={delivery.orderId.address}
20-
status={delivery.status}
21-
/>
22-
))}
14+
{deliveries.map((delivery) => {
15+
return (
16+
<DeliveryCard
17+
key={delivery._id}
18+
deliveryID={delivery._id}
19+
coords={delivery.orderId?.coords}
20+
deliveryAddress={delivery.orderId?.address}
21+
status={delivery.status}
22+
/>
23+
);
24+
})}
2325
</>
2426
);
2527
};

‎components/ui/lists/DeliveryOnCourse.tsx

+4-8
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,10 @@ const DeliveryOnCourse = () => {
1515

1616
return (
1717
<>
18-
{!onCourseDeliveries ? (
19-
<div className='flex justify-center'>
20-
<div className='text-center text-red-500'>
21-
You have no deliveries on course
22-
</div>
23-
</div>
24-
) : (
25-
<DeliveryList deliveries={onCourseDeliveries} />
18+
19+
{deliveriesOnCourse && (
20+
<DeliveryList deliveries={deliveriesOnCourse} />
21+
2622
)}
2723
</>
2824
);

‎components/ui/modal/Notification.tsx

+13-19
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import React, { useEffect, useState } from 'react';
44
import { TbFaceIdError } from 'react-icons/tb';
5+
import { FaTimes } from 'react-icons/fa';
56

67
interface ModalProps {
78
showModal: boolean;
@@ -34,26 +35,27 @@ const Notification: React.FC<ModalProps> = ({
3435
<>
3536
{modalEnabled && (
3637
<div className='fixed inset-0 flex items-center justify-center z-50 backdrop-blur-sm'>
37-
<div className='bg-white mx-3 p-4 md:p-8 w-full sm:w-3/4 lg:w-1/2 xl:w-1/3 rounded-lg shadow-2xl'>
38+
<div className='bg-white mx-3 p-4 md:p-8 w-full sm:w-3/4 lg:w-1/2 xl:w-1/3 rounded-lg shadow-2xl relative'>
39+
{!singleButton && (
40+
<button
41+
className='absolute top-4 right-4 text-gray-300 hover:text-gray-900'
42+
onClick={onCloseModal}
43+
>
44+
<FaTimes size={20} />
45+
</button>
46+
)}
47+
3848
{isSuccess ? (
3949
<div className='flex flex-col items-center justify-center'>
4050
<div className='flex items-center justify-center mb-4 md:mb-16'>
4151
<span className='text-green-400 text-4xl md:text-6xl'>
4252
✓
4353
</span>
44-
<h3 className='font-bold text-green-400 ml-4 text-center text-xl md:text-2xl'>
54+
<h3 className='font-bold text-green-400 ml-4 p-10 text-center text-xl md:text-2xl'>
4555
{message}
4656
</h3>
4757
</div>
4858
<div className='flex justify-center space-x-4 w-full'>
49-
{!singleButton && (
50-
<button
51-
className='bg-red-400 text-white font-bold text-sm md:text-lg px-4 py-2 md:py-3 rounded-full w-full hover:bg-red-500'
52-
onClick={onCloseModal}
53-
>
54-
Close
55-
</button>
56-
)}
5759
<button
5860
className='bg-green-400 text-white font-bold text-sm md:text-lg px-4 py-2 md:py-3 rounded-full w-full hover:bg-green-500'
5961
onClick={onSuccess}
@@ -68,19 +70,11 @@ const Notification: React.FC<ModalProps> = ({
6870
<span className='text-red-400 text-4xl md:text-6xl'>
6971
<TbFaceIdError />
7072
</span>
71-
<h3 className='font-bold text-red-400 ml-4 text-center text-sm md:text-lg'>
73+
<h3 className='font-bold text-red-400 ml-4 p-6 text-center text-sm md:text-lg'>
7274
{message}
7375
</h3>
7476
</div>
7577
<div className='flex justify-center space-x-4 w-full'>
76-
{!singleButton && (
77-
<button
78-
className='bg-red-400 text-white font-bold text-sm md:text-lg px-4 py-2 md:py-3 rounded-full w-full hover:bg-red-500'
79-
onClick={onCloseModal}
80-
>
81-
close
82-
</button>
83-
)}
8478
<button
8579
onClick={onNotSuccess}
8680
className='bg-red-400 text-white text-sm md:text-lg px-4 py-2 md:py-3 rounded-full w-2/3 hover:bg-red-500'

‎middleware.ts ‎middlewar.ts

File renamed without changes.

0 commit comments

Comments
 (0)