@riosst100/pwa-marketplace 2.7.7 → 2.7.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "2.7.7",
+  "version": "2.7.8",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/LinkToOtherStores/index.js

@@ -46,7 +46,7 @@ const LinkToOtherStores = (props) => {
             if (store.product_link) {
                 const logo = getLogo(store.stores);
                 finalLinkToOtherStores.push(
-                    <a href={store.product_link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center' target="_blank">
+                    <a href={store.product_link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center w-full justify-center' target="_blank">
                         {logo ? <img
                             alt={store.stores}
                             width={60}
@@ -61,10 +61,10 @@ const LinkToOtherStores = (props) => {
 
     return finalLinkToOtherStores && finalLinkToOtherStores.length ? <>
         <section className='product_from-other-platform py-xs'>
-            <div className='title-section text-gray-400 text-sm flex mb-3 pl-[1rem]'>
+            <div className='title-section text-gray-400 text-sm flex mb-3 px-[15px]'>
                 Also available in
             </div>
-            <div className='content-section platform-container flex gap-x-2.5 pl-[1rem]'>
+            <div className='content-section platform-container flex gap-x-2.5 pl-[1rem] px-[15px] justify-between'>
                 {finalLinkToOtherStores}
             </div>
         </section>

package/src/components/SellerProducts/productContent.js

@@ -249,7 +249,7 @@ const ProductContent = props => {
         <>
             <div className='w-full mb-[30px]'>
                 <SellerMegaMenu
-                    rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
+                    rootClassName={cn('nav-menu w-full max-w-[1300px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
                     sellerMegaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
                     seller={seller}
                     titleClassName={cn('font-normal leading-[20px]')}

package/src/overwrites/venia-ui/lib/components/AccountMenu/accountMenu.js

@@ -87,7 +87,7 @@ const AccountMenu = React.forwardRef((props, ref) => {
     }
 
     return (
-        <aside className={cn(rootClass, '!top-[57px] max-w-[1210px]')} data-cy="AccountMenu-root">
+        <aside className={cn(rootClass, '!top-[57px] max-w-[1300px]')} data-cy="AccountMenu-root">
             <div ref={ref} className={contentsClass}>
                 {accountMenuIsOpen ? dropdownContents : null}
             </div>

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -7,8 +7,8 @@
     composes: mt-[10px] from global;
     composes: mb-[24px] from global;
     composes: my-[10px] from global;
-    padding-top: 20px;
-    margin-bottom: 40px;
+    padding-top: 10px;
+    margin-bottom: 25px;
 }
 
 .text {

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -12,7 +12,7 @@ import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from '@magento/venia-ui/lib/components/Header/header.module.css';
+import defaultClasses from './header.module.css';
 import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
 import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
 // import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
@@ -76,7 +76,7 @@ const Header = props => {
         <Fragment>
             <PageLoadingIndicator absolute />
             <div className={cn(classes.switchersContainer, '!bg-white border-b border-gray-100')}>
-                <div className={cn(classes.switchers, 'flex flex-row gap-x-[25px] !py-2')} data-cy="Header-switchers">
+                <div className={cn(classes.switchers, 'max-w-[1300px] flex flex-row gap-x-[25px] !py-2')} data-cy="Header-switchers">
                     <BecomeSellerLink />
                     <WebsiteSwitcher />
                     <StoreSwitcher />
@@ -85,7 +85,7 @@ const Header = props => {
             </div>
             <header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
                 <div className={cn('middle-header border-b border-gray-100')}>
-                    <div className={cn('w-full max-w-[1210px] px-[15px] py-[10px] mx-[auto] flex justify-between items-center')}>
+                    <div className={cn('w-full max-w-[1300px] px-[15px] py-[10px] mx-[auto] flex justify-between items-center')}>
                         <div className='flex items-center'>
                             <NavTrigger />
 
@@ -138,7 +138,7 @@ const Header = props => {
                     </div>
                 </div>
                 <MegaMenu
-                    rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
+                    rootClassName={cn('nav-menu w-full max-w-[1300px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
                     megaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
                     titleClassName={cn('font-normal leading-[20px]')}
                 />

package/src/overwrites/venia-ui/lib/components/Header/header.module.css

@@ -0,0 +1,173 @@
+.root {
+    composes: auto-cols-fr from global;
+    composes: bg-header from global;
+    composes: border-b from global;
+    composes: border-subtle from global;
+    composes: grid from global;
+    composes: h-auto from global;
+    composes: justify-center from global;
+    composes: px-4 from global;
+    composes: top-0 from global;
+    composes: sticky from global;
+    composes: w-full from global;
+    composes: z-header from global;
+
+    composes: lg_px-8 from global;
+}
+
+.switchers {
+    composes: auto-cols-max from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-end from global;
+    /* composes: max-w-site from global; */
+    composes: mx-auto from global;
+    composes: relative from global;
+    composes: w-full from global;
+    composes: z-menu from global;
+}
+
+.switchersContainer {
+    composes: bg-gray-100 from global;
+    composes: hidden from global;
+    composes: px-8 from global;
+    composes: w-full from global;
+}
+
+/* Large screen styles */
+.switchersContainer {
+    composes: sm_block from global;
+}
+
+.open {
+    composes: root;
+}
+
+.closed {
+    composes: root;
+}
+
+.toolbar {
+    composes: border-0 from global;
+    composes: content-center from global;
+    composes: gap-x-4 from global;
+    composes: grid from global;
+    composes: grid-cols-3 from global;
+    composes: grid-rows-header from global;
+    composes: h-14 from global;
+    composes: items-center from global;
+    composes: justify-self-center from global;
+    composes: max-w-site from global;
+    composes: w-full from global;
+    composes: z-header from global;
+
+    composes: lg_h-20 from global;
+    composes: lg_gap-x-8 from global;
+    composes: lg_grid-cols-12 from global;
+}
+
+.logo {
+    height: var(--height);
+    width: var(--width);
+}
+
+.primaryActions {
+    composes: col-start-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-self-start from global;
+    composes: row-start-1 from global;
+    composes: self-center from global;
+}
+
+.logoContainer {
+    composes: col-start-2 from global;
+    composes: justify-self-center from global;
+
+    composes: lg_col-end-3 from global;
+    composes: lg_col-start-1 from global;
+    composes: lg_justify-self-start from global;
+    composes: lg_mr-8 from global;
+    composes: lg_row-start-1 from global;
+}
+
+.secondaryActions {
+    composes: col-start-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-end from global;
+    composes: justify-self-end from global;
+    composes: w-max from global;
+
+    composes: lg_col-end-13 from global;
+    composes: lg_col-start-10 from global;
+    composes: lg_gap-x-4 from global;
+}
+
+.searchFallback {
+    composes: flex from global;
+    composes: justify-center from global;
+    composes: mb-2 from global;
+    composes: px-4 from global;
+}
+
+.input {
+    composes: input from '../TextInput/textInput.module.css';
+
+    @apply max-w-sm;
+}
+
+.loader,
+.loaderBefore,
+.loaderAfter {
+    --dot-size: 2em;
+    --dot-font-size: 6px;
+    --dot-shadow-offset: calc(-1 * var(--dot-size) + var(--dot-font-size));
+
+    composes: rounded-full from global;
+    width: var(--dot-size);
+    height: var(--dot-size);
+    animation: pulse 1.8s infinite ease-in-out;
+    animation-fill-mode: both;
+}
+
+.loader {
+    composes: mb-0 from global;
+    composes: mx-auto from global;
+    composes: relative from global;
+    composes: text-subtle from global;
+    font-size: var(--dot-font-size);
+    margin-top: var(--dot-shadow-offset);
+    transform: translateZ(0);
+    animation-delay: -0.16s;
+}
+
+.loaderBefore,
+.loaderAfter {
+    composes: content-empty from global;
+    composes: absolute from global;
+    composes: top-0 from global;
+}
+
+.loaderBefore {
+    composes: left-[-3.5em] from global;
+    composes: text-gray-100 from global;
+    animation-delay: -0.32s;
+}
+
+.loaderAfter {
+    composes: left-[3.5em] from global;
+    composes: text-gray-600 from global;
+}
+
+@keyframes pulse {
+    0%,
+    80%,
+    100% {
+        box-shadow: 0 var(--dot-size) 0 -1.3em;
+    }
+    40% {
+        box-shadow: 0 var(--dot-size) 0 0;
+    }
+}

package/src/overwrites/venia-ui/lib/components/Main/main.module.css

@@ -11,7 +11,7 @@
 
 .page {
     composes: md_max-w-screen-md from global;
-    composes: lg_max-w-[1210px] from global;
+    composes: lg_max-w-[1300px] from global;
     composes: mx-auto from global;
     composes: my-0 from global;
     composes: px-[15px] from global;

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css

@@ -11,7 +11,7 @@
 
 .submenuContainer {
     composes: w-full from global;
-    composes: max-w-[1210px] from global;
+    composes: max-w-[1300px] from global;
     composes: mx-[auto] from global;
     composes: gap-[15px] from global;
     composes: max-h-[50vh] from global;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -24,7 +24,7 @@ const CustomAttributes = props => {
                     const attributeContent = (
                         <li
                             key={currentAttribute.attribute_metadata.uid}
-                            className={cn(classes.listItem, '!text-[14px] py-1')}
+                            className={cn(classes.listItem, '!text-[14px] py-2')}
                         >
                             <AttributeType
                                 showLabels={showLabels}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -22,7 +22,7 @@ import cn from 'classnames';
 import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
 import ProductReviews from './components/productReview';
 import RichText from '@magento/venia-ui/lib/components/RichText';
-import { Star1, Verify, Sms, Message, Shop } from 'iconsax-react';
+import { Star1, Verify, Sms, Message, Shop, ArrowUp2 } from 'iconsax-react';
 import { Link } from "react-router-dom";
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
 
@@ -216,12 +216,11 @@ const ProductFullDetail = props => {
         );
     // Error message for screen reader
     const cartActionContent = isSupportedProductType ? (
-        <section className={cn(classes.actButton, 'flex gap-x-[20px] px-[12px] py-0')}>
+        <section className={cn(classes.actButton, 'justify-between flex gap-x-[20px] px-[15px] py-0')}>
            <RFQ
                 disabled={isAddToCartDisabled}
-                classes={{ rfqButton: classes.rfqButton }}
+                classes={{ rfqButton: cn(classes.rfqButton, "w-full") }}
             />
-
             <Button
                 data-cy="ProductFullDetail-addToCartButton"
                 disabled={isAddToCartDisabled}
@@ -237,7 +236,7 @@ const ProductFullDetail = props => {
                 }
                 classes={{
                     rootClass: '!px-0 !py-3',
-                    content: 'normal-case font-medium text-[14px]'
+                    content: 'w-full normal-case font-medium text-[14px]'
                 }}
                 priority="high"
                 type="submit"
@@ -291,9 +290,9 @@ const ProductFullDetail = props => {
         </div>
     );
 
-    const ProductMoreInfo = ({ className }) => (
+    const ProductMoreInfo = () => (
         <>
-            <div className={cn(contentContainerClass,  className)}>
+            <div className={cn(contentContainerClass, classes.contentContainerTabOverride)}>
                 <CustomAttributes
                     customAttributes={customAttributesDetails.list}
                     classes={{ list: classes.customAttributesList }}
@@ -385,11 +384,14 @@ const ProductFullDetail = props => {
         return attr.entered_attribute_value?.value || "";
     };
 
-
     const setNameValue = getAttributeValue(customAttributesDetails, "card_set", true);
-    const conditionValue = getAttributeValue(customAttributesDetails, "card_condition");
-
-    const ExpandableSection = ({ children, maxHeight = 280 }) => {
+    const cardNameValue = getAttributeValue(customAttributesDetails, "card_name", true);
+    const cardNumberValue = getAttributeValue(customAttributesDetails, "card_number", true);
+    const rarityValue = getAttributeValue(customAttributesDetails, "card_rarity", true);
+    const featureValue = getAttributeValue(customAttributesDetails, "card_feature", true);
+    const conditionValue = getAttributeValue(customAttributesDetails, "card_condition", true);
+    const foilValue = getAttributeValue(customAttributesDetails, "card_foil", true);
+    const ExpandableSection = ({ children, maxHeight = 480 }) => {
     const [expanded, setExpanded] = useState(false);
     const [showButton, setShowButton] = useState(false);
     const contentRef = useRef(null);
@@ -417,50 +419,54 @@ const ProductFullDetail = props => {
         const isDesktop = typeof window !== "undefined" && window.innerWidth >= 769;
 
         return (
-            <div className="relative">
-                <div
-                    ref={contentRef}
-                    style={{
-                        maxHeight:
-                            isDesktop && showButton && !expanded
-                                ? `${maxHeight}px`
-                                : "none",
-                        overflow: "hidden",
-                        transition: "max-height 0.3s ease"
-                    }}
-                >
-                    {children}
-                </div>
-
-                {isDesktop && !expanded && showButton && (
-                    <div className="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t to-transparent pointer-events-none" />
-                )}
+            <>
+                <div className="relative">
+                    <div
+                        ref={contentRef}
+                        style={{
+                            maxHeight:
+                                isDesktop && showButton && !expanded
+                                    ? `${maxHeight}px`
+                                    : "none",
+                            overflow: "hidden",
+                            transition: "max-height 0.3s ease"
+                        }}
+                    >
+                        {children}
+                    </div>
 
+                    {isDesktop && !expanded && showButton && (
+                        <div className={cn("absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t to-transparent pointer-events-none", classes.productDetailsMaxContent)}/>
+                    )}
+                </div>
                 {isDesktop && showButton && (
                     <button
                         type="button"
                         onClick={() => setExpanded(!expanded)}
-                        className="mt-2 text-blue-600 font-medium underline focus:outline-none"
+                        className="mt-0 text-[14px] text-blue-600 font-medium underline focus:outline-none"
                     >
-                        {expanded ? "Show Less" : "Read More"}
+                        {expanded ? "Show Less" : "Read More"} <ArrowUp2 size="14" style={{
+                            "display": "inline-block",
+                            "marginLeft": "5px"
+                        }} className={cn(expanded ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
                     </button>
                 )}
-            </div>
+            </>
         );
     };
 
     const dataTabs =
     [
+        {
+            id: 'product-more-info',
+            title: 'Product Information',
+            content: <ProductMoreInfo />
+        },
         {
             id: 'product-detail',
-            title: 'Description',
+            title: 'Product Description',
             content: <ProductDescription />
         },
-        // {
-        //     id: 'product-more-info',
-        //     title: 'Details',
-        //     content: <ProductMoreInfo />
-        // },
         {
             id: 'product-tnc',
             title: 'Term & Conditions',
@@ -551,32 +557,42 @@ const ProductFullDetail = props => {
                             aria-live="polite"
                             className={cn(
                                 classes.productName,
-                                '!font-medium leading-[normal] mb-4 line-clamp-2 !text-[1.5rem]'
+                                '!font-medium leading-[1] mb-1.5 line-clamp-2 !text-[1.5rem]'
                             )}
                             data-cy="ProductFullDetail-productName"
                         >
                             {productDetails.name}
                         </h1>
-                        {setNameValue && (
-                            <div className="text-gray-400 text-sm mb-2">{setNameValue}</div>
-                        )}
                     </div>
-                    <section className="bottom_right-container block sm_flex md_flex lg_flex xl_flex 2xl_flex gap-[7px]">
-                        <section className='right_left-container'>
-                            <ExpandableSection maxHeight={280}>
-                                <div
-                                    className={cn(
-                                        'product_short_description',
-                                        'mb-xs',
+                    <section className="bottom_right-container justify-center gap-x-6 block sm_flex md_flex lg_flex xl_flex 2xl_flex gap-[7px]">
+                        <section className='right_left-container w-full'>
+                            <ExpandableSection>
+                                <div className="text-sm leading-6 leading-[2.5rem]">
+                                    {setNameValue && (
+                                        <p><strong>Set Name:</strong> {setNameValue}</p>
+                                    )}
+                                    {cardNameValue && (
+                                        <p><strong>Card Name:</strong> {cardNameValue}</p>
+                                    )}
+                                    {cardNumberValue && (
+                                        <p><strong>Card Number:</strong> {cardNumberValue}</p>
+                                    )}
+                                    {rarityValue && (
+                                        <p><strong>Rarity:</strong> {rarityValue}</p>
+                                    )}
+                                    {featureValue && (
+                                        <p><strong>Feature:</strong> {featureValue}</p>
+                                    )}
+                                    {conditionValue && (
+                                        <p><strong>Condition:</strong> {conditionValue}</p>
+                                    )}
+                                    {foilValue && (
+                                        <p><strong>Foil/Non Foil:</strong> {foilValue}</p>
                                     )}
-                                >
-                                    <p className="font-bold text-[15px] mb-3">Product Details</p>
-                                    {shortDescription}
-                                    <ProductMoreInfo className="!mt-0 lg:!mt-0 !p-0" />
                                 </div>
                             </ExpandableSection>
                         </section>
-                        <section className='right_right-container'>
+                        <section className='right_right-container w-full'>
                             <div className={cn('product_purchase-section', 'border border-[lightgray] rounded-[10px] mb-[15px]')}>
                                 <div
                                     className={cn(
@@ -584,13 +600,8 @@ const ProductFullDetail = props => {
                                         'flex justify-between flex-wrap gap-y-5'
                                     )}
                                 >
-                                    <div className='flex flex-col gap-y-3 pl-[1rem] pt-[1.5rem]'>
-                                        <div className='flex flex-col gap-y-3'>
-                                            {conditionValue && (
-                                                <div className="text-gray-600 text-sm mb-1">
-                                                    {conditionValue}
-                                                </div>
-                                            )}
+                                    <div className='flex flex-col gap-y-2 pl-[1rem] pt-[1rem]'>
+                                        <div className='flex flex-col gap-y-1'>
                                             <p
                                                 data-cy="ProductFullDetail-productPrice"
                                                 className={cn(
@@ -613,7 +624,7 @@ const ProductFullDetail = props => {
                                         <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
                                             <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
                                                 <Link to={"/seller/"+sellerDetails.url_key} class="flex items-center justify-center gap-[5px] py-1 relative bg-white">
-                                                    <div class="flex items-center justify-center gap-[10px] relative">
+                                                    <div class="flex items-center justify-center gap-[5px] relative">
                                                         <p>Sold by</p>
                                                         <div class="relative xs_hidden lg_flex w-fit font-medium text-[#f76b1c] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
                                                             {sellerDetails ? sellerDetails.name : ''}
@@ -633,7 +644,7 @@ const ProductFullDetail = props => {
                                 { options &&
                                     <section className={classes.options}>{options}</section>
                                 }
-                                <section className={cn(classes.quantity, 'py-xs !border-none')}>
+                                <section className={cn(classes.quantity, 'pb-[20px] pt-[10px] !border-none')}>
                                     <div className='product_group-actions flex gap-x-[18px] gap-y-4 pl-[1rem] items-center mt-2 lg_mt-0 mb-6 lg_mb-0'>
                                         <QuantityStepper
                                             min={1}
@@ -657,9 +668,12 @@ const ProductFullDetail = props => {
                                     </div>
                                 </section>
                             </div>
+                            <div className={cn('product_otherlink-section', 'border border-[lightgray] rounded-[10px] mb-[15px]')}>
+                                <LinkToOtherStores productDetails={productDetails} />
+                            </div>
                             <section>
                                 <div 
-                                    className="text-center pt-3 pb-3 cursor-pointer border border-[lightgray] rounded-[10px] mb-[15px]"
+                                    className="text-center pt-3 pb-3 cursor-pointer border border-[lightgray] rounded-[10px]"
                                     onClick={() => {
                                         const section = document.getElementById("cross-seller-section");
                                         if (section) {
@@ -667,7 +681,7 @@ const ProductFullDetail = props => {
                                         }
                                     }}
                                 >
-                                    <span className="font-bold underline">
+                                    <span className="font-bold underline text-[14px]">
                                         View {totalListings} Other Listings
                                     </span>
                                     <p className="text-sm text-gray-600">
@@ -675,9 +689,6 @@ const ProductFullDetail = props => {
                                     </p>
                                 </div>
                             </section>
-                            <div className={cn('product_otherlink-section', 'border border-[lightgray] rounded-[10px]')}>
-                                <LinkToOtherStores productDetails={productDetails} />
-                            </div>
                         </section>
                     </section>
                 </section>

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css

@@ -4,6 +4,15 @@
     composes: lg_items-start from global;
     composes: gap-x-10 from global;
 }
+.productDetailsMaxContent{
+    background: linear-gradient(0deg,#fff 20px,#fff0);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 30%;
+    content: "";
+}
 .rfqButton {
   padding: 10px 0px;
 }
@@ -12,6 +21,9 @@
 }
 .customAttributesList {
     padding-left: 0 !important;
+    column-count: 2;
+    column-gap: 2rem;
+    list-style: none;
 }
 .contentContainerTabOverride {
   max-width: none !important;
@@ -48,6 +60,12 @@
     grid-area: title; */
 }
 
+.productDetailTabs {
+    border-bottom: 1px solid #d3d3d3;
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+}
+
 .productName {
     composes: font-medium from global;
     composes: text-colorDefault from global;

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.module.css

@@ -22,6 +22,7 @@
 }
 
 .imageContainer {
+    composes: h-full from global;
     composes: w-full from global;
     grid-area: 1 / 1 / 2 / 4;
 }
@@ -37,7 +38,7 @@
 }
 
 .carouselContainer {
-    composes: flex items-center justify-center p-4 bg-[#f7f7f8] rounded-md max-h-[660px] from global;
+    composes: flex items-center justify-center p-4 bg-[#f7f7f8] rounded-md h-[540px] max-h-[540px] from global;
 }
 
 .currentImage_placeholder {