Merge pull request #616 from 1ifeworld/0xTranqui/item-card-formatting

new pass at item cards on home page
1ifeworld · May 6, 2024 · 48c29fb · 48c29fb
2 parents b754fe6 + 40ddb5b
commit 48c29fb
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/apps/site/app/(base)/page.tsx b/apps/site/app/(base)/page.tsx
@@ -17,7 +17,7 @@ export default async function Home({
 
   return (
     <>
-      <Grid className="grid-cols-2 md:grid-cols-[repeat(auto-fill,_minmax(255px,_1fr))] gap-5">
+      <Grid className="grid-cols-2 md:grid-cols-[repeat(auto-fill,_minmax(255px,_1fr))] gap-x-5 gap-y-[30px]">
         {adds.items.slice(0, 60).map((add, index) =>
           add.removed ? null : (
             <ItemCard

diff --git a/apps/site/components/client/ItemDropdown.tsx b/apps/site/components/client/ItemDropdown.tsx
@@ -192,7 +192,7 @@ export function ItemDropdown({
           disabled={isRemoving || isSubmitting}
           className="focus:outline-none mb-1"
         >
-          <Typography className="hover:font-bold" variant="h2">
+          <Typography className="hover:font-bold leading-none" variant="h2">
             {isRemoving || isSubmitting ? <Loading /> : '...'}
           </Typography>
         </DropdownMenuTrigger>

diff --git a/apps/site/components/server/ItemCard.tsx b/apps/site/components/server/ItemCard.tsx
@@ -98,7 +98,9 @@ export async function ItemCard({
           </Flex>
           <Flex className="items-center">
             <Username id={add.addedById} />
-            <span className="text-secondary-foreground">{'·'}</span>
+            <span className="text-secondary-foreground leading-none">
+              {'·'}
+            </span>
             <Link
               href={`/channel/${add.channelId}`}
               className="hover:underline underline-offset-2 transition-all decoration-secondary-foreground truncate"

diff --git a/apps/site/components/server/channel/ChannelItems.tsx b/apps/site/components/server/channel/ChannelItems.tsx
@@ -86,7 +86,7 @@ export async function ChannelItems({
     )
   }
   return (
-    <Grid className="grid-cols-2 md:grid-cols-[repeat(auto-fill,_minmax(255px,_1fr))] gap-5 pb-[30px] md:ml-2">
+    <Grid className="grid-cols-2 md:grid-cols-[repeat(auto-fill,_minmax(255px,_1fr))] gap-x-5 gap-y-[30px] pb-[30px] md:ml-2">
       {channel?.adds?.items?.map((add: Adds) =>
         add.removed ? null : (
           <ItemCard