kupos-ui-components-lib 2.0.7 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +32 -24
  2. package/dist/styles.css +9 -3
  3. package/package.json +1 -1
  4. package/src/components/ServiceItem/ServiceItemDesktop.tsx +76 -105
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -283,14 +283,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
283
283
  const onBookButtonPressHandler = () => {
284
284
  onBookButtonPress();
285
285
  };
286
- return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[60px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
286
+ return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[60px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
287
287
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
288
288
  showTopLabel
289
289
  ? "mt-[24px]"
290
290
  : "mt-[14px]"} ` },
291
- React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative" },
291
+ React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
292
292
  React.createElement("div", { className: "p-[15px]" },
293
- React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center" },
293
+ React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
294
294
  React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
295
295
  React.createElement("div", { className: " " },
296
296
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
@@ -304,28 +304,33 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
304
304
  React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` })))),
305
305
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
306
306
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
307
- React.createElement("div", { className: "absolute left-[48%]" }, "\u2022"),
308
- React.createElement("div", { className: "font-[900] bold-text group relative" },
309
- DateService.formatTime(serviceItem.dep_time),
310
- serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
311
- React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
312
- React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType)))))))))),
307
+ React.createElement("div", { className: "absolute left-[40%] flex items-center w-[60%]" },
308
+ React.createElement("div", null, "\u2022"),
309
+ React.createElement("div", { className: "font-[900] bold-text group relative ml-[20%]" },
310
+ DateService.formatTime(serviceItem.dep_time),
311
+ serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
312
+ React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
313
+ React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))))))),
313
314
  isCiva ? null : (React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
314
315
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
315
316
  React.createElement("div", null, destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
316
317
  React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } })))),
317
318
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
318
319
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
319
- removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", { className: "absolute left-[48%]" }, "\u2022")) : null,
320
- React.createElement("div", { className: "font-[900] bold-text group relative" },
321
- removeArrivalTime
322
- ? null
323
- : serviceItem.arr_time
324
- ? DateService.formatTime(serviceItem.arr_time)
325
- : null,
326
- serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
327
- React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
328
- React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType)))))))))))),
320
+ React.createElement("div", { className: "absolute left-[40%] flex items-center w-[60%]" },
321
+ removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null,
322
+ React.createElement("div", { className: "font-[900] bold-text group relative ml-[20%]" },
323
+ removeArrivalTime
324
+ ? null
325
+ : serviceItem.arr_time
326
+ ? DateService.formatTime(serviceItem.arr_time)
327
+ : null,
328
+ serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
329
+ React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: {
330
+ borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
331
+ } }),
332
+ React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) ||
333
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))))))))),
329
334
  React.createElement("div", { style: {
330
335
  width: "1px",
331
336
  height: "2.5rem",
@@ -339,7 +344,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
339
344
  color: isSoldOut ? "#c0c0c0" : colors.seatPriceColor,
340
345
  top: 0,
341
346
  bottom: 0,
342
- left: "60%",
347
+ left: "70%",
343
348
  right: 0,
344
349
  justifyContent: getNumberOfSeats() < 2 ? "center" : "",
345
350
  } }, getSeatPrice()))),
@@ -357,12 +362,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
357
362
  serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
358
363
  showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
359
364
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
360
- React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"}` },
365
+ React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[8px]"}` },
361
366
  React.createElement("div", null,
362
367
  React.createElement("div", { className: "flex items-center " },
363
368
  React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
364
369
  showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
365
- React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
370
+ React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px] bold-text", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
366
371
  serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
367
372
  React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
368
373
  React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
@@ -390,7 +395,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
390
395
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.flexibleAnim, width: "20px", height: "20px" })),
391
396
  React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
392
397
  React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
393
- React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.tooltipColor } },
398
+ React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]", style: {
399
+ backgroundColor: colors.tooltipColor,
400
+ lineHeight: "1.2",
401
+ } },
394
402
  React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.tooltipColor } }),
395
403
  "Esta empresa permite cambios sin costo hasta (", (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _c !== void 0 ? _c : 6,
396
404
  ") horas antes del viaje.")))),
@@ -419,7 +427,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
419
427
  getAmenityName((_d = metaData.amenities[val]) === null || _d === void 0 ? void 0 : _d.split(".")[0].split("_").join(" ")))))) : null;
420
428
  }),
421
429
  ((_e = serviceItem.operator_details[4]) === null || _e === void 0 ? void 0 : _e.length) > 3 && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
422
- React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex items-center justify-center text-sm font-bold ml-[5px] group" },
430
+ React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold ml-[5px] group", style: { alignItems: "flex-end", marginTop: "5px" } },
423
431
  React.createElement("img", { src: ((_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.plus) ||
424
432
  "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
425
433
  React.createElement("div", { className: "hidden group-hover:block absolute -top-[13px] left-[40px] z-20 pl-[10px]" },
package/dist/styles.css CHANGED
@@ -78,12 +78,12 @@
78
78
  .left-\[36\%\] {
79
79
  left: 36%;
80
80
  }
81
+ .left-\[40\%\] {
82
+ left: 40%;
83
+ }
81
84
  .left-\[40px\] {
82
85
  left: 40px;
83
86
  }
84
- .left-\[48\%\] {
85
- left: 48%;
86
- }
87
87
  .left-\[50\%\] {
88
88
  left: 50%;
89
89
  }
@@ -228,6 +228,9 @@
228
228
  .ml-\[10px\] {
229
229
  margin-left: 10px;
230
230
  }
231
+ .ml-\[20\%\] {
232
+ margin-left: 20%;
233
+ }
231
234
  .ml-\[25px\] {
232
235
  margin-left: 25px;
233
236
  }
@@ -633,6 +636,9 @@
633
636
  .pt-\[5px\] {
634
637
  padding-top: 5px;
635
638
  }
639
+ .pt-\[8px\] {
640
+ padding-top: 8px;
641
+ }
636
642
  .pt-\[12px\] {
637
643
  padding-top: 12px;
638
644
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "2.0.7",
3
+ "version": "2.0.8",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -403,7 +403,7 @@ function ServiceItemPB({
403
403
  return (
404
404
  <div
405
405
  className={`relative ${
406
- serviceItem.offer_text ? "mb-[60px]" : "mb-[20px]"
406
+ serviceItem.offer_text ? "mb-[60px]" : "mb-[10px]"
407
407
  } ${
408
408
  serviceItem?.is_direct_trip ||
409
409
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -413,9 +413,7 @@ function ServiceItemPB({
413
413
  } `}
414
414
  >
415
415
  <div
416
- className={
417
- "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative"
418
- }
416
+ className={"bg-white rounded-[20px] shadow-service mx-auto relative"}
419
417
  >
420
418
  <div className="p-[15px]">
421
419
  {/* Header with operator info and favorite */}
@@ -443,7 +441,10 @@ function ServiceItemPB({
443
441
  </div> */}
444
442
 
445
443
  {/* <div className="grid grid-cols-[1.5fr_1fr_auto] gap-[3rem] sm:gap-[4rem] md:gap-[5rem] lg:gap-[6rem] xl:gap-[5rem] 2xl:gap-[7rem] text-[#464647]"> */}
446
- <div className="grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center">
444
+ <div
445
+ className="grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center"
446
+ style={{ marginTop: showTopLabel ? "8px" : "" }}
447
+ >
447
448
  {/* OPERATOR LOGO */}
448
449
  <div className="flex items-center justify-center m-[auto]">
449
450
  <div className=" ">
@@ -502,78 +503,37 @@ function ServiceItemPB({
502
503
  {DateService.getServiceItemDate(serviceItem.travel_date)}
503
504
  </span>
504
505
 
505
- <div className="absolute left-[48%]">•</div>
506
- <div className="font-[900] bold-text group relative">
507
- {DateService.formatTime(serviceItem.dep_time)}
506
+ <div className="absolute left-[40%] flex items-center w-[60%]">
507
+ <div>•</div>
508
+ <div className="font-[900] bold-text group relative ml-[20%]">
509
+ {DateService.formatTime(serviceItem.dep_time)}
508
510
 
509
- {serviceItem.boarding_stages && (
510
- <div
511
- className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
512
- style={{ backgroundColor: colors?.tooltipColor }}
513
- >
511
+ {serviceItem.boarding_stages && (
514
512
  <div
515
- className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
513
+ className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
514
+ style={{ backgroundColor: colors?.tooltipColor }}
515
+ >
516
+ <div
517
+ className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
516
518
  border-t-8 border-b-8 border-r-8
517
519
  border-t-transparent border-b-transparent"
518
- style={{ borderRightColor: colors?.tooltipColor }}
519
- ></div>
520
- <div className="text-center text-[14px]">
521
- {renderStages(
522
- serviceItem.boarding_stages,
523
- 1,
524
- busStage,
525
- hideBoardingTime(
526
- serviceItem?.api_type || serviceItem?.apiType
527
- )
528
- )}
520
+ style={{ borderRightColor: colors?.tooltipColor }}
521
+ ></div>
522
+ <div className="text-center text-[14px]">
523
+ {renderStages(
524
+ serviceItem.boarding_stages,
525
+ 1,
526
+ busStage,
527
+ hideBoardingTime(
528
+ serviceItem?.api_type || serviceItem?.apiType
529
+ )
530
+ )}
531
+ </div>
529
532
  </div>
530
- </div>
531
- )}
532
- </div>
533
- </div>
534
- {/* <div
535
- className="flex items-center capitalize group relative items-center justify-between "
536
- style={{ flex: 1 }}
537
- >
538
- <div className="relative group">
539
- <span className="cursor-pointer bold-text">
540
- {DateService.getServiceItemDate(
541
- serviceItem.travel_date
542
533
  )}
543
- </span>
544
-
545
- {serviceItem.boarding_stages && (
546
- <div
547
- className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px]
548
- text-white px-3 py-2 rounded-[10px] whitespace-nowrap
549
- z-10 shadow-service"
550
- style={{ backgroundColor: colors?.tooltipColor }}
551
- >
552
- <div
553
- className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
554
- border-t-8 border-b-8 border-r-8
555
- border-t-transparent border-b-transparent"
556
- style={{ borderRightColor: colors?.tooltipColor }}
557
- ></div>
558
- <div className="text-center text-[14px]">
559
- {renderStages(
560
- serviceItem.boarding_stages,
561
- 1,
562
- busStage,
563
- hideBoardingTime(
564
- serviceItem?.api_type || serviceItem?.apiType
565
- )
566
- )}
567
- </div>
568
- </div>
569
- )}
570
- </div>
571
-
572
- <div className="absolute left-[50%]">•</div>
573
- <div className="font-[900] relative bold-text">
574
- {DateService.formatTime(serviceItem.dep_time)}
534
+ </div>
575
535
  </div>
576
- </div> */}
536
+ </div>
577
537
  </div>
578
538
  </div>
579
539
  {isCiva ? null : (
@@ -608,41 +568,46 @@ function ServiceItemPB({
608
568
  )}
609
569
  </span>
610
570
 
611
- {removeArrivalTime ? null : serviceItem.arr_time ? (
612
- <div className="absolute left-[48%]">•</div>
613
- ) : null}
614
- <div className="font-[900] bold-text group relative">
615
- {removeArrivalTime
616
- ? null
617
- : serviceItem.arr_time
618
- ? DateService.formatTime(serviceItem.arr_time)
619
- : null}
571
+ <div className="absolute left-[40%] flex items-center w-[60%]">
572
+ {removeArrivalTime ? null : serviceItem.arr_time ? (
573
+ <div>•</div>
574
+ ) : null}
575
+ <div className="font-[900] bold-text group relative ml-[20%]">
576
+ {removeArrivalTime
577
+ ? null
578
+ : serviceItem.arr_time
579
+ ? DateService.formatTime(serviceItem.arr_time)
580
+ : null}
620
581
 
621
- {/* Dropping stage tooltip */}
622
- {serviceItem.dropoff_stages && (
623
- <div
624
- className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
625
- style={{ backgroundColor: colors?.tooltipColor }}
626
- >
627
- {/* Tooltip arrow */}
582
+ {/* Dropping stage tooltip */}
583
+ {serviceItem.dropoff_stages && (
628
584
  <div
629
- className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
585
+ className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
586
+ style={{ backgroundColor: colors?.tooltipColor }}
587
+ >
588
+ {/* Tooltip arrow */}
589
+ <div
590
+ className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
630
591
  border-t-8 border-b-8 border-r-8
631
592
  border-t-transparent border-b-transparent"
632
- style={{ borderRightColor: colors?.tooltipColor }}
633
- ></div>
634
- <div className="text-center text-[14px]">
635
- {renderStages(
636
- serviceItem.dropoff_stages,
637
- 2,
638
- busStage,
639
- hideBoardingTime(
640
- serviceItem?.api_type || serviceItem?.apiType
641
- )
642
- )}
593
+ style={{
594
+ borderRightColor: colors?.tooltipColor,
595
+ }}
596
+ ></div>
597
+ <div className="text-center text-[14px]">
598
+ {renderStages(
599
+ serviceItem.dropoff_stages,
600
+ 2,
601
+ busStage,
602
+ hideBoardingTime(
603
+ serviceItem?.api_type ||
604
+ serviceItem?.apiType
605
+ )
606
+ )}
607
+ </div>
643
608
  </div>
644
- </div>
645
- )}
609
+ )}
610
+ </div>
646
611
  </div>
647
612
  </div>
648
613
  </div>
@@ -674,7 +639,7 @@ function ServiceItemPB({
674
639
  color: isSoldOut ? "#c0c0c0" : colors.seatPriceColor,
675
640
  top: 0,
676
641
  bottom: 0,
677
- left: "60%",
642
+ left: "70%",
678
643
  right: 0,
679
644
  justifyContent: getNumberOfSeats() < 2 ? "center" : "",
680
645
  }}
@@ -729,7 +694,7 @@ function ServiceItemPB({
729
694
  ) : null}
730
695
 
731
696
  <div
732
- className={`${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"}`}
697
+ className={`${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[8px]"}`}
733
698
  >
734
699
  {/* Rating */}
735
700
  <div>
@@ -750,7 +715,7 @@ function ServiceItemPB({
750
715
  />
751
716
  ) : null}
752
717
  <span
753
- className="ml-[10px] text-[#464647] text-[13.33px]"
718
+ className="ml-[10px] text-[#464647] text-[13.33px] bold-text"
754
719
  style={{ marginLeft: showRating ? "10px" : "0" }}
755
720
  >
756
721
  {serviceItem.operator_details[2]}
@@ -840,7 +805,10 @@ function ServiceItemPB({
840
805
  </div>
841
806
  <div
842
807
  className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]"
843
- style={{ backgroundColor: colors.tooltipColor }}
808
+ style={{
809
+ backgroundColor: colors.tooltipColor,
810
+ lineHeight: "1.2",
811
+ }}
844
812
  >
845
813
  {/* Tooltip arrow */}
846
814
  <div
@@ -926,7 +894,10 @@ function ServiceItemPB({
926
894
  {/* Plus icon for more amenities */}
927
895
  {serviceItem.operator_details[4]?.length > 3 && (
928
896
  <div className="relative ml-1 cursor-pointer">
929
- <div className="w-[16px] h-[16px] bg-gray-200 rounded-full flex items-center justify-center text-sm font-bold ml-[5px] group">
897
+ <div
898
+ className="w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold ml-[5px] group"
899
+ style={{ alignItems: "flex-end", marginTop: "5px" }}
900
+ >
930
901
  <img
931
902
  src={
932
903
  serviceItem.icons?.plus ||