diff --git a/src/nft/components/bag/Bag.css.ts b/src/nft/components/bag/Bag.css.ts index dafdf48032..254d2e88ec 100644 --- a/src/nft/components/bag/Bag.css.ts +++ b/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', diff --git a/src/nft/components/bag/EmptyContent.tsx b/src/nft/components/bag/EmptyContent.tsx index 51194ba86a..2af2c71466 100644 --- a/src/nft/components/bag/EmptyContent.tsx +++ b/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 ( - +
{isProfilePage ? ( @@ -18,7 +27,7 @@ const EmptyState = () => { )}
{isProfilePage ? ( - No NFTs Selected +
No NFTs selected
) : (
@@ -29,7 +38,7 @@ const EmptyState = () => {
)} -
+ ) } diff --git a/src/nft/css/sprinkles.css.ts b/src/nft/css/sprinkles.css.ts index 7d6fe165bf..2213d6c689 100644 --- a/src/nft/css/sprinkles.css.ts +++ b/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,