diff --git a/apps/namada-interface/.env.sample b/apps/namada-interface/.env.sample deleted file mode 100644 index 9e3bdaefe0..0000000000 --- a/apps/namada-interface/.env.sample +++ /dev/null @@ -1,41 +0,0 @@ -# Suppress annoying sourcemap warnings that result from CRA 5 scripts - -GENERATE_SOURCEMAP=false - -# Default chain overrides - match to your local environment: - -# NAMADA - Dev - No IBC -REACT_APP_LEDGER_URL=http://172.100.8.101 # OPTIONAL - Defaults to http://127.0.0.1 - NOTE: the "http://" is optional if not using HTTPS -REACT_APP_LEDGER_PORT=27657 # OPTIONAL -REACT_APP_CHAIN_ID=anoma-test.fd58c789bc11e6c6392 # OPTIONAL - Defaults to anoma-test.fd58c789bc11e6c6392 -REACT_APP_FAUCET=atest1v4ehgw36gc6yxvpjxccyzvphxycrxw2xxsuyydesxgcnjs3cg9znwv3cxgmnj32yxy6rssf5tcqjm3 # OPTIONAL - Use faucet to fund new accounts for development - -# IBC Configuration - -# CHAIN A - Default Chain -REACT_APP_CHAIN_A_ALIAS=Anoma Fractal Instance - 1 # OPTIONAL - Defaults to "IBC - 1" -REACT_APP_CHAIN_A_ID=anoma-test.1e670ba91369ec891fc # REQUIRED -REACT_APP_CHAIN_A_URL=http://10.7.1.162 # OPTIONAL - Defaults to 127.0.0.1 -REACT_APP_CHAIN_A_PORT=27657 # OPTIONAL - Appends to URL if specified -REACT_APP_CHAIN_A_FAUCET=atest1v4ehgw36gfprwdekgg6rsdesg3rry3pjx9prqv3exumrg3zzx3q5vv3nx4zr2v6yggurgwp4rzjk2v -REACT_APP_CHAIN_A_PORT_ID=transfer # OPTIONAL - Defaults to transfer - -# CHAIN B -REACT_APP_CHAIN_B_ALIAS=Anoma Fractal Instance - 2 # OPTIONAL - Defaults to "IBC - 2" -REACT_APP_CHAIN_B_ID=anoma-test.89060614ce340f4baae # REQUIRED -REACT_APP_CHAIN_B_URL=http://10.7.1.162 # OPTIONAL - Defaults to 127.0.0.1 -REACT_APP_CHAIN_B_PORT=28657 # OPTIONAL - Appends to URL if specified -REACT_APP_CHAIN_B_FAUCET=atest1v4ehgw36xscyvdpcxgenvdf3x5c523j98pqnz3fjgfq5yvp4xpqnvv69x5erzvjzgse5yd3suq5pd0 -REACT_APP_CHAIN_B_PORT_ID=transfer # OPTIONAL - Defaults to transfer - -# Optional variables for overriding CoinGecko API settings - -# The default URL is set to "https://api.coingecko.com/api/v3/", but if we needed to point to a proxy of -# this API that we host, we could specify the appropriate settings below: -REACT_APP_API_URL=http://proxy.namada.me/api/v1 # OPTIONAL - Defaults to CoinGecko's API - -# The following is only needed with a proxy API requiring an x-api-key header -REACT_APP_API_KEY=XXXXXXXXXXXXXXXXXXXX # OPTIONAL - Defaults to undefined - -# Set an alternative TTL for caching API queries (in seconds): -REACT_APP_API_TTL=120 # OPTIONAL - Defaults to 60 diff --git a/apps/namada-interface/src/App/App.components.ts b/apps/namada-interface/src/App/App.components.ts index 8bc5bc2b8e..419735fea2 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 } from "utils/theme"; +import { DesignConfiguration, ThemeName } from "utils/theme"; enum ComponentColor { BorderColor, @@ -16,6 +16,9 @@ const getColor = ( const isDark = theme.themeConfigurations.isLightMode; switch (color) { case ComponentColor.BorderColor: + if (theme.themeConfigurations.themeName === ThemeName.Placeholder) { + return "transparent"; + } return isDark ? "transparent" : theme.colors.utility2.main20; case ComponentColor.BackgroundColor: return isDark ? theme.colors.utility1.main80 : theme.colors.utility1.main; @@ -76,7 +79,6 @@ export const BottomSection = styled.section` `; export const ContentContainer = styled.div` - display: flex; flex-direction: column; justify-content: start; align-items: center; @@ -92,7 +94,7 @@ export const ContentContainer = styled.div` min-height: 620px; width: 100%; max-width: 760px; - border-radius: 24px; + border-radius: ${(props) => props.theme.borderRadius.mainContainer}; overflow-x: hidden; transition: background-color 0.3s linear; `; diff --git a/apps/namada-interface/src/App/Governance/Governance.components.ts b/apps/namada-interface/src/App/Governance/Governance.components.ts new file mode 100644 index 0000000000..18d518e42b --- /dev/null +++ b/apps/namada-interface/src/App/Governance/Governance.components.ts @@ -0,0 +1,12 @@ +import styled from "styled-components/macro"; + +export const GovernanceContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + width: 100%; + height: 100%; + color: ${(props) => props.theme.colors.utility2.main}; + background-color: ${(props) => props.theme.colors.utility1.main80}; +`; diff --git a/apps/namada-interface/src/App/Governance/Governance.tsx b/apps/namada-interface/src/App/Governance/Governance.tsx new file mode 100644 index 0000000000..bc76de226a --- /dev/null +++ b/apps/namada-interface/src/App/Governance/Governance.tsx @@ -0,0 +1,29 @@ +import { useState } from "react"; +import { MainContainerNavigation } from "App/StakingAndGovernance/MainContainerNavigation"; +import { GovernanceContainer } from "./Governance.components"; +import { Button, ButtonVariant } from "components/Button"; + +const initialTitle = "Governance"; +export const Governance = (): JSX.Element => { + const [breadcrumb, setBreadcrumb] = useState([initialTitle]); + + return ( + + setBreadcrumb([initialTitle])} + /> + + {breadcrumb.length === 1 && ( + + )} + + ); +}; diff --git a/apps/namada-interface/src/App/Governance/index.ts b/apps/namada-interface/src/App/Governance/index.ts new file mode 100644 index 0000000000..27f9db425d --- /dev/null +++ b/apps/namada-interface/src/App/Governance/index.ts @@ -0,0 +1 @@ +export { Governance } from "./Governance"; diff --git a/apps/namada-interface/src/App/Login/Login.components.ts b/apps/namada-interface/src/App/Login/Login.components.ts index 3db3ce25b3..32601465a4 100644 --- a/apps/namada-interface/src/App/Login/Login.components.ts +++ b/apps/namada-interface/src/App/Login/Login.components.ts @@ -19,6 +19,13 @@ export const LoginViewContainer = styled.div` } `; +export const LoginViewOuterContainer = styled.div` + display: flex; + justify-content: center; + width: 100%; + height: 100%; +`; + export const UnlockingLabel = styled.p` color: ${(props) => props.theme.colors.utility2.main}; `; diff --git a/apps/namada-interface/src/App/Login/Login.tsx b/apps/namada-interface/src/App/Login/Login.tsx index eeacbf2f6f..4885812806 100644 --- a/apps/namada-interface/src/App/Login/Login.tsx +++ b/apps/namada-interface/src/App/Login/Login.tsx @@ -1,6 +1,10 @@ import { useEffect, useState } from "react"; import { TopLevelRoute } from "App/types"; -import { LoginViewContainer, UnlockingLabel } from "./Login.components"; +import { + LoginViewContainer, + LoginViewOuterContainer, + UnlockingLabel, +} from "./Login.components"; import { useNavigate } from "react-router-dom"; import { Input, InputVariants } from "components/Input"; import { Button, ButtonVariant } from "components/Button"; @@ -59,22 +63,24 @@ const Login = ({ setPassword, setStore }: Props): JSX.Element => { }; return ( - - - - {isLoggingIn && Unlocking wallet...} - + + + + + {isLoggingIn && Unlocking wallet...} + + ); }; diff --git a/apps/namada-interface/src/App/PublicGoodsFunding/PublicGoodsFunding.components.ts b/apps/namada-interface/src/App/PublicGoodsFunding/PublicGoodsFunding.components.ts new file mode 100644 index 0000000000..a862a9146c --- /dev/null +++ b/apps/namada-interface/src/App/PublicGoodsFunding/PublicGoodsFunding.components.ts @@ -0,0 +1,12 @@ +import styled from "styled-components/macro"; + +export const PublicGoodsFundingContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + width: 100%; + height: 100%; + color: ${(props) => props.theme.colors.utility2.main}; + background-color: ${(props) => props.theme.colors.utility1.main80}; +`; diff --git a/apps/namada-interface/src/App/PublicGoodsFunding/PublicGoodsFunding.tsx b/apps/namada-interface/src/App/PublicGoodsFunding/PublicGoodsFunding.tsx new file mode 100644 index 0000000000..8255c3b43b --- /dev/null +++ b/apps/namada-interface/src/App/PublicGoodsFunding/PublicGoodsFunding.tsx @@ -0,0 +1,29 @@ +import { useState } from "react"; +import { MainContainerNavigation } from "App/StakingAndGovernance/MainContainerNavigation"; +import { PublicGoodsFundingContainer } from "./PublicGoodsFunding.components"; +import { Button, ButtonVariant } from "components/Button"; + +const initialTitle = "Public Goods Funding"; + +export const PublicGoodsFunding = (): JSX.Element => { + const [breadcrumb, setBreadcrumb] = useState([initialTitle]); + + return ( + + setBreadcrumb([initialTitle])} + /> + {breadcrumb.length === 1 && ( + + )} + + ); +}; diff --git a/apps/namada-interface/src/App/PublicGoodsFunding/index.ts b/apps/namada-interface/src/App/PublicGoodsFunding/index.ts new file mode 100644 index 0000000000..5a1828dfdf --- /dev/null +++ b/apps/namada-interface/src/App/PublicGoodsFunding/index.ts @@ -0,0 +1 @@ +export { PublicGoodsFunding } from "./PublicGoodsFunding"; diff --git a/apps/namada-interface/src/App/Staking/Staking.components.ts b/apps/namada-interface/src/App/Staking/Staking.components.ts new file mode 100644 index 0000000000..635a3f7001 --- /dev/null +++ b/apps/namada-interface/src/App/Staking/Staking.components.ts @@ -0,0 +1,12 @@ +import styled from "styled-components/macro"; + +export const StakingContainer = styled.div` + display: flex; + flex-direction: column; + justify-content: start; + align-items: center; + width: 100%; + height: 100%; + color: ${(props) => props.theme.colors.utility2.main}; + background-color: ${(props) => props.theme.colors.utility1.main80}; +`; diff --git a/apps/namada-interface/src/App/Staking/Staking.tsx b/apps/namada-interface/src/App/Staking/Staking.tsx new file mode 100644 index 0000000000..e69bae492b --- /dev/null +++ b/apps/namada-interface/src/App/Staking/Staking.tsx @@ -0,0 +1,28 @@ +import { useState } from "react"; +import { MainContainerNavigation } from "App/StakingAndGovernance/MainContainerNavigation"; +import { StakingContainer } from "./Staking.components"; +import { Button, ButtonVariant } from "components/Button"; + +const initialTitle = "Staking"; +export const Staking = (): JSX.Element => { + const [breadcrumb, setBreadcrumb] = useState([initialTitle]); + + return ( + + setBreadcrumb([initialTitle])} + /> + {breadcrumb.length === 1 && ( + + )} + + ); +}; diff --git a/apps/namada-interface/src/App/Staking/index.ts b/apps/namada-interface/src/App/Staking/index.ts new file mode 100644 index 0000000000..0c9e03239c --- /dev/null +++ b/apps/namada-interface/src/App/Staking/index.ts @@ -0,0 +1 @@ +export { Staking } from "./Staking"; diff --git a/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/MainContainerNavigation.components.ts b/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/MainContainerNavigation.components.ts new file mode 100644 index 0000000000..9d4ee347ef --- /dev/null +++ b/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/MainContainerNavigation.components.ts @@ -0,0 +1,68 @@ +import styled, { css } from "styled-components/macro"; + +export const MainContainerNavigationContainer = styled.div` + display: flex; + justify-content: start; + align-items: center; + width: 100%; + height: 70px; +`; + +export const Title = css` + color: ${(props) => props.theme.colors.utility2.main}; + width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + text-overflow: ellipsis; + align-content: center; + margin: 0; +`; + +export const MainTitle = styled.h1<{ center?: boolean }>` + ${Title} + ${(props) => (props.center ? "text-align: center;" : "")} + font-size: 28px; + padding: 0 0 2px 12px; + + @media screen and (max-width: 860px) { + font-size: 18px; + } +`; +export const SecondaryTitle = styled.h1` + ${Title} + text-align: end; + padding: 0 12px 4px 0; + color: ${(props) => props.theme.colors.utility2.main40}; + + @media screen and (max-width: 860px) { + font-size: 18px; + } +`; + +export const BackButtonContainer = styled.div<{ disabled?: boolean }>` + display: flex; + justify-content: center; + align-items: center; + width: 100px; + height: 100%; + padding: 0 0 4px; + color: ${(props) => props.theme.colors.secondary.main}; + ${(props) => (props.disabled ? "" : "cursor: pointer;")}; + + path { + stroke: ${(props) => props.theme.colors.secondary.main}; + } +`; + +export const TitleContainer = styled.span` + display: flex; + justify-content: center; + align-items: center; + width: calc(100% - 200px); + height: 100%; + + path { + stroke: ${(props) => props.theme.colors.utility2.main40}; + } +`; diff --git a/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/MainContainerNavigation.tsx b/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/MainContainerNavigation.tsx new file mode 100644 index 0000000000..384dabae56 --- /dev/null +++ b/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/MainContainerNavigation.tsx @@ -0,0 +1,58 @@ +import { Icon, IconName } from "components/Icon"; +import { + MainContainerNavigationContainer, + BackButtonContainer, + TitleContainer, + MainTitle, + SecondaryTitle, +} from "./MainContainerNavigation.components"; + +type Props = { + breadcrumbs: string[]; + navigateBack?: () => void; +}; + +// this contains the logic for correct title, either single title +// or breadcrumb +const getRenderedTitle = (breadcrumbs: string[]): JSX.Element => { + if (breadcrumbs.length <= 1) { + return {breadcrumbs[0]}; + } + + return ( + <> + {breadcrumbs[breadcrumbs.length - 2]} + + {breadcrumbs[breadcrumbs.length - 1]} + + ); +}; + +// creates a simple header containing simple title or a back button +// that accepts a callback and an array that creates a breadcrumb from +// the last 2 items of the array +export const MainContainerNavigation = (props: Props): JSX.Element => { + const { breadcrumbs, navigateBack } = props; + const isBackButtonVisible = breadcrumbs.length > 1; + const renderedTitle = getRenderedTitle(breadcrumbs); + + return ( + + { + navigateBack && navigateBack(); + }} + > + {isBackButtonVisible && ( + <> + + Back + + )} + + + {renderedTitle} + + + ); +}; diff --git a/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/index.ts b/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/index.ts new file mode 100644 index 0000000000..3a487263a1 --- /dev/null +++ b/apps/namada-interface/src/App/StakingAndGovernance/MainContainerNavigation/index.ts @@ -0,0 +1 @@ +export { MainContainerNavigation } from "./MainContainerNavigation"; diff --git a/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.components.ts b/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.components.ts index bc96ed802f..69f15666cc 100644 --- a/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.components.ts +++ b/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.components.ts @@ -6,5 +6,5 @@ export const StakingAndGovernanceContainer = styled.div` justify-content: start; align-items: center; width: 100%; - height: 100%; + min-height: 620px; `; diff --git a/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx b/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx index e5014a0f86..c49db192b9 100644 --- a/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx +++ b/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx @@ -1,14 +1,19 @@ import { useEffect } from "react"; -import { NavigationContainer } from "components/NavigationContainer"; -import { Heading, HeadingLevel } from "components/Heading"; import { Routes, Route, useLocation, useNavigate } from "react-router-dom"; +import { Staking } from "App/Staking"; +import { Governance } from "App/Governance"; +import { PublicGoodsFunding } from "App/PublicGoodsFunding"; import { StakingAndGovernanceContainer } from "./StakingAndGovernance.components"; import { TopLevelRoute, StakingAndGovernanceSubRoute, locationToStakingAndGovernanceSubRoute, } from "App/types"; + +// This is just rendering the actual Staking/Governance/PGF screens +// mostly the purpose of this is to define the default behavior when +// the user clicks the top level Staking & Governance menu export const StakingAndGovernance = (): JSX.Element => { const location = useLocation(); const navigate = useNavigate(); @@ -16,6 +21,7 @@ export const StakingAndGovernance = (): JSX.Element => { // we need one of the sub routes, staking alone has nothing const stakingAndGovernanceSubRoute = locationToStakingAndGovernanceSubRoute(location); + useEffect(() => { if (!!!stakingAndGovernanceSubRoute) { navigate( @@ -26,43 +32,20 @@ export const StakingAndGovernance = (): JSX.Element => { return ( - - Staking & Governance - - *} /> - StakingAndGovernanceSubRoute.Staking - - } + element={} /> - StakingAndGovernanceSubRoute.Governance - - } + element={} /> - StakingAndGovernanceSubRoute.PublicGoodsFunding - - } + element={} /> - - StakingAndGovernance - ); }; diff --git a/apps/namada-interface/src/App/TopNavigation/topNavigation.components.ts b/apps/namada-interface/src/App/TopNavigation/topNavigation.components.ts index 9fb52ad2ec..ef6761952e 100644 --- a/apps/namada-interface/src/App/TopNavigation/topNavigation.components.ts +++ b/apps/namada-interface/src/App/TopNavigation/topNavigation.components.ts @@ -131,7 +131,7 @@ export const MenuItem = styled.button<{ isSelected?: boolean }>` `; export const MenuItemForSecondRow = styled(MenuItem)` - margin-right: 16px; + margin-right: 32px; margin-left: 0px; `; diff --git a/apps/namada-interface/src/App/TopNavigation/topNavigation.components_delete.ts b/apps/namada-interface/src/App/TopNavigation/topNavigation.components_delete.ts new file mode 100644 index 0000000000..9fb52ad2ec --- /dev/null +++ b/apps/namada-interface/src/App/TopNavigation/topNavigation.components_delete.ts @@ -0,0 +1,295 @@ +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/components/Button/button.components.ts b/apps/namada-interface/src/components/Button/button.components.ts index 7bc8761329..457ac65ec5 100644 --- a/apps/namada-interface/src/components/Button/button.components.ts +++ b/apps/namada-interface/src/components/Button/button.components.ts @@ -1,5 +1,5 @@ import styled from "styled-components/macro"; -import { DesignConfiguration } from "utils/theme"; +import { DesignConfiguration, ThemeName } from "utils/theme"; enum ComponentColor { ButtonBackground, @@ -15,6 +15,9 @@ const getColor = ( case ComponentColor.ButtonBackground: return isDark ? theme.colors.primary.main : theme.colors.secondary.main; case ComponentColor.ContainedButtonLabelColor: + if (theme.themeConfigurations.themeName === ThemeName.Placeholder) { + return theme.colors.utility3.white; + } return isDark ? theme.colors.utility3.black : theme.colors.utility3.black; } }; @@ -31,7 +34,7 @@ const Button = styled.button` `; const RoundButton = styled(Button)` - border-radius: 200px; + border-radius: ${(props) => props.theme.borderRadius.buttonBorderRadius}; border: none; `; diff --git a/apps/namada-interface/src/components/Heading/Heading.tsx b/apps/namada-interface/src/components/Heading/Heading.tsx index f2b57ceafd..61736d13b2 100644 --- a/apps/namada-interface/src/components/Heading/Heading.tsx +++ b/apps/namada-interface/src/components/Heading/Heading.tsx @@ -4,9 +4,14 @@ import { HeadingLevel } from "./types"; type HeadingProps = { level: HeadingLevel; children: React.ReactNode; + onClick?: React.MouseEventHandler | undefined; }; export const Heading = (props: HeadingProps): JSX.Element => { - const { level, children } = props; - return {children}; + const { level, children, onClick } = props; + return ( + + {children} + + ); }; diff --git a/apps/namada-interface/src/utils/theme/index.ts b/apps/namada-interface/src/utils/theme/index.ts index e84d10d20c..1767b9a5d4 100644 --- a/apps/namada-interface/src/utils/theme/index.ts +++ b/apps/namada-interface/src/utils/theme/index.ts @@ -1,3 +1,3 @@ -export { getTheme, getTheme_old } from "./theme"; +export { getTheme, getTheme_old, ThemeName } from "./theme"; export type { Theme, DesignConfiguration } from "./theme"; diff --git a/apps/namada-interface/src/utils/theme/index_delete.ts b/apps/namada-interface/src/utils/theme/index_delete.ts new file mode 100644 index 0000000000..e84d10d20c --- /dev/null +++ b/apps/namada-interface/src/utils/theme/index_delete.ts @@ -0,0 +1,3 @@ +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 b85cc09c63..fb5cf8b68e 100644 --- a/apps/namada-interface/src/utils/theme/theme.ts +++ b/apps/namada-interface/src/utils/theme/theme.ts @@ -54,6 +54,10 @@ type Colors = { type BorderRadius = { s: string; m: string; + l: string; + textField: string; + mainContainer: string; + buttonBorderRadius: string; }; type Spacers = { @@ -96,7 +100,7 @@ export type DesignConfiguration = { spacers: Spacers; borderRadius: BorderRadius; typography: Typography; - themeConfigurations: { isLightMode?: boolean }; + themeConfigurations: { isLightMode?: boolean; themeName: ThemeName }; }; // NAMADA @@ -207,23 +211,23 @@ const placeholderThemeColors: Colors = { main20: "#333300", }, secondary: { - main: "#11DFDF", - main80: "#41E5E5", - main60: "#70ECEC", - main40: "#A0F2F2", - main20: "#CFF9F9", + main: "#1D44A7", + main80: "#1D44A7", + main60: "#1D44A7", + main40: "#1D44A7", + main20: "#1D44A7", }, tertiary: { - main: "#11DFDF", - main80: "#41E5E5", - main60: "#70ECEC", - main40: "#A0F2F2", - main20: "#CFF9F9", + main: "#1D44A7", + main80: "#1D44A7", + main60: "#1D44A7", + main40: "#1D44A7", + main20: "#1D44A7", }, utility1: { main: "#FFFFFF", - main80: "#F8F8F8", - main75: "#F8F8F8", + main80: "#eaf3fe", + main75: "#eaf3fe", main70: "#F8F8F8", main60: "#F3F3F3", main40: "#F0F0F0", @@ -247,6 +251,24 @@ const placeholderThemeColors: Colors = { }, }; +const placeholderBorderRadius: BorderRadius = { + s: "8px", + m: "12px", + l: "18px", + mainContainer: "8px", + textField: "8px", + buttonBorderRadius: "8px", +}; + +const namadaBorderRadius: BorderRadius = { + s: "8px", + m: "12px", + l: "18px", + mainContainer: "24px", + textField: "8px", + buttonBorderRadius: "200px", +}; + const namadaSpacers = { horizontal: { xs: "8px", @@ -266,8 +288,6 @@ const namadaSpacers = { }, }; -const namadaBorderRadius = { s: "12px", m: "24px" }; - const namadaTypography = { body: { fontFamily: "Space Grotesk", @@ -306,6 +326,13 @@ const namadaTypography = { }, }; +// we want to have the name as we might alter the usage +// of style tokens in styling files based on the theme name +export enum ThemeName { + Namada, + Placeholder, +} + export type ThemeConfigurations = { isLightMode: boolean; }; @@ -318,9 +345,9 @@ export const getTheme = ( const placeholderTheme: DesignConfiguration = { colors: placeholderThemeColors, spacers: namadaSpacers, - borderRadius: namadaBorderRadius, + borderRadius: placeholderBorderRadius, typography: namadaTypography, - themeConfigurations: { isLightMode }, + themeConfigurations: { isLightMode, themeName: ThemeName.Placeholder }, }; return placeholderTheme; } @@ -330,7 +357,7 @@ export const getTheme = ( spacers: namadaSpacers, borderRadius: namadaBorderRadius, typography: namadaTypography, - themeConfigurations: { isLightMode }, + themeConfigurations: { isLightMode, themeName: ThemeName.Namada }, }; return namadaTheme; }; diff --git a/apps/namada-interface/src/utils/theme/theme_delete.ts b/apps/namada-interface/src/utils/theme/theme_delete.ts new file mode 100644 index 0000000000..b85cc09c63 --- /dev/null +++ b/apps/namada-interface/src/utils/theme/theme_delete.ts @@ -0,0 +1,350 @@ +// 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; +};