From ff6f43d7aa0a5562a0a22add0572179fcd009ba4 Mon Sep 17 00:00:00 2001
From: Jordan Frankfurt <jordanwfrankfurt@gmail.com>
Date: Fri, 11 Nov 2022 13:34:32 -0500
Subject: [PATCH] fix(bag-footer): remove double border top and excess margin
 (#5171)

---
 src/nft/components/bag/Bag.tsx          | 109 ++++++++++++------------
 src/nft/components/bag/BagFooter.css.ts |   1 -
 2 files changed, 54 insertions(+), 56 deletions(-)

diff --git a/src/nft/components/bag/Bag.tsx b/src/nft/components/bag/Bag.tsx
index 365cd662e7..86b519b3dd 100644
--- a/src/nft/components/bag/Bag.tsx
+++ b/src/nft/components/bag/Bag.tsx
@@ -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}
+              />
             )}
-          </Column>
-          {isDetailsPage ? (
-            <DetailsPageBackground onClick={toggleBag} />
-          ) : (
-            isOpen && <Overlay onClick={() => (!bagIsLocked ? setModalIsOpen(false) : undefined)} />
-          )}
-        </Portal>
-      ) : null}
-    </>
+            {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 />
+        )}
+      </Column>
+      {isDetailsPage ? (
+        <DetailsPageBackground onClick={toggleBag} />
+      ) : (
+        isOpen && <Overlay onClick={() => (!bagIsLocked ? setModalIsOpen(false) : undefined)} />
+      )}
+    </Portal>
   )
 }
 
diff --git a/src/nft/components/bag/BagFooter.css.ts b/src/nft/components/bag/BagFooter.css.ts
index 686b186d93..0e89c1cee2 100644
--- a/src/nft/components/bag/BagFooter.css.ts
+++ b/src/nft/components/bag/BagFooter.css.ts
@@ -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',
 })