fix: fix sell bag empty state (#5079)

* init

* fix comments

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

@@ -9,6 +9,9 @@ export const bagContainer = style([
     height: 'full',
     right: '0',
     background: 'backgroundSurface',
+    borderLeftStyle: 'solid',
+    borderColor: 'backgroundOutline',
+    borderWidth: '1px',
     color: 'textPrimary',
     paddingTop: '20',
     paddingBottom: '24',

src/nft/components/bag/EmptyContent.tsx

@@ -3,13 +3,22 @@ import { LargeBagIcon, LargeTagIcon } from 'nft/components/icons'
 import { subhead } from 'nft/css/common.css'
 import { themeVars } from 'nft/css/sprinkles.css'
 import { useLocation } from 'react-router-dom'
+import styled from 'styled-components/macro'
+
+const StyledColumn = styled(Column)<{ isProfilePage?: boolean }>`
+  gap: ${({ isProfilePage }) => !isProfilePage && '12'};
+  margin-top: 36;
+  display: ${({ isProfilePage }) => isProfilePage && 'flex'};
+  justify-content: ${({ isProfilePage }) => isProfilePage && 'center'};
+  height: ${({ isProfilePage }) => isProfilePage && 'inherit'};
+`
 
 const EmptyState = () => {
   const { pathname } = useLocation()
   const isProfilePage = pathname.startsWith('/profile')
 
   return (
-    <Column gap={isProfilePage ? '16' : '12'} marginTop="36">
+    <StyledColumn isProfilePage={isProfilePage}>
       <Center>
         {isProfilePage ? (
           <LargeTagIcon color={themeVars.colors.textTertiary} />
@@ -18,7 +27,7 @@ const EmptyState = () => {
         )}
       </Center>
       {isProfilePage ? (
-        <span className={subhead}>No NFTs Selected</span>
+        <Center className={subhead}>No NFTs selected</Center>
       ) : (
         <Column gap="16">
           <Center className={subhead} style={{ lineHeight: '24px' }}>
@@ -29,7 +38,7 @@ const EmptyState = () => {
           </Center>
         </Column>
       )}
-    </Column>
+    </StyledColumn>
   )
 }
 

src/nft/css/sprinkles.css.ts

@@ -371,6 +371,7 @@ const colorStyles = defineProperties({
     color: vars.color,
     background: vars.color,
     borderColor: vars.color,
+    borderLeftColor: vars.color,
     borderBottomColor: vars.color,
     borderTopColor: vars.color,
     backgroundColor: vars.color,
@@ -390,6 +391,7 @@ const unresponsiveProperties = defineProperties({
   properties: {
     cursor: ['default', 'pointer', 'auto'],
     borderStyle,
+    borderLeftStyle: borderStyle,
     borderBottomStyle: borderStyle,
     borderTopStyle: borderStyle,
     borderRadius: vars.radii,