diff --git a/apps/web/src/components/AccountCard/AccountCard.tsx b/apps/web/src/components/AccountCard/AccountCard.tsx index f7830e2db9..a2578ed810 100644 --- a/apps/web/src/components/AccountCard/AccountCard.tsx +++ b/apps/web/src/components/AccountCard/AccountCard.tsx @@ -23,7 +23,7 @@ export const AccountCard = () => { borderRadius="40px" > openWith()} diff --git a/apps/web/src/components/Tab/Tab.tsx b/apps/web/src/components/Tab/Tab.tsx index a7a90f8cba..c855e9bfb0 100644 --- a/apps/web/src/components/Tab/Tab.tsx +++ b/apps/web/src/components/Tab/Tab.tsx @@ -1,5 +1,6 @@ import { Tab as ChakraTab } from "@chakra-ui/react"; import { NavLink, useMatch } from "react-router-dom"; +import { useColor } from "../../styles/useColor"; type TabProps = { to: string; @@ -8,6 +9,7 @@ type TabProps = { export const Tab = ({ to, label }: TabProps) => { const isActive = useMatch(to); + const color = useColor(); return ( { width="full" to={to} {...(isActive && { - bg: "gray.200", - color: "gray.900", + bg: color("100"), + color: color("900"), })} > {label} diff --git a/apps/web/src/styles/colors.ts b/apps/web/src/styles/colors.ts index 70532753f5..86e8d96281 100644 --- a/apps/web/src/styles/colors.ts +++ b/apps/web/src/styles/colors.ts @@ -1,55 +1,55 @@ const light = { red: "#E53E3E", redDark: "#C53030", - blue: "#0052FF", - blueDark: "#003EE0", + blue: "#3A3AFF", + blueDark: "#2C2CE5", green: "#38A169", greenDark: "#25855A", - bg: "#E0E6EE", - bgGradient: "linear-gradient(67deg, rgba(226, 232, 240, 0.00) 0%, #E2E8F0 100%)", - bgMaskColor: "#E2E8F0", + bg: "#E0E0FF", + bgGradient: "linear-gradient(67deg, rgba(248, 248, 255, 0.70) 0%, #F8F8FF 100%)", + bgMaskColor: "#F8F8FF", grey: { - black: "#10121B", + black: "#121224", white: "#FFFFFF", - 900: "#171923", - 800: "#1A202C", - 700: "#2D3748", - 600: "#4A5568", - 500: "#718096", + 900: "#16162B", + 800: "#22223F", + 700: "#2E2E5C", + 600: "#4B4B6A", + 500: "#6C7A8F", 450: "#E0E6EE", - 400: "#A0AEC0", - 300: "#CBD5E0", - 200: "#E2E8F0", - 100: "#EDF2F7", - 50: "#F7FAFC", + 400: "#909CAF", + 300: "#B0B0DA", + 200: "#E0E0FF", + 100: "#F0F0FF", + 50: "#F8F8FF", }, }; const dark = { red: "#E53E3E", redDark: "#C53030", - blue: "#0052FF", - blueDark: "#003EE0", + blue: "#3A3AFF", + blueDark: "#2C2CE5", green: "#38A169", greenDark: "#25855A", - bg: "#0D0F19", - bgGradient: "linear-gradient(67deg, rgba(16, 18, 27, 0.00) 0%, #10121B 100%)", - bgMaskColor: "#10121B", + bg: "#121224", + bgGradient: "linear-gradient(67deg, rgba(22, 22, 43, 0.20) 0%, #16162B 100%)", + bgMaskColor: "#16162B", grey: { black: "#FFFFFF", - white: "#1A202C", - 900: "#F7FAFC", - 800: "#EDF2F7", - 700: "#E2E8F0", - 600: "#CBD5E0", - 500: "#A0AEC0", + white: "#22223F", + 900: "#F8F8FF", + 800: "#F0F0FF", + 700: "#E0E0FF", + 600: "#B0B0DA", + 500: "#909CAF", 450: "#E0E6EE", - 400: "#718096", - 300: "#4A5568", - 200: "#10121B", - 100: "#2D3748", - 50: "#171923", + 400: "#6C7A8F", + 300: "#4B4B6A", + 200: "#121224", + 100: "#2E2E5C", + 50: "#16162B", }, }; -export { light, dark }; +export { light, dark }; \ No newline at end of file diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts index 7ff965dea8..82c38f9566 100644 --- a/apps/web/src/styles/theme.ts +++ b/apps/web/src/styles/theme.ts @@ -223,26 +223,26 @@ const theme = extendTheme({ sizes, }, Tabs: { - baseStyle: { + baseStyle: (props: StyleFunctionProps) => ({ tab: { color: "gray.500", _selected: { _hover: { - bg: "gray.200", - color: "gray.900", + bg: mode("gray.200", "gray.100")(props), + color: "gray.600", }, - bg: "gray.200", + bg: "gray.100", color: "gray.900", }, _hover: { bg: "gray.100", - color: "gray.600", + color: "gray.900", }, }, tabpanel: { padding: 0, }, - }, + }), variants: { onboarding: { tab: { @@ -283,7 +283,7 @@ const theme = extendTheme({ track: { backgroundColor: mode(light.grey[300], dark.grey[300])(props), _checked: { - backgroundColor: mode(light.grey[400], dark.grey[400])(props), + backgroundColor: mode(light.grey[400], dark.grey[600])(props), }, }, thumb: { @@ -597,11 +597,11 @@ const theme = extendTheme({ global: (props: StyleFunctionProps) => ({ body: { color: mode(light.grey[600], dark.grey[600])(props), - bgColor: mode(light.bg, dark.bg)(props), + bg: mode(light.bg, dark.bg)(props), bgImage: mode(light.bgGradient, dark.bgGradient)(props), _before: { - bgColor: mode(light.bgMaskColor, dark.bgMaskColor)(props), maskImage: "url(/static/bg.svg)", + bgColor: mode(light.bgMaskColor, dark.bgMaskColor)(props), }, }, ":root": {