From f441d90d954dc60b798a9dcc4bae2584615719aa Mon Sep 17 00:00:00 2001 From: Jubal Mabaquiao Date: Sun, 21 Jan 2024 22:19:51 +0800 Subject: [PATCH 1/3] start with accent colors --- src/components/swap/styled.tsx | 2 +- src/pages/Landing/index.tsx | 7 +++---- src/theme/colors.ts | 4 ++-- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/swap/styled.tsx b/src/components/swap/styled.tsx index 5c4cbda6d32..e5f92d9fe5a 100644 --- a/src/components/swap/styled.tsx +++ b/src/components/swap/styled.tsx @@ -35,7 +35,7 @@ const SwapWrapperOuter = styled.main<{ isDark?: boolean }>` 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/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 1a6b69004c9..476ee540399 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 { 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,7 @@ 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; @@ -171,7 +170,7 @@ 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.5, 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..c98db566cc9 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: '#03982d', + accent2_dark: '#02222b', neutral1_light: '#222222', neutral2_light: '#7D7D7D', neutral3_light: '#CECECE', From 80088e30a2a5f780805804c74d7555164c825f78 Mon Sep 17 00:00:00 2001 From: Jubal Mabaquiao Date: Mon, 22 Jan 2024 17:55:41 +0800 Subject: [PATCH 2/3] update banners and logo --- src/components/About/ProtocolBanner.tsx | 10 ++++---- src/nft/components/icons.tsx | 18 ++++++-------- src/nft/css/sprinkles.css.ts | 9 ++++--- src/pages/Landing/index.tsx | 33 ++++++++++--------------- src/theme/colors.ts | 8 +++--- 5 files changed, 35 insertions(+), 43 deletions(-) diff --git a/src/components/About/ProtocolBanner.tsx b/src/components/About/ProtocolBanner.tsx index 565b20869a3..db2bb3d33c2 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,10 @@ 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/nft/components/icons.tsx b/src/nft/components/icons.tsx index 96ff2b72815..094647f3104 100644 --- a/src/nft/components/icons.tsx +++ b/src/nft/components/icons.tsx @@ -10,16 +10,14 @@ 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/css/sprinkles.css.ts b/src/nft/css/sprinkles.css.ts index d25a7b67ba1..2a3ba702a84 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', }, @@ -315,6 +315,7 @@ const breakpoints = { xxxl: 1920, } + const layoutStyles = defineProperties({ conditions: { sm: {}, diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 476ee540399..3c3a505f3ad 100644 --- a/src/pages/Landing/index.tsx +++ b/src/pages/Landing/index.tsx @@ -6,7 +6,7 @@ import ProtocolBanner from 'components/About/ProtocolBanner' import { useAccountDrawer } from 'components/AccountDrawer' import { BaseButton } from 'components/Button' import Swap from 'pages/Swap' -import { lighten } from 'polished' +import { adjustHue, lighten } from 'polished' import { parse } from 'qs' import { useEffect, useRef } from 'react' import { ArrowDownCircle } from 'react-feather' @@ -41,12 +41,8 @@ const Gradient = styled.div<{ isDarkMode: boolean }>` min-height: 550px; ${({ isDarkMode }) => isDarkMode - ? css` - background: linear-gradient(rgba(8, 10, 24, 0) 0%, rgb(8 10 24 / 100%) 45%); - ` - : css` - background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255 255 255 /100%) 45%); - `}; + ? css`background: linear-gradient(rgba(8, 10, 24, 0) 0%, rgb(8 10 24 / 100%) 45%);` + : css`background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255 255 255 /100%) 45%);`}; z-index: ${Z_INDEX.under_dropdown}; pointer-events: none; height: ${({ theme }) => `calc(100vh - ${theme.mobileBottomBarHeight}px)`}; @@ -110,12 +106,9 @@ const TitleText = styled.h1<{ isDarkMode: boolean; $visible: boolean }>` margin: 0 0 24px; ${({ isDarkMode }) => isDarkMode - ? css` - background: linear-gradient(20deg, rgba(255, 244, 207, 1) 10%, rgba(51, 255, 102, 1) 100%); - ` - : css` - background: linear-gradient(10deg, rgba(79, 255, 150, 1) 0%, rgba(159, 255, 163, 1) 100%); - `}; + ? css`background: linear-gradient(20deg, ${({ theme }) => lighten(0.5, adjustHue(290, theme.accent1))} 10%, ${({ theme }) => theme.accent1} 100%);` + : css`background: linear-gradient(20deg, ${({ theme }) => theme.accent1} 10%, ${({ theme }) => lighten(0.4, adjustHue(300, theme.accent1))} 100%);` + }; background-clip: text; -webkit-background-clip: text; @@ -170,7 +163,7 @@ const LandingButton = styled(BaseButton)` ` const ButtonCTA = styled(LandingButton)` - background: linear-gradient(93.06deg, ${({ theme }) => theme.accent1} 2.66%, ${({ theme }) => lighten(0.5, theme.accent1)} 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}`}; @@ -254,18 +247,18 @@ const CardGrid = styled.div<{ cols: number }>` @media screen and (min-width: ${BREAKPOINTS.sm}px) { // At this screen size, we show up to 2 columns. grid-template-columns: ${({ cols }) => - Array.from(Array(cols === 2 ? 2 : 1)) - .map(() => '1fr') - .join(' ')}; + Array.from(Array(cols === 2 ? 2 : 1)) + .map(() => '1fr') + .join(' ')}; gap: 32px; } @media screen and (min-width: ${BREAKPOINTS.lg}px) { // at this screen size, always show the max number of columns grid-template-columns: ${({ cols }) => - Array.from(Array(cols)) - .map(() => '1fr') - .join(' ')}; + Array.from(Array(cols)) + .map(() => '1fr') + .join(' ')}; gap: 32px; } ` diff --git a/src/theme/colors.ts b/src/theme/colors.ts index c98db566cc9..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: '#03982d', - accent2_dark: '#02222b', + 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)', From 656af99512b0660e6341a0d84519592b25b775df Mon Sep 17 00:00:00 2001 From: KillariDev Date: Mon, 22 Jan 2024 13:07:13 +0200 Subject: [PATCH 3/3] fix linting and tests --- src/components/About/ProtocolBanner.tsx | 5 +- .../ChainSelectorRow.test.tsx.snap | 2 +- .../__snapshots__/SwapLineItem.test.tsx.snap | 56 +++++++++---------- .../SwapModalFooter.test.tsx.snap | 24 ++++---- .../UnsupportedCurrencyFooter.test.tsx.snap | 4 +- src/nft/components/icons.tsx | 8 ++- .../EmptyWalletContent.test.tsx.snap | 10 ++-- src/nft/css/sprinkles.css.ts | 1 - src/pages/Landing/index.tsx | 49 +++++++++++----- 9 files changed, 94 insertions(+), 65 deletions(-) diff --git a/src/components/About/ProtocolBanner.tsx b/src/components/About/ProtocolBanner.tsx index db2bb3d33c2..60e2b42de46 100644 --- a/src/components/About/ProtocolBanner.tsx +++ b/src/components/About/ProtocolBanner.tsx @@ -25,7 +25,10 @@ const Banner = styled.div<{ isDarkMode: boolean }>` background: ${({ isDarkMode, theme }) => isDarkMode ? `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%);`}; + : `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" > & { export const UniIcon = (props: SVGProps) => { return ( - + ) } - export const ChevronUpIcon = ({ secondaryColor, secondaryWidth, 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 2a3ba702a84..eee255ce0ff 100644 --- a/src/nft/css/sprinkles.css.ts +++ b/src/nft/css/sprinkles.css.ts @@ -315,7 +315,6 @@ const breakpoints = { xxxl: 1920, } - const layoutStyles = defineProperties({ conditions: { sm: {}, diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 3c3a505f3ad..555d3850846 100644 --- a/src/pages/Landing/index.tsx +++ b/src/pages/Landing/index.tsx @@ -41,8 +41,12 @@ const Gradient = styled.div<{ isDarkMode: boolean }>` min-height: 550px; ${({ isDarkMode }) => isDarkMode - ? css`background: linear-gradient(rgba(8, 10, 24, 0) 0%, rgb(8 10 24 / 100%) 45%);` - : css`background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255 255 255 /100%) 45%);`}; + ? css` + background: linear-gradient(rgba(8, 10, 24, 0) 0%, rgb(8 10 24 / 100%) 45%); + ` + : css` + background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255 255 255 /100%) 45%); + `}; z-index: ${Z_INDEX.under_dropdown}; pointer-events: none; height: ${({ theme }) => `calc(100vh - ${theme.mobileBottomBarHeight}px)`}; @@ -70,7 +74,11 @@ const Glow = styled.div` position: absolute; top: 68px; bottom: 0; - background: radial-gradient(75% 75% at 50% 0%, ${({ theme }) => theme.accent1} 0%, ${({ theme }) => theme.accent2} 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; @@ -106,9 +114,20 @@ const TitleText = styled.h1<{ isDarkMode: boolean; $visible: boolean }>` margin: 0 0 24px; ${({ isDarkMode }) => isDarkMode - ? css`background: linear-gradient(20deg, ${({ theme }) => lighten(0.5, adjustHue(290, theme.accent1))} 10%, ${({ theme }) => theme.accent1} 100%);` - : css`background: linear-gradient(20deg, ${({ theme }) => theme.accent1} 10%, ${({ theme }) => lighten(0.4, adjustHue(300, theme.accent1))} 100%);` - }; + ? css` + background: linear-gradient( + 20deg, + ${({ theme }) => lighten(0.5, adjustHue(290, theme.accent1))} 10%, + ${({ theme }) => theme.accent1} 100% + ); + ` + : css` + background: linear-gradient( + 20deg, + ${({ theme }) => theme.accent1} 10%, + ${({ theme }) => lighten(0.4, adjustHue(300, theme.accent1))} 100% + ); + `}; background-clip: text; -webkit-background-clip: text; @@ -163,7 +182,11 @@ const LandingButton = styled(BaseButton)` ` const ButtonCTA = styled(LandingButton)` - background: linear-gradient(93.06deg, ${({ theme }) => theme.accent1} 2.66%, ${({ theme }) => lighten(0.3, theme.accent1)} 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}`}; @@ -247,18 +270,18 @@ const CardGrid = styled.div<{ cols: number }>` @media screen and (min-width: ${BREAKPOINTS.sm}px) { // At this screen size, we show up to 2 columns. grid-template-columns: ${({ cols }) => - Array.from(Array(cols === 2 ? 2 : 1)) - .map(() => '1fr') - .join(' ')}; + Array.from(Array(cols === 2 ? 2 : 1)) + .map(() => '1fr') + .join(' ')}; gap: 32px; } @media screen and (min-width: ${BREAKPOINTS.lg}px) { // at this screen size, always show the max number of columns grid-template-columns: ${({ cols }) => - Array.from(Array(cols)) - .map(() => '1fr') - .join(' ')}; + Array.from(Array(cols)) + .map(() => '1fr') + .join(' ')}; gap: 32px; } `