kupos-ui-components-lib 7.0.2 → 7.0.4

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 (8) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +13 -3
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +13 -3
  3. package/dist/components/ServiceItem/ServiceItemMobile.js +11 -10
  4. package/dist/styles.css +8 -5
  5. package/package.json +1 -1
  6. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +14 -5
  7. package/src/components/ServiceItem/ServiceItemDesktop.tsx +12 -3
  8. package/src/components/ServiceItem/ServiceItemMobile.tsx +12 -11
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -337,6 +337,16 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
337
337
  const getNumberOfSeats = () => {
338
338
  return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
339
339
  };
340
+ // Helper function to truncate seat labels with more than 2 words
341
+ const truncateSeatLabel = (label) => {
342
+ if (typeof label !== "string")
343
+ return String(label);
344
+ const words = label.trim().split(/\s+/);
345
+ if (words.length <= 2)
346
+ return label;
347
+ // Take first 2 words + first letter of 3rd word + "..."
348
+ return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
349
+ };
340
350
  // Seat type icon logic
341
351
  const getSeatTypeIcon = (seatLabel) => {
342
352
  var _a, _b, _c, _d;
@@ -362,7 +372,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
362
372
  marginBottom: "2px",
363
373
  } })),
364
374
  typeof val.label === "string" || typeof val.label === "number"
365
- ? val.label
375
+ ? truncateSeatLabel(val.label)
366
376
  : null)));
367
377
  }
368
378
  return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
@@ -374,7 +384,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
374
384
  marginBottom: "2px",
375
385
  } })),
376
386
  typeof val.label === "string" || typeof val.label === "number"
377
- ? val.label
387
+ ? truncateSeatLabel(val.label)
378
388
  : null)));
379
389
  };
380
390
  const getSeatPrice = () => {
@@ -583,7 +593,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
583
593
  serviceItem.available_seats,
584
594
  " ",
585
595
  "Asientos restantes")) : (React.createElement("div", { className: "flex items-center " },
586
- React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
596
+ React.createElement("div", { className: `flex items-center ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
587
597
  showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
588
598
  React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
589
599
  serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -343,16 +343,26 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
343
343
  const getNumberOfSeats = () => {
344
344
  return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
345
345
  };
346
+ // Helper function to truncate seat labels with more than 2 words
347
+ const truncateSeatLabel = (label) => {
348
+ if (typeof label !== "string")
349
+ return String(label);
350
+ const words = label.trim().split(/\s+/);
351
+ if (words.length <= 2)
352
+ return label;
353
+ // Take first 2 words + first letter of 3rd word + "..."
354
+ return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
355
+ };
346
356
  const getSeatNames = () => {
347
357
  const uniqueSeats = getUniqueSeats();
348
358
  const sortedSeatTypes = getSortedSeatTypes();
349
359
  if (removeDuplicateSeats) {
350
360
  return uniqueSeats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
351
- ? val.label
361
+ ? truncateSeatLabel(val.label)
352
362
  : null)));
353
363
  }
354
364
  return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
355
- ? val.label
365
+ ? truncateSeatLabel(val.label)
356
366
  : null)));
357
367
  };
358
368
  const getSeatPrice = () => {
@@ -573,7 +583,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
573
583
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
574
584
  top: 0,
575
585
  bottom: 0,
576
- left: "clamp(75%, 75% + (100vw - 1300px) * 0.1, 80%)",
586
+ left: "clamp(65%, 65% + (100vw - 1300px) * 0.1, 65%)",
577
587
  // left: "68%",
578
588
  right: 0,
579
589
  justifyContent: getNumberOfSeats() < 2 || removeDuplicateSeats
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -43,11 +43,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
43
43
  return exceptions.includes(type.label) ? null : (React.createElement("div", { className: ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length) > 2
44
44
  ? "w-[100%] flex flex-row justify-between "
45
45
  : "w-[100%] flex flex-row justify-between items-center", key: i },
46
- React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] ", style: {
46
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] ", style: {
47
47
  // marginLeft: "10px",
48
48
  color: isSoldOut ? "#bbb" : "#464647",
49
49
  } }, type.label),
50
- React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] bold-text", style: { color: isSoldOut ? "#bbb" : colors.seatPriceColor } }, commonService.currency(type.fare, currencySign))));
50
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : colors.seatPriceColor } }, commonService.currency(type.fare, currencySign))));
51
51
  });
52
52
  return seatTypes;
53
53
  };
@@ -225,7 +225,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
225
225
  else {
226
226
  cleanedDepTime = timePart;
227
227
  }
228
- return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
228
+ return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
229
229
  isConexion ||
230
230
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
231
231
  showTopLabel
@@ -242,7 +242,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
242
242
  React.createElement("div", { className: "flex items-center w-[50%] justify-between" },
243
243
  React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
244
244
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
245
- isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[11px] text-[11px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[11px] bold-text items-center" },
245
+ isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] bold-text items-center" },
246
246
  React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
247
247
  React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem)))) : null),
248
248
  showLastSeats ? (React.createElement("div", { className: "flex justify-end -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
@@ -252,7 +252,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
252
252
  } }, "\u00A1 \u00DAltimos Asientos!")))) : null),
253
253
  React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
254
254
  React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
255
- React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[11px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
255
+ React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
256
256
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
257
257
  React.createElement("div", null,
258
258
  " ",
@@ -271,7 +271,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
271
271
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM"))
272
272
  ? null
273
273
  : DateService.ampmOnly(serviceItem.dep_time)))) : (DateService.formatTime(serviceItem.dep_time)))))),
274
- isCiva ? null : (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[11px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
274
+ isCiva ? null : (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
275
275
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
276
276
  React.createElement("div", null,
277
277
  " ",
@@ -300,16 +300,17 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
300
300
  ? seatTypesWithRemoveDuplicateSeats()
301
301
  : seatTypes(),
302
302
  isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
303
- React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] text-[#ccc]" }, "Agotado"))) : null))),
303
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))),
304
304
  React.createElement("div", { className: "bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]" }),
305
305
  React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
306
306
  React.createElement("div", null,
307
307
  React.createElement("div", { className: "flex items-center " },
308
308
  React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
309
- React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[11px] bold-text" }, serviceItem.operator_details[2])))),
309
+ React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] bold-text" }, serviceItem.operator_details[2])))),
310
310
  React.createElement("div", { className: "flex relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
311
311
  React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
312
- React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[11px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
312
+ "\u00A0",
313
+ React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
313
314
  serviceItem.duration,
314
315
  "hrs")),
315
316
  React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenities()),
@@ -351,7 +352,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
351
352
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
352
353
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "18px", height: "18px" })),
353
354
  React.createElement("div", { className: isSoldOut ? "text-[#bbb]" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
354
- isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
355
+ isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
355
356
  backgroundColor: !isSoldOut && colors.ratingBottomColor,
356
357
  } },
357
358
  renderIcon("airportIcon", "14px"),
package/dist/styles.css CHANGED
@@ -222,6 +222,9 @@
222
222
  .mb-\[10px\] {
223
223
  margin-bottom: 10px;
224
224
  }
225
+ .mb-\[14px\] {
226
+ margin-bottom: 14px;
227
+ }
225
228
  .mb-\[15px\] {
226
229
  margin-bottom: 15px;
227
230
  }
@@ -503,6 +506,11 @@
503
506
  -moz-column-gap: 7rem;
504
507
  column-gap: 7rem;
505
508
  }
509
+ .truncate {
510
+ overflow: hidden;
511
+ text-overflow: ellipsis;
512
+ white-space: nowrap;
513
+ }
506
514
  .overflow-hidden {
507
515
  overflow: hidden;
508
516
  }
@@ -872,11 +880,6 @@
872
880
  }
873
881
  }
874
882
  }
875
- .min-\[420\]\:text-\[11px\] {
876
- @media (width >= 420) {
877
- font-size: 11px;
878
- }
879
- }
880
883
  .min-\[420\]\:text-\[12px\] {
881
884
  @media (width >= 420) {
882
885
  font-size: 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "7.0.2",
3
+ "version": "7.0.4",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -440,6 +440,15 @@ function PeruServiceItemDesktop({
440
440
  ).length;
441
441
  };
442
442
 
443
+ // Helper function to truncate seat labels with more than 2 words
444
+ const truncateSeatLabel = (label: string | number): string => {
445
+ if (typeof label !== "string") return String(label);
446
+ const words = label.trim().split(/\s+/);
447
+ if (words.length <= 2) return label;
448
+ // Take first 2 words + first letter of 3rd word + "..."
449
+ return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
450
+ };
451
+
443
452
  // Seat type icon logic
444
453
  const getSeatTypeIcon = (seatLabel: string) => {
445
454
  // Icon keys follow the seat{degrees}Icon format in serviceItem.icons
@@ -476,7 +485,7 @@ function PeruServiceItemDesktop({
476
485
  />
477
486
  </div>
478
487
  {typeof val.label === "string" || typeof val.label === "number"
479
- ? val.label
488
+ ? truncateSeatLabel(val.label)
480
489
  : null}
481
490
  </span>
482
491
  )
@@ -503,7 +512,7 @@ function PeruServiceItemDesktop({
503
512
  />
504
513
  </div>
505
514
  {typeof val.label === "string" || typeof val.label === "number"
506
- ? val.label
515
+ ? truncateSeatLabel(val.label)
507
516
  : null}
508
517
  </span>
509
518
  )
@@ -1019,9 +1028,9 @@ function PeruServiceItemDesktop({
1019
1028
  ) : (
1020
1029
  <div className="flex items-center ">
1021
1030
  <div
1022
- className={`flex items-center ${
1023
- isSoldOut ? "grayscale" : ""
1024
- } ${showRating ? "cursor-pointer" : ""}`}
1031
+ className={`flex items-center ${
1032
+ showRating ? "cursor-pointer" : ""
1033
+ }`}
1025
1034
  style={{ color: isSoldOut ? "#c0c0c0" : "" }}
1026
1035
  >
1027
1036
  {showRating ? (
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -446,6 +446,15 @@ function ServiceItemPB({
446
446
  ).length;
447
447
  };
448
448
 
449
+ // Helper function to truncate seat labels with more than 2 words
450
+ const truncateSeatLabel = (label: string | number): string => {
451
+ if (typeof label !== "string") return String(label);
452
+ const words = label.trim().split(/\s+/);
453
+ if (words.length <= 2) return label;
454
+ // Take first 2 words + first letter of 3rd word + "..."
455
+ return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
456
+ };
457
+
449
458
  const getSeatNames = () => {
450
459
  const uniqueSeats = getUniqueSeats();
451
460
  const sortedSeatTypes = getSortedSeatTypes();
@@ -460,7 +469,7 @@ function ServiceItemPB({
460
469
  }`}
461
470
  >
462
471
  {typeof val.label === "string" || typeof val.label === "number"
463
- ? val.label
472
+ ? truncateSeatLabel(val.label)
464
473
  : null}
465
474
  </span>
466
475
  )
@@ -475,7 +484,7 @@ function ServiceItemPB({
475
484
  }`}
476
485
  >
477
486
  {typeof val.label === "string" || typeof val.label === "number"
478
- ? val.label
487
+ ? truncateSeatLabel(val.label)
479
488
  : null}
480
489
  </span>
481
490
  )
@@ -1003,7 +1012,7 @@ function ServiceItemPB({
1003
1012
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
1004
1013
  top: 0,
1005
1014
  bottom: 0,
1006
- left: "clamp(75%, 75% + (100vw - 1300px) * 0.1, 80%)",
1015
+ left: "clamp(65%, 65% + (100vw - 1300px) * 0.1, 65%)",
1007
1016
  // left: "68%",
1008
1017
  right: 0,
1009
1018
  justifyContent:
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -77,7 +77,7 @@ function ServiceItemMobile({
77
77
  key={i}
78
78
  >
79
79
  <span
80
- className="min-[420]:text-[13px] text-[11px] "
80
+ className="min-[420]:text-[13px] text-[12px] "
81
81
  style={{
82
82
  // marginLeft: "10px",
83
83
  color: isSoldOut ? "#bbb" : "#464647",
@@ -86,7 +86,7 @@ function ServiceItemMobile({
86
86
  {type.label}
87
87
  </span>
88
88
  <span
89
- className={"min-[420]:text-[13px] text-[11px] bold-text"}
89
+ className={"min-[420]:text-[13px] text-[12px] bold-text"}
90
90
  style={{ color: isSoldOut ? "#bbb" : colors.seatPriceColor }}
91
91
  >
92
92
  {commonService.currency(type.fare, currencySign)}
@@ -322,7 +322,7 @@ function ServiceItemMobile({
322
322
  return (
323
323
  <div
324
324
  className={`relative ${
325
- serviceItem.offer_text ? "mb-[55px]" : "mb-[20px]"
325
+ serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
326
326
  } ${
327
327
  serviceItem?.is_direct_trip ||
328
328
  isConexion ||
@@ -360,11 +360,11 @@ function ServiceItemMobile({
360
360
  />
361
361
  </div>
362
362
  {isCiva ? (
363
- <div className="black-text min-[420]:text-[11px] text-[11px]">
363
+ <div className="black-text min-[420]:text-[12px] text-[12px]">
364
364
  {serviceItem?.operator_details[2]}
365
365
  </div>
366
366
  ) : showRating ? (
367
- <div className="flex min-[420]:text-[13px] text-[11px] bold-text items-center">
367
+ <div className="flex min-[420]:text-[13px] text-[12px] bold-text items-center">
368
368
  <img
369
369
  src={serviceItem.icons.rating}
370
370
  alt="origin"
@@ -406,7 +406,7 @@ function ServiceItemMobile({
406
406
  style={{ justifyContent: isCiva && "center" }}
407
407
  >
408
408
  <div
409
- className={`flex items-center min-[420]:text-[13px] text-[11px] justify-between ${
409
+ className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
410
410
  isSoldOut ? "text-[#c0c0c0]" : ""
411
411
  }`}
412
412
  >
@@ -459,7 +459,7 @@ function ServiceItemMobile({
459
459
  </div>
460
460
  {isCiva ? null : (
461
461
  <div
462
- className={`flex items-center min-[420]:text-[13px] text-[11px] justify-between ${
462
+ className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
463
463
  isSoldOut ? "text-[#c0c0c0]" : ""
464
464
  }`}
465
465
  >
@@ -531,7 +531,7 @@ function ServiceItemMobile({
531
531
  <div className="flex justify-end">
532
532
  <span
533
533
  className={
534
- "min-[420]:text-[13px] text-[11px] text-[#ccc]"
534
+ "min-[420]:text-[13px] text-[12px] text-[#ccc]"
535
535
  }
536
536
  >
537
537
  Agotado
@@ -552,7 +552,7 @@ function ServiceItemMobile({
552
552
  className="flex items-center cursor-pointer "
553
553
  style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
554
554
  >
555
- <span className="ml-[3px] min-[420]:text-[13px] text-[11px] bold-text">
555
+ <span className="ml-[3px] min-[420]:text-[13px] text-[12px] bold-text">
556
556
  {serviceItem.operator_details[2]}
557
557
  </span>
558
558
  </div>
@@ -570,8 +570,9 @@ function ServiceItemMobile({
570
570
  >
571
571
  {renderIcon("hours", "14px")}
572
572
  </div>
573
+ &nbsp;
573
574
  <div
574
- className={`cursor-default group min-[420]:text-[13px] text-[11px] ${
575
+ className={`cursor-default group min-[420]:text-[13px] text-[12px] ${
575
576
  isSoldOut ? "text-[#c0c0c0]" : ""
576
577
  }`}
577
578
  style={{ lineHeight: "normal" }}
@@ -704,7 +705,7 @@ function ServiceItemMobile({
704
705
 
705
706
  {isConexion && (
706
707
  <div
707
- className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 ${
708
+ className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 ${
708
709
  isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
709
710
  }`}
710
711
  style={{