From cf89e3b0648bb07ed038f872183bd7ecea064df0 Mon Sep 17 00:00:00 2001
From: Samantha Kellow <sammii.h@icloud.com>
Date: Wed, 24 Apr 2024 19:08:16 +0100
Subject: [PATCH] styling accordians and drop downs
---
@/components/ui/accordion.tsx | 2 +-
components/layout/search/filter/dropdown.tsx | 4 ++--
components/layout/search/filter/item.tsx | 4 ++--
components/product/gallery.tsx | 6 +++---
components/ui/prose.tsx | 2 +-
5 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/@/components/ui/accordion.tsx b/@/components/ui/accordion.tsx
index fed369166..7bf547d6c 100644
--- a/@/components/ui/accordion.tsx
+++ b/@/components/ui/accordion.tsx
@@ -52,7 +52,7 @@ const AccordionContent = React.forwardRef<
)}
{...props}
>
- <div className="pb-4 pt-0">{children}</div>
+ <div className="pb-4 pt-0 text-neutral-50">{children}</div>
</AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
diff --git a/components/layout/search/filter/dropdown.tsx b/components/layout/search/filter/dropdown.tsx
index 31daa25ce..5aadb134e 100644
--- a/components/layout/search/filter/dropdown.tsx
+++ b/components/layout/search/filter/dropdown.tsx
@@ -42,7 +42,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
onClick={() => {
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>
<ChevronDownIcon className="h-4" />
@@ -52,7 +52,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
onClick={() => {
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) => (
<FilterItem key={i} item={item} />
diff --git a/components/layout/search/filter/item.tsx b/components/layout/search/filter/item.tsx
index d9298582c..d4d3a82f8 100644
--- a/components/layout/search/filter/item.tsx
+++ b/components/layout/search/filter/item.tsx
@@ -22,7 +22,7 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
}, [pathname, item.path]);
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
href={createUrl(item.path, newParams)}
className={clsx(
@@ -57,7 +57,7 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
}, [searchParams, item.slug]);
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
prefetch={!active ? false : undefined}
href={href}
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index f5b385f4c..a97660b1d 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -35,7 +35,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
{images.length > 1 ? (
<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
aria-label="Previous product image"
onClick={() => handleNavigate('previous')}
@@ -43,7 +43,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
>
<ArrowLeftIcon className="h-5" />
</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
aria-label="Next product image"
onClick={() => handleNavigate('next')}
@@ -57,7 +57,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
</div>
{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) => {
const isActive = index === currentImageIndex;
return (
diff --git a/components/ui/prose.tsx b/components/ui/prose.tsx
index f910d2296..5ae2410d8 100644
--- a/components/ui/prose.tsx
+++ b/components/ui/prose.tsx
@@ -10,7 +10,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
return (
<div
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
)}
dangerouslySetInnerHTML={{ __html: html as string }}