github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

sleek scroll bar for nft gallery (#251)

Browse Source
This commit is contained in:
dan13ram
2020-12-25 12:03:49 +05:30
committed by GitHub
parent 9ec7d5a3d9
commit 528d72c1a2
1 changed files with 34 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/web/components/Player/Section/PlayerGallery.tsx
View File

@@ -110,26 +110,42 @@ export const PlayerGallery: React.FC<Props> = ({ player, onRemoveClick }) => {
/>
</HStack>
</Box>
<Box
overflowY="scroll"
overflowX="hidden"
maxH="80vh"
borderBottomRadius="lg"
w="100%"
<Flex
p={2}
bg="whiteAlpha.200"
css={{
backdropFilter: 'blur(8px)',
}}
>
<SimpleGrid
columns={{ base: 1, md: 2, lg: 3 }}
gap={6}
padding={6}
boxShadow="md"
bg="whiteAlpha.200"
css={{ backdropFilter: 'blur(8px)' }}
<Box
overflowY="scroll"
overflowX="hidden"
maxH="80vh"
borderBottomRadius="lg"
w="100%"
css={{
'::-webkit-scrollbar': {
width: '10px',
background: 'none',
},
'::-webkit-scrollbar-thumb': {
background: 'rgba(70,20,100,0.8)',
borderRadius: '999px',
},
}}
>
{data?.map((nft) => (
<GalleryItem nft={nft} key={nft.tokenId} noMargin />
))}
</SimpleGrid>
</Box>
<SimpleGrid
columns={{ base: 1, md: 2, lg: 3 }}
gap={6}
padding={6}
boxShadow="md"
>
{data?.map((nft) => (
<GalleryItem nft={nft} key={nft.tokenId} noMargin />
))}
</SimpleGrid>
</Box>
</Flex>
</ModalContent>
</ModalOverlay>
</Modal>