From 920851a995146a49f64d70a47e58d1e1c2f62734 Mon Sep 17 00:00:00 2001 From: Maarten Zuidhoorn Date: Wed, 29 Jan 2025 13:07:29 +0100 Subject: [PATCH] Adjust colors for redesign --- src/assets/metamask-logo.svg | 39 ------------------- src/components/MetaMaskLogo.tsx | 20 ++++++---- src/components/icons/metamask.svg | 64 +++++++++++-------------------- src/theme/components/button.ts | 3 +- src/theme/semantic-tokens.ts | 10 ++--- 5 files changed, 42 insertions(+), 94 deletions(-) delete mode 100644 src/assets/metamask-logo.svg diff --git a/src/assets/metamask-logo.svg b/src/assets/metamask-logo.svg deleted file mode 100644 index d412947646..0000000000 --- a/src/assets/metamask-logo.svg +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/MetaMaskLogo.tsx b/src/components/MetaMaskLogo.tsx index 8482ff8fa8..23c3019b95 100644 --- a/src/components/MetaMaskLogo.tsx +++ b/src/components/MetaMaskLogo.tsx @@ -1,8 +1,8 @@ import type { BoxProps } from '@chakra-ui/react'; -import { Box, useColorMode } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; import type { FunctionComponent } from 'react'; -import Logo from '../assets/metamask-logo.svg'; +import Logo from '../assets/logo.svg'; export type MetaMaskLogoProps = BoxProps; @@ -13,12 +13,18 @@ export type MetaMaskLogoProps = BoxProps; * @returns A React component. */ export const MetaMaskLogo: FunctionComponent = (props) => { - const { colorMode } = useColorMode(); - - const fill = colorMode === 'light' ? '#161616' : 'white'; return ( - - + + ); }; diff --git a/src/components/icons/metamask.svg b/src/components/icons/metamask.svg index 6e1af8e476..32c6519347 100644 --- a/src/components/icons/metamask.svg +++ b/src/components/icons/metamask.svg @@ -1,42 +1,24 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts index 8a5a90c0dc..5a9932ab18 100644 --- a/src/theme/components/button.ts +++ b/src/theme/components/button.ts @@ -5,7 +5,6 @@ export const Button = defineStyleConfig({ borderRadius: 'full', color: 'text.default', lineHeight: '1', - textTransform: 'uppercase', _hover: { opacity: '0.75', }, @@ -14,11 +13,11 @@ export const Button = defineStyleConfig({ variants: { primary: defineStyle({ background: 'primary.default', + color: 'background.default', fontSize: 'sm', fontWeight: '500', paddingX: '6', paddingY: '4', - color: 'text.dark', }), outline: defineStyle({ diff --git a/src/theme/semantic-tokens.ts b/src/theme/semantic-tokens.ts index 10d83ea3de..3db2e66ef2 100644 --- a/src/theme/semantic-tokens.ts +++ b/src/theme/semantic-tokens.ts @@ -53,12 +53,12 @@ export const semanticTokens: SemanticTokens = { }, primary: { default: { - default: '#FF5C16', - _dark: '#FFFFFF', + default: '#4459FF', + _dark: '#6F7EFF', }, alternative: { default: '#0A0A0A', - _dark: '#BAF24A', + _dark: '#FFFFFF', }, inverse: { default: '#FCFCFC', @@ -66,8 +66,8 @@ export const semanticTokens: SemanticTokens = { }, info: { default: { - default: '#0376C9', - _dark: '#1098FC', + default: '#4459FF', + _dark: '#6F7EFF', }, muted: { default: '#037DD61A',