fix: replace many blue instances with accentAction (#5501)

replace many blue instances with accentAction
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/bag/profile/ListingButton.tsx

@@ -194,7 +194,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
             <Row
               marginLeft="72"
               cursor="pointer"
-              color="genieBlue"
+              color="accentAction"
               onClick={() => {
                 setShowWarning(false)
                 setCanContinue(true)
@@ -210,7 +210,7 @@ export const ListingButton = ({ onClick, buttonText, showWarningOverride = false
       <Box
         as="button"
         border="none"
-        backgroundColor="genieBlue"
+        backgroundColor="accentAction"
         cursor={
           [ListingStatus.APPROVED, ListingStatus.PENDING, ListingStatus.SIGNING].includes(listingStatus) ||
           disableListButton

src/nft/components/bag/profile/ListingSection.tsx

@@ -161,7 +161,7 @@ export const ListingSection = ({
                         className={buttonTextSmall}
                         borderRadius="12"
                         border="none"
-                        color="genieBlue"
+                        color="accentAction"
                         height="32"
                         cursor="pointer"
                         style={{ backgroundColor: '#4C82FB29' }}

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

@@ -131,13 +131,13 @@ export const buyCell = style([
     selectors: {
       '&:enabled': {
         cursor: 'pointer',
-        color: vars.color.blue400,
+        color: vars.color.accentAction,
       },
       '&:disabled': {
         color: themeVars.colors.textTertiary,
       },
       '&:hover&:enabled': {
-        background: vars.color.blue400,
+        background: vars.color.accentAction,
         color: themeVars.colors.explicitWhite,
       },
     },

src/nft/components/collection/CollectionNfts.tsx

@@ -610,7 +610,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
                   onClick={reset}
                   type="button"
                   className={clsx(bodySmall, buttonTextMedium)}
-                  color="blue"
+                  color="accentAction"
                   cursor="pointer"
                 >
                   <ViewFullCollection>View full collection</ViewFullCollection>

src/nft/components/collection/CollectionSearch.tsx

@@ -14,7 +14,7 @@ export const CollectionSearch = () => {
     <Box
       as="input"
       flex="1"
-      borderColor={{ default: 'backgroundOutline', focus: 'genieBlue' }}
+      borderColor={{ default: 'backgroundOutline', focus: 'accentAction' }}
       borderWidth="1.5px"
       borderStyle="solid"
       borderRadius="12"

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

@@ -354,7 +354,7 @@ export const returnButton = style([
     fontWeight: 'bold',
     fontSize: '14',
     color: 'explicitWhite',
-    backgroundColor: 'genieBlue',
+    backgroundColor: 'accentAction',
     display: 'flex',
     alignItems: 'center',
     marginLeft: 'auto',

src/nft/components/collection/TransactionCompleteModal.tsx

@@ -364,7 +364,7 @@ const TxCompleteModal = () => {
                     <Box
                       as="button"
                       border="none"
-                      backgroundColor="genieBlue"
+                      backgroundColor="accentAction"
                       cursor="pointer"
                       className={styles.returnButton}
                       type="button"

src/nft/components/details/AssetDetails.css.ts

@@ -39,7 +39,7 @@ export const tab = style([
     selectors: {
       '&[data-active="true"]': {
         textDecoration: 'underline',
-        textDecorationColor: vars.color.genieBlue,
+        textDecorationColor: vars.color.accentAction,
         textUnderlineOffset: '8px',
         textDecorationThickness: '2px',
         color: vars.color.textPrimary,

src/nft/components/profile/list/ListPage.css.ts

 import { style } from '@vanilla-extract/css'
 import { sprinkles, themeVars } from 'nft/css/sprinkles.css'
 
-export const buttonSelected = style([
-  sprinkles({
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'genieBlue',
-  }),
-])
-
 export const nftDivider = style([
   sprinkles({
     height: '0',

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

@@ -161,7 +161,7 @@ const PriceTextInput = ({
           warningType !== WarningType.NONE && !focused
             ? 'orange'
             : isGlobalPrice
-            ? 'genieBlue'
+            ? 'accentAction'
             : listPrice != null
             ? 'textSecondary'
             : 'blue400'
@@ -231,7 +231,7 @@ const PriceTextInput = ({
                       : formatEth(asset.floor_sell_order_price)}
                     ETH
                     <Box
-                      color={warningType === WarningType.BELOW_FLOOR ? 'genieBlue' : 'orange'}
+                      color={warningType === WarningType.BELOW_FLOOR ? 'accentAction' : 'orange'}
                       marginLeft="8"
                       cursor="pointer"
                       onClick={() => {

src/nft/components/profile/view/ProfilePage.css.ts

@@ -11,10 +11,6 @@ export const section = style([
   { maxWidth: '1000px', margin: '0 auto' },
 ])
 
-export const buttonSelected = style({
-  border: `2px solid ${vars.color.genieBlue}`,
-})
-
 export const ethIcon = style({
   marginBottom: '-3px',
 })

src/nft/css/common.css.ts

@@ -56,7 +56,7 @@ export const buttonMedium = style([
   buttonTextMedium,
   commonButtonStyles,
   sprinkles({
-    backgroundColor: 'blue',
+    backgroundColor: 'accentAction',
     color: 'explicitWhite',
   }),
   {

src/nft/css/sprinkles.css.ts

@@ -37,7 +37,6 @@ const themeContractValues = {
 
   shadows: {
     menu: '',
-    genieBlue: '',
     elevation: '',
     tooltip: '',
     deep: '',
@@ -157,7 +156,6 @@ const zIndices = {
 export const vars = createGlobalTheme(':root', {
   color: {
     ...themeVars.colors,
-    genieBlue: '#4C82FB',
     fallbackGradient: 'linear-gradient(270deg, #D1D5DB 0%, #F6F6F6 100%)',
     loadingBackground: '#24272e',
     cardDropShadow: 'rgba(0, 0, 0, 10%) 0px 4px 12px',
@@ -165,7 +163,6 @@ export const vars = createGlobalTheme(':root', {
     orange: '#FA2C38',
     black: 'black',
     whitesmoke: '#F5F5F5',
-    blue: '#4C82FB',
     gray: '#CBCEDC',
     transculent: '#7F7F7F',
     transparent: 'transparent',

src/nft/pages/asset/Asset.css.ts

 import { style } from '@vanilla-extract/css'
 
-import { center, subhead } from '../../css/common.css'
-import { sprinkles, vars } from '../../css/sprinkles.css'
+import { center } from '../../css/common.css'
+import { sprinkles } from '../../css/sprinkles.css'
 
 export const image = style([
   sprinkles({ borderRadius: '20', height: 'full', alignSelf: 'center' }),
@@ -33,22 +33,6 @@ export const container = style([
 
 export const marketplace = sprinkles({ borderRadius: '4' })
 
-export const tab = style([
-  subhead,
-  sprinkles({ color: 'textSecondary', border: 'none', padding: '0', background: 'transparent', cursor: 'pointer' }),
-  {
-    selectors: {
-      '&[data-active="true"]': {
-        textDecoration: 'underline',
-        textDecorationColor: vars.color.genieBlue,
-        textUnderlineOffset: '8px',
-        textDecorationThickness: '2px',
-        color: vars.color.textPrimary,
-      },
-    },
-  },
-])
-
 export const creator = style({
   '@media': {
     '(max-width: 640px)': {

src/nft/pages/collection/index.css.ts

@@ -4,7 +4,7 @@ import { buttonTextMedium } from 'nft/css/common.css'
 import { loadingBlock } from 'nft/css/loading.css'
 import { css } from 'styled-components/macro'
 
-import { sprinkles, vars } from '../../css/sprinkles.css'
+import { sprinkles } from '../../css/sprinkles.css'
 
 export const bannerImage = style({ objectFit: 'cover' })
 
@@ -28,25 +28,6 @@ export const activitySwitcherToggle = style([
   }),
 ])
 
-export const selectedActivitySwitcherToggle = style([
-  baseActivitySwitcherToggle,
-  sprinkles({
-    color: 'textPrimary',
-  }),
-  {
-    ':after': {
-      content: '',
-      position: 'absolute',
-      background: vars.color.genieBlue,
-      width: '100%',
-      height: '2px',
-      left: '0px',
-      right: '0px',
-      bottom: '-8px',
-    },
-  },
-])
-
 export const loadingBanner = style([
   loadingBlock,
   sprinkles({

src/nft/themes/darkTheme.ts

@@ -34,7 +34,6 @@ export const darkTheme: Theme = {
   },
   shadows: {
     menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',
-    genieBlue: '0 4px 16px 0 rgba(70, 115, 250, 0.4)',
     elevation: '0px 4px 16px rgba(70, 115, 250, 0.4)',
     tooltip: '0px 4px 16px rgba(255, 255, 255, 0.2)',
     deep: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32)',

src/nft/themes/lightTheme.ts

@@ -34,7 +34,6 @@ export const lightTheme: Theme = {
   },
   shadows: {
     menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',
-    genieBlue: '0 4px 16px 0 rgba(251, 17, 142)',
     elevation: '0px 4px 16px rgba(70, 115, 250, 0.4)',
     tooltip: '0px 4px 16px rgba(10, 10, 59, 0.2)',
     deep: '8px 12px 20px rgba(51, 53, 72, 0.04), 4px 6px 12px rgba(51, 53, 72, 0.02), 4px 4px 8px rgba(51, 53, 72, 0.04)',