New website

catalog/app/app.js

@@ -2,16 +2,16 @@
 // Needed for redux-saga es6 generator support
 import '@babel/polyfill'
 
-// TODO: remove after mui v4 release
-import './installStyles'
 /* eslint-disable import/first */
 
 // Import all the third party stuff
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import { createBrowserHistory as createHistory } from 'history'
-import 'sanitize.css/sanitize.css'
-import { ThemeProvider } from '@material-ui/styles'
+import * as M from '@material-ui/core'
+
+// side-effect: inject global css
+import 'sanitize.css'
 
 // Import root app
 import Error from 'components/Error'
@@ -100,6 +100,7 @@ const sentryUserSelector = (state) => {
 const render = (messages) => {
   ReactDOM.render(
     nest(
+      [M.MuiThemeProvider, { theme: style.appTheme }],
       WithGlobalStyles,
       FinalBoundary,
       Sentry.Provider,
@@ -110,15 +111,23 @@ const render = (messages) => {
       Data.Provider,
       Cache.Provider,
       [Config.Provider, { path: '/config.json' }],
-      [ThemeProvider, { theme: style.theme }],
       [React.Suspense, { fallback: <Placeholder /> }],
       [Sentry.Loader, { userSelector: sentryUserSelector }],
       ErrorBoundary,
       FormProvider,
       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(1280, window.innerWidth)) / 2 + 32,
+          vertical_padding: 59,
+        },
+      ],
       [
         Tracking,
         {

catalog/app/components/Error/Error.js

@@ -1,8 +1,7 @@
 import PT from 'prop-types'
 import * as React from 'react'
 import { setPropTypes } from 'recompose'
-import { unstable_Box as Box } from '@material-ui/core/Box'
-import Typography from '@material-ui/core/Typography'
+import { Box, Typography } from '@material-ui/core'
 import { styled } from '@material-ui/styles'
 
 import { composeComponent } from 'utils/reactTools'

catalog/app/components/Footer/Footer.js

@@ -1,76 +1,161 @@
 import * as React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { withStyles } from '@material-ui/styles'
+import { Link } from 'react-router-dom'
+import * as M from '@material-ui/core'
 
-import FAIcon from 'components/FAIcon'
-import { blog, twitter, gitWeb } from 'constants/urls'
-import * as RT from 'utils/reactTools'
+import * as Intercom from 'components/Intercom'
+import Logo from 'components/Logo'
+import * as style from 'constants/style'
+import * as URLS from 'constants/urls'
+import * as Config from 'utils/Config'
+import HashLink from 'utils/HashLink'
+import * as NamedRoutes from 'utils/NamedRoutes'
 
 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 }) => (
-    <footer className={classes.root}>
-      <div className={classes.col}>
-        <a className={classes.link} href={twitter}>
-          <FAIcon type="twitter" />
-        </a>
-      </div>
-      <div className={classes.col}>
-        <a className={classes.link} href={gitWeb}>
-          <FAIcon type="github" />
-        </a>
-      </div>
-      <div className={classes.col}>
-        <a className={classes.link} href={blog}>
-          <FAIcon type="medium" />
-        </a>
-      </div>
-      <div className={classes.col}>
-        <p className={classes.small}>
-          &copy;&nbsp;
-          <FormattedMessage {...messages.copy} />
-        </p>
-      </div>
-    </footer>
-  ),
+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 Footer = M.styled('footer')(({ theme: t }) => ({
+  background: `left / 64px url(${bg})`,
+  boxShadow: [
+    '0px -12px 24px 0px rgba(25, 22, 59, 0.05)',
+    '0px -16px 40px 0px rgba(25, 22, 59, 0.07)',
+    '0px -24px 88px 0px rgba(25, 22, 59, 0.16)',
+  ],
+  height: 230,
+  paddingTop: t.spacing(6),
+  position: 'relative',
+  [t.breakpoints.down('xs')]: {
+    alignItems: 'center',
+    display: 'flex',
+    paddingTop: 0,
+  },
+}))
+
+const Container = M.styled(M.Container)(({ theme: t }) => ({
+  alignItems: 'center',
+  display: 'grid',
+  [t.breakpoints.up('sm')]: {
+    gridRowGap: t.spacing(6),
+    gridTemplateColumns: 'auto 1fr auto',
+    gridTemplateRows: '36px auto',
+    gridTemplateAreas: `
+      "logo . links"
+      "copy . icons"
+    `,
+  },
+  [t.breakpoints.down('xs')]: {
+    gridRowGap: t.spacing(3),
+    gridTemplateColumns: '1fr',
+    gridTemplateRows: '36px auto auto auto',
+    gridTemplateAreas: `
+      "logo"
+      "links"
+      "icons"
+      "copy"
+    `,
+  },
+}))
+
+const NavLink = (props) => (
+  <M.Link
+    variant="button"
+    underline="none"
+    color="textPrimary"
+    component={props.to ? HashLink : undefined}
+    {...props}
+  />
+)
+
+const NavSpacer = () => <M.Box ml={{ xs: 2, sm: 3 }} />
+
+const NavIcon = ({ icon, ...props }) => (
+  <M.Box component="a" {...props}>
+    <M.Box component="img" height={18} src={icon} alt="" display="block" />
+  </M.Box>
 )
+
+export default () => {
+  const cfg = Config.useConfig()
+  const { urls } = NamedRoutes.use()
+  const intercom = Intercom.use()
+  return (
+    <M.MuiThemeProvider theme={style.navTheme}>
+      <Footer>
+        <Container maxWidth="lg">
+          <M.Box
+            style={{ gridArea: 'logo' }}
+            display="flex"
+            justifyContent={{ xs: 'center', sm: 'flex-start' }}
+          >
+            <M.Box component={Link} to={urls.home()} display="block">
+              <Logo />
+            </M.Box>
+          </M.Box>
+
+          <M.Box
+            component="nav"
+            display="flex"
+            alignItems="center"
+            justifyContent={{ xs: 'center', sm: 'flex-end' }}
+            style={{ gridArea: 'links' }}
+          >
+            <NavLink href={URLS.docs} target="_blank">
+              Docs
+            </NavLink>
+            {!!cfg.enableMarketingPages && (
+              <>
+                <NavSpacer />
+                <NavLink to={`${urls.home()}#pricing`}>Pricing</NavLink>
+              </>
+            )}
+            <NavSpacer />
+            <NavLink href={URLS.blog} target="_blank">
+              Blog
+            </NavLink>
+            <NavSpacer />
+            <NavLink href={URLS.jobs} target="_blank">
+              Jobs
+            </NavLink>
+            {!!cfg.enableMarketingPages && (
+              <>
+                <NavSpacer />
+                <NavLink to={urls.about()}>About</NavLink>
+              </>
+            )}
+          </M.Box>
+
+          <M.Box
+            style={{ gridArea: 'copy' }}
+            display="flex"
+            justifyContent={{ xs: 'center', sm: 'flex-start' }}
+          >
+            <M.Typography color="textSecondary">
+              &copy;&nbsp;
+              <FormattedMessage {...messages.copy} />
+            </M.Typography>
+          </M.Box>
+
+          <M.Box
+            component="nav"
+            display="flex"
+            justifyContent={{ xs: 'center', sm: 'flex-end' }}
+            style={{ gridArea: 'icons' }}
+          >
+            <NavIcon icon={iconFacebook} href={URLS.facebook} target="_blank" />
+            <NavIcon icon={iconTwitter} href={URLS.twitter} target="_blank" ml={4} />
+            <NavIcon icon={iconGithub} href={URLS.gitWeb} target="_blank" ml={4} />
+            <NavIcon icon={iconMedium} href={URLS.blog} target="_blank" ml={4} />
+            {!intercom.dummy && (
+              <M.Box ml={4} width={60} display={{ xs: 'none', sm: 'block' }} />
+            )}
+          </M.Box>
+        </Container>
+      </Footer>
+    </M.MuiThemeProvider>
+  )
+}