update initial UI

Author: foxier25

src/components/NetworkAlert/NetworkAlert.tsx

@@ -56,9 +56,9 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
     [SupportedChainId.CELO_ALFAJORES]:
       'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(90, 190, 170, 0.15) 0%, rgba(80, 160, 40, 0.15) 100%)',
     [SupportedChainId.LUX]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(90, 190, 170, 0.15) 0%, rgba(80, 160, 40, 0.15) 100%)',
+      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.15) 100%)',
     [SupportedChainId.LUX_TESTNET]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(90, 190, 170, 0.15) 0%, rgba(80, 160, 40, 0.15) 100%)',
+      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.15) 100%)',
     [SupportedChainId.OPTIMISM]:
       'radial-gradient(948% 292% at 42% 0%, rgba(255, 58, 212, 0.01) 0%, rgba(255, 255, 255, 0.04) 100%),radial-gradient(98% 96% at 2% 0%, rgba(255, 39, 39, 0.01) 0%, rgba(235, 0, 255, 0.01) 96%)',
     [SupportedChainId.OPTIMISM_GOERLI]:
@@ -76,9 +76,9 @@ const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
     [SupportedChainId.CELO]:
       'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
     [SupportedChainId.LUX]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
+      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(0, 0, 0, 0.45) 0%, rgba(10, 10, 10, 0.75) 100%)',
     [SupportedChainId.LUX_TESTNET]:
-      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
+      'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(0, 0, 0, 0.45) 0%, rgba(10, 10, 10, 0.75) 100%)',
     [SupportedChainId.CELO_ALFAJORES]:
       'radial-gradient(182.71% 150.59% at 2.81% 7.69%, rgba(63, 208, 137, 0.15) 0%, rgba(49, 205, 50, 0.15) 100%)',
     [SupportedChainId.OPTIMISM]:
@@ -143,8 +143,8 @@ const TEXT_COLORS: { [chainId in NetworkAlertChains]: string } = {
   [SupportedChainId.POLYGON]: 'rgba(130, 71, 229)',
   [SupportedChainId.POLYGON_MUMBAI]: 'rgba(130, 71, 229)',
   [SupportedChainId.CELO]: 'rgba(53, 178, 97)',
-  [SupportedChainId.LUX]: 'rgba(53, 178, 97)',
-  [SupportedChainId.LUX_TESTNET]: 'rgba(53, 178, 97)',
+  [SupportedChainId.LUX]: 'rgba(250, 250, 250)',
+  [SupportedChainId.LUX_TESTNET]: 'rgba(200, 200, 200)',
   [SupportedChainId.CELO_ALFAJORES]: 'rgba(53, 178, 97)',
   [SupportedChainId.OPTIMISM]: '#ff3856',
   [SupportedChainId.OPTIMISM_GOERLI]: '#ff3856',

src/constants/lists.ts

@@ -20,7 +20,7 @@ export const CELO_LIST = 'https://celo-org.github.io/celo-token-list/celo.tokenl
 export const UNSUPPORTED_LIST_URLS: string[] = [BA_LIST, UNI_UNSUPPORTED_LIST]
 
 // default lists to be 'active' aka searched across
-export const DEFAULT_ACTIVE_LIST_URLS: string[] = [UNI_LIST, LUX_LIST, CELO_LIST, ARBITRUM_LIST, OPTIMISM_LIST]
+export const DEFAULT_ACTIVE_LIST_URLS: string[] = [UNI_LIST, LUX_LIST, ARBITRUM_LIST, OPTIMISM_LIST]
 export const DEFAULT_INACTIVE_LIST_URLS: string[] = [
   UNI_EXTENDED_LIST,
   COMPOUND_LIST,
@@ -32,6 +32,7 @@ export const DEFAULT_INACTIVE_LIST_URLS: string[] = [
   WRAPPED_LIST,
   SET_LIST,
   ROLL_LIST,
+  CELO_LIST,
   ...UNSUPPORTED_LIST_URLS,
 ]
 

src/nft/themes/lightTheme.ts

@@ -4,7 +4,7 @@ export const lightTheme: Theme = {
   colors: {
     accentFailure: vars.color.red400,
     accentFailureSoft: 'rgba(250, 43, 57, 0.12)',
-    accentAction: vars.color.pink400,
+    accentAction: vars.color.gray50,
     accentActionSoft: vars.color.accentActionSoft,
     accentSuccess: vars.color.green300,
 

src/pages/Landing/index.tsx

@@ -112,7 +112,7 @@ const TitleText = styled.h1<{ isDarkMode: boolean }>`
   background: ${({ isDarkMode }) =>
     isDarkMode
       ? 'linear-gradient(20deg,rgb(129 92 255) 10%,rgb(255 47 47) 99.8%)'
-      : 'linear-gradient(10deg, rgba(255,79,184,1) 0%, rgba(255,159,251,1) 100%)'};
+      : 'linear-gradient(10deg, rgba(20,20,20,1) 0%, rgba(0,55,130,1) 100%)'};
   background-clip: text;
   -webkit-background-clip: text;
 
@@ -337,9 +337,9 @@ export default function Landing() {
             </TraceEvent>
           </LandingSwapContainer>
           <Gradient isDarkMode={isDarkMode} />
-          <GlowContainer>
+          {/* <GlowContainer>
             <Glow />
-          </GlowContainer>
+          </GlowContainer> */}
           <ContentContainer isDarkMode={isDarkMode}>
             <TitleText isDarkMode={isDarkMode}>Trade anything, anywhere</TitleText>
             <SubTextContainer>

src/theme/colors.ts

@@ -192,14 +192,14 @@ export const lightTheme: Theme = {
   textSecondary: colors.gray400,
   textTertiary: colors.gray300,
 
-  accentAction: colors.pink400,
+  accentAction: colors.blue700,
   accentActive: colors.blue400,
   accentSuccess: colors.green300,
   accentWarning: colors.gold200,
   accentFailure: colors.red400,
   accentCritical: colors.red400,
 
-  accentActionSoft: opacify(24, colors.pink400),
+  accentActionSoft: opacify(24, colors.blue700),
   accentActiveSoft: opacify(24, colors.blue400),
   accentSuccessSoft: opacify(24, colors.green300),
   accentWarningSoft: opacify(24, colors.gold200),
@@ -218,7 +218,7 @@ export const lightTheme: Theme = {
   shallowShadow:
     '6px 6px 10px rgba(51, 53, 72, 0.01), 2px 2px 6px rgba(51, 53, 72, 0.02), 1px 2px 2px rgba(51, 53, 72, 0.02);',
 
-  networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.pink400)}`,
+  networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.blue700)}`,
 
   stateOverlayHover: opacify(8, colors.gray300),
   stateOverlayPressed: opacify(24, colors.gray200),

src/theme/components/RadialGradientByChainUpdater.ts

@@ -87,6 +87,15 @@ export default function RadialGradientByChainUpdater(): null {
         backgroundRadialGradientElement.style.background = darkMode ? celoDarkGradient : celoLightGradient
         break
       }
+      case SupportedChainId.LUX:
+      case SupportedChainId.LUX_TESTNET: {
+        setBackground(backgroundResetStyles)
+        const luxLightGradient =
+          'radial-gradient(100% 100% at 50% 0%, rgba(0, 15, 50, 0.41) 0%, rgba(20, 20, 20, 0.24) 100%), #FFFFFF'
+        const luxDarkGradient = 'radial-gradient(circle at center, #121212 0%, #000000 100%)'
+        backgroundRadialGradientElement.style.background = darkMode ? luxDarkGradient : luxLightGradient
+        break
+      }
       default: {
         setBackground(initialStyles)
         const defaultLightGradient =