Skip to content
This repository was archived by the owner on Jan 26, 2026. It is now read-only.

Commit 94f6659

Browse files
dangthang1903dangthang1903
authored
Merge branch 'Weaverse:main' into main
2 parents aa68c04 + 865d1be commit 94f6659

File tree

21 files changed

+563
-233
lines changed

21 files changed

+563
-233
lines changed

‎app/components/layout/country-selector.tsx‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,23 @@ import type { I18nLocale, Localizations } from "~/types/locale";
1616
import { cn } from "~/utils/cn";
1717
import { DEFAULT_LOCALE } from "~/utils/const";
1818

19-
export function CountrySelector({inputClassName, wrapperClassName}:{inputClassName?: string, wrapperClassName?: string}) {
19+
export function CountrySelector({
20+
inputClassName,
21+
wrapperClassName,
22+
enableFlag = true,
23+
}: {
24+
inputClassName?: string;
25+
wrapperClassName?: string;
26+
enableFlag?: boolean;
27+
}) {
2028
const fetcher = useFetcher();
2129
const submit = useSubmit();
2230
const rootData = useRouteLoaderData<RootLoader>("root");
2331
const selectedLocale = rootData?.selectedLocale ?? DEFAULT_LOCALE;
2432
const { pathname, search } = useLocation();
2533
const pathWithoutLocale = `${pathname.replace(
2634
selectedLocale.pathPrefix,
27-
""
35+
"",
2836
)}${search}`;
2937

3038
const countries = (fetcher.data ?? {}) as Localizations;
@@ -72,19 +80,24 @@ export function CountrySelector({inputClassName, wrapperClassName}:{inputClassNa
7280
};
7381

7482
return (
75-
<div ref={observerRef} className={cn("grid gap-4 w-80", wrapperClassName)}>
83+
<div ref={observerRef} className={cn("grid gap-4 w-48", wrapperClassName)}>
7684
<Popover.Root>
7785
<Popover.Trigger asChild>
7886
<button
7987
type="button"
80-
className={cn("w-full border border-line-subtle overflow-clip cursor-pointer text-left outline-hidden flex items-center gap-2", inputClassName)}
88+
className={cn(
89+
"w-full border border-line-subtle overflow-clip cursor-pointer text-left outline-hidden flex items-center gap-2",
90+
inputClassName,
91+
)}
8192
aria-label="Select country"
8293
>
83-
<ReactCountryFlag
84-
svg
85-
countryCode={selectedLocale.country}
86-
style={{ width: "24px", height: "14px" }}
87-
/>
94+
{enableFlag && (
95+
<ReactCountryFlag
96+
svg
97+
countryCode={selectedLocale.country}
98+
style={{ width: "24px", height: "14px" }}
99+
/>
100+
)}
88101
<span>{selectedLocale.label}</span>
89102
<CaretDownIcon className="ml-auto w-4 h-4" />
90103
</button>

‎app/components/layout/desktop-menu.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useState } from "react";
55
import { Image } from "~/components/image";
66
import Link from "~/components/link";
77
import { useShopMenu } from "~/hooks/use-shop-menu";
8-
import { RevealUnderline } from "~/reveal-underline";
98
import type { SingleMenuItem } from "~/types/menu";
109
import { cn } from "~/utils/cn";
1110

@@ -59,7 +58,7 @@ export function DesktopMenu() {
5958
<Menubar.Content
6059
className={cn([
6160
"px-3 md:px-4 lg:px-6",
62-
"bg-(--color-header-bg) shadow-lg border-t border-line-subtle mt-1.5 lg:mt-3",
61+
"bg-(--color-header-bg-hover) shadow-lg border-t border-line-subtle mt-1.5 lg:mt-3",
6362
isDropdown ? "py-6" : "w-screen py-8",
6463
])}
6564
>
@@ -93,7 +92,7 @@ function DropdownSubMenu({ items }: { items: SingleMenuItem[] }) {
9392
prefetch="intent"
9493
className="transition-none block"
9594
>
96-
<RevealUnderline>{title}</RevealUnderline>
95+
<span>{title}</span>
9796
</Link>
9897
))}
9998
</ul>
@@ -124,7 +123,7 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
124123
"font-normal uppercase",
125124
])}
126125
>
127-
<RevealUnderline>{title}</RevealUnderline>
126+
<span>{title}</span>
128127
</Link>
129128
</SlideIn>
130129
) : (
@@ -138,7 +137,7 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
138137
prefetch="intent"
139138
className="uppercase transition-none"
140139
>
141-
<RevealUnderline>{title}</RevealUnderline>
140+
<span>{title}</span>
142141
</Link>
143142
<div className="flex flex-col gap-1.5">
144143
{children.map((cItem) => (
@@ -148,7 +147,7 @@ function MegaMenu({ items }: { items: SingleMenuItem[] }) {
148147
prefetch="intent"
149148
className="relative inline transition-none"
150149
>
151-
<RevealUnderline>{cItem.title}</RevealUnderline>
150+
<span>{cItem.title}</span>
152151
</Link>
153152
))}
154153
</div>

‎app/components/layout/footer.tsx‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,12 @@ export function Footer() {
9898
<footer
9999
className={cn(
100100
"w-full bg-(--color-footer-bg) text-(--color-footer-text) pt-9 lg:pt-16",
101-
variants({ padding: footerWidth })
101+
variants({ padding: footerWidth }),
102102
)}
103103
>
104104
<div className={cn("w-full h-full", variants({ width: footerWidth }))}>
105-
<div className="md:space-y-9 divide-y divide-line-subtle">
106-
<div className="w-full grid md:grid-cols-2 grid-cols-1 gap-8 md:pb-9 pb-0">
105+
<div className="md:space-y-6 divide-y divide-line-subtle">
106+
<div className="w-full grid md:grid-cols-2 grid-cols-1 gap-8 md:pb-6 pb-0">
107107
<div className="flex flex-col justify-between gap-6">
108108
{footerLogoData ? (
109109
<div className="relative" style={{ width: footerLogoWidth }}>
@@ -119,31 +119,36 @@ export function Footer() {
119119
{shopName}
120120
</div>
121121
)}
122-
<div className="flex flex-col gap-4">
123-
{bio ? <div dangerouslySetInnerHTML={{ __html: bio }} /> : null}
122+
<div className="flex flex-col gap-2">
123+
<div className="flex flex-col gap-6">
124+
<span className="font-semibold">{addressTitle}</span>
125+
<div className="space-y-2">
126+
<p>{storeAddress}</p>
127+
<p>Email: {storeEmail}</p>
128+
</div>
129+
</div>
130+
{bio ? (
131+
<div className="flex flex-col gap-4">
132+
<div dangerouslySetInnerHTML={{ __html: bio }} />
133+
</div>
134+
) : null}
124135
</div>
125136
</div>
126137
<div className="flex flex-col gap-10">
127138
<div className="lg:block md:hidden block">
128139
<FooterMenu />
129140
</div>
130-
<div className="flex flex-col gap-6">
131-
<div className="text-base">{addressTitle}</div>
132-
<div className="space-y-2">
133-
<p>{storeAddress}</p>
134-
<p>Email: {storeEmail}</p>
135-
</div>
136-
</div>
141+
137142
<div className="flex flex-col gap-6 lg:w-fit w-full">
138-
<div className="text-base">{newsletterTitle}</div>
143+
<span className="font-semibold">{newsletterTitle}</span>
139144
<div className="space-y-2">
140145
<p>{newsletterDescription}</p>
141146
<fetcher.Form
142147
onSubmit={(event: FormEvent<HTMLFormElement>) => {
143-
setMessage("");
144-
setError("");
145-
fetcher.submit(event.currentTarget);
146-
}}
148+
setMessage("");
149+
setError("");
150+
fetcher.submit(event.currentTarget);
151+
}}
147152
action="/api/klaviyo"
148153
method="POST"
149154
encType="multipart/form-data"
@@ -185,7 +190,7 @@ export function Footer() {
185190
<div className="lg:hidden md:block hidden">
186191
<FooterMenu />
187192
</div>
188-
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 justify-center items-center pb-9 pt-9 md:pt-0 gap-y-6">
193+
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 justify-center items-center pb-6 pt-6 md:pt-0 gap-y-6">
189194
<p className="order-3 md:col-span-2 lg:order-none lg:col-span-1">
190195
{copyright}
191196
</p>
@@ -204,7 +209,7 @@ export function Footer() {
204209
>
205210
<social.Icon />
206211
</Link>
207-
) : null
212+
) : null,
208213
)}
209214
</div>
210215
</div>
@@ -243,16 +248,20 @@ function FooterMenu() {
243248
{["#", "/"].includes(to) ? (
244249
<span>{title}</span>
245250
) : (
246-
<Link className="w-fit" to={to}>{title}</Link>
251+
<Link className="w-fit" to={to}>
252+
{title}
253+
</Link>
247254
)}
248255
</div>
249256
)}
250257

251258
<div className="font-semibold hidden md:block">
252259
{!isEmpty ? (
253260
<span>{title}</span>
261+
) : ["#", "/"].includes(to) ? (
262+
title
254263
) : (
255-
["#", "/"].includes(to) ? title : <Link to={to}>{title}</Link>
264+
<Link to={to}>{title}</Link>
256265
)}
257266
</div>
258267

‎app/components/layout/header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function Header() {
5858
className={cn(
5959
"w-full z-10",
6060
"transition-all duration-300 ease-in-out",
61-
"bg-(--color-header-bg) hover:bg-(--color-header-bg)",
61+
"bg-(--color-header-bg) hover:bg-(--color-header-bg-hover)",
6262
"text-(--color-header-text) hover:text-(--color-header-text)",
6363
"border-b border-line-subtle",
6464
variants({ padding: headerWidth }),

‎app/components/layout/mobile-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function MobileMenu() {
2828
/>
2929
<Dialog.Content
3030
className={cn([
31-
"fixed inset-0 h-screen bg-(--color-header-bg) pt-4 pb-2 z-10",
31+
"fixed inset-0 h-screen bg-(--color-header-bg-hover) pt-4 pb-2 z-10",
3232
"left-0 -translate-x-full data-[state=open]:translate-x-0 data-[state=open]:animate-enter-from-left",
3333
"focus-visible:outline-hidden",
3434
"uppercase",

‎app/components/layout/predictive-search/search-desktop/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export function PredictiveSearchButtonDesktop({ setIsSearchOpen }) {
5151
className={cn([
5252
"fixed inset-x-0 top-[calc(var(--height-nav)+var(--topbar-height))] bg-(--color-header-bg) z-3",
5353
"border-t border-line-subtle",
54+
"min-h-[300px]",
5455
"-translate-y-full data-[state=open]:translate-y-0",
5556
"data-[state=open]:animate-enter-from-top",
5657
"focus-visible:outline-hidden",

‎app/components/layout/scrolling-announcement.tsx‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { ArrowLeft, ArrowRight, FacebookLogo, InstagramLogo, LinkedinLogo, XLogo } from "@phosphor-icons/react";
1+
import {
2+
FacebookLogo,
3+
InstagramLogo,
4+
LinkedinLogo,
5+
XLogo,
6+
} from "@phosphor-icons/react";
27
import { useThemeSettings } from "@weaverse/hydrogen";
38
import { cva } from "class-variance-authority";
49
import { useEffect, useRef } from "react";
@@ -79,7 +84,7 @@ export function ScrollingAnnouncement() {
7984
if (topbarText) {
8085
document.body.style.setProperty(
8186
"--topbar-height",
82-
`${Math.max(height - window.scrollY, 0)}px`
87+
`${Math.max(height - window.scrollY, 0)}px`,
8388
);
8489
} else {
8590
document.body.style.setProperty("--topbar-height", "0px");
@@ -123,7 +128,7 @@ export function ScrollingAnnouncement() {
123128
<div
124129
className={cn(
125130
"grid lg:grid-cols-3 lg:gap-8 justify-center items-center py-1 grid-cols-1",
126-
variants({ width: announcementWidth })
131+
variants({ width: announcementWidth }),
127132
)}
128133
>
129134
<div className="lg:flex gap-4 justify-start hidden">
@@ -138,7 +143,7 @@ export function ScrollingAnnouncement() {
138143
>
139144
{social.icon}
140145
</Link>
141-
) : null
146+
) : null,
142147
)}
143148
</div>
144149
<div className="relative w-full">
@@ -164,23 +169,48 @@ export function ScrollingAnnouncement() {
164169
</Swiper>
165170

166171
<button
172+
type="button"
167173
className="announcement-prev absolute left-0 top-1/2 -translate-y-1/2 z-10 p-2"
168-
style={{backgroundColor: topbarBgColor,} as React.CSSProperties}
174+
style={{ backgroundColor: topbarBgColor } as React.CSSProperties}
169175
aria-label="Previous slide"
170176
>
171-
<ArrowLeft className="w-5 h-5" />
177+
<svg
178+
xmlns="http://www.w3.org/2000/svg"
179+
width="20"
180+
height="20"
181+
viewBox="0 0 20 20"
182+
fill="none"
183+
className="rotate-180"
184+
>
185+
<path
186+
d="M14.0575 4.74121L13.1737 5.62508L16.9236 9.37496H0.625V10.625H16.9234L13.1737 14.3748L14.0575 15.2586L19.3163 9.99992L14.0575 4.74121Z"
187+
fill="#29231E"
188+
/>
189+
</svg>
172190
</button>
173191

174192
<button
193+
type="button"
175194
className="announcement-next absolute right-0 top-1/2 -translate-y-1/2 z-10 p-2"
176-
style={{backgroundColor: topbarBgColor,} as React.CSSProperties}
195+
style={{ backgroundColor: topbarBgColor } as React.CSSProperties}
177196
aria-label="Next slide"
178197
>
179-
<ArrowRight className="w-5 h-5" />
198+
<svg
199+
xmlns="http://www.w3.org/2000/svg"
200+
width="20"
201+
height="20"
202+
viewBox="0 0 20 20"
203+
fill="none"
204+
>
205+
<path
206+
d="M14.0575 4.74121L13.1737 5.62508L16.9236 9.37496H0.625V10.625H16.9234L13.1737 14.3748L14.0575 15.2586L19.3163 9.99992L14.0575 4.74121Z"
207+
fill="#29231E"
208+
/>
209+
</svg>
180210
</button>
181211
</div>
182212
<div className="lg:flex justify-end hidden">
183-
<CountrySelector inputClassName="px-4 py-2" />
213+
<CountrySelector inputClassName="px-4 py-2" enableFlag={false} />
184214
</div>
185215
</div>
186216
</div>

‎app/components/link.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,12 @@ const variants = cva(["button transition-colors inline-flex"], {
2323
"text-(--btn-primary-text)",
2424
"bg-(--btn-primary-bg)",
2525
"border-(--btn-primary-bg)",
26-
"hover:text-(--btn-primary-bg)",
27-
"hover:bg-(--btn-primary-text)",
28-
"hover:border-(--btn-primary-bg)",
2926
],
3027
secondary: [
3128
"px-4 py-3",
3229
"text-(--btn-secondary-text)",
3330
"bg-(--btn-secondary-bg)",
3431
"border-(--btn-secondary-bg)",
35-
"hover:bg-(--btn-secondary-text)",
36-
"hover:text-(--btn-secondary-bg)",
37-
"hover:border-(--btn-secondary-text)",
3832
],
3933
outline: [
4034
"border px-4 py-3",

‎app/components/product/product-media.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,13 +210,13 @@ export function ProductMedia(props: ProductMediaProps) {
210210
<div className="absolute bottom-6 right-6 z-10 hidden md:flex items-center gap-2">
211211
<button
212212
type="button"
213-
className="media_slider__prev p-2 text-center border border-transparent transition-all duration-200 text-gray-900 bg-white hover:bg-gray-800 hover:text-white left-6 disabled:cursor-not-allowed disabled:text-body-subtle"
213+
className="media_slider__prev rounded-full p-2 text-center border border-transparent transition-all duration-200 text-gray-900 bg-white hover:bg-gray-800 hover:text-white left-6 disabled:cursor-not-allowed disabled:text-body-subtle"
214214
>
215215
<ArrowLeftIcon className="w-4.5 h-4.5" />
216216
</button>
217217
<button
218218
type="button"
219-
className="media_slider__next p-2 text-center border border-transparent transition-all duration-200 text-gray-900 bg-white hover:bg-gray-800 hover:text-white right-6 disabled:cursor-not-allowed disabled:text-body-subtle"
219+
className="media_slider__next rounded-full p-2 text-center border border-transparent transition-all duration-200 text-gray-900 bg-white hover:bg-gray-800 hover:text-white right-6 disabled:cursor-not-allowed disabled:text-body-subtle"
220220
>
221221
<ArrowRightIcon className="w-4.5 h-4.5" />
222222
</button>

‎app/components/product/quantity.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function Quantity(props: QuantityProps) {
1515

1616
return (
1717
<div className="flex justify-between items-center border-b border-line-subtle pb-3" data-motion="fade-up">
18-
<legend className="font-medium leading-tight uppercase">QTY</legend>
18+
<legend className="font-normal leading-tight uppercase">QTY</legend>
1919
<div className="w-fit">
2020
<Select.Root
2121
value={value.toString()}

0 commit comments

Comments
 (0)