collection styling

BibliothecaDAO · Oct 15, 2024 · 4444bfe · 4444bfe
1 parent a43da85
commit 4444bfe
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 25 deletions.
diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/CollectionFilters.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/CollectionFilters.tsx
@@ -91,7 +91,7 @@ export default function CollectionFilters({
   const showTraitsSection = data && Object.keys(data).length > 0;
 
   return (
-    <ScrollArea className="!sticky top-[var(--site-header-height)] z-10 hidden h-[calc(100vh-var(--site-header-height)-var(--site-footer-height))] w-64 flex-shrink-0 border-r border-border lg:block">
+    <ScrollArea className="!sticky top-[var(--site-header-height)] z-10 hidden h-[calc(100vh-var(--site-header-height)-var(--site-footer-height))] w-72 flex-shrink-0 border-r border-border lg:block">
       <CollectionFiltersContent buyNow={buyNow} setBuyNow={setBuyNow} />
       {showTraitsSection && (
         <div className="">

diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/CollectionFiltersTrait.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/CollectionFiltersTrait.tsx
@@ -62,17 +62,19 @@ function CollectionFiltersTrait({
             <label
               key={`${name}-${key}`}
               htmlFor={`${name}-${key}`}
-              className="flex cursor-pointer justify-between rounded p-2 leading-none transition-all hover:bg-muted"
+              className="flex cursor-pointer items-center justify-between rounded p-2 leading-none transition-all hover:bg-muted"
             >
               <div className="flex items-center gap-2">
                 <Checkbox
                   id={`${name}-${key}`}
                   checked={!!selectedTraits[name]?.includes(key)}
                   onClick={() => onChange(name, key)}
                 />
-                <div className="max-w-40 truncate leading-tight">{key}</div>
+                <div className="max-w-[11.4rem] truncate text-sm leading-tight">
+                  {key}
+                </div>
               </div>
-              <div className="text-muted-foreground">{trait[key]}</div>
+              <div className="text-xs text-muted-foreground">{trait[key]}</div>
             </label>
           ))}
         </div>

diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Card.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/L2ERC721Card.tsx
@@ -17,6 +17,8 @@ import { useTokenMetadata } from "@/hooks/market/useTokenMetadata";
 import { ViewOnMarketplace } from "../../ViewOnMarketplace";
 import Media from "@/app/_components/Media";
 import RealmResources from "./RealmResources";
+import { CollectionAddresses } from "@realms-world/constants";
+import { SUPPORTED_L2_CHAIN_ID } from "@/constants/env";
 export const L2ERC721Card = ({
   token,
   layout = "grid",
@@ -154,7 +156,11 @@ const GridDetails = ({
     <div className="flex justify-between pb-2">
       <span className="truncate">{token.metadata?.name ?? ""}</span>
     </div>
-    <RealmResources traits={token.metadata?.attributes} />
+    {token.metadata?.attributes &&
+      token.collection_address ==
+        CollectionAddresses.realms[SUPPORTED_L2_CHAIN_ID] && (
+        <RealmResources traits={token.metadata?.attributes} />
+      )}
     <div className="flex justify-between font-sans">
       {/*<Price token={token} />
       {token.lastPrice && (

diff --git a/apps/nextjs/src/app/(app)/collection/[id]/(list)/layout.tsx b/apps/nextjs/src/app/(app)/collection/[id]/(list)/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({
     params.id == (Collections.GOLDEN_TOKEN as string);
   const tabs = [
     {
-      name: "Trade",
+      name: "Items",
       link: "",
     },
   ];
@@ -36,24 +36,21 @@ export default function RootLayout({
   );*/
 
   return (
-    <div className=" w-full pt-24 sm:pl-32 sm:pt-24">
-      <div className="flex-grow">
-        <CollectionSummary collectionId={params.id} />
-        <div className="mb-3 flex gap-4 overflow-x-auto border-b py-1  ">
-          {tabs.map((tab) => (
-            <NavLink
-              key={tab.name}
-              variant={"link"}
-              size={"sm"}
-              exact
-              href={`/collection/${params.id}${tab.link && "/" + tab.link}`}
-            >
-              {tab.name}
-            </NavLink>
-          ))}
-        </div>
-        <div className="p-2 ">{children}</div>
+    <div className="flex-grow pt-4">
+      <CollectionSummary collectionId={params.id} />
+      <div className="mb-3 flex gap-4 overflow-x-auto border-b py-1">
+        {tabs.map((tab) => (
+          <NavLink
+            key={tab.name}
+            variant={"link"}
+            exact
+            href={`/collection/${params.id}${tab.link && "/" + tab.link}`}
+          >
+            {tab.name}
+          </NavLink>
+        ))}
       </div>
+      <div className="p-2">{children}</div>
     </div>
   );
 }
diff --git a/apps/ui/src/components/ui/button.tsx b/apps/ui/src/components/ui/button.tsx
@@ -22,7 +22,7 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline text-primary",
+        link: "underline-offset-4 hover:underline text-primary rounded-none	",
       },
       size: {
         default: "h-10 py-2 px-4",
@@ -41,7 +41,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
+    VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }