crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-13 05:07:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling accordians and drop downs

Browse Source
This commit is contained in:
Samantha Kellow 2024-04-24 19:08:16 +01:00
parent 49f3776ba8
commit cf89e3b064
5 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
@/components/ui/accordion.tsx
View File

@ -52,7 +52,7 @@ const AccordionContent = React.forwardRef<
)} )}
{...props} {...props}
> >
<div className="pb-4 pt-0">{children}</div> <div className="pb-4 pt-0 text-neutral-50">{children}</div>
</AccordionPrimitive.Content> </AccordionPrimitive.Content>
)) ))
AccordionContent.displayName = AccordionPrimitive.Content.displayName AccordionContent.displayName = AccordionPrimitive.Content.displayName

4
components/layout/search/filter/dropdown.tsx
View File

@ -42,7 +42,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
onClick={() => { onClick={() => {
setOpenSelect(!openSelect); setOpenSelect(!openSelect);
}} }}
className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30" className="flex w-full items-center justify-between rounded border border-neutral-500/30 px-4 py-2 text-sm text-neutral-100 dark:border-white/30"
> >
<div>{active}</div> <div>{active}</div>
<ChevronDownIcon className="h-4" /> <ChevronDownIcon className="h-4" />
@ -52,7 +52,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
onClick={() => { onClick={() => {
setOpenSelect(false); setOpenSelect(false);
}} }}
className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black" className="absolute z-40 w-full rounded-b-md bg-neutral-800 text-neutral-100 p-4 shadow-md dark:bg-black"
> >
{list.map((item: ListItem, i) => ( {list.map((item: ListItem, i) => (
<FilterItem key={i} item={item} /> <FilterItem key={i} item={item} />

4
components/layout/search/filter/item.tsx
View File

@ -22,7 +22,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
}, [pathname, item.path]); }, [pathname, item.path]);
return ( return (
<li className="mt-2 flex text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-neutral-200 dark:text-white" key={item.title}>
<DynamicTag <DynamicTag
href={createUrl(item.path, newParams)} href={createUrl(item.path, newParams)}
className={clsx( className={clsx(
@ -57,7 +57,7 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
}, [searchParams, item.slug]); }, [searchParams, item.slug]);
return ( return (
<li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}> <li className="mt-2 flex text-sm text-neutral-200 dark:text-white" key={item.title}>
<DynamicTag <DynamicTag
prefetch={!active ? false : undefined} prefetch={!active ? false : undefined}
href={href} href={href}

6
components/product/gallery.tsx
View File

@ -35,7 +35,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
{images.length > 1 ? ( {images.length > 1 ? (
<div className="bottom-2 z-50 flex w-full justify-center absolute"> <div className="bottom-2 z-50 flex w-full justify-center absolute">
<div className="mx-auto flex h-8 items-center rounded border border-white bg-neutral-50/50 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80"> <div className="mx-auto flex h-8 items-center rounded border border-neutral-500 bg-neutral-500/30 text-neutral-200 backdrop-blur dark:border-black dark:bg-neutral-900/80">
<button <button
aria-label="Previous product image" aria-label="Previous product image"
onClick={() => handleNavigate('previous')} onClick={() => handleNavigate('previous')}
@ -43,7 +43,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
> >
<ArrowLeftIcon className="h-5" /> <ArrowLeftIcon className="h-5" />
</button> </button>
<div className="mx-1 h-6 w-px bg-neutral-500"></div> <div className="mx-1 h-6 w-px bg-neutral-600"></div>
<button <button
aria-label="Next product image" aria-label="Next product image"
onClick={() => handleNavigate('next')} onClick={() => handleNavigate('next')}
@ -57,7 +57,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
</div> </div>
{images.length > 1 ? ( {images.length > 1 ? (
<div className="flex items-center justify-center gap-2 overflow-auto py-1 pl-20 md:pl-0"> <div className="flex items-center justify-center gap-2 overflow-auto py-1 md:pl-0">
{images.map((image, index) => { {images.map((image, index) => {
const isActive = index === currentImageIndex; const isActive = index === currentImageIndex;
return ( return (

2
components/ui/prose.tsx
View File

@ -10,7 +10,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
return ( return (
<div <div
className={clsx( className={clsx(
'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white', 'prose mx-auto max-w-6xl text-base leading-7 text-neutral-50 prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
className className
)} )}
dangerouslySetInnerHTML={{ __html: html as string }} dangerouslySetInnerHTML={{ __html: html as string }}