fix(bag): simplify header (#5185)

* fix(bag): simplify header

* pr feedback: adjust margins

* add margin-auto instead of flex-basis for space-filling to get a more accurate click area

* pr feedback from lynn

* rename numberdot to counterdot

src/nft/components/bag/Bag.css.ts

@@ -13,8 +13,6 @@ export const bagContainer = style([
     borderColor: 'backgroundOutline',
     borderWidth: '1px',
     color: 'textPrimary',
-    paddingTop: '20',
-    paddingBottom: '24',
   }),
   {
     '@media': {

src/nft/components/bag/BagFooter.tsx

@@ -27,6 +27,7 @@ const Footer = styled.div`
   color: ${({ theme }) => theme.textPrimary};
   display: flex;
   flex-direction: column;
+  margin-bottom: 8px;
   padding: 12px 16px;
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;

src/nft/components/bag/BagHeader.tsx

+import { Trans } from '@lingui/macro'
 import { OpacityHoverState } from 'components/Common'
-import { Column, Row } from 'nft/components/Flex'
 import { BagCloseIcon } from 'nft/components/icons'
-import { roundAndPluralize } from 'nft/utils/roundAndPluralize'
 import styled from 'styled-components/macro'
 import { ButtonText, ThemedText } from 'theme'
 
-import * as styles from './BagHeader.css'
-
 const ClearButton = styled(ButtonText)`
   color: ${({ theme }) => theme.textSecondary};
   cursor: pointer;
   font-weight: 600;
   font-size: 14px;
   line-height: 16px;
-  transition: 150ms ease color;
-
-  :hover {
-    color: ${({ theme }) => theme.accentActive};
-  }
-`
-const ControlRow = styled.div`
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
 `
+
 const IconWrapper = styled.button`
+  align-items: center;
   background-color: transparent;
   border-radius: 8px;
   border: none;
   color: ${({ theme }) => theme.textPrimary};
   cursor: pointer;
   display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-left: auto;
   padding: 2px;
   opacity: 1;
 
   ${OpacityHoverState}
 `
+const CounterDot = styled.div`
+  align-items: center;
+  background-color: ${({ theme }) => theme.accentAction};
+  border-radius: 100px;
+  color: ${({ theme }) => theme.accentTextLightPrimary};
+  display: flex;
+  font-size: 10px;
+  justify-content: center;
+  padding: 4px 6px;
+`
+const Wrapper = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: flex-start;
+  margin: 16px 20px;
+  text-align: center;
+`
 interface BagHeaderProps {
   numberOfAssets: number
   closeBag: () => void
@@ -46,19 +56,17 @@ interface BagHeaderProps {
 
 export const BagHeader = ({ numberOfAssets, closeBag, resetFlow, isProfilePage }: BagHeaderProps) => {
   return (
-    <Column gap="4" paddingX="32" marginBottom="20">
-      <Row className={styles.header}>
-        <ThemedText.HeadlineSmall>{isProfilePage ? 'Sell NFTs' : 'My bag'}</ThemedText.HeadlineSmall>
-        <IconWrapper onClick={closeBag}>
-          <BagCloseIcon />
-        </IconWrapper>
-      </Row>
+    <Wrapper>
+      <ThemedText.HeadlineSmall>{isProfilePage ? <Trans>Sell</Trans> : <Trans>Bag</Trans>}</ThemedText.HeadlineSmall>
       {numberOfAssets > 0 && (
-        <ControlRow>
-          <ThemedText.BodyPrimary>{roundAndPluralize(numberOfAssets, 'NFT')}</ThemedText.BodyPrimary>
+        <>
+          <CounterDot>{numberOfAssets}</CounterDot>
           <ClearButton onClick={resetFlow}>Clear all</ClearButton>
-        </ControlRow>
+        </>
       )}
-    </Column>
+      <IconWrapper onClick={closeBag}>
+        <BagCloseIcon />
+      </IconWrapper>
+    </Wrapper>
   )
 }

src/nft/components/bag/EmptyContent.tsx

@@ -6,8 +6,8 @@ import { themeVars } from 'nft/css/sprinkles.css'
 import styled from 'styled-components/macro'
 
 const StyledColumn = styled(Column)<{ isProfilePage?: boolean }>`
-  gap: ${({ isProfilePage }) => !isProfilePage && '12'};
-  margin-top: 36;
+  gap: ${({ isProfilePage }) => !isProfilePage && '12'}px;
+  margin-top: 68px;
   display: ${({ isProfilePage }) => isProfilePage && 'flex'};
   justify-content: ${({ isProfilePage }) => isProfilePage && 'center'};
   height: ${({ isProfilePage }) => isProfilePage && 'inherit'};

src/theme/components.tsx

@@ -74,6 +74,8 @@ export const ButtonText = styled.button`
   background: none;
   cursor: pointer;
   transition-duration: ${({ theme }) => theme.transition.duration.fast};
+  transition-timing-function: ease-in-out;
+  transition-property: opacity, color, background-color;
 
   :hover {
     opacity: ${({ theme }) => theme.opacity.hover};