diff --git a/catalog/app/app.js b/catalog/app/app.js index b2d7d73e..73485698 100644 --- a/catalog/app/app.js +++ b/catalog/app/app.js @@ -118,7 +118,16 @@ const render = (messages) => { Notifications.Provider, [APIConnector.Provider, { fetch, middleware: [Auth.apiMiddleware] }], [Auth.Provider, { checkOn: LOCATION_CHANGE, storage }], - [Intercom.Provider, { userSelector: intercomUserSelector }], + [ + Intercom.Provider, + { + userSelector: intercomUserSelector, + horizontal_padding: + // align the launcher with the right side of the container + (window.innerWidth - Math.min(1172, window.innerWidth)) / 2 + 16, + vertical_padding: 59, + }, + ], [ Tracking, { diff --git a/catalog/app/components/Footer/Footer.js b/catalog/app/components/Footer/Footer.js index 3f2c84a0..8c5be9ac 100644 --- a/catalog/app/components/Footer/Footer.js +++ b/catalog/app/components/Footer/Footer.js @@ -1,76 +1,99 @@ import * as React from 'react' import { FormattedMessage } from 'react-intl' -import { withStyles } from '@material-ui/styles' +import { Link as RRLink } from 'react-router-dom' +import { unstable_Box as Box } from '@material-ui/core/Box' +import { Link, Typography } from '@material-ui/core' -import FAIcon from 'components/FAIcon' +import * as Intercom from 'components/Intercom' +import LayoutContainer from 'components/Layout/Container' import { blog, twitter, gitWeb } from 'constants/urls' -import * as RT from 'utils/reactTools' +import * as NamedRoutes from 'utils/NamedRoutes' + +import logo from 'img/logo/horizontal-white.png' import messages from './messages' -export default RT.composeComponent( - 'Footer', - withStyles(({ palette, breakpoints, spacing: { unit } }) => ({ - root: { - backgroundColor: palette.primary.dark, - color: palette.getContrastText(palette.primary.dark), - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'space-between', - paddingBottom: 2 * unit, - paddingTop: 2 * unit, - }, - col: { - width: '25%', - textAlign: 'center', - [breakpoints.down('xs')]: { - width: '100%', - '& + &': { - marginTop: 2 * unit, - }, - }, - }, - small: { - fontSize: '.8em', - lineHeight: '2em', - opacity: 0.7, - }, - link: { - fontSize: '2em', - lineHeight: '2em', - '&, &:active, &:visited': { - color: 'inherit', - opacity: 0.9, - }, - '&:hover, &:focus': { - color: 'inherit', - opacity: 1, - }, - }, - })), - ({ classes }) => ( - - ), +import bg from './bg.png' +import iconFacebook from './icon-facebook.svg' +import iconGithub from './icon-github.svg' +import iconTwitter from './icon-twitter.svg' +import iconMedium from './icon-medium.svg' + +const NavLink = (props) => ( + +) + +const NavIcon = ({ icon, ...props }) => ( + + + ) + +export default () => { + const { urls } = NamedRoutes.use() + const intercom = Intercom.use() + return ( + + + + + + + + + ©  + + + + + + {/* TODO: hide this nav when enableMarketingPages is false? */} + + Docs + + Pricing + + Blog + + Jobs + + About + + + + + + + + {!intercom.dummy && } + + + + + ) +} diff --git a/catalog/app/components/Footer/bg.png b/catalog/app/components/Footer/bg.png new file mode 100644 index 00000000..311e6e31 Binary files /dev/null and b/catalog/app/components/Footer/bg.png differ diff --git a/catalog/app/components/Footer/icon-facebook.svg b/catalog/app/components/Footer/icon-facebook.svg new file mode 100644 index 00000000..abdd7449 --- /dev/null +++ b/catalog/app/components/Footer/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/catalog/app/components/Footer/icon-github.svg b/catalog/app/components/Footer/icon-github.svg new file mode 100644 index 00000000..aaf1c319 --- /dev/null +++ b/catalog/app/components/Footer/icon-github.svg @@ -0,0 +1,60 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/catalog/app/components/Footer/icon-medium.svg b/catalog/app/components/Footer/icon-medium.svg new file mode 100644 index 00000000..c7a17d81 --- /dev/null +++ b/catalog/app/components/Footer/icon-medium.svg @@ -0,0 +1,64 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/catalog/app/components/Footer/icon-twitter.svg b/catalog/app/components/Footer/icon-twitter.svg new file mode 100644 index 00000000..90e68681 --- /dev/null +++ b/catalog/app/components/Footer/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/catalog/app/components/Intercom/Intercom.js b/catalog/app/components/Intercom/Intercom.js index d0854f0b..127b49df 100644 --- a/catalog/app/components/Intercom/Intercom.js +++ b/catalog/app/components/Intercom/Intercom.js @@ -25,12 +25,18 @@ const mkPlaceholder = () => { // should return undefined or { name, email, user_id } const defaultUserSelector = () => undefined -const IntercomProvider = ({ appId, userSelector = defaultUserSelector, children }) => { - const settings = { app_id: appId } +const IntercomProvider = ({ + appId, + userSelector = defaultUserSelector, + children, + ...props +}) => { + const settings = { app_id: appId, ...props } if (!window.Intercom) window.Intercom = mkPlaceholder() const api = React.useCallback((...args) => window.Intercom(...args), []) + if (!('dummy' in api)) api.dummy = false React.useEffect(() => { api('boot', settings) @@ -70,6 +76,7 @@ const DummyProvider = ({ children }) => { // eslint-disable-next-line no-console console.log("Trying to call Intercom, but it's unavailable", args) }, []) + if (!('dummy' in api)) api.dummy = true return children(api) } diff --git a/catalog/app/components/Layout/Container.js b/catalog/app/components/Layout/Container.js new file mode 100644 index 00000000..2044e922 --- /dev/null +++ b/catalog/app/components/Layout/Container.js @@ -0,0 +1,16 @@ +import * as React from 'react' +import { unstable_Box as Box } from '@material-ui/core/Box' +import { useTheme } from '@material-ui/styles' + +export default (props) => { + const t = useTheme() + return ( + + ) +} diff --git a/catalog/app/components/Layout/Layout.js b/catalog/app/components/Layout/Layout.js index 768a4205..9441c9fc 100644 --- a/catalog/app/components/Layout/Layout.js +++ b/catalog/app/components/Layout/Layout.js @@ -2,12 +2,25 @@ import PT from 'prop-types' import * as React from 'react' import * as RC from 'recompose' import { unstable_Box as Box } from '@material-ui/core/Box' +import { styled } from '@material-ui/styles' import Footer from 'components/Footer' import * as NavBar from 'containers/NavBar' import { composeComponent } from 'utils/reactTools' -export default composeComponent( +export const Root = styled(({ dark = false, ...props }) => ( + +))({ + overflowX: 'hidden', +}) + +export const Layout = composeComponent( 'Layout', RC.setPropTypes({ children: PT.node, @@ -16,17 +29,14 @@ export default composeComponent( dark: PT.bool, }), ({ bare = false, dark = false, children, pre }) => ( - + {bare ? : } {!!pre && pre} - {children} + {!!children && {children}}