fix: stack border radius

bloomwalletio · Apr 29, 2024 · af2ed69 · af2ed69
1 parent 67d04a9
commit af2ed69
Showing 1 changed file with 33 additions and 26 deletions.
diff --git a/packages/desktop/views/dashboard/collectibles/components/CollectionsGalleryItem.svelte b/packages/desktop/views/dashboard/collectibles/components/CollectionsGalleryItem.svelte
@@ -13,36 +13,38 @@
 </script>
 
 <button type="button" on:click={onCollectionClick}>
-    <div class="flex-1 flex relative bg-surface-2 dark:bg-surface-2-dark rounded-t-[0.9rem] overflow-hidden">
-        <!-- TODO: change media to collection URI instead of first NFT URI -->
-        <NftMedia nft={collection.nfts[0]} classes="min-w-full min-h-full object-cover" loop muted>
-            <MediaPlaceholder
-                type={collection.nfts[0]?.type}
-                downloading={$downloadingNftId === collection.nfts[0]?.id}
-                size="md"
-                slot="placeholder"
-            />
-        </NftMedia>
-    </div>
-    <div class="w-full flex flex-col gap-2 p-3">
-        <nft-name class="w-full flex flex-row items-center gap-2 overflow-hidden">
-            <Text type="body2" truncate>{collection.name}</Text>
-        </nft-name>
-        <nft-pills class="flex flex-row items-center gap-2">
-            <NetworkAvatar networkId={collection.nfts[0].networkId} size="sm" showTooltip />
-            <AssetPillsForNft nft={collection.nfts[0]} />
-            <Pill compact color="primary">{localize('general.nfts', { count: collection.nfts.length })}</Pill>
-        </nft-pills>
+    <div class="container">
+        <div class="flex-1 flex relative bg-surface-2 dark:bg-surface-2-dark rounded-t-[0.9rem] overflow-hidden">
+            <!-- TODO: change media to collection URI instead of first NFT URI -->
+            <NftMedia nft={collection.nfts[0]} classes="min-w-full min-h-full object-cover" loop muted>
+                <MediaPlaceholder
+                    type={collection.nfts[0]?.type}
+                    downloading={$downloadingNftId === collection.nfts[0]?.id}
+                    size="md"
+                    slot="placeholder"
+                />
+            </NftMedia>
+        </div>
+        <div class="w-full flex flex-col gap-2 p-3">
+            <nft-name class="w-full flex flex-row items-center gap-2 overflow-hidden">
+                <Text type="body2" truncate>{collection.name}</Text>
+            </nft-name>
+            <nft-pills class="flex flex-row items-center gap-2">
+                <NetworkAvatar networkId={collection.nfts[0].networkId} size="sm" showTooltip />
+                <AssetPillsForNft nft={collection.nfts[0]} />
+                <Pill compact color="primary">{localize('general.nfts', { count: collection.nfts.length })}</Pill>
+            </nft-pills>
+        </div>
     </div>
 </button>
 
 <style lang="postcss">
-    button {
+    .container {
         @apply relative w-full flex flex-col mt-4;
         @apply divide-y divide-solid divide-stroke dark:divide-stroke-dark;
         @apply rounded-2xl border-2 border-solid border-stroke dark:border-stroke-dark;
         @apply bg-surface-1 dark:bg-surface-1-dark;
-        @apply duration-300;
+        @apply duration-300 z-[2];
         transition-property: background-color, border-color, box-shadow;
         aspect-ratio: 3 / 4;
 
@@ -52,20 +54,25 @@
             @apply border-2 border-brand-500;
             @apply bg-surface dark:bg-surface-dark;
         }
+    }
+
+    button {
+        @apply relative;
 
         &::after,
         &::before {
-            @apply content-[''] absolute block h-1.5 -top-2 left-0 right-0;
-            @apply rounded-t-2xl border-t-2 border-x-2 border-solid border-stroke dark:border-stroke-dark;
+            @apply content-[''] absolute block left-0 right-0 z-[1];
+            @apply rounded-2xl border-t-2 border-x-2 border-solid border-stroke dark:border-stroke-dark;
             @apply bg-surface-1 dark:bg-surface-1-dark;
+            aspect-ratio: 3 / 4;
         }
 
         &::after {
-            @apply -top-2 mx-2;
+            @apply top-2.5 mx-2;
         }
 
         &::before {
-            @apply -top-3.5 mx-4 blur-[1px];
+            @apply top-[0.2rem] mx-4 blur-[1px];
         }
     }
 </style>