kupos-ui-components-lib 6.0.1 → 6.0.3

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 +9 -4
  2. package/dist/styles.css +3 -3
  3. package/package.json +1 -1
  4. package/src/components/ServiceItem/ServiceItemDesktop.tsx +11 -5
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -440,7 +440,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
440
440
  : "mt-[14px]"} ` },
441
441
  React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
442
442
  React.createElement("div", { className: "p-[15px] pt-[20px]" },
443
- React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:18%_28%_0.5%_24%_13.5%] gap-x-[4%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
443
+ React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_32%_0.5%_24%_13.5%] gap-x-[4%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
444
444
  React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
445
445
  React.createElement("div", { className: " " },
446
446
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
@@ -518,15 +518,20 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
518
518
  margin: "auto",
519
519
  } }),
520
520
  React.createElement("div", { className: "content-center" },
521
- React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 ? { alignItems: "center" } : {} },
521
+ React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 || removeDuplicateSeats
522
+ ? { alignItems: "center" }
523
+ : {} },
522
524
  React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
523
525
  React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
524
526
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
525
527
  top: 0,
526
528
  bottom: 0,
527
- left: "68%",
529
+ left: "clamp(75%, 75% + (100vw - 1300px) * 0.1, 80%)",
530
+ // left: "68%",
528
531
  right: 0,
529
- justifyContent: getNumberOfSeats() < 2 ? "center" : "",
532
+ justifyContent: getNumberOfSeats() < 2 || removeDuplicateSeats
533
+ ? "center"
534
+ : "",
530
535
  } }, getSeatPrice()))),
531
536
  React.createElement("div", null,
532
537
  React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full ${serviceDetailsLoading || isSoldOut
package/dist/styles.css CHANGED
@@ -403,12 +403,12 @@
403
403
  .cursor-pointer {
404
404
  cursor: pointer;
405
405
  }
406
+ .\[grid-template-columns\:14\%_32\%_0\.5\%_24\%_13\.5\%\] {
407
+ grid-template-columns: 14% 32% 0.5% 24% 13.5%;
408
+ }
406
409
  .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
407
410
  grid-template-columns: 14% 40% 0.5% 24% 13.5%;
408
411
  }
409
- .\[grid-template-columns\:18\%_28\%_0\.5\%_24\%_13\.5\%\] {
410
- grid-template-columns: 18% 28% 0.5% 24% 13.5%;
411
- }
412
412
  .\[grid-template-columns\:minmax\(0\,1\.4fr\)_minmax\(0\,0\.2fr\)_minmax\(0\,1fr\)_auto\] {
413
413
  grid-template-columns: minmax(0,1.4fr) minmax(0,0.2fr) minmax(0,1fr) auto;
414
414
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "6.0.1",
3
+ "version": "6.0.3",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useState } from "react";
1
+ import React, { useState, useEffect } from "react";
2
2
  import { ServiceItemProps } from "./types";
3
3
  import DateService from "../../utils/DateService";
4
4
  import CommonService from "../../utils/CommonService";
@@ -650,7 +650,7 @@ function ServiceItemPB({
650
650
 
651
651
  {/* <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]"> */}
652
652
  <div
653
- className="grid text-[#464647] w-full [grid-template-columns:18%_28%_0.5%_24%_13.5%] gap-x-[4%] items-center"
653
+ className="grid text-[#464647] w-full [grid-template-columns:14%_32%_0.5%_24%_13.5%] gap-x-[4%] items-center"
654
654
  style={{ marginTop: showTopLabel ? "8px" : "" }}
655
655
  >
656
656
  {/* OPERATOR LOGO */}
@@ -934,7 +934,9 @@ function ServiceItemPB({
934
934
  getNumberOfSeats() < 3 ? "" : ""
935
935
  }`}
936
936
  style={
937
- getNumberOfSeats() < 2 ? { alignItems: "center" } : {}
937
+ getNumberOfSeats() < 2 || removeDuplicateSeats
938
+ ? { alignItems: "center" }
939
+ : {}
938
940
  }
939
941
  >
940
942
  <div className="flex flex-col justify-between">
@@ -946,9 +948,13 @@ function ServiceItemPB({
946
948
  color: isSoldOut ? "#c0c0c0" : colors.priceColor,
947
949
  top: 0,
948
950
  bottom: 0,
949
- left: "68%",
951
+ left: "clamp(75%, 75% + (100vw - 1300px) * 0.1, 80%)",
952
+ // left: "68%",
950
953
  right: 0,
951
- justifyContent: getNumberOfSeats() < 2 ? "center" : "",
954
+ justifyContent:
955
+ getNumberOfSeats() < 2 || removeDuplicateSeats
956
+ ? "center"
957
+ : "",
952
958
  }}
953
959
  >
954
960
  {getSeatPrice()}