Product card small screen tweaks (#1941)

the-guild-org · Jan 6, 2025 · 0897591 · 0897591
1 parent eb7017d
commit 0897591
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/.changeset/slimy-trainers-joke.md b/.changeset/slimy-trainers-joke.md
@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Tweak ProductCard styles on mobile
diff --git a/packages/components/src/components/product-card/index.tsx b/packages/components/src/components/product-card/index.tsx
@@ -1,6 +1,6 @@
 import { cn } from '../../cn';
 import { FOUR_MAIN_PRODUCTS, ProductInfo, PRODUCTS } from '../../products';
-import { HighlightDecoration } from '../decorations';
+import { DecorationIsolation, HighlightDecoration } from '../decorations';
 import { ArrowIcon } from '../icons';
 import { ReactComponent as HiveDecoration } from './hive-decoration.svg';
 import { ReactComponent as HiveGatewayDecoration } from './hive-gateway-decoration.svg';
@@ -23,7 +23,7 @@ export function MainProductCard({ as: Root, product, className, ...rest }: Produ
   return (
     <Root
       className={cn(
-        'hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 max-md:w-[283.5px]',
+        'hive-focus-within group flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 max-md:min-w-[283.5px]',
         isHive && 'bg-green-1000 text-white',
         className,
       )}
@@ -36,16 +36,18 @@ export function MainProductCard({ as: Root, product, className, ...rest }: Produ
         <p className="font-medium">{product.name}</p>
         <Icon className="mt-8" />
         <ArrowIcon className="absolute bottom-8 right-8" />
+        <DecorationIsolation>
+          <Decoration
+            strokeWidth="0.5px"
+            className={cn(
+              'pointer-events-none absolute bottom-0 right-0 h-full fill-blue-200 opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100',
+              isHive && 'fill-blue-700',
+            )}
+            preserveAspectRatio="xMidYMid meet"
+          />
+          <HighlightDecoration className="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100" />
+        </DecorationIsolation>
       </a>
-      <Decoration
-        strokeWidth="0.5px"
-        className={cn(
-          'pointer-events-none absolute bottom-0 right-0 h-full fill-blue-200 opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100',
-          isHive && 'fill-blue-700',
-        )}
-        preserveAspectRatio="xMidYMid meet"
-      />
-      <HighlightDecoration className="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100" />
     </Root>
   );
 }

diff --git a/packages/components/src/components/product-card/product-card.stories.tsx b/packages/components/src/components/product-card/product-card.stories.tsx
@@ -21,7 +21,7 @@ export const Default: StoryObj<typeof ProductCard> = {
   name: 'ProductCard',
   render() {
     return (
-      <ul className="mt-5 grid grid-cols-4 gap-5 overflow-x-auto p-4 last-of-type:mb-24">
+      <ul className="mt-5 grid grid-cols-1 gap-5 overflow-x-auto p-4 last-of-type:mb-24 sm:grid-cols-4">
         {productsLexicographically.map(product => (
           <ProductCard as="li" key={product.name} product={product} />
         ))}