Merge pull request #72 from DarkFlorist/theme-green

Switch UI Theme to Green
DarkFlorist · Jan 22, 2024 · 8f9084f · 8f9084f
2 parents d9c05bd + 656af99
commit 8f9084f
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 78 deletions.
diff --git 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
@@ -82,7 +82,7 @@ exports[`ChainSelectorRow should match snapshot for chainId 1 1`] = `
       class="c3"
     >
       <svg
-        color="#75ff72"
+        color="#3dad5d"
         fill="none"
         height="20"
         width="20"

diff --git a/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap b/src/components/swap/__snapshots__/SwapLineItem.test.tsx.snap
@@ -64,8 +64,8 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -477,8 +477,8 @@ exports[`SwapLineItem.tsx exact input 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -1494,8 +1494,8 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -1907,8 +1907,8 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -2924,8 +2924,8 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -3337,8 +3337,8 @@ exports[`SwapLineItem.tsx exact output 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -4354,8 +4354,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -4570,8 +4570,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -4973,8 +4973,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -5990,8 +5990,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -6206,8 +6206,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -6609,8 +6609,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -7608,8 +7608,8 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 
@@ -8043,8 +8043,8 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
   cursor: pointer;
   -webkit-transition-duration: 125ms;
   transition-duration: 125ms;
-  color: #75ff72;
-  stroke: #75ff72;
+  color: #3dad5d;
+  stroke: #3dad5d;
   font-weight: 500;
 }
 

diff --git a/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap b/src/components/swap/__snapshots__/SwapModalFooter.test.tsx.snap
@@ -412,25 +412,25 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
 }
 
 .c5 {
-  background-color: #75ff72;
+  background-color: #3dad5d;
   font-size: 20px;
   font-weight: 535;
   padding: 16px;
   color: #FFFFFF;
 }
 
 .c5:focus {
-  box-shadow: 0 0 0 1pt #5cff58;
-  background-color: #5cff58;
+  box-shadow: 0 0 0 1pt #369a53;
+  background-color: #369a53;
 }
 
 .c5:hover {
-  background-color: #5cff58;
+  background-color: #369a53;
 }
 
 .c5:active {
-  box-shadow: 0 0 0 1pt #43ff3f;
-  background-color: #43ff3f;
+  box-shadow: 0 0 0 1pt #308749;
+  background-color: #308749;
 }
 
 .c5:disabled {
@@ -921,25 +921,25 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
 }
 
 .c5 {
-  background-color: #75ff72;
+  background-color: #3dad5d;
   font-size: 20px;
   font-weight: 535;
   padding: 16px;
   color: #FFFFFF;
 }
 
 .c5:focus {
-  box-shadow: 0 0 0 1pt #5cff58;
-  background-color: #5cff58;
+  box-shadow: 0 0 0 1pt #369a53;
+  background-color: #369a53;
 }
 
 .c5:hover {
-  background-color: #5cff58;
+  background-color: #369a53;
 }
 
 .c5:active {
-  box-shadow: 0 0 0 1pt #43ff3f;
-  background-color: #43ff3f;
+  box-shadow: 0 0 0 1pt #308749;
+  background-color: #308749;
 }
 
 .c5:disabled {

diff --git a/src/components/swap/__snapshots__/UnsupportedCurrencyFooter.test.tsx.snap b/src/components/swap/__snapshots__/UnsupportedCurrencyFooter.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`UnsupportedCurrencyFooter.tsx with unsupported tokens renders 1`] = `
 }
 
 .c5 {
-  color: #75ff72;
+  color: #3dad5d;
 }
 
 .c2 {
@@ -89,7 +89,7 @@ exports[`UnsupportedCurrencyFooter.tsx with unsupported tokens renders 1`] = `
 
 .c3 {
   background-color: transparent;
-  color: #75ff72;
+  color: #3dad5d;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

diff --git 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/nft/components/icons.tsx b/src/nft/components/icons.tsx
@@ -10,16 +10,18 @@ type SVGProps = React.SVGProps<SVGSVGElement> & {
   gradientId?: string
 }
 
-export const UniIcon = (props: SVGProps) => (
-  <svg {...props} fill="none" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="m509.8 332.5l-69.9-164.3c-14.9-41.2-50.4-71-93-79.2c18-10.6 46.3-35.9 34.2-82.3c-1.3-5-7.1-7.9-12-6.1L166.9 76.3C35.9 123.4 0 238.9 0 398.8V480c0 17.7 14.3 32 32 32h236.2c23.8 0 39.3-25 28.6-46.3L256 384v-.7c-45.6-3.5-84.6-30.7-104.3-69.6c-1.6-3.1-.9-6.9 1.6-9.3l12.1-12.1c3.9-3.9 10.6-2.7 12.9 2.4c14.8 33.7 48.2 57.4 87.4 57.4c17.2 0 33-5.1 46.8-13.2l46 63.9c6 8.4 15.7 13.3 26 13.3h50.3c8.5 0 16.6-3.4 22.6-9.4l45.3-39.8c8.9-9.1 11.7-22.6 7.1-34.4M328 224c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24"
-      fill="currentColor"
-    />
-  </svg>
-)
+export const UniIcon = (props: SVGProps) => {
+  return (
+    <svg {...props} viewBox="0 0 215 215" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M128.921 202.639C126.319 194.551 121.653 182.432 114.5 172C107.366 161.597 95.1085 150.133 84.9742 140.656L84.974 140.656C78.0609 134.191 72.1361 128.65 69.5002 125C63.0002 116 61.9999 107 64.9999 97C65.9999 107 70.9999 114.5 81.4999 118.5C85.8718 120.166 92.2159 121.219 99.0431 122.353C108.613 123.942 119.132 125.689 126.5 129.5C131.728 132.204 135.767 136.066 139.364 139.506C145.743 145.606 150.733 150.377 158.5 145C162.209 142.432 166.569 140.705 170.094 139.308C172.746 138.257 174.925 137.393 176 136.5C178.929 134.065 177.891 127.151 175.5 119.5C174.305 115.677 172.083 111.854 168.56 105.794L168.56 105.794C165.099 99.8396 160.383 91.7263 154.153 79.3321V101H89V39H130.137C128.595 37.0234 127.183 35.301 125.898 33.7336L125.898 33.7336C124.645 32.2058 123.513 30.8252 122.5 29.5C122.5 29.5 127 24.5 135.5 21C124 17.5 114 19 114 19L118.737 10.6405C115.05 10.2174 111.3 10 107.5 10C53.6523 10 10.0001 53.6522 10.0001 107.5C10.0001 161.348 53.6523 205 107.5 205C114.859 205 122.028 204.185 128.921 202.639ZM142 49H101V90H142V49Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
 
 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
@@ -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`] = `
         />
       </svg>
       <div
-        class="c1 c2 common__127l8hd0 sprinkles_fontWeight_medium_sm__rgw6ezd9 sprinkles_fontSize_28_sm__rgw6ezbx sprinkles_lineHeight_36_sm__rgw6ezel css-n8z49y"
+        class="c1 c2 common__127l8hd0 sprinkles_fontWeight_medium_sm__1jkzbi5d9 sprinkles_fontSize_28_sm__1jkzbi5bx sprinkles_lineHeight_36_sm__1jkzbi5el css-n8z49y"
       >
         No NFTs yet
       </div>
@@ -128,7 +128,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
         />
       </svg>
       <div
-        class="c1 c2 common__127l8hd0 sprinkles_fontWeight_medium_sm__rgw6ezd9 sprinkles_fontSize_28_sm__rgw6ezbx sprinkles_lineHeight_36_sm__rgw6ezel css-n8z49y"
+        class="c1 c2 common__127l8hd0 sprinkles_fontWeight_medium_sm__1jkzbi5d9 sprinkles_fontSize_28_sm__1jkzbi5bx sprinkles_lineHeight_36_sm__1jkzbi5el css-n8z49y"
       >
         No tokens yet
       </div>
@@ -174,7 +174,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
         />
       </svg>
       <div
-        class="c1 c2 common__127l8hd0 sprinkles_fontWeight_medium_sm__rgw6ezd9 sprinkles_fontSize_28_sm__rgw6ezbx sprinkles_lineHeight_36_sm__rgw6ezel css-n8z49y"
+        class="c1 c2 common__127l8hd0 sprinkles_fontWeight_medium_sm__1jkzbi5d9 sprinkles_fontSize_28_sm__1jkzbi5bx sprinkles_lineHeight_36_sm__1jkzbi5el css-n8z49y"
       >
         No activity yet
       </div>
@@ -209,7 +209,7 @@ exports[`EmptyWalletContent.tsx matches base snapshot 1`] = `
         />
       </svg>
       <div
-        class="c1 c2 common__127l8hd0 sprinkles_fontWeight_medium_sm__rgw6ezd9 sprinkles_fontSize_28_sm__rgw6ezbx sprinkles_lineHeight_36_sm__rgw6ezel css-n8z49y"
+        class="c1 c2 common__127l8hd0 sprinkles_fontWeight_medium_sm__1jkzbi5d9 sprinkles_fontSize_28_sm__1jkzbi5bx sprinkles_lineHeight_36_sm__1jkzbi5el css-n8z49y"
       >
         No pools yet
       </div>

diff --git 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',
   },