feat: dark mode for collection and nft details pages (#270)

ArdentHQ · Oct 24, 2023 · 5de714c · 5de714c
1 parent bbc8e7c
commit 5de714c
Show file tree

Hide file tree

Showing 20 changed files with 97 additions and 79 deletions.
diff --git a/resources/js/Components/Carousel/Carousel.tsx b/resources/js/Components/Carousel/Carousel.tsx
@@ -132,7 +132,7 @@ export const CarouselPreviousButton = ({
     disabled?: boolean;
 }): JSX.Element => (
     <IconButton
-        className={`carousel-button-previous-${carouselKey}`}
+        className={`carousel-button-previous-${carouselKey} dark:border-theme-dark-700 dark:disabled:bg-theme-dark-900 dark:disabled:text-theme-dark-400`}
         data-testid="CarouselNavigationButtons__previous"
         icon="ChevronLeftSmall"
         iconSize="xs"
@@ -151,7 +151,10 @@ export const CarouselNextButton = ({
 }): JSX.Element => (
     <IconButton
         data-testid="CarouselNavigationButtons__next"
-        className={cn(`carousel-button-next-${carouselKey}`, className)}
+        className={cn(
+            `carousel-button-next-${carouselKey} dark:border-theme-dark-700 dark:disabled:bg-theme-dark-900 dark:disabled:text-theme-dark-400`,
+            className,
+        )}
         icon="ChevronRightSmall"
         iconSize="xs"
         disabled={disabled}

diff --git a/...rces/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx b/...rces/js/Components/Collections/CollectionActivityTable/CollectionActivityTable.blocks.tsx
@@ -48,11 +48,11 @@ export const AddressLink = ({
             <Link
                 variant="link"
                 fontSize="text-sm sm:text-base"
-                textColor="text-theme-primary-600"
+                textColor="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500"
                 className="flex items-center"
                 href={addressUrl(address)}
                 external
-                iconClassName="ml-2 text-theme-secondary-500"
+                iconClassName="ml-2 text-theme-secondary-500 dark:text-theme-dark-300"
             >
                 <span className="whitespace-nowrap">
                     <TruncateMiddle
@@ -178,16 +178,21 @@ export const Type = ({
     if (isSmAndAbove) {
         return (
             <>
-                <div className="mr-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-theme-secondary-100">
+                <div className="mr-3 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-theme-secondary-100 dark:bg-theme-dark-800">
                     {showNameColumn && !isLgAndAbove && (
                         <Img
                             data-testid="ActivityTable__image"
-                            className="block aspect-square h-full w-full grow bg-theme-secondary-100 object-cover"
+                            className="block aspect-square h-full w-full grow bg-theme-secondary-100 object-cover dark:bg-theme-dark-800"
                             src={activity.nft.images.small ?? undefined}
                         />
                     )}
 
-                    {(!showNameColumn || isLgAndAbove) && <Icon name={activityIcon} />}
+                    {(!showNameColumn || isLgAndAbove) && (
+                        <Icon
+                            className="dark:text-theme-dark-300"
+                            name={activityIcon}
+                        />
+                    )}
                 </div>
                 <div className="flex flex-col">
                     <div className="flex items-center">
@@ -200,7 +205,7 @@ export const Type = ({
                         {showNameColumn && !isMdAndAbove && (
                             <>
                                 {!isLgAndAbove && (
-                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                 )}
                                 <Timestamp value={activity.timestamp} />
                             </>
@@ -219,16 +224,16 @@ export const Type = ({
                                 variant="link"
                                 className="flex items-center leading-6"
                                 fontSize="text-base"
-                                textColor="text-theme-primary-600"
+                                textColor="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500"
                                 href={transactionUrl(activity.id)}
                                 external
-                                iconClassName="ml-2 text-theme-secondary-500"
+                                iconClassName="ml-2 text-theme-secondary-500 dark:text-theme-dark-300"
                             >
                                 {activityTypeLabel}
                             </Link>
                             {!showNameColumn && !isMdAndAbove && (
                                 <>
-                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                     <Timestamp value={activity.timestamp} />
                                 </>
                             )}
@@ -237,7 +242,7 @@ export const Type = ({
                         {!isXlAndAbove && (
                             <>
                                 {showNameColumn && !isLgAndAbove && (
-                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                    <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                 )}
                                 {isMdAndAbove && <Timestamp value={activity.timestamp} />}
                                 {!isMdAndAbove && nativeToken != null && (
@@ -278,18 +283,18 @@ export const Type = ({
         <div className="flex items-center space-x-2">
             <Link
                 variant="link"
-                textColor="text-theme-primary-600"
+                textColor="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500"
                 href={transactionUrl(activity.id)}
                 className="flex items-center"
                 external
-                iconClassName="ml-2 text-theme-secondary-500"
+                iconClassName="ml-2 text-theme-secondary-500 dark:text-theme-dark-300"
             >
                 <span className="text-sm font-medium">{activityTypeLabel}</span>
             </Link>
 
             <Icon
                 name={activityIcon}
-                className="text-theme-primary-600"
+                className="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500"
                 size="lg"
             />
         </div>
@@ -312,7 +317,7 @@ export const Timestamp = ({ value }: { value: number }): JSX.Element => {
         <Tooltip content={toHuman(value * 1000, attributes)}>
             <span
                 data-testid="ActivityTable__timestamp"
-                className="whitespace-nowrap text-sm font-medium leading-5.5 text-theme-secondary-700 sm:text-base"
+                className="whitespace-nowrap text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-300 sm:text-base"
             >
                 <TimeAgo date={new Date(value * 1000).toISOString()} />
             </span>
@@ -321,7 +326,9 @@ export const Timestamp = ({ value }: { value: number }): JSX.Element => {
 };
 
 const Label = ({ children }: { children: React.ReactNode }): JSX.Element => (
-    <span className="text-sm font-medium leading-5.5 text-theme-secondary-700">{children}</span>
+    <span className="text-sm font-medium leading-5.5 text-theme-secondary-700 dark:text-theme-dark-200">
+        {children}
+    </span>
 );
 
 export const SalePrice = ({
@@ -344,7 +351,7 @@ export const SalePrice = ({
             >
                 {isTruthy(nativePrice) && isTruthy(usdPrice) ? (
                     <>
-                        <span className="whitespace-nowrap leading-5.5 text-theme-secondary-900">
+                        <span className="whitespace-nowrap leading-5.5 text-theme-secondary-900 dark:text-theme-dark-50">
                             <FormatNumber value={nativePrice} />
                             <span className="ml-1">ETH</span>
                         </span>
@@ -355,7 +362,7 @@ export const SalePrice = ({
                         </span>
                     </>
                 ) : (
-                    <p className="text-sm font-medium leading-5.5 text-theme-secondary-500 sm:text-base xl:w-24">
+                    <p className="text-sm font-medium leading-5.5 text-theme-secondary-500 dark:text-theme-dark-300 sm:text-base xl:w-24">
                         {t("common.na")}
                     </p>
                 )}
@@ -384,7 +391,7 @@ export const CollectionActivityTableItemSkeleton = ({
 
     if (isCompact) {
         return (
-            <div className="flex flex-col space-y-3 border-b border-dashed border-theme-secondary-300 pb-3 last:border-none last:pb-0">
+            <div className="flex flex-col space-y-3 border-b border-dashed border-theme-secondary-300 pb-3 last:border-none last:pb-0 dark:border-theme-dark-700">
                 {showNameColumn && (
                     <div className="flex items-center justify-between">
                         <Skeleton
@@ -537,7 +544,7 @@ export const CollectionActivityTableItemSkeleton = ({
                                     />
                                     {!isMdAndAbove && (
                                         <div className="flex items-center">
-                                            <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                            <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                             <Skeleton
                                                 className="my-1"
                                                 height={16}
@@ -553,7 +560,7 @@ export const CollectionActivityTableItemSkeleton = ({
                                     height={16}
                                     width={80}
                                 />
-                                <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300" />
+                                <div className="mx-2 h-[5px] w-[5px] rounded-full bg-theme-secondary-300 dark:bg-theme-secondary-400" />
                                 <Skeleton
                                     className="my-1"
                                     height={16}
@@ -654,7 +661,7 @@ export const CollectionActivityTableItem = ({
 
     if (isCompact) {
         return (
-            <div className="flex flex-col space-y-3 border-b border-dashed border-theme-secondary-300 pb-3 last:border-none last:pb-0">
+            <div className="mt-2 flex flex-col space-y-3 border-b border-dashed border-theme-secondary-300 pb-3 first:mt-0 last:border-none last:pb-0 dark:border-theme-dark-700 lg:mt-0">
                 {showNameColumn && (
                     <div className="flex items-center justify-between">
                         <Label>{t("common.name")}</Label>
@@ -744,7 +751,7 @@ export const CollectionActivityTableItem = ({
                     })}
                 >
                     <div className="flex items-center space-x-2">
-                        {!isXlAndAbove && <span>{t("common.from")}</span>}
+                        {!isXlAndAbove && <span className="dark:text-theme-dark-200">{t("common.from")}</span>}
                         <AddressLink
                             address={activity.sender}
                             chainId={collection.chainId}
@@ -754,7 +761,7 @@ export const CollectionActivityTableItem = ({
 
                     {!isXlAndAbove && (
                         <div className="mt-1 flex items-center space-x-2">
-                            <span>{t("common.to")}</span>
+                            <span className="dark:text-theme-dark-200">{t("common.to")}</span>
                             <AddressLink
                                 address={activity.recipient}
                                 chainId={collection.chainId}

diff --git a/resources/js/Components/Collections/CollectionCoverImages/CollectionCoverImages.tsx b/resources/js/Components/Collections/CollectionCoverImages/CollectionCoverImages.tsx
@@ -42,9 +42,11 @@ export const CollectionCoverImages = ({ nfts }: { nfts: App.Data.Collections.Sim
                             {rest.length > 0 && (
                                 <div
                                     data-testid="CollectionCoverImages__more"
-                                    className="absolute inset-0 flex items-center justify-center bg-white/75 backdrop-blur-md"
+                                    className="absolute inset-0 flex items-center justify-center bg-white/75 backdrop-blur-md dark:bg-theme-dark-900/75"
                                 >
-                                    <span className="text-base font-medium">+{rest.length + 1}</span>
+                                    <span className="text-base font-medium dark:text-theme-dark-50">
+                                        +{rest.length + 1}
+                                    </span>
                                 </div>
                             )}
                         </div>

diff --git a/resources/js/Components/Collections/CollectionHeader/CollectionHeaderBottom.tsx b/resources/js/Components/Collections/CollectionHeader/CollectionHeaderBottom.tsx
@@ -25,11 +25,11 @@ export const CollectionHeaderBottom = ({ collection }: CollectionHeaderBottomPro
         <>
             <div
                 data-testid="CollectionHeaderBottom"
-                className="hide-scrollbar flex items-center justify-between space-x-2 overflow-x-auto px-6 md-lg:mx-auto lg:mx-0 lg:space-x-6 lg:bg-theme-secondary-100 lg:px-6 lg:py-4"
+                className="hide-scrollbar flex items-center justify-between space-x-2 overflow-x-auto px-6 dark:bg-theme-dark-900 md-lg:mx-auto lg:mx-0 lg:space-x-6 lg:bg-theme-secondary-100 lg:px-6 lg:py-4 dark:lg:bg-theme-dark-800"
             >
                 <GridHeader
                     data-testid="CollectionHeaderBottom__floor"
-                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6"
+                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6 dark:lg:border-theme-dark-700"
                     title={t("common.floor")}
                     value={
                         <FormatCrypto
@@ -41,7 +41,7 @@ export const CollectionHeaderBottom = ({ collection }: CollectionHeaderBottomPro
 
                 <GridHeader
                     data-testid="CollectionHeaderBottom__volume"
-                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6"
+                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6 dark:lg:border-theme-dark-700"
                     title={t("common.volume", { frequency: "" })}
                     value={
                         <FormatCrypto
@@ -53,14 +53,14 @@ export const CollectionHeaderBottom = ({ collection }: CollectionHeaderBottomPro
 
                 <GridHeader
                     data-testid="CollectionHeaderBottom__supply"
-                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6"
+                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6 dark:lg:border-theme-dark-700"
                     title={t("common.supply")}
                     value={isTruthy(collection.supply) ? <FormatNumber value={collection.supply} /> : null}
                 />
 
                 <GridHeader
                     data-testid="CollectionHeaderBottom__owners"
-                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6"
+                    className="lg:border-r lg:border-theme-secondary-300 lg:pl-0 lg:pr-6 dark:lg:border-theme-dark-700"
                     title={t("common.owners")}
                     value={isTruthy(collection.owners) ? <FormatNumber value={collection.owners} /> : null}
                 />

diff --git a/resources/js/Components/Collections/CollectionImages/CollectionImages.tsx b/resources/js/Components/Collections/CollectionImages/CollectionImages.tsx
@@ -29,8 +29,8 @@ export const CollectionImages = ({
         {nftsCount >= maxItems && (
             <div className="relative h-20 w-20 overflow-hidden rounded-lg backdrop-blur-0">
                 {nftsCount > maxItems && (
-                    <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/75 backdrop-blur-md">
-                        <span className="text-base font-medium">
+                    <div className="absolute inset-0 z-10 flex items-center justify-center bg-white/75 backdrop-blur-md dark:bg-theme-dark-900/75">
+                        <span className="text-base font-medium dark:text-theme-dark-50">
                             {maxItems > 1 && "+"}
                             {nftsCount - maxItems + 1}
                         </span>

diff --git a/resources/js/Components/Collections/Nfts/NftBackButton/NftBackButton.tsx b/resources/js/Components/Collections/Nfts/NftBackButton/NftBackButton.tsx
@@ -46,14 +46,15 @@ export const NftBackButton = ({ nft, url, className }: Properties): JSX.Element
                 />
             </div>
 
-            <div className="truncate font-medium text-theme-secondary-700">
+            <div className="truncate font-medium text-theme-secondary-700 dark:text-theme-dark-200">
                 {t("common.back_to")}{" "}
                 <Link
                     href={url}
                     className={cn(
                         "transition-default text-theme-primary-600 underline decoration-transparent underline-offset-2 outline-none",
                         "hover:text-theme-primary-700 hover:decoration-theme-primary-700",
                         "focus-visible:decoration-theme-primary-700",
+                        "dark:text-theme-primary-400 dark:hover:text-theme-primary-500 dark:hover:decoration-theme-primary-500",
                     )}
                 >
                     {nft.collection.name}

diff --git a/resources/js/Components/Collections/Nfts/NftHeader/NftBasicInfo.tsx b/resources/js/Components/Collections/Nfts/NftHeader/NftBasicInfo.tsx
@@ -29,7 +29,7 @@ export const NftBasicInfo = ({ nft }: Properties): JSX.Element => {
                 <LinkButton
                     data-testid="NftHeader__collectionName"
                     variant="link"
-                    textColor="text-theme-primary-600"
+                    textColor="text-theme-primary-600 dark:text-theme-primary-400 dark:hover:text-theme-primary-500"
                     fontSize="text-sm"
                     onClick={() => {
                         router.visit(