feat(unframed-theme) (#114)

Co-authored-by: paul launay <launay.p@gmail.com>
ArkProjectNFTs · Aug 30, 2024 · dd03f52 · dd03f52
1 parent 76a136e
commit dd03f52
Show file tree

Hide file tree

Showing 98 changed files with 1,549 additions and 1,038 deletions.
diff --git a/apps/arkmarket/package.json b/apps/arkmarket/package.json
@@ -20,13 +20,13 @@
     "@hookform/error-message": "^2.0.1",
     "@starknet-react/chains": "^0.1.7",
     "@starknet-react/core": "^2.8.3",
-    "@t3-oss/env-nextjs": "^0.10.1",
-    "@tanstack/react-query": "^5.28.6",
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "@tanstack/react-query": "catalog:",
     "@tanstack/react-table": "^8.15.3",
     "@tanstack/react-virtual": "^3.5.0",
-    "@trpc/client": "11.0.0-rc.364",
-    "@trpc/react-query": "11.0.0-rc.364",
-    "@trpc/server": "11.0.0-rc.364",
+    "@trpc/client": "catalog:",
+    "@trpc/react-query": "catalog:",
+    "@trpc/server": "catalog:",
     "@vercel/speed-insights": "^1.0.10",
     "blockies-ts": "^1.0.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
@@ -37,8 +37,8 @@
     "moment": "^2.30.1",
     "next": "^14.2.3",
     "nuqs": "^1.17.4",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "catalog:react18",
+    "react-dom": "catalog:react18",
     "react-icons": "^5.0.1",
     "react-query": "^3.39.3",
     "react-virtuoso": "^4.7.11",
@@ -47,23 +47,23 @@
     "superjson": "2.2.1",
     "usehooks-ts": "^3.1.0",
     "viem": "^2.13.10",
-    "zod": "^3.23.8",
+    "zod": "catalog:",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@ark-market/eslint-config": "workspace:*",
     "@ark-market/prettier-config": "workspace:*",
     "@ark-market/tailwind-config": "workspace:*",
     "@ark-market/tsconfig": "workspace:*",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/node": "^20.14.15",
+    "@types/react": "catalog:react18",
+    "@types/react-dom": "catalog:react18",
     "dotenv-cli": "^7.4.2",
-    "eslint": "^9.4.0",
-    "jiti": "^1.21.0",
-    "prettier": "^3.3.1",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5"
+    "eslint": "catalog:",
+    "jiti": "^1.21.6",
+    "prettier": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
   },
   "prettier": "@ark-market/prettier-config"
 }
diff --git a/apps/arkmarket/public/fonts/unframed-icons.ttf b/apps/arkmarket/public/fonts/unframed-icons.ttf
diff --git a/.../arkmarket/src/app/collection/[collectionAddress]/components/collection-activity-data.tsx b/.../arkmarket/src/app/collection/[collectionAddress]/components/collection-activity-data.tsx
@@ -22,12 +22,11 @@ import {
   cn,
   ellipsableStyles,
   focusableStyles,
-  formatUnits,
   timeSince,
 } from "@ark-market/ui";
 import { Button } from "@ark-market/ui/button";
-import EthereumLogo2 from "@ark-market/ui/icons/ethereum-logo-2";
 import VerifiedIcon from "@ark-market/ui/icons/verified-icon";
+import { PriceTag } from "@ark-market/ui/price-tag";
 import {
   Table,
   TableBody,
@@ -146,7 +145,7 @@ export default function CollectionActivityData({
         </TableRow>
       </TableHeader>
       <TableBody
-        className="relative text-sm font-semibold"
+        className="font-numbers relative text-sm font-medium"
         style={{ height: `${rowVirtualizer.getTotalSize() + 2}px` }}
       >
         {rowVirtualizer.getVirtualItems().map((virtualRow) => {
@@ -171,7 +170,7 @@ export default function CollectionActivityData({
             >
               <TableCell className="items-center gap-4 whitespace-nowrap pl-5">
                 <div className="flex items-center gap-4 whitespace-nowrap">
-                  {activityItem?.icon}
+                  <div className="w-4">{activityItem?.icon}</div>
                   <p>{activityItem?.title}</p>
                 </div>
               </TableCell>
@@ -208,24 +207,14 @@ export default function CollectionActivityData({
                         {activity.name}
                       </p>
                       {activity.is_verified && (
-                        <VerifiedIcon className="size-4 text-background" />
+                        <VerifiedIcon className="size-4 text-primary" />
                       )}
                     </div>
                   </div>
                 </div>
               </TableCell>
               <TableCell>
-                {activity.price ? (
-                  <div className="flex items-center">
-                    <EthereumLogo2 className="size-4" />
-                    <p>
-                      {formatUnits(activity.price, 18)}{" "}
-                      <span className="text-muted-foreground">ETH</span>
-                    </p>
-                  </div>
-                ) : (
-                  "_"
-                )}
+                {activity.price ? <PriceTag price={activity.price} /> : "_"}
               </TableCell>
               <TableCell>
                 {activity.from ? (

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header-stats.tsx
@@ -24,7 +24,7 @@ export default function CollectionHeaderStats({
     >
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">Floor</p>
-        <div className="flex items-center gap-1 font-medium">
+        <div className="flex items-center gap-2 font-medium font-numbers text-xl">
           <EthereumLogo2 className="size-5" />
           <p>{formatUnits(collection.floor ?? 0, 18)} ETH</p>
           {/* TODO @YohanTz: Proper color */}
@@ -47,7 +47,7 @@ export default function CollectionHeaderStats({
         <p className="text-sm font-medium text-muted-foreground">
           Total Volume
         </p>
-        <div className="flex items-center ">
+        <div className="flex items-center font-numbers gap-2 text-xl">
           <EthereumLogo2 className="size-5" />
           <p className="font-medium">
             {formatNumber(collection.total_volume)} ETH
@@ -58,7 +58,7 @@ export default function CollectionHeaderStats({
 
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">7D Volume</p>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2 font-numbers text-xl">
           <EthereumLogo2 className="size-5" />
           <p className="font-medium">
             {formatNumber(collection.volume_7d_eth)} ETH
@@ -69,19 +69,19 @@ export default function CollectionHeaderStats({
 
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">Total Sales</p>
-        <p className="font-medium">{formatNumber(collection.total_sales)}</p>
+        <p className="font-medium font-numbers text-xl">{formatNumber(collection.total_sales)}</p>
       </div>
       <Separator orientation="vertical" className={separatorCommonClassNames} />
 
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">Items</p>
-        <p className="font-medium">{formatNumber(collection.token_count)}</p>
+        <p className="font-medium font-numbers text-xl">{formatNumber(collection.token_count)}</p>
       </div>
       <Separator orientation="vertical" className={separatorCommonClassNames} />
 
       <div className="rounded-lg bg-card p-3.5 md:bg-transparent md:p-0">
         <p className="text-sm font-medium text-muted-foreground">Owners</p>
-        <p className="font-medium">{formatNumber(collection.owner_count)}</p>
+        <p className="font-medium font-numbers text-xl">{formatNumber(collection.owner_count)}</p>
       </div>
     </div>
   );

diff --git a/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx b/apps/arkmarket/src/app/collection/[collectionAddress]/components/collection-header.tsx
@@ -59,12 +59,12 @@ export default function CollectionHeader({
 
             <div className="flex h-full flex-shrink-0 flex-col items-start justify-between">
               <div>
-                <div className="flex items-center gap-1">
+                <div className="flex items-center gap-1 text-xl">
                   <p className="text-2xl font-semibold">
                     {collection.name ?? "Unknown collection"}
                   </p>
                   {collection.is_verified && (
-                    <VerifiedIcon className="text-background" />
+                    <VerifiedIcon className="text-primary mt-1" />
                   )}
                 </div>
               </div>
@@ -82,7 +82,7 @@ export default function CollectionHeader({
                 <CollapsibleTrigger asChild>
                   <button
                     className={cn(
-                      "ml-1 flex items-center gap-1",
+                      "ml-1 flex items-center gap-1 hover:text-accent-foreground",
                       focusableStyles,
                     )}
                   >

diff --git a/...ket/src/app/collection/[collectionAddress]/components/collection-items-data-grid-view.tsx b/...ket/src/app/collection/[collectionAddress]/components/collection-items-data-grid-view.tsx
@@ -94,19 +94,33 @@ export default function CollectionItemsDataGridView({
                     <div className="w-full">
                       <p
                         className={cn(
-                          "font-semibold",
+                          "font-bold",
                           viewType === "large-grid" ? "text-xl" : "text-sm",
                           ellipsableStyles,
                         )}
                       >
                         {token.metadata?.name ?? token.token_id}
                       </p>
                       {token.price ? (
-                        <p className={cn("mt-1 text-sm", ellipsableStyles)}>
+                        <p
+                          className={cn(
+                            "font-medium",
+                            viewType === "large-grid" ? "text-sm" : "text-xs",
+                            ellipsableStyles,
+                          )}
+                        >
                           {formatUnits(token.price, 18)} ETH
                         </p>
                       ) : (
-                        <p className="mt-1 text-sm font-medium">Not for sale</p>
+                        <p
+                          className={cn(
+                            "font-medium",
+                            viewType === "large-grid" ? "text-sm" : "text-xs",
+                            ellipsableStyles,
+                          )}
+                        >
+                          Not for sale
+                        </p>
                       )}
                     </div>
                   </div>

diff --git a/...ket/src/app/collection/[collectionAddress]/components/collection-items-data-list-view.tsx b/...ket/src/app/collection/[collectionAddress]/components/collection-items-data-list-view.tsx
@@ -3,6 +3,7 @@
 import { useRef } from "react";
 import Link from "next/link";
 import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { PriceTag } from "@ark-market/ui/price-tag";
 
 import { cn, ellipsableStyles, formatUnits } from "@ark-market/ui";
 import { Button } from "@ark-market/ui/button";
@@ -76,7 +77,7 @@ export default function CollectionItemsDataListView({
         </TableRow>
       </TableHeader>
       <TableBody
-        className="relative"
+        className="relative font-medium font-numbers"
         style={{
           height: `${rowVirtualizer.getTotalSize() + 2}px`, // Tells scrollbar how big the table is
         }}
@@ -116,20 +117,14 @@ export default function CollectionItemsDataListView({
                       height={94}
                       width={94}
                     />
-                    <p className={cn("w-full font-semibold", ellipsableStyles)}>
+                    <p className={cn("w-full", ellipsableStyles)}>
                       {token.metadata?.name ?? token.token_id}
                     </p>
                   </div>
                 </TableCell>
                 <TableCell>
                   {token.price ? (
-                    <div className="flex items-center">
-                      <EthereumLogo2 className="size-4" />
-                      <p>
-                        {formatUnits(token.price, 18)}{" "}
-                        <span className="text-muted-foreground">ETH</span>
-                      </p>
-                    </div>
+                    <PriceTag price={token.price} />
                   ) : (
                     "_"
                   )}

diff --git a/...rkmarket/src/app/collection/[collectionAddress]/components/collection-items-tools-bar.tsx b/...rkmarket/src/app/collection/[collectionAddress]/components/collection-items-tools-bar.tsx
@@ -51,7 +51,7 @@ export default function CollectionItemsToolsBar({
           </CollectionItemsFiltersModal>
           <Button
             onClick={toggleFiltersPanel}
-            variant="secondary"
+            variant="outline"
             size="xl"
             className="hidden sm:flex"
           >

diff --git a/apps/arkmarket/src/app/components/explore-category.tsx b/apps/arkmarket/src/app/components/explore-category.tsx
@@ -37,7 +37,7 @@ export default function ExploreCategory() {
                 </div>
                 <h4 className="text-xl font-semibold">{category.name}</h4>
               </div>
-              <div className="flex size-10 items-center justify-center rounded-xs border border-border transition-[border] group-hover:border-white">
+              <div className="flex size-10 items-center justify-center rounded-xs border border-border transition-[border] group-hover:border-input">
                 <ArrowUpRight className="size-5" />
               </div>
             </Link>

diff --git a/apps/arkmarket/src/app/components/explore-collection.tsx b/apps/arkmarket/src/app/components/explore-collection.tsx
@@ -66,7 +66,7 @@ export default function ExploreCollection() {
                       unoptimized={collection.image.endsWith(".gif")}
                     />
                     <h4 className="text-xl font-semibold">{collection.name}</h4>
-                    <VerifiedIcon className="text-background" />
+                    <VerifiedIcon className="text-primary" />
                   </div>
                 </div>
               </Link>

diff --git a/apps/arkmarket/src/app/components/latest-drop-status.tsx b/apps/arkmarket/src/app/components/latest-drop-status.tsx
@@ -5,23 +5,23 @@ interface LatestDropStatus {
 export default function LatestDropStatus({ status }: LatestDropStatus) {
   if (status === "live") {
     return (
-      <div className="z-10 flex h-8 items-center gap-2.5 rounded-sm bg-secondary px-2.5 text-muted-foreground">
+      <div className="z-10 flex h-8 items-center gap-2.5 rounded-sm bg-secondary px-2.5 text-foreground">
         <span className="relative flex h-2.5 w-2.5">
           <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
           <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-green-500" />
         </span>
-        <p className="text-sm">Live</p>
+        <p className="text-sm font-semibold">Live</p>
       </div>
     );
   }
 
   return (
-    <div className="z-10 flex h-8 items-center gap-2.5 rounded-sm bg-secondary px-2.5 text-muted-foreground">
+    <div className="z-10 flex h-8 items-center gap-2.5 rounded-sm bg-secondary px-2.5 text-foreground">
       <span className="relative flex h-2.5 w-2.5">
         <span className="absolute inline-flex h-full w-full scale-[2] rounded-full bg-accent opacity-75" />
         <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-foreground" />
       </span>
-      <p className="text-sm">Upcoming</p>
+      <p className="text-sm font-semibold">Upcoming</p>
     </div>
   );
 }
diff --git a/apps/arkmarket/src/app/components/latest-drop.tsx b/apps/arkmarket/src/app/components/latest-drop.tsx
@@ -66,7 +66,7 @@ export default function LatestDrop() {
                         >
                           {collection.name}
                         </h4>
-                        <VerifiedIcon className="text-background" />
+                        <VerifiedIcon className="text-primary" />
                       </div>
                       <span className="mt-5 text-sm font-medium text-muted-foreground">
                         Status

diff --git a/apps/arkmarket/src/app/components/trending-now.tsx b/apps/arkmarket/src/app/components/trending-now.tsx
@@ -102,7 +102,7 @@ export default function TrendingNow() {
                           >
                             {collection.name}
                           </h4>
-                          <VerifiedIcon className="flex-shrink-0 text-background" />
+                          <VerifiedIcon className="flex-shrink-0 text-primary" />
                         </div>
 
                         <p className="font-medium sm:hidden">