diff --git a/typescript/package.json b/typescript/package.json index e7d1798a..2aa4a8df 100644 --- a/typescript/package.json +++ b/typescript/package.json @@ -23,6 +23,7 @@ "react-helmet": "^6.0.0", "react-redux": "^7.2.0", "react-router-dom": "5.1.2", + "react-use-scroll-position": "^2.0.0", "reactstrap": "^8.4.1", "redux-devtools-extension": "^2.13.8", "redux-saga": "^1.1.3", diff --git a/typescript/src/components/organisms/Navvy.tsx b/typescript/src/components/organisms/Navvy.tsx new file mode 100644 index 00000000..f6a23df8 --- /dev/null +++ b/typescript/src/components/organisms/Navvy.tsx @@ -0,0 +1,175 @@ +import { useScrollYPosition } from 'react-use-scroll-position'; +import { Link, NavLink } from 'react-router-dom'; +import styled, { css } from 'styled-components'; +import { + Collapse, + Container, + DropdownItem, + DropdownMenu, + DropdownToggle, + Nav, + Navbar, + NavbarBrand, + NavbarToggler, + NavItem, + UncontrolledDropdown, +} from 'reactstrap'; +import React from 'react'; + +type Mode = 'primary' | 'secondary'; + +const Navvy: React.FunctionComponent = () => { + const scrollY = useScrollYPosition(); + const mode = scrollY < 100 ? 'primary' : 'secondary'; + + return ( + + + + + {'Branch'} + + + + + + + + + ); +} + +const StyledNavbar = styled(Navbar) <{ mode: Mode }>` + height: 80px; + padding-top: 20px; + padding-left: 80px; + padding-right: 80px; + + background: transparent; + border: 0; + border-radius: 0; + + transition: 0.5s; + + ${props => { + if (props.mode === 'primary') { + return css` + .navbar-nav > li { + > a { + color: ${props => props.theme.textInverse}; + + &, &:hover { + /* color: ${props => props.theme.textInverse}; */ + opacity: .7; + } + &:active, &:focus { + color: #eee; + } + } + + &.open > a { + &, &:hover { + background-color: transparent; + color: white; + opacity: 0.7; + } + &:active, &:focus { + background-color: transparent; + color: #eee;; + } + } + } + `; + } + + if (props.mode === 'secondary') { + return css` + padding-top: 10px; + height: 70px; + + background: white; + border-bottom: 1px solid ${props => props.theme.brandPrimary}; + `; + } + }} +`; + +const NavbarHeader = styled.div<{ mode: Mode }>` + background-position: left center; + background-repeat: no-repeat; + background-size: contain; + height: 35px; + padding-left: 45px; + + ${({ mode, theme }) => mode === 'primary' && css` + background-image: url(${theme.images.logo}); + `} + ${({ mode, theme }) => mode === 'secondary' && css` + background-image: url(${theme.images.logoInverse}); + `} +`; + +const Brand = styled(NavbarBrand)<{ mode: Mode }>` + color: white; + font-size: 1.25rem; + line-height: 35px; + font-weight: 300; + + ${({ mode, theme }) => mode === 'primary' && css` + + `} + ${({ mode, theme }) => mode === 'secondary' && css` + color: ${theme.brandPrimary}; + font-weight: 400; + `} +`; + +export default Navvy; diff --git a/typescript/src/containers/AppContainer.tsx b/typescript/src/containers/AppContainer.tsx index 09bb5320..e00b3a5b 100644 --- a/typescript/src/containers/AppContainer.tsx +++ b/typescript/src/containers/AppContainer.tsx @@ -1,11 +1,18 @@ +import { Container } from 'reactstrap'; +import Navvy from '../components/organisms/Navvy'; import React from 'react'; +import styled from 'styled-components'; const AppContainer: React.FunctionComponent = ({ children }) => { return ( -
-
{children}
-
+ +
+ + {children} + +
+ ); }; diff --git a/typescript/src/containers/Home.tsx b/typescript/src/containers/Home.tsx index efa9f31b..485d50f8 100644 --- a/typescript/src/containers/Home.tsx +++ b/typescript/src/containers/Home.tsx @@ -1,7 +1,12 @@ import React from 'react'; +import styled from 'styled-components'; const Home: React.FunctionComponent = () => { - return

{'welcome 2 branch xx'}

; + return {'welcome 2 branch xx'}; }; +const Wrapper = styled.div` + height: 1200px; +`; + export default Home; diff --git a/typescript/src/routes.tsx b/typescript/src/routes.tsx index 7778d235..80dd9237 100644 --- a/typescript/src/routes.tsx +++ b/typescript/src/routes.tsx @@ -2,11 +2,23 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom'; import React from 'react'; import Home from './containers/Home'; import AppContainer from './containers/AppContainer'; +import { createGlobalStyle } from 'styled-components'; + +const GlobalStyle = createGlobalStyle` + body { + background-color: ${props => props.theme.brandPrimary}; + } + + * { + font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; + } +`; const Routes: React.FunctionComponent = () => { return ( + diff --git a/typescript/src/theme/index.ts b/typescript/src/theme/index.ts index 9f3803ec..6a542749 100644 --- a/typescript/src/theme/index.ts +++ b/typescript/src/theme/index.ts @@ -1,5 +1,59 @@ -const theme = { +import logo from '../../assets/images/logo/logo-150x150-w.png'; +import logoInverse from '../../assets/images/logo/logo-150x150.png'; +interface Theme { + brandPrimary: string; + brandSecondary: string; + brandTertiary: string; + brandQuaternary: string; + + brandAccentPrimary: string; + brandAccentSecondary: string; + brandAccentTertiary: string; + + anchorPrimary: string; + anchorPrimaryActive: string; + anchorSecondary: string; + anchorSecondaryActive: string; + + separatorLight: string; + + textInverse: string; + + images: { + logo: string; + logoInverse: string; + }; +} + +const defaultTheme: Theme = { + brandPrimary: '#3d3d7c', + brandSecondary: '#353575', + brandTertiary: '#5d5da0', + brandQuaternary: '#aaa4b6', + + brandAccentPrimary: '#e25092', + brandAccentSecondary: '#b42c69', + brandAccentTertiary: '#d3508b', + + anchorPrimary: '#3d3d7c', + anchorPrimaryActive: '#3d3d7c', + anchorSecondary: '#e25092', + anchorSecondaryActive: '#d3508b', + + separatorLight: '#eee', + + textInverse: 'white', + + images: { + logo, + logoInverse, + }, }; -export default theme; +// yolo this +declare module "styled-components" { + interface DefaultTheme extends Theme {} +} + +export default defaultTheme; diff --git a/typescript/yarn.lock b/typescript/yarn.lock index 6e547b04..6d113a6d 100644 --- a/typescript/yarn.lock +++ b/typescript/yarn.lock @@ -1506,6 +1506,11 @@ react-transition-group@^2.3.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" +react-use-scroll-position@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/react-use-scroll-position/-/react-use-scroll-position-2.0.0.tgz#c5bb29f751d126ff1c0306c28d7055ce0d4ef034" + integrity sha512-nQaWMPElzI8aN1vYTnqy0xV17pEhItgyWUBOtdmMEqsbY1mV3+iZMyTeAJ+oegsQIugYxBU4LnV2NosynN+KKA== + react@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"