feat(app): Add resources page to more section

app/src/components/App.js

@@ -5,7 +5,7 @@ import NavBar from './nav-bar'
 
 import SidePanel from '../pages/SidePanel'
 import Robots from '../pages/Robots'
-import AppSettingsPage from '../pages/AppSettings'
+import More from '../pages/More'
 import Upload from '../pages/Upload'
 import Calibrate from '../pages/Calibrate'
 import Run from '../pages/Run'
@@ -22,7 +22,7 @@ export default function App () {
         <Redirect from='(.*)/index.html' to='/' />
         <Redirect exact from='/' to='/robots' />
         <Route path='/robots/:name?' component={Robots} />
-        <Route path='/menu/app' component={AppSettingsPage} />
+        <Route path='/menu' component={More} />
         <Route path='/upload' component={Upload} />
         <Route path='/calibrate' component={Calibrate} />
         <Route path='/run' component={Run} />

app/src/components/MenuPanel/index.js

@@ -9,11 +9,15 @@ export default function MenuPanel () {
   return (
     <SidePanel title='Menu'>
       <div className={styles.menu_panel}>
-        <ol>
+        <ol className={styles.menu_list}>
           <ListItem className={styles.menu_item} url={'/menu/app'} activeClassName={styles.active}>
             <span>App</span>
             <Icon name={'chevron-right'} className={styles.menu_icon}/>
           </ListItem>
+          <ListItem className={styles.menu_item} url={'/menu/resources'} activeClassName={styles.active}>
+            <span>Resources</span>
+            <Icon name={'chevron-right'} className={styles.menu_icon}/>
+          </ListItem>
         </ol>
       </div>
     </SidePanel>

app/src/components/MenuPanel/styles.css

@@ -8,13 +8,14 @@
 
 .menu_list {
   list-style: none;
-  margin-left: 0;
+  margin: 1rem 0 0;
 }
 
 .menu_item {
-  margin-bottom: 0.5rem;
   text-transform: uppercase;
   font-size: var(--fs-body-2);
+  margin-bottom: 0.25rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
 
   & > span {
     width: 100%;

app/src/components/Resources/ResourceCard.js

@@ -0,0 +1,27 @@
+// @flow
+// resources page layout
+import * as React from 'react'
+import {Card, OutlineButton} from '@opentrons/components'
+
+type Props = {
+  title: React.Node,
+  description: React.Node,
+  url: string,
+}
+
+export default function ResourceCard (props: Props) {
+  return (
+    <Card
+      title={props.title}
+    >
+      <p>{props.description}</p>
+      <OutlineButton
+        Component="a"
+        href={props.url}
+        target="_blank"
+      >
+        View in Browser
+      </OutlineButton>
+    </Card>
+  )
+}

app/src/components/Resources/index.js

@@ -0,0 +1,28 @@
+// @flow
+// resources page layout
+import * as React from 'react'
+
+import ResourceCard from './ResourceCard'
+
+import styles from './styles.css'
+
+export default function Resources () {
+  return (
+    <div className={styles.resources_page}>
+      <div className={styles.row}>
+        <ResourceCard
+          title='Knowledge Base'
+          description='Visit our walkthroughs and FAQs'
+          url={'https://support.opentrons.com/'}
+        />
+      </div>
+      <div className={styles.row}>
+        <ResourceCard
+          title='Protocol Library'
+          description='Download a protocol to run on your robot'
+          url={'https://protocols.opentrons.com/'}
+        />
+      </div>
+    </div>
+  )
+}

app/src/components/Resources/styles.css

@@ -0,0 +1,16 @@
+/* stylesheet for Resources page components */
+@import '@opentrons/components';
+
+:root {
+  --resources_card_spacing: 0.75rem;
+}
+
+.resources_page {
+  padding: 1.5rem;
+  font-size: var(--fs-body-1);
+}
+
+.row {
+  width: 100%;
+  margin-bottom: var(--resources_card_spacing);
+}

app/src/components/nav-bar/NavButton.js

@@ -67,7 +67,7 @@ function mapStateToProps (state: State, ownProps: OwnProps): StateProps {
       iconName: 'dots-horizontal',
       isBottom: true,
       title: 'more',
-      url: '/menu/app',
+      url: '/menu',
       notification: moreNotification
     }
   }

app/src/pages/More/AppSettings.js

@@ -0,0 +1,76 @@
+// @flow
+// view info about the app and update
+import React from 'react'
+import {connect} from 'react-redux'
+import {Route, Switch, Redirect, type ContextRouter} from 'react-router'
+import {push} from 'react-router-redux'
+
+import type {State} from '../../types'
+import type {ShellUpdate} from '../../shell'
+import {
+  getShellUpdate,
+  checkForShellUpdates,
+  downloadShellUpdate,
+  quitAndInstallShellUpdate,
+  setUpdateSeen
+} from '../../shell'
+
+import Page from '../../components/Page'
+import AppSettings, {AppUpdateModal} from '../../components/AppSettings'
+
+type OP = ContextRouter
+
+type SP = {
+  update: ShellUpdate,
+}
+
+type DP = {
+  checkForUpdates: () => mixed,
+  downloadUpdate: () => mixed,
+  quitAndInstall: () => mixed,
+  closeUpdateModal: () => mixed,
+}
+
+type Props = OP & SP & DP
+
+export default connect(mapStateToProps, mapDispatchToProps)(AppSettingsPage)
+
+function AppSettingsPage (props: Props) {
+  const {update, match: {path}} = props
+
+  return (
+    <Page>
+      <AppSettings {...props} />
+      <Switch>
+        <Route path={`${path}/update`} render={() => (
+          <AppUpdateModal {...props} close={props.closeUpdateModal} />
+        )} />
+        <Route render={() => {
+          if (update.available && !update.seen) {
+            return (<Redirect to='/menu/app/update' />)
+          }
+
+          return null
+        }} />
+      </Switch>
+    </Page>
+  )
+}
+
+function mapStateToProps (state: State): SP {
+  return {
+    update: getShellUpdate(state)
+  }
+}
+
+function mapDispatchToProps (dispatch: Dispatch): DP {
+  return {
+    checkForUpdates: () => dispatch(checkForShellUpdates()),
+    downloadUpdate: () => dispatch(downloadShellUpdate()),
+    quitAndInstall: () => quitAndInstallShellUpdate(),
+    closeUpdateModal: () => {
+      dispatch(setUpdateSeen())
+      dispatch(push('/menu/app'))
+    }
+  }
+}

app/src/pages/More/Resources.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Page from '../../components/Page'
+import Resources from '../../components/Resources'
+export default function ResourcesPage () {
+  return (
+    <Page>
+      <Resources />
+    </Page>
+  )
+}

app/src/pages/More/index.js

@@ -0,0 +1,30 @@
+// @flow
+// more nav button routes
+import * as React from 'react'
+import {Switch, Route, Redirect, type Match} from 'react-router'
+
+import AppSettings from './AppSettings'
+import Resources from './Resources'
+
+type Props = {
+  match: Match
+}
+
+export default function More (props: Props) {
+  const {match: {path}} = props
+  const appPath = `${path}/app`
+
+  return (
+    <Switch>
+      <Redirect exact from={path} to={appPath} />
+      <Route
+        path={appPath}
+        component={AppSettings}
+      />
+      <Route
+        path={`${path}/resources`}
+        component={Resources}
+      />
+    </Switch>
+  )
+}