@riosst100/pwa-marketplace 1.3.7 → 1.3.9
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.
- package/package.json +1 -1
- package/src/components/BecomeSeller/becomeSeller.module.css +1 -1
- package/src/components/BecomeSellerLink/becomeSellerLink.js +1 -1
- package/src/components/CurrencySwitcher/index.js +1 -1
- package/src/components/Filter/index.js +2 -2
- package/src/components/Pagination/index.js +4 -4
- package/src/components/ProductItem/index.js +1 -1
- package/src/components/ProductListTab/productListTab.module.css +1 -1
- package/src/components/SellerDetail/sellerDetail.js +2 -2
- package/src/components/SellerInformation/sellerInformation.js +9 -9
- package/src/components/SellerLocation/sellerLocationItem.js +3 -3
- package/src/components/SellerProducts/sellerProducts.js +2 -2
- package/src/components/SellerReview/sellerReview.js +11 -11
- package/src/components/SellerReviewItem/sellerReviewItem.js +6 -6
- package/src/components/SellerVerification/sellerVerification.module.css +1 -1
- package/src/components/ShopByCategory/shopByCategory.module.css +1 -1
- package/src/components/SortBy/index.js +2 -2
- package/src/components/SubCategory/subCategory.module.css +1 -1
- package/src/components/WebsiteSwitcher/websiteSwitcher.js +5 -5
- package/src/components/commons/Tabs/index.js +2 -2
- package/src/overwrites/peregrine/lib/talons/MegaMenu/megaMenu.gql.js +2 -0
- package/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css +4 -4
- package/src/overwrites/venia-ui/lib/components/Checkbox/checkbox.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilter.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterList.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/FilterModal/filterModal.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css +2 -2
- package/src/overwrites/venia-ui/lib/components/Gallery/item.module.css +3 -3
- package/src/overwrites/venia-ui/lib/components/Gallery/star.js +1 -1
- package/src/overwrites/venia-ui/lib/components/Header/accountTrigger.js +2 -2
- package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.js +3 -3
- package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.module.css +47 -0
- package/src/overwrites/venia-ui/lib/components/Header/header.js +2 -2
- package/src/overwrites/venia-ui/lib/components/Header/storeSwitcher.js +5 -5
- package/src/overwrites/venia-ui/lib/components/Header/wishlistTrigger.js +1 -1
- package/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenuItem.js +2 -1
- package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.js +20 -24
- package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.module.css +2 -4
- package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js +10 -7
- package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css +14 -7
- package/src/overwrites/venia-ui/lib/components/MegaMenu/submenuColumn.module.css +3 -3
- package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js +2 -2
- package/src/overwrites/venia-ui/lib/components/ProductSort/productSort.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/ProductSort/sortItem.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/SearchBar/suggestions.module.css +1 -1
- package/src/overwrites/venia-ui/lib/components/TextInput/field.module.css +1 -1
package/package.json
CHANGED
|
@@ -34,7 +34,7 @@ const BecomeSellerLink = props => {
|
|
|
34
34
|
<div className={classes.root} data-cy="BecomeSellerLink-root">
|
|
35
35
|
<Link
|
|
36
36
|
to={resourceUrl('/become-seller')}
|
|
37
|
-
className='text-
|
|
37
|
+
className='text-base leading-[16px]'
|
|
38
38
|
>{formatMessage({
|
|
39
39
|
id: 'becomeSellerPage.title',
|
|
40
40
|
defaultMessage: 'Become a Seller'
|
|
@@ -71,7 +71,7 @@ const CurrencySwitcher = props => {
|
|
|
71
71
|
ref={currencyMenuTriggerRef}
|
|
72
72
|
aria-expanded={currencyMenuIsOpen}
|
|
73
73
|
>
|
|
74
|
-
<span className={cn(classes.label, 'flex flex-row items-center text-
|
|
74
|
+
<span className={cn(classes.label, 'flex flex-row items-center text-base leading-[16px]')}>
|
|
75
75
|
<CurrencySymbol
|
|
76
76
|
classes={currencySymbol}
|
|
77
77
|
currencyCode={currentCurrencyCode}
|
|
@@ -6,7 +6,7 @@ const CatalogFilter = () => {
|
|
|
6
6
|
<>
|
|
7
7
|
<div className='inline-flex flex-col items-start gap-[10px] px-0 py-[10px] w-full rounded-[6px] overflow-hidden border border-solid border-[#e6e9ea] shadow-[0px_0px_7px_2px_#cdcdcd40]'>
|
|
8
8
|
<div class="flex h-[18px] items-center justify-between px-[10px] py-0 relative self-stretch w-full">
|
|
9
|
-
<div class="relative w-fit text-[
|
|
9
|
+
<div class="relative w-fit text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
|
|
10
10
|
Filter
|
|
11
11
|
</div>
|
|
12
12
|
<Filter color="#292D32" size={16} variant="Outline" className='stroke-[#292D32]' />
|
|
@@ -14,7 +14,7 @@ const CatalogFilter = () => {
|
|
|
14
14
|
<div class="inline-flex flex-col items-start gap-[10px] bg-white relative flex-[0_0_auto]">
|
|
15
15
|
<div class="flex-col justify-center inline-flex items-center relative flex-[0_0_auto]">
|
|
16
16
|
<div class="flex w-full cursor-pointer items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
|
|
17
|
-
<div class="relative w-fit font-semibold text-
|
|
17
|
+
<div class="relative w-fit font-semibold text-base tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
|
|
18
18
|
<ArrowSquareUp color="#292D32" size={14} variant="Outline" />
|
|
19
19
|
</div>
|
|
20
20
|
<hr className='w-full h-[1px]' />
|
|
@@ -15,14 +15,14 @@ const Pagination = ({ totalPages, currentPage, pageSize }) => {
|
|
|
15
15
|
const activeClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]";
|
|
16
16
|
const bgClass = "inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]";
|
|
17
17
|
|
|
18
|
-
const activeTextClass = "relative w-fit font-normal text-white text-[
|
|
19
|
-
const textClass = "relative w-fit font-normal text-[#6243fa] text-[
|
|
18
|
+
const activeTextClass = "relative w-fit font-normal text-white text-[14px] tracking-[0] leading-none whitespace-nowrap";
|
|
19
|
+
const textClass = "relative w-fit font-normal text-[#6243fa] text-[14px] tracking-[0] leading-none whitespace-nowrap";
|
|
20
20
|
|
|
21
21
|
return (
|
|
22
22
|
<>
|
|
23
23
|
<div className={'inline-flex items-start gap-[10px] relative'}>
|
|
24
24
|
<button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
|
|
25
|
-
<div className="relative w-fit font-normal text-[#6243fa] text-[
|
|
25
|
+
<div className="relative w-fit font-normal text-[#6243fa] text-[14px] tracking-[0] leading-none whitespace-nowrap">
|
|
26
26
|
<ArrowLeft2 size="16" color="#6243fa" variant="Outline" />
|
|
27
27
|
</div>
|
|
28
28
|
</button>
|
|
@@ -36,7 +36,7 @@ const Pagination = ({ totalPages, currentPage, pageSize }) => {
|
|
|
36
36
|
</span>
|
|
37
37
|
)) : ''}
|
|
38
38
|
<button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
|
|
39
|
-
<div className="relative w-fit font-normal text-[#6243fa] text-[
|
|
39
|
+
<div className="relative w-fit font-normal text-[#6243fa] text-[14px] tracking-[0] leading-none whitespace-nowrap">
|
|
40
40
|
<ArrowRight2 size="16" color="#6243fa" variant="Outline" />
|
|
41
41
|
</div>
|
|
42
42
|
</button>
|
|
@@ -15,7 +15,7 @@ const ProductItem = () => {
|
|
|
15
15
|
<div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
|
|
16
16
|
<div class="flex flex-col w-[153px] items-start justify-center gap-[8px] relative flex-[0_0_auto]">
|
|
17
17
|
<div class="flex flex-col items-start gap-[6px] relative self-stretch w-full flex-[0_0_auto]">
|
|
18
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[#1b1b1b] text-[
|
|
18
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">$55.00</div>
|
|
19
19
|
</div>
|
|
20
20
|
</div>
|
|
21
21
|
<div class="flex-col items-start gap-[8px] inline-flex relative flex-[0_0_auto]">
|
|
@@ -100,7 +100,7 @@ const SellerDetail = props => {
|
|
|
100
100
|
<button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
|
|
101
101
|
<div class="flex items-center justify-center gap-[10px] relative">
|
|
102
102
|
<Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
|
|
103
|
-
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-
|
|
103
|
+
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-base tracking-[0] leading-[20px] whitespace-nowrap">
|
|
104
104
|
Message
|
|
105
105
|
</div>
|
|
106
106
|
</div>
|
|
@@ -108,7 +108,7 @@ const SellerDetail = props => {
|
|
|
108
108
|
<button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
|
|
109
109
|
<div class="flex items-center justify-center gap-[10px] relative">
|
|
110
110
|
<Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
|
|
111
|
-
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-
|
|
111
|
+
<div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-base tracking-[0] leading-[20px] whitespace-nowrap">
|
|
112
112
|
Chat With Seller
|
|
113
113
|
</div>
|
|
114
114
|
</div>
|
|
@@ -11,9 +11,9 @@ const SellerInformation = ({ seller }) => {
|
|
|
11
11
|
<div class="grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 relative w-full grow xs_gap-y-6 md_gap-x-14 xl_gap-x-14">
|
|
12
12
|
<div class="flex flex-col items-start gap-[30px] relative self-stretch">
|
|
13
13
|
<div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
|
|
14
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[
|
|
14
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Description</div>
|
|
15
15
|
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
16
|
-
<p class="relative mt-[-1.00px] font-normal text-
|
|
16
|
+
<p class="relative mt-[-1.00px] font-normal text-base tracking-[0] leading-[16px]">
|
|
17
17
|
{seller ? seller.description : ''}<br />
|
|
18
18
|
<br />
|
|
19
19
|
<br />
|
|
@@ -22,20 +22,20 @@ const SellerInformation = ({ seller }) => {
|
|
|
22
22
|
</div>
|
|
23
23
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
24
24
|
<Location color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
|
|
25
|
-
<p class="relative w-fit font-normal text-[#009a7b] text-
|
|
25
|
+
<p class="relative w-fit font-normal text-[#009a7b] text-base tracking-[0] leading-[normal] whitespace-nowrap"><SellerAddressCard address={seller} /></p>
|
|
26
26
|
</div>
|
|
27
27
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
28
28
|
<ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
|
|
29
|
-
<div class="relative self-stretch mt-[-1.00px] font-normal text-[#009a7b] text-
|
|
29
|
+
<div class="relative self-stretch mt-[-1.00px] font-normal text-[#009a7b] text-base tracking-[0] leading-[normal]">Joined: {seller ? seller.creation_time : ''}</div>
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
33
|
<div class="flex flex-col items-start gap-[30px] relative">
|
|
34
34
|
<div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
|
|
35
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[
|
|
35
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Working Hour</div>
|
|
36
36
|
<div class="inline-flex flex-col items-start relative flex-[0_0_auto]">
|
|
37
37
|
<div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
|
|
38
|
-
<p class="relative mt-[-1.00px] font-normal text-
|
|
38
|
+
<p class="relative mt-[-1.00px] font-normal text-base tracking-[0] leading-[normal]">
|
|
39
39
|
<OperatingHours values={seller.operating_hours} />
|
|
40
40
|
</p>
|
|
41
41
|
</div>
|
|
@@ -44,7 +44,7 @@ const SellerInformation = ({ seller }) => {
|
|
|
44
44
|
</div>
|
|
45
45
|
<div class="flex flex-col items-start gap-[15px] relative">
|
|
46
46
|
<div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
|
|
47
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[
|
|
47
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Ship To</div>
|
|
48
48
|
</div>
|
|
49
49
|
<div class="flex flex-wrap items-start gap-[10px_10px] relative flex-[0_0_auto]">
|
|
50
50
|
{seller ? <SellerShipTo seller={seller} /> : '' }
|
|
@@ -53,7 +53,7 @@ const SellerInformation = ({ seller }) => {
|
|
|
53
53
|
</div>
|
|
54
54
|
<div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
|
|
55
55
|
<div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
|
|
56
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[
|
|
56
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Terms & Condition</div>
|
|
57
57
|
<div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
|
|
58
58
|
<div class="flex flex-col items-start gap-[2px]">
|
|
59
59
|
{seller ? seller.term_and_conditions : ''}
|
|
@@ -78,7 +78,7 @@ const SellerShipTo = ({seller}) => {
|
|
|
78
78
|
{shipTo && shipTo == "Domestic" ? seller.country_id : ''}
|
|
79
79
|
{shipToCountryArr && shipTo != "Domestic" ? shipToCountryArr.map((value, index) => <>
|
|
80
80
|
<div key={index} class={index == shipToCountryArr.length-1 ? "inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]" : "inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]"}>
|
|
81
|
-
<div class="relative w-fit mt-[-1.00px] font-normal text-
|
|
81
|
+
<div class="relative w-fit mt-[-1.00px] font-normal text-base tracking-[0] leading-[normal] whitespace-nowrap">{value}</div>
|
|
82
82
|
</div>
|
|
83
83
|
</>) : ''}
|
|
84
84
|
</div>
|
|
@@ -7,17 +7,17 @@ const SellerLocationItem = ({ storeLocator }) => {
|
|
|
7
7
|
return storeLocator && (
|
|
8
8
|
<>
|
|
9
9
|
<div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
|
|
10
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[
|
|
10
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[14px] tracking-[0] leading-[normal]">{storeLocator ? storeLocator.name : ''}</div>
|
|
11
11
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
12
12
|
<Location color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
|
|
13
|
-
<div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-
|
|
13
|
+
<div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-base tracking-[0] leading-[normal]">
|
|
14
14
|
{storeLocator.city}, {storeLocator.country}
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
17
|
<div class="flex flex-col w-[320px] items-end relative flex-[0_0_auto] mr-[-10.00px]">
|
|
18
18
|
<div class="flex items-center gap-[10px] relative self-stretch w-full flex-[0_0_auto]">
|
|
19
19
|
<Clock color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
|
|
20
|
-
<p class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-
|
|
20
|
+
<p class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-base tracking-[0] leading-[normal] whitespace-nowrap">{storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}</p>
|
|
21
21
|
</div>
|
|
22
22
|
</div>
|
|
23
23
|
</div>
|
|
@@ -12,10 +12,10 @@ const SellerProducts = () => {
|
|
|
12
12
|
<div className='w-full mb-[30px]'>
|
|
13
13
|
<div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
|
|
14
14
|
<Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
|
|
15
|
-
<span class='relative w-fit font-medium text-[
|
|
15
|
+
<span class='relative w-fit font-medium text-[14px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
|
|
16
16
|
</Link>
|
|
17
17
|
<Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
|
|
18
|
-
<span class='relative w-fit font-medium text-[
|
|
18
|
+
<span class='relative w-fit font-medium text-[14px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
|
|
19
19
|
</Link>
|
|
20
20
|
</div>
|
|
21
21
|
</div>
|
|
@@ -35,7 +35,7 @@ const SellerReview = ({ seller }) => {
|
|
|
35
35
|
<Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
38
|
-
<div className="text-center text-zinc-900 text-
|
|
38
|
+
<div className="text-center text-zinc-900 text-base font-normal leading-[18px]">({reviews ? reviews.items.length : 0} Reviews)</div>
|
|
39
39
|
</div>
|
|
40
40
|
</div>
|
|
41
41
|
<div className="w-full flex-col items-start gap-2 flex">
|
|
@@ -46,7 +46,7 @@ const SellerReview = ({ seller }) => {
|
|
|
46
46
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
47
47
|
</div>
|
|
48
48
|
<div className="gap-2.5 flex">
|
|
49
|
-
<div className="text-center text-zinc-900 text-
|
|
49
|
+
<div className="text-center text-zinc-900 text-base font-normal leading-[18px]">5</div>
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
52
|
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
@@ -54,7 +54,7 @@ const SellerReview = ({ seller }) => {
|
|
|
54
54
|
<div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
55
55
|
</div>
|
|
56
56
|
</div>
|
|
57
|
-
<div className="w-10 text-zinc-900 text-
|
|
57
|
+
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">12</div>
|
|
58
58
|
</div>
|
|
59
59
|
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
60
60
|
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
@@ -63,7 +63,7 @@ const SellerReview = ({ seller }) => {
|
|
|
63
63
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
64
64
|
</div>
|
|
65
65
|
<div className="gap-2.5 flex">
|
|
66
|
-
<div className="text-center text-zinc-900 text-
|
|
66
|
+
<div className="text-center text-zinc-900 text-base font-normal leading-[18px]">4</div>
|
|
67
67
|
</div>
|
|
68
68
|
</div>
|
|
69
69
|
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
@@ -71,7 +71,7 @@ const SellerReview = ({ seller }) => {
|
|
|
71
71
|
<div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
72
72
|
</div>
|
|
73
73
|
</div>
|
|
74
|
-
<div className="w-10 text-zinc-900 text-
|
|
74
|
+
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">8</div>
|
|
75
75
|
</div>
|
|
76
76
|
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
77
77
|
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
@@ -80,7 +80,7 @@ const SellerReview = ({ seller }) => {
|
|
|
80
80
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
81
81
|
</div>
|
|
82
82
|
<div className="gap-2.5 flex">
|
|
83
|
-
<div className="text-center text-zinc-900 text-
|
|
83
|
+
<div className="text-center text-zinc-900 text-base font-normal leading-[18px]">3</div>
|
|
84
84
|
</div>
|
|
85
85
|
</div>
|
|
86
86
|
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
@@ -88,7 +88,7 @@ const SellerReview = ({ seller }) => {
|
|
|
88
88
|
<div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
91
|
-
<div className="w-10 text-zinc-900 text-
|
|
91
|
+
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">5</div>
|
|
92
92
|
</div>
|
|
93
93
|
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
94
94
|
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
@@ -97,7 +97,7 @@ const SellerReview = ({ seller }) => {
|
|
|
97
97
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
98
98
|
</div>
|
|
99
99
|
<div className="gap-2.5 flex">
|
|
100
|
-
<div className="text-center text-zinc-900 text-
|
|
100
|
+
<div className="text-center text-zinc-900 text-base font-normal leading-[18px]">2</div>
|
|
101
101
|
</div>
|
|
102
102
|
</div>
|
|
103
103
|
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
@@ -105,7 +105,7 @@ const SellerReview = ({ seller }) => {
|
|
|
105
105
|
<div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
106
106
|
</div>
|
|
107
107
|
</div>
|
|
108
|
-
<div className="w-10 text-zinc-900 text-
|
|
108
|
+
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">1</div>
|
|
109
109
|
</div>
|
|
110
110
|
<div className="flex xs_w-full lg_w-fit gap-3 items-center">
|
|
111
111
|
<div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
|
|
@@ -114,7 +114,7 @@ const SellerReview = ({ seller }) => {
|
|
|
114
114
|
<Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
|
|
115
115
|
</div>
|
|
116
116
|
<div className="gap-2.5 flex">
|
|
117
|
-
<div className="text-center text-zinc-900 text-
|
|
117
|
+
<div className="text-center text-zinc-900 text-base font-normal leading-[18px]">1</div>
|
|
118
118
|
</div>
|
|
119
119
|
</div>
|
|
120
120
|
<div className="xs_w-full lg_w-40 h-[6px] relative">
|
|
@@ -122,7 +122,7 @@ const SellerReview = ({ seller }) => {
|
|
|
122
122
|
<div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
|
|
123
123
|
</div>
|
|
124
124
|
</div>
|
|
125
|
-
<div className="w-10 text-zinc-900 text-
|
|
125
|
+
<div className="w-10 text-zinc-900 text-base font-normal leading-[18px]">0</div>
|
|
126
126
|
</div>
|
|
127
127
|
</div>
|
|
128
128
|
<div className="xs_self-end lg_self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-flex">
|
|
@@ -92,12 +92,12 @@ const SellerReviewItem = ({ review }) => {
|
|
|
92
92
|
<div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
|
|
93
93
|
<div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
|
|
94
94
|
<div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
|
|
95
|
-
<div class="relative w-fit font-semibold text-white text-[
|
|
95
|
+
<div class="relative w-fit font-semibold text-white text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
|
|
96
96
|
{review ? getInitialName(review.nickname) : ''}
|
|
97
97
|
</div>
|
|
98
98
|
</div>
|
|
99
99
|
<div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
|
|
100
|
-
<div class="relative w-fit mt-[-1.00px] font-medium text-
|
|
100
|
+
<div class="relative w-fit mt-[-1.00px] font-medium text-base text-center tracking-[0] leading-[18px] whitespace-nowrap">
|
|
101
101
|
{review ? review.nickname : ''}
|
|
102
102
|
</div>
|
|
103
103
|
<div class="relative w-fit font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">
|
|
@@ -107,26 +107,26 @@ const SellerReviewItem = ({ review }) => {
|
|
|
107
107
|
</div>
|
|
108
108
|
<div class="flex xs_flex-col sm_flex-row items-start xs_gap-1 sm_gap-[20px] relative flex-[0_0_auto]">
|
|
109
109
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
110
|
-
<div class="relative w-fit font-normal text-
|
|
110
|
+
<div class="relative w-fit font-normal text-base tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
|
|
111
111
|
<div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
|
|
112
112
|
<ReviewRating rate={rate1} />
|
|
113
113
|
</div>
|
|
114
114
|
</div>
|
|
115
115
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
116
|
-
<div class="relative w-[37px] font-normal text-
|
|
116
|
+
<div class="relative w-[37px] font-normal text-base tracking-[0] leading-[18px]">Value</div>
|
|
117
117
|
<div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
|
|
118
118
|
<ReviewRating rate={rate2} />
|
|
119
119
|
</div>
|
|
120
120
|
</div>
|
|
121
121
|
<div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
|
|
122
|
-
<div class="relative w-fit font-normal text-
|
|
122
|
+
<div class="relative w-fit font-normal text-base tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
|
|
123
123
|
<div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
|
|
124
124
|
<ReviewRating rate={rate3} />
|
|
125
125
|
</div>
|
|
126
126
|
</div>
|
|
127
127
|
</div>
|
|
128
128
|
</div>
|
|
129
|
-
<p class="relative self-stretch font-normal text-
|
|
129
|
+
<p class="relative self-stretch font-normal text-base tracking-[0] leading-[18px]">
|
|
130
130
|
{review ? review.detail : ''}
|
|
131
131
|
</p>
|
|
132
132
|
</div>
|
|
@@ -8,12 +8,12 @@ const Sort = () => {
|
|
|
8
8
|
<div class="xs_flex xl_hidden flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
|
|
9
9
|
<div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
|
|
10
10
|
<Filter color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
|
|
11
|
-
<div class="relative w-fit text-
|
|
11
|
+
<div class="relative w-fit text-base tracking-[0] leading-[normal] whitespace-nowrap">Filter</div>
|
|
12
12
|
</div>
|
|
13
13
|
</div>
|
|
14
14
|
<div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-gray-100">
|
|
15
15
|
<div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
|
|
16
|
-
<div class="relative w-fit text-
|
|
16
|
+
<div class="relative w-fit text-base tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
|
|
17
17
|
<ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
|
|
18
18
|
</div>
|
|
19
19
|
</div>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
composes: border from global;
|
|
15
15
|
composes: border-solid from global;
|
|
16
16
|
composes: leading-normal from global;
|
|
17
|
-
composes: text-
|
|
17
|
+
composes: text-base from global;
|
|
18
18
|
composes: text-colorDefault from global;
|
|
19
19
|
composes: bg-white from global;
|
|
20
20
|
composes: border-gray-100 from global;
|
|
@@ -62,7 +62,7 @@ const WebsiteSwitcher = props => {
|
|
|
62
62
|
groups.push(
|
|
63
63
|
<ul
|
|
64
64
|
role="listbox"
|
|
65
|
-
className={'text-
|
|
65
|
+
className={'text-base'}
|
|
66
66
|
key={key}
|
|
67
67
|
data-cy="WebsiteSwitcher-group"
|
|
68
68
|
>
|
|
@@ -77,13 +77,13 @@ const WebsiteSwitcher = props => {
|
|
|
77
77
|
<div className={cn(classes.root, 'leading-[16px]')} data-cy="WebsiteSwitcher-root">
|
|
78
78
|
<button
|
|
79
79
|
data-cy="WebsiteSwitcher-triggerButton"
|
|
80
|
-
className={cn(classes.trigger, 'text-
|
|
80
|
+
className={cn(classes.trigger, 'text-base')}
|
|
81
81
|
aria-label={currentWebsiteName || ''}
|
|
82
82
|
onClick={handleTriggerClick}
|
|
83
83
|
ref={storeMenuTriggerRef}
|
|
84
84
|
aria-expanded={storeMenuIsOpen}
|
|
85
85
|
>
|
|
86
|
-
<span className='flex flex-row gap-[5px] items-center leading-[16px]
|
|
86
|
+
<span className='flex flex-row gap-[5px] items-center leading-[16px]'>
|
|
87
87
|
{triggerLabel || ''}
|
|
88
88
|
{!hasOnlyOneGroup ? (
|
|
89
89
|
<ArrowUp2 size="12" color={darkBlue} className={cn(storeMenuIsOpen ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
|
|
@@ -95,8 +95,8 @@ const WebsiteSwitcher = props => {
|
|
|
95
95
|
className={menuClassName}
|
|
96
96
|
data-cy="WebsiteSwitcher-menu"
|
|
97
97
|
>
|
|
98
|
-
<div className={
|
|
99
|
-
<span className='flex font-medium px-4 py-1 w-full text-
|
|
98
|
+
<div className={classes.groups}>
|
|
99
|
+
<span className='flex font-medium px-4 py-1 w-full text-base mb-2'>
|
|
100
100
|
Country
|
|
101
101
|
</span>
|
|
102
102
|
{groups}
|
|
@@ -16,11 +16,11 @@ const Tabs = (props) => {
|
|
|
16
16
|
|
|
17
17
|
const [activeTabs, setActiveTabs] = React.useState(0);
|
|
18
18
|
const rootClass = cn('mb-4 border-b border-gray-100', rootClassName);
|
|
19
|
-
const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[
|
|
19
|
+
const tabTitleClass = cn('inline-block p-[10px] rounded-t-lg text-[14px] font-semibold', tabTitleClassName);
|
|
20
20
|
const tabContainerClass = cn('tab-content-container', tabContentContainerClassName);
|
|
21
21
|
const tabContentWrapperClass = cn('tab-content-wrapper', tabContentWrapperClassName);
|
|
22
22
|
const tabActiveClass = cn('border-solid border-b-2', tabActiveClassName);
|
|
23
|
-
const tabWrapperClass = cn('flex flex-wrap -mb-px text-
|
|
23
|
+
const tabWrapperClass = cn('flex flex-wrap -mb-px text-base font-medium text-center gap-4', tabWrapperClassName);
|
|
24
24
|
|
|
25
25
|
const handleSwicthTab = (index) => {
|
|
26
26
|
setActiveTabs(index);
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
composes: mx-0 from global;
|
|
47
47
|
composes: my-xs from global;
|
|
48
48
|
composes: text-center from global;
|
|
49
|
-
composes: text-
|
|
49
|
+
composes: text-base from global;
|
|
50
50
|
composes: lg_m-0 from global;
|
|
51
51
|
composes: lg_text-left from global;
|
|
52
52
|
composes: py-4 from global;
|
|
@@ -9,24 +9,24 @@
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.text {
|
|
12
|
-
composes: text-
|
|
12
|
+
composes: text-base from global;
|
|
13
13
|
composes: leading-[13px] from global;
|
|
14
14
|
composes: text-blue-700 from global;
|
|
15
15
|
composes: font-medium from global;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.divider {
|
|
19
|
-
composes: text-
|
|
19
|
+
composes: text-base from global;
|
|
20
20
|
composes: leading-[13px] from global;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.link {
|
|
24
|
-
composes: text-
|
|
24
|
+
composes: text-base from global;
|
|
25
25
|
composes: leading-[13px] from global;
|
|
26
26
|
composes: text-gray-200 from global;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.currentCategory {
|
|
30
|
-
composes: text-
|
|
30
|
+
composes: text-base from global;
|
|
31
31
|
composes: leading-[13px] from global;
|
|
32
32
|
}
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
composes: justify-self-start from global;
|
|
45
45
|
composes: text-colorDefault from global;
|
|
46
46
|
grid-area: label;
|
|
47
|
-
composes: text-
|
|
47
|
+
composes: text-base from global;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
/* When the input is disabled, update the cursor on the sibling label element. */
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
composes: flex from global;
|
|
31
31
|
composes: items-center from global;
|
|
32
32
|
composes: leading-normal from global;
|
|
33
|
-
composes: text-[
|
|
33
|
+
composes: text-[14px] from global;
|
|
34
34
|
composes: font-semibold from global;
|
|
35
35
|
composes: px-2.5 from global;
|
|
36
36
|
composes: mb-2.5 from global;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
/* TODO @TW: cannot compose */
|
|
45
45
|
.action button {
|
|
46
|
-
/* composes: text-
|
|
46
|
+
/* composes: text-base from global; */
|
|
47
47
|
font-size: 13px;
|
|
48
48
|
/* composes: no-underline from global; */
|
|
49
49
|
font-weight: 500;
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
|
|
74
74
|
.name {
|
|
75
75
|
composes: font-medium from global;
|
|
76
|
-
composes: text-
|
|
76
|
+
composes: text-base from global;
|
|
77
77
|
composes: mb-[18px] from global;
|
|
78
78
|
display: -webkit-box;
|
|
79
79
|
-webkit-line-clamp: 2;
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
.name,
|
|
86
86
|
.price {
|
|
87
87
|
composes: text-colorDefault from global;
|
|
88
|
-
composes: text-[
|
|
88
|
+
composes: text-[14px] from global;
|
|
89
89
|
composes: font-semibold from global;
|
|
90
90
|
min-height: 1rem;
|
|
91
91
|
}
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
composes: items-center from global;
|
|
104
104
|
composes: justify-start from global;
|
|
105
105
|
composes: p-3 from global;
|
|
106
|
-
composes: text-
|
|
106
|
+
composes: text-base from global;
|
|
107
107
|
composes: text-subtle from global;
|
|
108
108
|
composes: w-full from global;
|
|
109
109
|
}
|
|
@@ -3,7 +3,7 @@ import React from 'react'
|
|
|
3
3
|
export const star = () => {
|
|
4
4
|
return (
|
|
5
5
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
6
|
-
<path d="M8.00887 2.04754L9.03554 4.10087C9.17554 4.38671 9.54887 4.66087 9.86387 4.71337L11.7247 5.02254C12.9147 5.22087 13.1947 6.08421 12.3372 6.93587L10.8905 8.38254C10.6455 8.62754 10.5114 9.10004 10.5872 9.43837L11.0014 11.2292C11.328 12.6467 10.5755 13.195 9.32137 12.4542L7.5772 11.4217C7.2622 11.235 6.74304 11.235 6.4222 11.4217L4.67804 12.4542C3.4297 13.195 2.67137 12.6409 2.99804 11.2292L3.4122 9.43837C3.48804 9.10004 3.35387 8.62754 3.10887 8.38254L1.6622 6.93587C0.810536 6.08421 1.0847 5.22087 2.2747 5.02254L4.13554 4.71337C4.4447 4.66087 4.81804 4.38671 4.95804 4.10087L5.9847 2.04754C6.5447 0.933372 7.4547 0.933372 8.00887 2.04754Z" fill="#F7C317" stroke="#F7C317"
|
|
6
|
+
<path d="M8.00887 2.04754L9.03554 4.10087C9.17554 4.38671 9.54887 4.66087 9.86387 4.71337L11.7247 5.02254C12.9147 5.22087 13.1947 6.08421 12.3372 6.93587L10.8905 8.38254C10.6455 8.62754 10.5114 9.10004 10.5872 9.43837L11.0014 11.2292C11.328 12.6467 10.5755 13.195 9.32137 12.4542L7.5772 11.4217C7.2622 11.235 6.74304 11.235 6.4222 11.4217L4.67804 12.4542C3.4297 13.195 2.67137 12.6409 2.99804 11.2292L3.4122 9.43837C3.48804 9.10004 3.35387 8.62754 3.10887 8.38254L1.6622 6.93587C0.810536 6.08421 1.0847 5.22087 2.2747 5.02254L4.13554 4.71337C4.4447 4.66087 4.81804 4.38671 4.95804 4.10087L5.9847 2.04754C6.5447 0.933372 7.4547 0.933372 8.00887 2.04754Z" fill="#F7C317" stroke="#F7C317" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
7
7
|
</svg>
|
|
8
8
|
|
|
9
9
|
)
|
|
@@ -66,8 +66,8 @@ const AccountTrigger = props => {
|
|
|
66
66
|
})}
|
|
67
67
|
shouldIndicateLoading={true}
|
|
68
68
|
/> */}
|
|
69
|
-
<User size="
|
|
70
|
-
<span className='text-
|
|
69
|
+
<User size="25" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
|
|
70
|
+
<span className='text-base font-semibold'>
|
|
71
71
|
{formatMessage({
|
|
72
72
|
id: 'accountTrigger.buttonFallback',
|
|
73
73
|
defaultMessage: 'Sign In'
|
|
@@ -7,7 +7,7 @@ import { useCartTrigger } from '@magento/peregrine/lib/talons/Header/useCartTrig
|
|
|
7
7
|
|
|
8
8
|
import { useStyle } from '@magento/venia-ui/lib/classify';
|
|
9
9
|
import Icon from '@magento/venia-ui/lib/components/Icon';
|
|
10
|
-
import defaultClasses from '
|
|
10
|
+
import defaultClasses from './cartTrigger.module.css';
|
|
11
11
|
import { GET_ITEM_COUNT_QUERY } from '@magento/venia-ui/lib/components/Header/cartTrigger.gql';
|
|
12
12
|
import cn from 'classnames';
|
|
13
13
|
import { ShoppingCart } from 'iconsax-react';
|
|
@@ -50,7 +50,7 @@ const CartTrigger = props => {
|
|
|
50
50
|
<span
|
|
51
51
|
className={cn(
|
|
52
52
|
classes.counter,
|
|
53
|
-
'bg-yellow-300 min-w-[18px] min-h-[18px] text-
|
|
53
|
+
'bg-yellow-300 min-w-[18px] min-h-[18px] text-base font-regular leading-[18px] top-[-5px]',
|
|
54
54
|
'!left-auto right-[0px]'
|
|
55
55
|
)}
|
|
56
56
|
data-cy="CartTrigger-counter"
|
|
@@ -76,7 +76,7 @@ const CartTrigger = props => {
|
|
|
76
76
|
data-cy="CartTrigger-trigger"
|
|
77
77
|
>
|
|
78
78
|
{/* <Icon src={ShoppingCartIcon} /> */}
|
|
79
|
-
<ShoppingCart size="
|
|
79
|
+
<ShoppingCart size="25" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
|
|
80
80
|
{maybeItemCounter}
|
|
81
81
|
</button>
|
|
82
82
|
</div>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.counter {
|
|
2
|
+
composes: absolute from global;
|
|
3
|
+
composes: bg-brand-dark from global;
|
|
4
|
+
composes: font-semibold from global;
|
|
5
|
+
composes: leading-tight from global;
|
|
6
|
+
composes: left-sm from global;
|
|
7
|
+
composes: min-w-[1.25rem] from global;
|
|
8
|
+
composes: px-1 from global;
|
|
9
|
+
composes: py-0 from global;
|
|
10
|
+
composes: rounded-full from global;
|
|
11
|
+
composes: text-white from global;
|
|
12
|
+
composes: top-1.5 from global;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.trigger {
|
|
16
|
+
composes: root from '@magento/venia-ui/lib/components/clickable.module.css';
|
|
17
|
+
|
|
18
|
+
composes: content-center from global;
|
|
19
|
+
composes: flex from global;
|
|
20
|
+
composes: h-[3rem] from global;
|
|
21
|
+
composes: justify-center from global;
|
|
22
|
+
composes: min-w-[3rem] from global;
|
|
23
|
+
composes: relative from global;
|
|
24
|
+
composes: z-foreground from global;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.triggerContainer {
|
|
28
|
+
composes: hidden from global;
|
|
29
|
+
composes: items-center from global;
|
|
30
|
+
composes: h-lg from global;
|
|
31
|
+
|
|
32
|
+
composes: lg_grid from global;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.triggerContainer_open {
|
|
36
|
+
composes: triggerContainer;
|
|
37
|
+
|
|
38
|
+
composes: shadow-headerTrigger from global;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.link {
|
|
42
|
+
composes: trigger;
|
|
43
|
+
|
|
44
|
+
composes: flex from global;
|
|
45
|
+
|
|
46
|
+
composes: lg_hidden from global;
|
|
47
|
+
}
|
|
@@ -81,7 +81,7 @@ const Header = props => {
|
|
|
81
81
|
className={''}
|
|
82
82
|
data-cy="Header-logoContainer"
|
|
83
83
|
>
|
|
84
|
-
<div><b>TCG Collective</b></div>
|
|
84
|
+
<div className='text-base'><b>TCG Collective</b></div>
|
|
85
85
|
<small>Bringing Collectors Together</small>
|
|
86
86
|
</Link>
|
|
87
87
|
</div>
|
|
@@ -106,7 +106,7 @@ const Header = props => {
|
|
|
106
106
|
<MegaMenu
|
|
107
107
|
rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
|
|
108
108
|
megaMenuItemClassname={cn('px-0 py-[15px] leading-[20px]')}
|
|
109
|
-
titleClassName={cn('font-medium leading-[20px]
|
|
109
|
+
titleClassName={cn('font-medium leading-[20px]')}
|
|
110
110
|
/>
|
|
111
111
|
</header>
|
|
112
112
|
<OnlineIndicator
|
|
@@ -62,7 +62,7 @@ const StoreSwitcher = props => {
|
|
|
62
62
|
groups.push(
|
|
63
63
|
<ul
|
|
64
64
|
role="listbox"
|
|
65
|
-
className={cn(classes.groupList, 'text-
|
|
65
|
+
className={cn(classes.groupList, 'text-base')}
|
|
66
66
|
key={key}
|
|
67
67
|
data-cy="StoreSwitcher-group"
|
|
68
68
|
>
|
|
@@ -75,13 +75,13 @@ const StoreSwitcher = props => {
|
|
|
75
75
|
<div className={cn(classes.root, 'leading-[16px]')} data-cy="StoreSwitcher-root">
|
|
76
76
|
<button
|
|
77
77
|
data-cy="StoreSwitcher-triggerButton"
|
|
78
|
-
className={cn(classes.trigger, 'text-
|
|
78
|
+
className={cn(classes.trigger, 'text-base')}
|
|
79
79
|
aria-label={currentStoreName || ''}
|
|
80
80
|
onClick={handleTriggerClick}
|
|
81
81
|
ref={storeMenuTriggerRef}
|
|
82
82
|
aria-expanded={storeMenuIsOpen}
|
|
83
83
|
>
|
|
84
|
-
<span className='flex flex-row gap-[5px] items-center leading-[16px]
|
|
84
|
+
<span className='flex flex-row gap-[5px] items-center leading-[16px]'>
|
|
85
85
|
{currentStoreName || ''}
|
|
86
86
|
{!hasOnlyOneStore ? (
|
|
87
87
|
<ArrowUp2 size="12" color={darkBlue} className={cn(storeMenuIsOpen ? 'rotate-0 ' : 'rotate-180', 'transition-all stroke-current')} variant="Outline" />
|
|
@@ -93,8 +93,8 @@ const StoreSwitcher = props => {
|
|
|
93
93
|
className={menuClassName}
|
|
94
94
|
data-cy="StoreSwitcher-menu"
|
|
95
95
|
>
|
|
96
|
-
<div className={
|
|
97
|
-
<span className='flex font-medium px-4 py-1 w-full text-
|
|
96
|
+
<div className={classes.groups}>
|
|
97
|
+
<span className='flex font-medium px-4 py-1 w-full text-base'>
|
|
98
98
|
Language
|
|
99
99
|
</span>
|
|
100
100
|
{groups}
|
|
@@ -14,7 +14,7 @@ const wishlistTrigger = () => {
|
|
|
14
14
|
className={''}
|
|
15
15
|
data-cy="wishlistLink"
|
|
16
16
|
>
|
|
17
|
-
<Heart size="
|
|
17
|
+
<Heart size="25" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
|
|
18
18
|
</Link>
|
|
19
19
|
</div>
|
|
20
20
|
)
|
|
@@ -67,6 +67,7 @@ const MegaMenuItem = props => {
|
|
|
67
67
|
isFocused={isFocused}
|
|
68
68
|
subMenuState={subMenuState}
|
|
69
69
|
items={category.children}
|
|
70
|
+
parentCategory={category}
|
|
70
71
|
shopByItems={category.shop_by}
|
|
71
72
|
mainNavWidth={mainNavWidth}
|
|
72
73
|
handleCloseSubMenu={handleCloseSubMenu}
|
|
@@ -113,7 +114,7 @@ const MegaMenuItem = props => {
|
|
|
113
114
|
}}
|
|
114
115
|
onMouseLeave={e => {
|
|
115
116
|
handleClickOutside(e);
|
|
116
|
-
|
|
117
|
+
handleCloseSubMenu();
|
|
117
118
|
}}
|
|
118
119
|
>
|
|
119
120
|
<Link
|
|
@@ -4,25 +4,27 @@ import { Link } from 'react-router-dom';
|
|
|
4
4
|
import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
|
|
5
5
|
|
|
6
6
|
import { useStyle } from '@magento/venia-ui/lib/classify';
|
|
7
|
-
import defaultClasses from './
|
|
7
|
+
import defaultClasses from './submenuColumn.module.css';
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
|
|
10
10
|
const ShopByColumn = props => {
|
|
11
11
|
const classes = useStyle(defaultClasses, props.classes);
|
|
12
12
|
|
|
13
13
|
const {
|
|
14
|
-
shopBy
|
|
14
|
+
shopBy,
|
|
15
|
+
category,
|
|
16
|
+
categoryUrlSuffix,
|
|
17
|
+
handleCloseSubMenu,
|
|
18
|
+
onNavigate
|
|
15
19
|
} = props;
|
|
16
20
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
// );
|
|
21
|
+
const { url_path } = category;
|
|
22
|
+
|
|
20
23
|
let items = null;
|
|
21
24
|
|
|
22
25
|
if (shopBy.items.length) {
|
|
23
26
|
const childrenItems = shopBy.items.map((shopByItem, index) => {
|
|
24
|
-
|
|
25
|
-
const { name } = shopByItem;
|
|
27
|
+
const { name, option_id } = shopByItem;
|
|
26
28
|
// const categoryUrl = resourceUrl(
|
|
27
29
|
// `/${url_path}${categoryUrlSuffix || ''}`
|
|
28
30
|
// );
|
|
@@ -33,6 +35,10 @@ const ShopByColumn = props => {
|
|
|
33
35
|
? props.keyboardProps
|
|
34
36
|
: {};
|
|
35
37
|
|
|
38
|
+
const categoryUrl = resourceUrl(
|
|
39
|
+
`/${url_path}${categoryUrlSuffix || ''}?${shopBy.code}[filter]=${name},${option_id}`
|
|
40
|
+
);
|
|
41
|
+
|
|
36
42
|
return (
|
|
37
43
|
<li key={index} className={classes.submenuChildItem}>
|
|
38
44
|
<Link
|
|
@@ -40,8 +46,8 @@ const ShopByColumn = props => {
|
|
|
40
46
|
// className={isActive ? classes.linkActive : classes.link}
|
|
41
47
|
className={classes.link}
|
|
42
48
|
data-cy="MegaMenu-ShopByColumn-link"
|
|
43
|
-
|
|
44
|
-
|
|
49
|
+
to={categoryUrl}
|
|
50
|
+
onClick={handleCloseSubMenu}
|
|
45
51
|
>
|
|
46
52
|
{name}
|
|
47
53
|
</Link>
|
|
@@ -53,21 +59,11 @@ const ShopByColumn = props => {
|
|
|
53
59
|
}
|
|
54
60
|
|
|
55
61
|
return (
|
|
56
|
-
<div className={classes.
|
|
57
|
-
{
|
|
58
|
-
{
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
to={categoryUrl}
|
|
62
|
-
onClick={() => {
|
|
63
|
-
handleCloseSubMenu();
|
|
64
|
-
onNavigate();
|
|
65
|
-
}}
|
|
66
|
-
>
|
|
67
|
-
<span className={classes.heading}>{category.name}</span>
|
|
68
|
-
</Link> */}
|
|
69
|
-
<span className={classes.heading}>{shopBy.name}</span>
|
|
70
|
-
{items}
|
|
62
|
+
<div className={classes.submenuItems}>
|
|
63
|
+
<div className={classes.submenuColumn}>
|
|
64
|
+
<span className={classes.heading}>{shopBy.name}</span>
|
|
65
|
+
{items}
|
|
66
|
+
</div>
|
|
71
67
|
</div>
|
|
72
68
|
);
|
|
73
69
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.submenuColumn {
|
|
2
2
|
composes: max-w-[235px] from global;
|
|
3
3
|
composes: p-5 from global;
|
|
4
4
|
}
|
|
@@ -9,9 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
.link {
|
|
11
11
|
composes: whitespace-nowrap from global;
|
|
12
|
-
|
|
13
12
|
composes: focus_underline from global;
|
|
14
|
-
|
|
15
13
|
composes: hover_underline from global;
|
|
16
14
|
}
|
|
17
15
|
|
|
@@ -20,7 +18,7 @@
|
|
|
20
18
|
}
|
|
21
19
|
|
|
22
20
|
.submenuChild {
|
|
23
|
-
composes: mt-
|
|
21
|
+
composes: mt-0 from global;
|
|
24
22
|
}
|
|
25
23
|
|
|
26
24
|
.submenuChildItem {
|
|
@@ -24,6 +24,7 @@ const Submenu = props => {
|
|
|
24
24
|
subMenuState,
|
|
25
25
|
handleCloseSubMenu,
|
|
26
26
|
categoryUrlSuffix,
|
|
27
|
+
parentCategory,
|
|
27
28
|
onNavigate
|
|
28
29
|
} = props;
|
|
29
30
|
const PADDING_OFFSET = 20;
|
|
@@ -76,9 +77,10 @@ const Submenu = props => {
|
|
|
76
77
|
<ShopByColumn
|
|
77
78
|
index={index}
|
|
78
79
|
keyboardProps={keyboardProps}
|
|
79
|
-
|
|
80
|
+
key={shopBy.code}
|
|
81
|
+
category={parentCategory}
|
|
80
82
|
shopBy={shopBy}
|
|
81
|
-
|
|
83
|
+
categoryUrlSuffix={categoryUrlSuffix}
|
|
82
84
|
onNavigate={onNavigate}
|
|
83
85
|
handleCloseSubMenu={handleCloseSubMenu}
|
|
84
86
|
/>
|
|
@@ -87,11 +89,12 @@ const Submenu = props => {
|
|
|
87
89
|
|
|
88
90
|
return (
|
|
89
91
|
<div className={subMenuClassname}>
|
|
90
|
-
<div
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
92
|
+
<div className={classes.submenuContainer}>
|
|
93
|
+
<div
|
|
94
|
+
className={classes.submenuItems}
|
|
95
|
+
>
|
|
96
|
+
{subMenus}
|
|
97
|
+
</div>
|
|
95
98
|
{shopBy}
|
|
96
99
|
</div>
|
|
97
100
|
</div>
|
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
.submenu {
|
|
2
2
|
composes: absolute from global;
|
|
3
3
|
composes: bg-white from global;
|
|
4
|
-
composes: flex-wrap from global;
|
|
5
|
-
composes: justify-between from global;
|
|
6
4
|
composes: left-0 from global;
|
|
7
5
|
composes: px-3 from global;
|
|
8
6
|
composes: py-5 from global;
|
|
9
7
|
composes: right-0 from global;
|
|
10
|
-
top:
|
|
8
|
+
top: 130px;
|
|
11
9
|
box-shadow: 0 3px rgb(var(--venia-global-color-gray-100));
|
|
12
10
|
}
|
|
13
11
|
|
|
12
|
+
.submenuContainer {
|
|
13
|
+
composes: w-full from global;
|
|
14
|
+
composes: max-w-[1210px] from global;
|
|
15
|
+
composes: flex-wrap from global;
|
|
16
|
+
composes: justify-start from global;
|
|
17
|
+
composes: mx-[auto] from global;
|
|
18
|
+
composes: flex from global;
|
|
19
|
+
composes: gap-[15px] from global;
|
|
20
|
+
}
|
|
21
|
+
|
|
14
22
|
/* TODO @TW: cannot compose */
|
|
15
23
|
.submenu::before {
|
|
16
24
|
box-shadow: inset 0 2px rgb(var(--venia-global-color-gray-100));
|
|
@@ -30,14 +38,13 @@
|
|
|
30
38
|
|
|
31
39
|
.submenu_active {
|
|
32
40
|
composes: submenu;
|
|
33
|
-
composes: flex from global;
|
|
34
41
|
}
|
|
35
42
|
|
|
36
43
|
.submenuItems {
|
|
37
44
|
composes: flex from global;
|
|
38
45
|
composes: flex-wrap from global;
|
|
39
|
-
composes: justify-between from global;
|
|
40
|
-
composes: ml-auto from global;
|
|
41
|
-
composes: mr-auto from global;
|
|
46
|
+
/* composes: justify-between from global; */
|
|
47
|
+
/* composes: ml-auto from global; */
|
|
48
|
+
/* composes: mr-auto from global; */
|
|
42
49
|
composes: flex-col from global;
|
|
43
50
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.submenuColumn {
|
|
2
2
|
composes: max-w-[235px] from global;
|
|
3
|
-
composes: p-
|
|
3
|
+
composes: p-2 from global;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.heading {
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
.submenuChild {
|
|
23
|
-
composes: mt-
|
|
23
|
+
composes: mt-0 from global;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.submenuChildItem {
|
|
27
|
-
composes: mb-
|
|
27
|
+
composes: mb-0 from global;
|
|
28
28
|
}
|
|
@@ -266,12 +266,12 @@ const ProductFullDetail = props => {
|
|
|
266
266
|
</h1>
|
|
267
267
|
<div className='product_review-container flex items-center gap-x-2'>
|
|
268
268
|
<div className='product_rating leading-[14px]'>
|
|
269
|
-
<span className='text-gray-200 text-
|
|
269
|
+
<span className='text-gray-200 text-base'>
|
|
270
270
|
{rating_value}
|
|
271
271
|
</span>
|
|
272
272
|
</div>
|
|
273
273
|
<div className='before_block before_w-[1px] before_bg-gray-200 before_h-full before_relative w-[1px] h-[14px]'></div>
|
|
274
|
-
<span className='review_count text-gray-200 text-
|
|
274
|
+
<span className='review_count text-gray-200 text-base leading-[14px]'>
|
|
275
275
|
{review_count} Reviews
|
|
276
276
|
</span>
|
|
277
277
|
</div>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
composes: rounded-b-md from global;
|
|
14
14
|
composes: rounded-t-none from global;
|
|
15
15
|
composes: shadow-inputFocus from global;
|
|
16
|
-
composes: text-
|
|
16
|
+
composes: text-base from global;
|
|
17
17
|
composes: top-9 from global;
|
|
18
18
|
composes: z-menu from global;
|
|
19
19
|
transition-property: opacity, transform, visibility;
|