fix: fixing color of buttons (#5179)

* fixing color states, price slider and navbar

src/graphql/data/nft/NftBalance.ts

@@ -170,7 +170,7 @@ export function useNftBalanceQuery(
       collectionIsVerified: asset?.collection?.isVerified,
       lastPrice: queryAsset.node.lastPrice?.value,
       floorPrice: asset?.collection?.markets?.[0]?.floorPrice?.value,
-      creatorPercentage: queryAsset?.node?.listingFees?.[0]?.basisPoints ?? 0 / 10000,
+      basisPoints: queryAsset?.node?.listingFees?.[0]?.basisPoints ?? 0 / 10000,
       listing_date: asset?.listings?.edges?.[0]?.node?.createdAt,
       date_acquired: queryAsset.node.lastPrice?.timestamp,
       sellOrders: asset?.listings?.edges.map((edge: any) => edge.node),

src/nft/components/bag/Bag.tsx

@@ -315,6 +315,7 @@ const Bag = () => {
                 paddingY="10"
                 className={`${buttonTextMedium} ${commonButtonStyles}`}
                 backgroundColor="accentAction"
+                color="white"
                 textAlign="center"
                 onClick={() => {
                   isMobile && toggleBag()

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

@@ -36,7 +36,7 @@ export const warningContainer = style([
 export const payButton = style([
   body,
   sprinkles({
-    background: 'blue400',
+    background: 'accentAction',
     border: 'none',
     borderRadius: '12',
     paddingY: '12',

src/nft/components/bag/profile/utils.ts

@@ -127,7 +127,7 @@ export const getTotalEthValue = (sellAssets: WalletAsset[]) => {
       return (
         total +
         (maxListing.price ?? 0) -
-        (maxListing.price ?? 0) * (maxListing.marketplace.fee / 100 + asset.creatorPercentage)
+        (maxListing.price ?? 0) * (maxListing.marketplace.fee / 100 + asset.basisPoints)
       )
     }
     return total

src/nft/components/collection/FilterButton.tsx

@@ -31,7 +31,7 @@ export const FilterButton = ({
       width={isMobile ? '44' : 'auto'}
       height="44"
       whiteSpace="nowrap"
-      color="textPrimary"
+      color="white"
     >
       <FilterIcon />
       {!isMobile ? (

src/nft/components/collection/Filters.css.ts

@@ -8,7 +8,8 @@ export const container = style([
     paddingTop: '4',
   }),
   {
-    width: '300px',
+    width: '308px',
+    paddingRight: '8px',
     paddingBottom: '96px',
     '@media': {
       [`(max-width: ${breakpoints.sm - 1}px)`]: {

src/nft/components/collection/PriceRange.tsx

@@ -14,6 +14,7 @@ import { default as Slider } from 'rc-slider'
 import { FocusEventHandler, FormEvent, useEffect, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components/macro'
+import { colorsDark } from 'theme/colors'
 
 import * as styles from './PriceRange.css'
 import { TraitsHeader } from './TraitsHeader'
@@ -186,10 +187,11 @@ export const PriceRange = () => {
             top: '3px',
             width: '12px',
             height: '20px',
-            backgroundColor: `${theme.textPrimary}`,
+            opacity: '1',
+            backgroundColor: `white`,
             borderRadius: '4px',
             border: 'none',
-            boxShadow: `${theme.shallowShadow.slice(0, -1)}`,
+            boxShadow: colorsDark.shallowShadow.slice(0, -1),
           }}
           railStyle={{
             top: '3px',

src/nft/components/details/AssetPriceDetails.tsx

@@ -356,7 +356,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
                     }
                   }}
                 >
-                  <SubHeader lineHeight={'20px'}>
+                  <SubHeader color="white" lineHeight={'20px'}>
                     <span>{assetInBag ? 'Remove' : 'Buy Now'}</span>
                   </SubHeader>
                 </BuyNowButton>

src/nft/components/profile/list/ListPage.tsx

@@ -595,7 +595,7 @@ const MarketplaceRow = ({
 
   const marketplaceFee = selectedMarkets.length > 0 ? maxMarketFee(selectedMarkets) : 0
   const price = showGlobalPrice ? globalPrice : listPrice
-  const feeInEth = price && (price * (asset.creatorPercentage * 100 + marketplaceFee)) / 100
+  const feeInEth = price && (price * (asset.basisPoints * 0.01 + marketplaceFee)) / 100
   const userReceives = price && feeInEth && price - feeInEth
   const profit = userReceives && asset.lastPrice && userReceives - asset.lastPrice
   const profitPercent = profit && asset.lastPrice && Math.round(profit && (profit / asset.lastPrice) * 100)
@@ -714,7 +714,7 @@ const MarketplaceRow = ({
       </Row>
       <Row flex="1" display={{ sm: 'none', md: 'flex' }}>
         <Box className={body} color="textSecondary" width="full" textAlign="right">
-          {(asset.creatorPercentage * 100).toFixed(1)}%
+          {(asset.basisPoints * 0.01).toFixed(1)}%
         </Box>
       </Row>
       <Row style={{ flex: '1.5' }} display={{ sm: 'none', md: 'flex' }}>

src/nft/components/profile/view/EmptyWalletContent.tsx

@@ -23,7 +23,7 @@ const EmptyWalletText = styled.div`
 const ExploreNFTsButton = styled.button`
   background-color: ${({ theme }) => theme.accentAction};
   padding: 10px 24px;
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ theme }) => theme.white};
   width: min-content;
   border: none;
   outline: none;
@@ -31,6 +31,9 @@ const ExploreNFTsButton = styled.button`
   white-space: nowrap;
   cursor: pointer;
   margin-top: 20px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
 `
 
 export const EmptyWalletContent = () => {

src/nft/components/profile/view/ProfilePage.tsx

@@ -44,12 +44,19 @@ const SellModeButton = styled.button<{ active: boolean }>`
   gap: 8px;
   cursor: pointer;
   background-color: ${({ theme, active }) => (active ? theme.accentAction : theme.backgroundInteractive)};
-  color: ${({ theme }) => theme.textPrimary};
+  color: ${({ active, theme }) => (active ? 'white' : theme.textPrimary)};
   border: none;
   outline: none;
   &:hover {
     background-color: ${({ theme }) => theme.accentAction};
+    color: white;
   }
+
+  transition: ${({
+    theme: {
+      transition: { duration, timing },
+    },
+  }) => `${duration.fast} all ${timing.ease}`};
 `
 
 const ProfilePageColumn = styled(Column)`

src/nft/css/common.css.ts

@@ -41,7 +41,6 @@ export const commonButtonStyles = style([
   sprinkles({
     borderRadius: '12',
     transition: '250',
-    boxShadow: { hover: 'elevation' },
   }),
   {
     border: 'none',

src/nft/pages/collection/index.tsx

@@ -2,6 +2,11 @@ import { Trace } from '@uniswap/analytics'
 import { PageName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
 import { OpacityHoverState } from 'components/Common'
+import {
+  MAX_WIDTH_MEDIA_BREAKPOINT,
+  MOBILE_MEDIA_BREAKPOINT,
+  SMALL_MEDIA_BREAKPOINT,
+} from 'components/Tokens/constants'
 import { useLoadAssetsQuery } from 'graphql/data/nft/Asset'
 import { useCollectionQuery, useLoadCollectionQuery } from 'graphql/data/nft/Collection'
 import { MobileHoverBag } from 'nft/components/bag/MobileHoverBag'
@@ -35,8 +40,27 @@ const MobileFilterHeader = styled(Row)`
   justify-content: space-between;
 `
 
+// Sticky navbar on light mode looks incorrect because the box shadows from assets overlap the the edges of the navbar.
+// As a result it needs 14px padding on either side. These paddings are offset by 14px to account for this
 const CollectionDisplaySection = styled(Row)`
-  ${styles.ScreenBreakpointsPaddings}
+  @media screen and (min-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
+    padding-left: 34px;
+    padding-right: 34px;
+  }
+
+  @media screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
+    padding-left: 26px;
+    padding-right: 26px;
+  }
+
+  @media screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  @media screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) {
+    padding-left: 16px;
+  }
   align-items: flex-start;
   position: relative;
 `

src/nft/types/sell/sell.ts

@@ -62,7 +62,7 @@ export interface WalletAsset {
   collectionIsVerified: boolean
   lastPrice: number
   floorPrice: number
-  creatorPercentage: number
+  basisPoints: number
   listing_date: string
   date_acquired: string
   sellOrders: SellOrder[]

src/nft/utils/listNfts.ts

@@ -55,7 +55,7 @@ const getConsiderationItems = (
   creatorFee?: ConsiderationInputItem
 } => {
   const openSeaBasisPoints = OPENSEA_DEFAULT_FEE * INVERSE_BASIS_POINTS
-  const creatorFeeBasisPoints = asset.creatorPercentage * INVERSE_BASIS_POINTS
+  const creatorFeeBasisPoints = asset.basisPoints * INVERSE_BASIS_POINTS
   const sellerBasisPoints = INVERSE_BASIS_POINTS - openSeaBasisPoints - creatorFeeBasisPoints
 
   const openseaFee = price.mul(BigNumber.from(openSeaBasisPoints)).div(BigNumber.from(INVERSE_BASIS_POINTS)).toString()
@@ -187,7 +187,7 @@ export async function signListing(
         endTime: BigNumber.from(asset.expirationTime),
         // minimum ratio to be received by the user (per 10000)
         minPercentageToAsk: BigNumber.from(10000)
-          .sub(BigNumber.from(200).add(BigNumber.from(asset.creatorPercentage * 10000)))
+          .sub(BigNumber.from(200).add(BigNumber.from(asset.basisPoints * 10000)))
           .toNumber(),
         // params (e.g., price, target account for private sale)
         params: [],
@@ -214,7 +214,7 @@ export async function signListing(
           price: parseEther(listingPrice.toString()).toString(),
           startTime: currentTime,
           endTime: asset.expirationTime,
-          minPercentageToAsk: 10000 - (200 + asset.creatorPercentage * 10000),
+          minPercentageToAsk: 10000 - (200 + asset.basisPoints * 10000),
           params: [],
         }
         const res = await createLooksRareOrder(payload)