diff --git a/apps/namada-interface/src/App/AccountOverview/DerivedAccounts/DerivedAccounts.tsx b/apps/namada-interface/src/App/AccountOverview/DerivedAccounts/DerivedAccounts.tsx index 6b625c56f6e..c8a00d56a4c 100644 --- a/apps/namada-interface/src/App/AccountOverview/DerivedAccounts/DerivedAccounts.tsx +++ b/apps/namada-interface/src/App/AccountOverview/DerivedAccounts/DerivedAccounts.tsx @@ -175,12 +175,12 @@ const DerivedAccounts = ({ setTotal }: Props): JSX.Element => { const shielded: TokenBalance[] = tokens.filter( (tokenBalance) => - tokenBalance.token == symbol && tokenBalance.isShielded + tokenBalance.token === symbol && tokenBalance.isShielded ) || []; const transparent: TokenBalance[] = tokens.filter( (tokenBalance) => - tokenBalance.token == symbol && !tokenBalance.isShielded + tokenBalance.token === symbol && !tokenBalance.isShielded ) || []; tokenBalances.push(...shielded, ...transparent); return tokenBalances; diff --git a/apps/namada-interface/src/App/App.components.ts b/apps/namada-interface/src/App/App.components.ts index 419735fea25..cd03c8ae035 100644 --- a/apps/namada-interface/src/App/App.components.ts +++ b/apps/namada-interface/src/App/App.components.ts @@ -1,6 +1,6 @@ import styled, { createGlobalStyle } from "styled-components/macro"; import { motion } from "framer-motion"; -import { DesignConfiguration, ThemeName } from "utils/theme"; +import { ColorMode, DesignConfiguration, ThemeName } from "utils/theme"; enum ComponentColor { BorderColor, @@ -25,7 +25,7 @@ const getColor = ( } }; type GlobalStyleProps = { - isLightMode: boolean; + colorMode: ColorMode; }; // Set global styles for themed control of background color based diff --git a/apps/namada-interface/src/App/App.tsx b/apps/namada-interface/src/App/App.tsx index fc67e813f3f..e64cd9f69d7 100644 --- a/apps/namada-interface/src/App/App.tsx +++ b/apps/namada-interface/src/App/App.tsx @@ -70,7 +70,7 @@ function App(): JSX.Element { const theme = getTheme(isLightMode, ShouldUsePlaceholderTheme); const toggleColorMode = (): void => { - setColorMode((currentMode) => (currentMode == "dark" ? "light" : "dark")); + setColorMode((currentMode) => (currentMode === "dark" ? "light" : "dark")); }; useEffect(() => storeColorMode(colorMode), [colorMode]); @@ -85,11 +85,11 @@ function App(): JSX.Element { return ( - + - + setPassword(undefined)} diff --git a/apps/namada-interface/src/App/Settings/SettingsAccountSettings/SettingsAccountSettings.tsx b/apps/namada-interface/src/App/Settings/SettingsAccountSettings/SettingsAccountSettings.tsx index 6069be118fd..3243af9cc8a 100644 --- a/apps/namada-interface/src/App/Settings/SettingsAccountSettings/SettingsAccountSettings.tsx +++ b/apps/namada-interface/src/App/Settings/SettingsAccountSettings/SettingsAccountSettings.tsx @@ -49,7 +49,7 @@ export const SettingsAccountSettings = (): JSX.Element => { if ( prompt( `Please type in ${account.alias} if you're sure you want to delete this account` - ) == account.alias + ) === account.alias ) { dispatch(removeAccount({ chainId, id: account.id })); navigate(TopLevelRoute.SettingsAccounts); diff --git a/apps/namada-interface/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx b/apps/namada-interface/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx index 5941c477c03..9a77a096169 100644 --- a/apps/namada-interface/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx +++ b/apps/namada-interface/src/App/Settings/SettingsWalletSettings/SettingsWalletSettings.tsx @@ -244,7 +244,7 @@ export const SettingsWalletSettings = ({ password }: Props): JSX.Element => { )} - {keplrConnectionState == KeplrConnectionState.Connected && ( + {keplrConnectionState === KeplrConnectionState.Connected && ( Connected to Keplr Extension )} diff --git a/apps/namada-interface/src/App/TopNavigation/topNavigation.components_delete.ts b/apps/namada-interface/src/App/TopNavigation/topNavigation.components_delete.ts deleted file mode 100644 index 9fb52ad2ec6..00000000000 --- a/apps/namada-interface/src/App/TopNavigation/topNavigation.components_delete.ts +++ /dev/null @@ -1,295 +0,0 @@ -import styled, { - css, - FlattenSimpleInterpolation, -} from "styled-components/macro"; -import { DesignConfiguration } from "utils/theme"; - -enum ComponentColor { - Logo, -} - -const getColor = ( - color: ComponentColor, - theme: DesignConfiguration -): string => { - const isDark = theme.themeConfigurations.isLightMode; - switch (color) { - case ComponentColor.Logo: - return isDark ? theme.colors.primary.main : theme.colors.utility2.main; - } -}; - -export const TopNavigationContainer = styled.div` - display: flex; - flex-direction: column; - width: 100%; - height: 120px; - padding: 40px 0; - box-sizing: border-box; - - @media screen and (min-width: 860px) { - padding: 40px; - } -`; - -export const TopNavigationContainerRow = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; -`; - -export const TopNavigationContainerSecondRow = styled( - TopNavigationContainerRow -)` - justify-content: center; -`; - -export const TopNavigationSecondRowInnerContainer = styled( - TopNavigationContainerRow -)<{ spaceBetween?: boolean }>` - justify-content: ${(props) => - props.spaceBetween ? "space-between" : "flex-end"}; - min-height: 48px; - width: 100%; - max-width: 760px; - margin-top: 24px; -`; - -export const TopNavigationLogoContainer = styled.div` - display: flex; - width: 100%; - max-width: 760px; - flex-direction: row; - justify-content: space-between; - align-items: center; -`; - -const Section = styled.div` - display: flex; - justify-content: center; - align-items: center; -`; - -export const LeftSection = styled(Section)` - justify-content: start; - width: 25%; -`; - -export const MiddleSection = styled(Section)` - justify-content: center; - width: 60%; -`; - -export const SubMenuContainer = styled(Section)` - justify-content: center; -`; - -export const RightSection = styled(Section)` - justify-content: end; - width: 25%; -`; - -const isSelected = (colorInHex: string): FlattenSimpleInterpolation => { - return css` - color: ${colorInHex}; - transition: font-weight 0.1s ease-out, stroke-width 0.1s ease-out; - font-weight: 700; - & path { - stroke-width: 2; - } - `; -}; - -export const MenuItem = styled.button<{ isSelected?: boolean }>` - all: unset; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - margin: 0 22px; - font-size: 14px; - box-sizing: border-box; - color: ${(props) => props.theme.colors.utility2.main80}; - - @media screen and (max-width: 860px) { - padding: 40px 0; - height: 100%; - justify-content: flex-start; - } - - &:last-child { - margin-right: 0; - } - - & path { - fill: ${(props) => props.theme.colors.utility2.main60}; - } - - ${(props) => - props.isSelected ? isSelected(props.theme.colors.utility2.main) : ""} -`; - -export const MenuItemForSecondRow = styled(MenuItem)` - margin-right: 16px; - margin-left: 0px; -`; - -export const MenuItemSubComponent = styled(MenuItem)` - margin: 0 22px 0 48px; - @media screen and (max-width: 860px) { - padding: 16px 0; - height: 100%; - justify-content: flex-start; - } -`; - -export const MenuItemTextContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - margin: 0; - padding: 0 4px; - &:last-child { - margin-right: 0; - padding-right: 0; - } -`; - -export const MenuItemIconContainer = styled.div` - display: flex; - justify-content: end; - align-items: center; -`; - -export const ColorModeContainer = styled.div` - display: flex; - justify-content: end; - align-items: center; -`; - -export const LogoContainer = styled.div` - cursor: pointer; - - & > div { - svg > path { - stroke: none; - fill: ${(props) => getColor(ComponentColor.Logo, props.theme)}; - } - } -`; - -export const MenuButton = styled.button` - width: 40px; - height: 40px; - background: transparent; - border: none; - cursor: pointer; - - & div { - svg > path { - stroke: ${(props) => getColor(ComponentColor.Logo, props.theme)}; - fill: ${(props) => getColor(ComponentColor.Logo, props.theme)}; - } - } -`; - -export const MenuCloseButton = styled.button` - width: 40px; - height: 40px; - background: transparent; - border: none; - cursor: pointer; - - & div { - svg > path { - stroke: ${(props) => getColor(ComponentColor.Logo, props.theme)}; - } - } -`; - -export const OnlyInSmall = styled.div` - display: flex; - flex-direction: column; - - @media only screen and (min-width: 860px) { - display: none; - } -`; - -export const OnlyInMedium = styled.div` - display: flex; - flex-direction: column; - align-items: center; - - @media only screen and (max-width: 860px) { - display: none; - } -`; - -export const MobileMenu = styled.div` - display: none; - - z-index: 2000; - margin: 0; - box-sizing: border-box; - padding: 48px 40px; - - &.active { - display: flex; - flex-direction: column; - background: ${(props) => props.theme.colors.utility1.main80}; - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; - } -`; - -export const MobileMenuHeader = styled.div` - display: flex; - width: 100%; - justify-content: space-between; - - & div { - svg > path { - stroke: ${(props) => getColor(ComponentColor.Logo, props.theme)}; - } - } - - & div:nth-child(2) { - svg > path { - stroke: ${(props) => props.theme.colors.utility2.main}; - fill: ${(props) => props.theme.colors.utility2.main}; - } - } -`; - -export const MobileMenuList = styled.ul` - height: 100%; - width: 100%; - list-style-type: none; - text-indent: 0; - padding: 0; - margin: 0; - overflow-y: auto; -`; - -export const MobileMenuListItem = styled.li` - padding: 0; - margin: 0; - border-bottom: 1px solid ${(props) => props.theme.colors.utility2.main60}; - color: ${(props) => props.theme.colors.utility2.main80}; - - & button { - width: 100%; - } - - & button > div { - color: ${(props) => props.theme.colors.utility2.main80}; - & > svg > path { - fill: ${(props) => props.theme.colors.utility2.main80}; - } - } -`; diff --git a/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx b/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx index 8a2c0fbbf99..2e6cac663d7 100644 --- a/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx +++ b/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx @@ -59,7 +59,7 @@ const TopNavigationMenuItems = (props: { navigate: NavigateFunction; setColorMode: (mode: ColorMode) => void; }): React.ReactElement => { - const { navigate, setColorMode } = props; + const { navigate } = props; const location = useLocation(); const topLevelPath = `/${location.pathname.split("/")[1]}`; return ( @@ -206,7 +206,7 @@ const SecondMenuRow = (props: SecondMenuRowProps): React.ReactElement => { type TopNavigationProps = { // this is for the toggle - isLightMode: boolean; + colorMode: ColorMode; // cb for telling parent to change hte color in context toggleColorMode: () => void; setColorMode: (mode: ColorMode) => void; @@ -219,7 +219,7 @@ type TopNavigationProps = { // top nav of the app, this is likely always visible. function TopNavigation(props: TopNavigationProps): JSX.Element { const { - isLightMode, + colorMode, logout, toggleColorMode, setColorMode, @@ -268,7 +268,7 @@ function TopNavigation(props: TopNavigationProps): JSX.Element { {isLoggedIn && store && ( <> @@ -315,7 +315,10 @@ function TopNavigation(props: TopNavigationProps): JSX.Element { {topLevelRoute !== TopLevelRoute.StakingAndGovernance && ( - + )} @@ -355,7 +358,10 @@ function TopNavigation(props: TopNavigationProps): JSX.Element { {isLoggedIn && ( {topLevelRoute !== TopLevelRoute.StakingAndGovernance && ( - + )} )} @@ -366,7 +372,7 @@ function TopNavigation(props: TopNavigationProps): JSX.Element { {isLoggedIn && store ? ( ) : ( @@ -386,7 +392,10 @@ function TopNavigation(props: TopNavigationProps): JSX.Element { {topLevelRoute !== TopLevelRoute.StakingAndGovernance && ( - + )} @@ -413,7 +422,10 @@ function TopNavigation(props: TopNavigationProps): JSX.Element { {topLevelRoute !== TopLevelRoute.StakingAndGovernance && ( - + )} diff --git a/apps/namada-interface/src/App/TopNavigation/topNavigationLoggedIn.tsx b/apps/namada-interface/src/App/TopNavigation/topNavigationLoggedIn.tsx index 6d225ffd5d4..fac5f0a0181 100644 --- a/apps/namada-interface/src/App/TopNavigation/topNavigationLoggedIn.tsx +++ b/apps/namada-interface/src/App/TopNavigation/topNavigationLoggedIn.tsx @@ -9,15 +9,16 @@ import { TopNavigationLoggedInContainer, TopNavigationLoggedInControlsContainer, } from "./topNavigationLoggedIn.components"; +import { ColorMode } from "utils/theme"; type Props = { - isLightMode: boolean; + colorMode: ColorMode; toggleColorMode: () => void; topLevelRoute?: TopLevelRoute; }; const TopNavigationLoggedIn = (props: Props): JSX.Element => { - const { isLightMode, toggleColorMode, topLevelRoute } = props; + const { colorMode, toggleColorMode, topLevelRoute } = props; const navigate = useNavigate(); return ( @@ -34,7 +35,7 @@ const TopNavigationLoggedIn = (props: Props): JSX.Element => { {topLevelRoute !== TopLevelRoute.StakingAndGovernance && ( { toggleColorMode(); }} diff --git a/apps/namada-interface/src/utils/theme/index.ts b/apps/namada-interface/src/utils/theme/index.ts index 343c3b12789..d86e7f2af44 100644 --- a/apps/namada-interface/src/utils/theme/index.ts +++ b/apps/namada-interface/src/utils/theme/index.ts @@ -1,9 +1,3 @@ -export { - getTheme, - loadColorMode, - storeColorMode, - getTheme_old, - ThemeName, -} from "./theme"; +export { getTheme, loadColorMode, storeColorMode, ThemeName } from "./theme"; export type { Theme, DesignConfiguration, ColorMode } from "./theme"; diff --git a/apps/namada-interface/src/utils/theme/index_delete.ts b/apps/namada-interface/src/utils/theme/index_delete.ts deleted file mode 100644 index e84d10d20c2..00000000000 --- a/apps/namada-interface/src/utils/theme/index_delete.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { getTheme, getTheme_old } from "./theme"; - -export type { Theme, DesignConfiguration } from "./theme"; diff --git a/apps/namada-interface/src/utils/theme/theme.ts b/apps/namada-interface/src/utils/theme/theme.ts index 9f7705a42b9..a43cd73ed52 100644 --- a/apps/namada-interface/src/utils/theme/theme.ts +++ b/apps/namada-interface/src/utils/theme/theme.ts @@ -377,13 +377,3 @@ export const getTheme = ( export type Theme = { themeConfigurations: ThemeConfigurations; }; - -// this sets the dark/light colors to theme -export const getTheme_old = (isLightMode: boolean): Theme => { - const theme: Theme = { - themeConfigurations: { - isLightMode: isLightMode, - }, - }; - return theme; -}; diff --git a/apps/namada-interface/src/utils/theme/theme_delete.ts b/apps/namada-interface/src/utils/theme/theme_delete.ts deleted file mode 100644 index b85cc09c634..00000000000 --- a/apps/namada-interface/src/utils/theme/theme_delete.ts +++ /dev/null @@ -1,350 +0,0 @@ -// the tokens in this file should always reflect the content of -// our Figma, which is considered to be the source of truth. -// https://www.figma.com/file/aiWZpaXjPLW6fDjE7dpFaU/Projects-2021?node-id=9102%3A8806 - -type Colors = { - primary: { - main: string; - main80: string; - main60: string; - main40: string; - main20: string; - }; - secondary: { - main: string; - main80: string; - main60: string; - main40: string; - main20: string; - }; - tertiary: { - main: string; - main80: string; - main60: string; - main40: string; - main20: string; - }; - utility1: { - main: string; - main80: string; - main75: string; - main70: string; - main60: string; - main40: string; - main20: string; - }; - utility2: { - main: string; - main80: string; - main60: string; - main40: string; - main20: string; - }; - utility3: { - success: string; - warning: string; - error: string; - highAttention: string; - lowAttention: string; - black: string; - white: string; - }; -}; - -type BorderRadius = { - s: string; - m: string; -}; - -type Spacers = { - horizontal: { - xs: string; - s: string; - m: string; - l: string; - xl: string; - xxl: string; - }; - vertical: { - xs: string; - s: string; - m: string; - l: string; - xl: string; - xxl: string; - }; -}; - -type Type = { - size: string; - weight: string; - fontFamily: string; -}; - -type Typography = { - h1: Type; - h2: Type; - h3: Type; - h4: Type; - h5: Type; - h6: Type; - body: Type; -}; - -export type DesignConfiguration = { - colors: Colors; - spacers: Spacers; - borderRadius: BorderRadius; - typography: Typography; - themeConfigurations: { isLightMode?: boolean }; -}; - -// NAMADA -const namadaDarkColors: Colors = { - primary: { - main: "#FFFF00", - main80: "#CCCC00", - main60: "#999900", - main40: "#666600", - main20: "#333300", - }, - secondary: { - main: "#11DFDF", - main80: "#41E5E5", - main60: "#70ECEC", - main40: "#A0F2F2", - main20: "#CFF9F9", - }, - tertiary: { - main: "#11DFDF", - main80: "#41E5E5", - main60: "#70ECEC", - main40: "#A0F2F2", - main20: "#CFF9F9", - }, - utility1: { - main: "#0e0e0e", - main80: "#181818", - main75: "#2D2D2D", - main70: "#282828", - main60: "#666666", - main40: "#999999", - main20: "#CCCCCC", - }, - utility2: { - main: "#FFFFFF", - main80: "#CCCCCC", - main60: "#999999", - main40: "#666666", - main20: "#333333", - }, - utility3: { - success: "#61C454", - warning: "#F5BF50", - error: "#ED695D", - highAttention: "#FF0000", - lowAttention: "#FAFF00", - black: "#000000", - white: "#FFFFFF", - }, -}; - -const namadaLightColors: Colors = { - primary: { - main: "#FFFF00", - main80: "#CCCC00", - main60: "#999900", - main40: "#666600", - main20: "#333300", - }, - secondary: { - main: "#11DFDF", - main80: "#41E5E5", - main60: "#70ECEC", - main40: "#A0F2F2", - main20: "#CFF9F9", - }, - tertiary: { - main: "#11DFDF", - main80: "#41E5E5", - main60: "#70ECEC", - main40: "#A0F2F2", - main20: "#CFF9F9", - }, - utility1: { - main: "#FFFFFF", - main80: "#F8F8F8", - main75: "#F8F8F8", - main70: "#F8F8F8", - main60: "#F3F3F3", - main40: "#F0F0F0", - main20: "#D9D9D9", - }, - utility2: { - main: "#000000", - main80: "#333333", - main60: "#666666", - main40: "#999999", - main20: "#CCCCCC", - }, - utility3: { - success: "#61C454", - warning: "#F5BF50", - error: "#ED695D", - highAttention: "#FF0000", - lowAttention: "#FAFF00", - black: "#000000", - white: "#FFFFFF", - }, -}; - -const placeholderThemeColors: Colors = { - primary: { - main: "#FFFF00", - main80: "#CCCC00", - main60: "#999900", - main40: "#666600", - main20: "#333300", - }, - secondary: { - main: "#11DFDF", - main80: "#41E5E5", - main60: "#70ECEC", - main40: "#A0F2F2", - main20: "#CFF9F9", - }, - tertiary: { - main: "#11DFDF", - main80: "#41E5E5", - main60: "#70ECEC", - main40: "#A0F2F2", - main20: "#CFF9F9", - }, - utility1: { - main: "#FFFFFF", - main80: "#F8F8F8", - main75: "#F8F8F8", - main70: "#F8F8F8", - main60: "#F3F3F3", - main40: "#F0F0F0", - main20: "#D9D9D9", - }, - utility2: { - main: "#000000", - main80: "#333333", - main60: "#666666", - main40: "#999999", - main20: "#CCCCCC", - }, - utility3: { - success: "#61C454", - warning: "#F5BF50", - error: "#ED695D", - highAttention: "#FF0000", - lowAttention: "#FAFF00", - black: "#000000", - white: "#FFFFFF", - }, -}; - -const namadaSpacers = { - horizontal: { - xs: "8px", - s: "12px", - m: "24px", - l: "48px", - xl: "64px", - xxl: "96px", - }, - vertical: { - xs: "8px", - s: "12px", - m: "24px", - l: "48px", - xl: "64px", - xxl: "96px", - }, -}; - -const namadaBorderRadius = { s: "12px", m: "24px" }; - -const namadaTypography = { - body: { - fontFamily: "Space Grotesk", - size: "48px", - weight: "700", - }, - h1: { - fontFamily: "Space Grotesk", - size: "48px", - weight: "700", - }, - h2: { - fontFamily: "Space Grotesk", - size: "48px", - weight: "700", - }, - h3: { - fontFamily: "Space Grotesk", - size: "48px", - weight: "700", - }, - h4: { - fontFamily: "Space Grotesk", - size: "48px", - weight: "700", - }, - h5: { - fontFamily: "Space Grotesk", - size: "48px", - weight: "700", - }, - h6: { - fontFamily: "Space Grotesk", - size: "48px", - weight: "700", - }, -}; - -export type ThemeConfigurations = { - isLightMode: boolean; -}; - -export const getTheme = ( - isLightMode: boolean, - shouldUsePlaceholderTheme?: boolean -): DesignConfiguration => { - if (shouldUsePlaceholderTheme) { - const placeholderTheme: DesignConfiguration = { - colors: placeholderThemeColors, - spacers: namadaSpacers, - borderRadius: namadaBorderRadius, - typography: namadaTypography, - themeConfigurations: { isLightMode }, - }; - return placeholderTheme; - } - - const namadaTheme: DesignConfiguration = { - colors: isLightMode ? namadaDarkColors : namadaLightColors, - spacers: namadaSpacers, - borderRadius: namadaBorderRadius, - typography: namadaTypography, - themeConfigurations: { isLightMode }, - }; - return namadaTheme; -}; - -export type Theme = { - themeConfigurations: ThemeConfigurations; -}; - -// this sets the dark/light colors to theme -export const getTheme_old = (isLightMode: boolean): Theme => { - const theme: Theme = { - themeConfigurations: { - isLightMode: isLightMode, - }, - }; - return theme; -};