Skip to content

Commit

Permalink
styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@ponderingdemocritus
ponderingdemocritus committed Dec 29, 2023
1 parent 28d4480 commit fd98c92
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 64 deletions.
55 changes: 21 additions & 34 deletions apps/nextjs/src/app/collection/ERC721MarketplaceItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,13 @@ const ERC721MarketplaceItem: FC<Props> = ({

return (
<div>
<div className="justify-space-between flex items-center">
{/* <span className="mb-2 block text-lg uppercase">
{name ? "Item" : "Collection"}
</span> */}
<div className="justify-space-between flex items-center border">
{priceSubtitle && (
<span className="mb-2 block text-lg">{priceSubtitle}</span>
)}
</div>
<div className="flex justify-between">
<div className="my-3 flex items-center gap-2">
<div className="my-3 flex gap-2">
{img && (
<Image
src={img}
Expand All @@ -59,9 +56,9 @@ const ERC721MarketplaceItem: FC<Props> = ({
/>
)}

<div className="grid p-2">
<div className="grid px-2">
<div className="mr-2 flex gap-2 overflow-hidden">
<div className="mb-3 flex font-sans text-xl">
<div className="flex font-sans text-xl">
{name ? name : collection}
</div>

Expand All @@ -71,15 +68,6 @@ const ERC721MarketplaceItem: FC<Props> = ({
</div>
) : null}
</div>

{/* {name && (
<div className="my-1 flex">
<span> {collection}</span>
<hr />
<Starknet className="mr-2 h-6" />
</div>
)} */}

{expires && <span className="text-xs">Expires {expires}</span>}

{!expires && quantity && quantity > 1 ? (
Expand All @@ -89,8 +77,24 @@ const ERC721MarketplaceItem: FC<Props> = ({
</span>
</div>
) : null}
<div className="grid items-start justify-between font-sans">
{price ? (
<div className="flex">
{formatNumber(price, 4)}
<Lords className="ml-2 w-5 fill-current" />
</div>
) : (
<span className={isUnavailable ? "subtle" : "base"}>--</span>
)}
{usdPrice ? (
<span className="text-xs text-bright-yellow/50">
${formatNumber(usdPrice, 4)}
</span>
) : null}
{warning && <span className="text-red">{warning}</span>}
</div>
{!expires && !quantity && royaltiesBps ? (
<span className="flex gap-1 text-xs uppercase">
<span className="flex gap-1 text-xs font-semibold uppercase">
Creator Royalties: {royaltyPercent}%
<TooltipProvider>
<Tooltip
Expand All @@ -103,23 +107,6 @@ const ERC721MarketplaceItem: FC<Props> = ({
) : null}
</div>
</div>

<div className="grid items-start justify-between py-6">
{price ? (
<div className="flex">
{formatNumber(price, 4)}
<Lords className="ml-2 w-5 fill-current" />
</div>
) : (
<span className={isUnavailable ? "subtle" : "base"}>--</span>
)}
{usdPrice ? (
<span className="text-xs text-bright-yellow/50">
${formatNumber(usdPrice, 4)}
</span>
) : null}
{warning && <span className="text-red">{warning}</span>}
</div>
</div>
</div>
);
Expand Down
6 changes: 3 additions & 3 deletions apps/nextjs/src/app/collection/[id]/(list)/CardAction.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import LordsIcon from "@/icons/lords.svg";
import { useAccount } from "@starknet-react/core";
import { RefreshCw } from "lucide-react";

import type { RouterOutputs } from "@realms-world/api";
import { Button } from "@realms-world/ui";
Expand All @@ -23,8 +23,8 @@ export const CardAction = ({
(token.owner !== padAddress(address?.toLowerCase()) ? (
<BuyModal
trigger={
<Button className="z-20 w-full" size={"lg"}>
Buy Now
<Button className="z-20 flex w-full justify-between" size={"lg"}>
Buy Now <span className="flex">{token?.price} </span>
</Button>
}
// tokenId={tokenId}
Expand Down
56 changes: 30 additions & 26 deletions apps/nextjs/src/app/collection/[id]/(list)/L2ERC721Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ export const L2ERC721Card = ({

return (
<div
className={`flex transform flex-col border-2 bg-dark-green duration-300 hover:border-white ${
isGrid ?? "flex w-full"
className={`group flex transform border-2 bg-dark-green duration-300 hover:border-bright-yellow ${
isGrid ? "w-full flex-col" : "justify-between"
}`}
>
<div>
Expand All @@ -44,10 +44,22 @@ export const L2ERC721Card = ({
/>
)}
{isGrid && (
<span className="absolute bottom-3 right-3 border bg-black px-3 py-1 text-xs">
<span className="absolute bottom-3 right-3 border bg-black px-3 py-1 font-sans text-xs">
#{token.token_id}
</span>
)}

{isGrid && (
<div className="absolute left-3 top-3 border bg-black text-xs">
<Button
size={"xs"}
variant={"ghost"}
href={`/user/${token.owner ?? token.minter ?? ""}`}
>
{useStarkDisplayName(token.owner ?? token.minter ?? "")}
</Button>
</div>
)}
</div>
</Link>
</div>
Expand Down Expand Up @@ -83,15 +95,15 @@ const TokenAttributes = ({
token: RouterOutputs["erc721Tokens"]["all"]["items"][number];
attributeKeys: string[];
}) => (
<table className="min-w-full text-xs">
<table className="min-w-full font-sans text-xs">
<tbody>
{attributeKeys.map((key: string) => {
const attribute = token.metadata?.attributes?.find(
(trait: any) => trait.trait_type === key,
);
return attribute ? (
<tr className="hover:bright-yellow hover:bg-theme-gray" key={key}>
<td className="border px-2 py-1 uppercase">{key}:</td>
<td className="w-1/3 border px-2 py-1 uppercase">{key}</td>
<td className="border px-2 py-1">{attribute.value}</td>
</tr>
) : null;
Expand All @@ -102,13 +114,12 @@ const TokenAttributes = ({

const GridDetails = ({
token,
address,
}: {
token: RouterOutputs["erc721Tokens"]["all"]["items"][number];
address?: string;
}) => (
<div className="flex h-full w-full flex-col justify-between p-3">
<div className="flex justify-between border-b pb-2">
<div className=" flex h-full w-full flex-col justify-between p-3">
<div className="flex justify-between pb-2">
<span className="">{decodeURIComponent(token.name ?? "")}</span>
</div>
<TokenAttributes
Expand All @@ -117,12 +128,9 @@ const GridDetails = ({
/>
<Price token={token} />
<div>
<div className="mt-3 text-xs opacity-70">
<Button size={"xs"} variant={"ghost"} href={`/user/${address}`}>
{useStarkDisplayName(address)}
</Button>
<div className="absolute bottom-0 left-0 w-full px-3 opacity-0 transition-all duration-300 group-hover:bottom-4 group-hover:opacity-100">
<CardAction token={token} />
</div>
<CardAction token={token} />
</div>
</div>
);
Expand All @@ -133,23 +141,16 @@ const Price = ({
token: RouterOutputs["erc721Tokens"]["all"]["items"][number];
}) => {
return (
<div className="flex justify-between">
<div className="mt-3 flex justify-between font-sans">
{token?.price && (
<div>
<h6 className="uppercase">Price</h6>
<div className="flex">
{token?.price}
<LordsIcon className="mx-auto ml-3 h-4 w-4 self-center fill-bright-yellow" />{" "}
<LordsIcon className="mx-auto ml-2 h-4 w-4 self-center fill-bright-yellow" />{" "}
</div>
</div>
)}
{/*TODO Add last price sold */}
{/*token?.lastPrice && (
<div>
<h6 className="uppercase">Last price</h6>
<div>100</div>
</div>
)*/}
</div>
);
};
Expand All @@ -162,19 +163,22 @@ const ListDetails = ({
address?: string;
}) => {
return (
<div className="flex w-full space-x-6 self-center px-3">
<div className="flex justify-between self-center">
<div className="flex w-full justify-between space-x-6 self-center px-3">
<div className="mr-auto flex justify-between self-center">
<span className="">{decodeURIComponent(token?.name ?? "")}</span>
</div>
<div className="mr-auto flex self-center">
<div className="mr-auto flex self-center font-sans">
{token?.price}
<LordsIcon className="mx-auto ml-3 h-6 w-6 fill-bright-yellow pb-1" />
</div>
<div className="fonts-sans ml-auto self-center text-xs opacity-70">
<div className="fonts-sans ml-auto self-center text-xs">
<Button variant={"ghost"} href={`/user/${address}`}>
{useStarkDisplayName(address)}
</Button>
</div>
<div className="absolute bottom-0 right-0 w-full px-3 opacity-0 transition-all duration-300 group-hover:bottom-2 group-hover:opacity-100">
<CardAction token={token} />
</div>
</div>
);
};
2 changes: 1 addition & 1 deletion config/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ h5 {
}

h6 {
@apply mt-2 text-base uppercase opacity-60 sm:text-xs;
@apply mt-2 text-base uppercase sm:text-xs;
}

.theme-shadow {
Expand Down

0 comments on commit fd98c92

Please sign in to comment.