Skip to content

I
interface
Commit ff6f43d7 authored by Jordan Frankfurt's avatar Jordan Frankfurt Committed by GitHub
Browse files
Options

fix(bag-footer): remove double border top and excess margin (#5171)

parent f1443671
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 56 deletions
src/nft/components/bag/Bag.tsx
View file @ ff6f43d7
......@@ -279,63 +279,62 @@ const Bag = () => {
[itemsInBag, totalUsdPrice]
)
if (!bagExpanded || !isNFTPage) {
return null
}
return (
<>
{bagExpanded && isNFTPage ? (
<Portal>
<Column zIndex={isMobile || isOpen ? 'modal' : '3'} className={styles.bagContainer}>
{!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
<>
<BagHeader
numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
closeBag={handleCloseBag}
resetFlow={isProfilePage ? resetSellAssets : reset}
isProfilePage={isProfilePage}
/>
{shouldRenderEmptyState && <EmptyState />}
<ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />
<Column ref={scrollRef} className={styles.assetsContainer} onScroll={scrollHandler} gap="12">
{isProfilePage ? <ProfileBagContent /> : <BagContent />}
</Column>
<ScrollingIndicator show={userCanScroll && scrollProgress < 100} />
{hasAssetsToShow && !isProfilePage && (
<BagFooter
totalEthPrice={totalEthPrice}
totalUsdPrice={totalUsdPrice}
bagStatus={bagStatus}
fetchAssets={fetchAssets}
eventProperties={eventProperties}
/>
)}
{isSellingAssets && isProfilePage && (
<Box
marginTop="32"
marginX="28"
paddingY="10"
className={`${buttonTextMedium} ${commonButtonStyles}`}
backgroundColor="accentAction"
textAlign="center"
onClick={() => {
isMobile && toggleBag()
setProfilePageState(ProfilePageStateType.LISTING)
}}
>
Continue
</Box>
)}
</>
) : (
<ListingModal />
<Portal>
<Column zIndex={isMobile || isOpen ? 'modal' : '3'} className={styles.bagContainer}>
{!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
<>
<BagHeader
numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
closeBag={handleCloseBag}
resetFlow={isProfilePage ? resetSellAssets : reset}
isProfilePage={isProfilePage}
/>
{shouldRenderEmptyState && <EmptyState />}
<ScrollingIndicator top show={userCanScroll && scrollProgress > 0} />
<Column ref={scrollRef} className={styles.assetsContainer} onScroll={scrollHandler} gap="12">
{isProfilePage ? <ProfileBagContent /> : <BagContent />}
</Column>
{hasAssetsToShow && !isProfilePage && (
<BagFooter
totalEthPrice={totalEthPrice}
totalUsdPrice={totalUsdPrice}
bagStatus={bagStatus}
fetchAssets={fetchAssets}
eventProperties={eventProperties}
/>
)}
{isSellingAssets && isProfilePage && (
<Box
marginTop="32"
marginX="28"
paddingY="10"
className={`${buttonTextMedium} ${commonButtonStyles}`}
backgroundColor="accentAction"
textAlign="center"
onClick={() => {
isMobile && toggleBag()
setProfilePageState(ProfilePageStateType.LISTING)
}}
>
Continue
</Box>
)}
</Column>
{isDetailsPage ? (
<DetailsPageBackground onClick={toggleBag} />
) : (
isOpen && <Overlay onClick={() => (!bagIsLocked ? setModalIsOpen(false) : undefined)} />
)}
</Portal>
) : null}
</>
</>
) : (
<ListingModal />
)}
</Column>
{isDetailsPage ? (
<DetailsPageBackground onClick={toggleBag} />
) : (
isOpen && <Overlay onClick={() => (!bagIsLocked ? setModalIsOpen(false) : undefined)} />
)}
</Portal>
)
}
......
src/nft/components/bag/BagFooter.css.ts
View file @ ff6f43d7
......@@ -3,7 +3,6 @@ import { body } from 'nft/css/common.css'
import { sprinkles } from 'nft/css/sprinkles.css'
export const footerContainer = sprinkles({
marginTop: '20',
paddingX: '16',
})
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment