fix: button colors (#5435)

* init

* fix

* respond to comments

* respond

* fix

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

@@ -173,15 +173,6 @@ export const filter = style([
   },
 ])
 
-export const activeFilter = style([
-  filter,
-  sprinkles({
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'genieBlue',
-  }),
-])
-
 export const marketplaceIcon = style([
   sprinkles({
     width: '16',

src/nft/components/collection/Activity.tsx

@@ -1,7 +1,8 @@
-import clsx from 'clsx'
+import { OpacityHoverState } from 'components/Common'
 import { Box } from 'nft/components/Box'
 import { LoadingSparkle } from 'nft/components/common/Loading/LoadingSparkle'
 import { Center, Column, Row } from 'nft/components/Flex'
+import { themeVars, vars } from 'nft/css/sprinkles.css'
 import { useBag, useIsMobile } from 'nft/hooks'
 import { ActivityFetcher } from 'nft/queries/genie/ActivityFetcher'
 import { ActivityEvent, ActivityEventResponse, ActivityEventType } from 'nft/types'
@@ -9,6 +10,8 @@ import { fetchPrice } from 'nft/utils/fetchPrice'
 import { useCallback, useEffect, useMemo, useReducer, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery } from 'react-query'
+import { useIsDarkMode } from 'state/user/hooks'
+import styled from 'styled-components/macro'
 
 import * as styles from './Activity.css'
 import { AddressCell, BuyCell, EventCell, ItemCell, PriceCell } from './ActivityCells'
@@ -22,6 +25,12 @@ enum ColumnHeaders {
   To = 'To',
 }
 
+const FilterBox = styled.div<{ backgroundColor: string }>`
+  display: flex;
+  background: ${({ backgroundColor }) => backgroundColor};
+  ${OpacityHoverState};
+`
+
 export const HeaderRow = () => {
   return (
     <Box className={styles.headerRow}>
@@ -106,6 +115,7 @@ export const Activity = ({ contractAddress, rarityVerified, collectionName, chai
   const toggleCart = useBag((state) => state.toggleBag)
   const isMobile = useIsMobile()
   const [ethPriceInUSD, setEthPriceInUSD] = useState(0)
+  const isDarkMode = useIsDarkMode()
 
   useEffect(() => {
     fetchPrice().then((price) => {
@@ -116,17 +126,19 @@ export const Activity = ({ contractAddress, rarityVerified, collectionName, chai
   const Filter = useCallback(
     function ActivityFilter({ eventType }: { eventType: ActivityEventType }) {
       const isActive = activeFilters[eventType]
+      const activeBackgroundColor = isDarkMode ? vars.color.gray500 : vars.color.gray200
 
       return (
-        <Box
-          className={clsx(styles.filter, isActive && styles.activeFilter)}
+        <FilterBox
+          className={styles.filter}
+          backgroundColor={isActive ? activeBackgroundColor : themeVars.colors.backgroundInteractive}
           onClick={() => filtersDispatch({ eventType })}
         >
           {eventType.charAt(0) + eventType.slice(1).toLowerCase() + 's'}
-        </Box>
+        </FilterBox>
       )
     },
-    [activeFilters]
+    [activeFilters, isDarkMode]
   )
 
   return (

src/nft/components/details/AssetDetails.tsx

@@ -6,6 +6,7 @@ import { reduceFilters } from 'nft/components/collection/Activity'
 import { LoadingSparkle } from 'nft/components/common/Loading/LoadingSparkle'
 import { AssetPriceDetails } from 'nft/components/details/AssetPriceDetails'
 import { Center } from 'nft/components/Flex'
+import { themeVars, vars } from 'nft/css/sprinkles.css'
 import { ActivityFetcher } from 'nft/queries/genie/ActivityFetcher'
 import { ActivityEventResponse, ActivityEventType, CollectionInfoForAsset, GenieAsset } from 'nft/types'
 import { shortenAddress } from 'nft/utils/address'
@@ -18,6 +19,7 @@ import { useCallback, useMemo, useReducer, useState } from 'react'
 import InfiniteScroll from 'react-infinite-scroll-component'
 import { useInfiniteQuery, useQuery } from 'react-query'
 import { Link as RouterLink } from 'react-router-dom'
+import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 
 import AssetActivity from './AssetActivity'
@@ -122,9 +124,9 @@ const ContentNotAvailable = styled.div`
   height: 450px;
 `
 
-const FilterBox = styled.div<{ isActive?: boolean }>`
+const FilterBox = styled.div<{ backgroundColor: string }>`
   box-sizing: border-box;
-  background-color: ${({ theme }) => theme.backgroundInteractive};
+  background-color: ${({ backgroundColor }) => backgroundColor};
   font-size: 14px;
   font-weight: 600;
   line-height: 14px;
@@ -133,7 +135,6 @@ const FilterBox = styled.div<{ isActive?: boolean }>`
   border-radius: 12px;
   cursor: pointer;
   box-sizing: border-box;
-  border: ${({ isActive, theme }) => (isActive ? `1px solid ${theme.accentActive}` : undefined)};
   ${OpacityHoverState};
 `
 
@@ -287,9 +288,15 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
   const Filter = useCallback(
     function ActivityFilter({ eventType }: { eventType: ActivityEventType }) {
       const isActive = activeFilters[eventType]
+      const isDarkMode = useIsDarkMode()
 
       return (
-        <FilterBox isActive={isActive} onClick={() => filtersDispatch({ eventType })}>
+        <FilterBox
+          backgroundColor={
+            isActive ? (isDarkMode ? vars.color.gray500 : vars.color.gray200) : themeVars.colors.backgroundInteractive
+          }
+          onClick={() => filtersDispatch({ eventType })}
+        >
           {eventType === ActivityEventType.CancelListing
             ? 'Cancellations'
             : eventType.charAt(0) + eventType.slice(1).toLowerCase() + 's'}