feat: adds global site footer

src/App.tsx

@@ -35,6 +35,8 @@ export class App extends Component {
             </>
           </ThemeProvider>
         </Provider>
+
+
       </>
     )
   }

src/components/DiscordLink/DiscordLink.stories.mdx

@@ -0,0 +1,16 @@
+import {
+  Story,
+  Meta,
+  Preview,
+  Props,
+  Description,
+} from '@storybook/addon-docs/blocks'
+import DiscordLink from './DiscordLink'
+
+<Meta title="Components|DiscordLink" component={DiscordLink} />
+
+# Discord Link
+
+<Story name="Default">
+  <DiscordLink />
+</Story>

src/components/DiscordLink/DiscordLink.tsx

@@ -0,0 +1,30 @@
+import { Link, Button } from 'rebass/styled-components'
+import styled, { useTheme } from 'styled-components'
+
+export const DiscordLink = () => {
+  const theme = useTheme() as any
+  const OptionalText = styled(`span`)`
+    display: inline-block;
+    margin-right: ${theme.space[1]}px;
+    @media screen and (max-width: ${theme.breakpoints[1]}) {
+      display: none;
+    }
+  `
+  return (
+    <Link
+      target="_blank"
+      href="https://discordapp.com/invite/cGZ5hKP"
+      data-cy="feedback"
+    >
+      <Button variant="primary">
+        <OptionalText>#Feedback?</OptionalText>
+        Join our chat{' '}
+        <span role="img" aria-label="talk-bubble">
+          💬
+        </span>
+      </Button>
+    </Link>
+  )
+}
+
+export default DiscordLink

src/components/Icons/index.tsx

@@ -55,6 +55,7 @@ interface IProps {
   color?: string
   onClick?: () => void
 }
+
 export type availableGlyphs =
   | 'download'
   | 'download-cloud'
@@ -92,6 +93,7 @@ export type availableGlyphs =
   | 'chevron-right'
   | 'star'
   | 'star-active'
+  | 'github'
 
 export type IGlyphs = { [k in availableGlyphs]: JSX.Element }
 
@@ -132,6 +134,7 @@ export const glyphs: IGlyphs = {
   'chevron-right': <MdChevronRight />,
   star: SVGs.star,
   'star-active': SVGs.starActive,
+  github: SVGs.github,
 }
 
 type WrapperProps = IProps & VerticalAlignProps & SpaceProps

src/components/Icons/svgs.tsx

@@ -1,16 +1,17 @@
 import loadingSVG from '../../assets/images/loading.svg'
 import starSVG from '../../assets/icons/icon-star-default.svg'
 import starActiveSVG from '../../assets/icons/icon-star-active.svg'
+import githubSVG from '../../assets/icons/icon-github.svg'
 
 const imgStyle = {
   maxWidth: '100%',
 }
-const loading = <img alt="icon" style={imgStyle} src={loadingSVG} />
-const star = <img alt="icon" style={imgStyle} src={starSVG} />
-const starActive = <img alt="icon" style={imgStyle} src={starActiveSVG} />
 
-export default {
-  loading,
-  star,
-  starActive,
+const iconMap = {
+  loading: <img alt="icon" style={imgStyle} src={loadingSVG} />,
+  star: <img alt="icon" style={imgStyle} src={starSVG} />,
+  starActive: <img alt="icon" style={imgStyle} src={starActiveSVG} />,
+  github: <img alt="icon" style={imgStyle} src={githubSVG} />,
 }
+
+export default iconMap

src/components/SiteFooter/SiteFooter.stories.mdx

@@ -0,0 +1,16 @@
+import {
+  Story,
+  Meta,
+  Preview,
+  Props,
+  Description,
+} from '@storybook/addon-docs/blocks'
+import SiteFooter from './SiteFooter'
+
+<Meta title="Components|SiteFooter" component={SiteFooter} />
+
+# Site Footer
+
+<Story name="Default">
+  <SiteFooter />
+</Story>

src/components/SiteFooter/SiteFooter.tsx

@@ -0,0 +1,65 @@
+import { Flex, Link, Text } from 'rebass/styled-components'
+import styled, { useTheme } from 'styled-components'
+import { Icon } from 'src/components/Icons'
+
+const SiteFooter = () => {
+  const theme = useTheme() as any
+  const discordButtonWidth = 310
+
+  const Anchor = styled('a')`
+    color: #fff;
+    text-decoration: underline;
+  `
+
+  const IconGlyph = styled(Icon)`
+    transform: translateY(2px);
+  `
+
+  const FooterContainer = styled(Flex)`
+    color: #fff;
+    margin-top: 45px;
+    padding: 45px ${theme.space[4]}px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    line-heigh: 1.5;
+
+    @media only screen and (min-width: ${theme.breakpoints[1]}) {
+      flex-direction: row;
+      padding-right: ${discordButtonWidth}px;
+      text-align: left;
+    }
+  `
+
+  return (
+    <FooterContainer
+      bg="#27272c"
+      alignItems="center"
+      style={{
+        marginTop: '45px',
+      }}
+    >
+      <Icon glyph={'star-active'} mb={[3, 3, 0]} />
+      <Text ml={3} mr={1}>
+        {theme.name} is a project by{' '}
+        <Anchor href="https://platform.onearmy.earth/" target="_blank">
+          One Army
+        </Anchor>
+        .
+      </Text>
+
+      <Text mt={[2, 2, 0]}>
+        Running on our Platform software,{' '}
+        <Anchor
+          href="https://github.com/onearmy/community-platform/"
+          target="_blank"
+        >
+          help us build it
+          <IconGlyph glyph={'github'} ml={1} />
+        </Anchor>
+      </Text>
+    </FooterContainer>
+  )
+}
+
+export default SiteFooter

src/pages/Maps/Maps.tsx

@@ -99,7 +99,7 @@ class MapsPage extends React.Component<IProps, IState> {
     const { center, zoom } = this.state
     return (
       // the calculation for the height is kind of hacky for now, will set properly on final mockups
-      <Box id="mapPage" sx={{ height: 'calc(100vh - 60px)' }}>
+      <Box id="mapPage" sx={{ height: 'calc(100vh - 80px)' }}>
         <Switch>
           <Route
             exact

src/pages/PageList.tsx

@@ -79,7 +79,6 @@ const academy = {
     flex: 1,
   },
   fullPageWidth: true,
-  hideOneArmyBanner: true,
 }
 const events = {
   moduleName: MODULE.EVENTS,
@@ -101,7 +100,6 @@ const maps = {
     width: '100vw',
   },
   fullPageWidth: true,
-  hideOneArmyBanner: true,
 }
 const admin = {
   moduleName: MODULE.USER,

src/pages/common/GlobalSiteFooter/GlobalSiteFooter.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { useHistory } from 'react-router'
+import SiteFooter from 'src/components/SiteFooter/SiteFooter'
+
+const isFooterVisible = path => {
+  return (
+    !path.startsWith('/map') && !path.startsWith('/academy') && path !== '/'
+  )
+}
+
+const GlobalSiteFooter = () => {
+  const history = useHistory()
+  const [showFooter, setShowFooter] = useState(
+    isFooterVisible(window.location.pathname),
+  )
+
+  useEffect(
+    () =>
+      history.listen(location => {
+        setShowFooter(isFooterVisible(location?.pathname))
+      }),
+    [history],
+  )
+
+  return showFooter ? <SiteFooter /> : null
+}
+
+export default GlobalSiteFooter

src/pages/index.tsx

@@ -17,26 +17,18 @@ import {
   POLICY_PAGES,
   getAvailablePageList,
 } from './PageList'
-import { Link, Flex } from 'rebass/styled-components'
+import { Link, Flex, Box } from 'rebass/styled-components'
 import DevSiteHeader from 'src/components/DevSiteHeader/DevSiteHeader'
 import { getSupportedModules } from 'src/modules'
-import SiteFooter from './common/SiteFooter/SiteFooter'
-
-function showOneArmyBanner(currentPageUrl, pages): boolean {
-  if (currentPageUrl === '/') {
-    return false
-  }
-
-  return !pages.find(pg => currentPageUrl.startsWith(pg.path))
-    ?.hideOneArmyBanner
-}
+import GlobalSiteFooter from './common/GlobalSiteFooter/GlobalSiteFooter'
 
 
 export class Routes extends React.Component<any, {
   singlePageMode: boolean
   displayPageComponent?: any
   supportedRoutes?: IPageMeta[]
 }> {
+
   public render() {
     // we are rendering different pages and navigation dependent on whether the user has navigated directly to view the
     // entire site, or just one page of it via subdomains. This is so we can effectively integrate just parts of this
@@ -59,7 +51,8 @@ export class Routes extends React.Component<any, {
             {/* TODO - add better loading fallback */}
             <DevSiteHeader />
             <Header />
-            <Suspense fallback={<div></div>}>
+            <Suspense fallback={<div style={{ minHeight: 'calc(100vh - 175px)' }}>
+            </div>}>
               <Switch>
                 {menuItems.map(page => (
                   <Route
@@ -91,24 +84,11 @@ export class Routes extends React.Component<any, {
               </Switch>
             </Suspense>
           </ScrollToTop>
+          <GlobalSiteFooter />
         </BrowserRouter>
-        <Link
-          target="_blank"
-          href="https://discordapp.com/invite/cGZ5hKP"
-          data-cy="feedback"
-          sx={{ display: ['none', 'none', 'block'] }}
-        >
-          <Button
-            sx={{ position: 'fixed', bottom: '30px', right: '30px' }}
-            variant="primary"
-          >
-            #Feedback? Join our chat{' '}
-            <span role="img" aria-label="talk-bubble">
-              💬
-            </span>
-          </Button>
-        </Link>
-        {showOneArmyBanner(window.location.pathname, menuItems) && <SiteFooter />}
+        <Box sx={{ position: 'fixed', bottom: '30px', right: '30px', display: ['none', 'none', 'block']  }}>
+          <DiscordLink/>
+        </Box>
       </Flex>
     )
   }