diff --git a/src/components/About/ProtocolBanner.tsx b/src/components/About/ProtocolBanner.tsx index 565b20869a3..60e2b42de46 100644 --- a/src/components/About/ProtocolBanner.tsx +++ b/src/components/About/ProtocolBanner.tsx @@ -1,12 +1,12 @@ import { ButtonEmpty } from 'components/Button' +import { darken, lighten } from 'polished' import styled from 'styled-components' import { BREAKPOINTS } from 'theme' +import { colors } from 'theme/colors' import { useIsDarkMode } from 'theme/components/ThemeToggle' import meshSrc from './images/Mesh.png' -const DARK_MODE_GRADIENT = 'radial-gradient(101.8% 4091.31% at 0% 0%, #4673FA 0%, #9646FA 100%)' - const Banner = styled.div<{ isDarkMode: boolean }>` height: 340px; width: 100%; @@ -22,10 +22,13 @@ const Banner = styled.div<{ isDarkMode: boolean }>` box-shadow: 0px 10px 24px rgba(51, 53, 72, 0.04); - background: ${({ isDarkMode }) => + background: ${({ isDarkMode, theme }) => isDarkMode - ? `url(${meshSrc}), ${DARK_MODE_GRADIENT}` - : `url(${meshSrc}), linear-gradient(93.06deg, #00ff38 2.66%, #9fffa3 98.99%);`}; + ? `url(${meshSrc}), linear-gradient(90deg, ${colors.blueVibrant} 0%, ${colors.purple300} 100%)` + : `url(${meshSrc}), linear-gradient(90deg, ${darken(0.1, theme.accent1)} 0%, ${lighten( + 0.25, + theme.accent1 + )} 100%);`}; @media screen and (min-width: ${BREAKPOINTS.lg}px) { height: 140px; diff --git a/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap b/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap index 1f09ec7047f..71bea191afb 100644 --- a/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap +++ b/src/components/NavBar/__snapshots__/ChainSelectorRow.test.tsx.snap @@ -82,7 +82,7 @@ exports[`ChainSelectorRow should match snapshot for chainId 1 1`] = ` class="c3" > ` inset: 0; transform: scale(1.1); filter: blur(50px); - background-color: rgba(252, 114, 255, 0.075); + background-color: ${({ theme }) => theme.accent2}; z-index: -2; } diff --git a/src/nft/components/icons.tsx b/src/nft/components/icons.tsx index 96ff2b72815..944ca5f2e60 100644 --- a/src/nft/components/icons.tsx +++ b/src/nft/components/icons.tsx @@ -10,16 +10,18 @@ type SVGProps = React.SVGProps & { gradientId?: string } -export const UniIcon = (props: SVGProps) => ( - - - -) +export const UniIcon = (props: SVGProps) => { + return ( + + + + ) +} export const ChevronUpIcon = ({ secondaryColor, diff --git a/src/nft/components/profile/view/__snapshots__/EmptyWalletContent.test.tsx.snap b/src/nft/components/profile/view/__snapshots__/EmptyWalletContent.test.tsx.snap index eaa79a897a9..0f3bfb6f8fe 100644 --- a/src/nft/components/profile/view/__snapshots__/EmptyWalletContent.test.tsx.snap +++ b/src/nft/components/profile/view/__snapshots__/EmptyWalletContent.test.tsx.snap @@ -46,7 +46,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = ` } .c5 { - background-color: #75ff72; + background-color: #3dad5d; padding: 10px 24px; color: #FFFFFF; width: -webkit-min-content; @@ -88,7 +88,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = ` />
No NFTs yet
@@ -128,7 +128,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = ` />
No tokens yet
@@ -174,7 +174,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = ` />
No activity yet
@@ -209,7 +209,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = ` />
No pools yet
diff --git a/src/nft/css/sprinkles.css.ts b/src/nft/css/sprinkles.css.ts index d25a7b67ba1..eee255ce0ff 100644 --- a/src/nft/css/sprinkles.css.ts +++ b/src/nft/css/sprinkles.css.ts @@ -212,8 +212,8 @@ export const vars = createGlobalTheme(':root', { surface3_dark: '#FFFFFF1f', surface4_dark: '#FFFFFF33', surface5_dark: '#00000004', - accent1_dark: '#75ff72', - accent2_dark: '#311C31', + accent1_dark: '#139c3a', + accent2_dark: '#022b24', neutral1_light: '#222222', neutral2_light: '#7D7D7D', neutral3_light: '#CECECE', @@ -222,8 +222,8 @@ export const vars = createGlobalTheme(':root', { surface3_light: '#2222220d', surface4_light: '#ffffffa3', surface5_light: '#0000000a', - accent1_light: '#75ff72', - accent2_light: '#EFEFEF', + accent1_light: '#3dad5d', + accent2_light: '#d0ffdd', success: '#40B66B', critical: '#FF5F52', }, diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 1a6b69004c9..555d3850846 100644 --- a/src/pages/Landing/index.tsx +++ b/src/pages/Landing/index.tsx @@ -6,6 +6,7 @@ import ProtocolBanner from 'components/About/ProtocolBanner' import { useAccountDrawer } from 'components/AccountDrawer' import { BaseButton } from 'components/Button' import Swap from 'pages/Swap' +import { adjustHue, lighten } from 'polished' import { parse } from 'qs' import { useEffect, useRef } from 'react' import { ArrowDownCircle } from 'react-feather' @@ -20,8 +21,6 @@ import { textFadeIn, TRANSITION_DURATIONS } from 'theme/styles' import { Z_INDEX } from 'theme/zIndex' const PageContainer = styled.div` - position: absolute; - top: 0; padding: ${({ theme }) => theme.navHeight}px 0px 0px 0px; width: 100%; display: flex; @@ -75,7 +74,11 @@ const Glow = styled.div` position: absolute; top: 68px; bottom: 0; - background: radial-gradient(72.04% 72.04% at 50% 3.99%, #33ff99 0%, rgba(166, 151, 255, 0) 100%); + background: radial-gradient( + 75% 75% at 50% 0%, + ${({ theme }) => theme.accent1} 0%, + ${({ theme }) => theme.accent2} 100% + ); filter: blur(72px); border-radius: 24px; max-width: 480px; @@ -112,10 +115,18 @@ const TitleText = styled.h1<{ isDarkMode: boolean; $visible: boolean }>` ${({ isDarkMode }) => isDarkMode ? css` - background: linear-gradient(20deg, rgba(255, 244, 207, 1) 10%, rgba(51, 255, 102, 1) 100%); + background: linear-gradient( + 20deg, + ${({ theme }) => lighten(0.5, adjustHue(290, theme.accent1))} 10%, + ${({ theme }) => theme.accent1} 100% + ); ` : css` - background: linear-gradient(10deg, rgba(79, 255, 150, 1) 0%, rgba(159, 255, 163, 1) 100%); + background: linear-gradient( + 20deg, + ${({ theme }) => theme.accent1} 10%, + ${({ theme }) => lighten(0.4, adjustHue(300, theme.accent1))} 100% + ); `}; background-clip: text; -webkit-background-clip: text; @@ -171,7 +182,11 @@ const LandingButton = styled(BaseButton)` ` const ButtonCTA = styled(LandingButton)` - background: linear-gradient(93.06deg, #00ff38 2.66%, #9fffa3 98.99%); + background: linear-gradient( + 93.06deg, + ${({ theme }) => theme.accent1} 2.66%, + ${({ theme }) => lighten(0.3, theme.accent1)} 98.99% + ); border: none; color: ${({ theme }) => theme.white}; transition: ${({ theme }) => `all ${theme.transition.duration.medium} ${theme.transition.timing.ease}`}; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index fd9d47896c9..8e45b09a8aa 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -106,8 +106,8 @@ export const colors = { surface3_dark: '#FFFFFF12', surface4_dark: '#FFFFFF20', surface5_dark: '#00000004', - accent1_dark: '#75ff72', - accent2_dark: '#311C31', + accent1_dark: '#139c3a', + accent2_dark: '#022b24', neutral1_light: '#222222', neutral2_light: '#7D7D7D', neutral3_light: '#CECECE', @@ -116,8 +116,8 @@ export const colors = { surface3_light: '#22222212', surface4_light: '#FFFFFF64', surface5_light: '#00000004', - accent1_light: '#75ff72', - accent2_light: '#EFEFEF', + accent1_light: '#3dad5d', + accent2_light: '#d0ffdd', success: '#40B66B', critical: '#FF5F52', scrim: 'rgba(0, 0, 0, 0.60)',