diff --git a/app/src/components/App.js b/app/src/components/App.js
index 8e162c349f1..f48702b8162 100644
--- a/app/src/components/App.js
+++ b/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 () {
-
+
diff --git a/app/src/components/MenuPanel/index.js b/app/src/components/MenuPanel/index.js
index 0e5d7049bcf..f98e8ed24d2 100644
--- a/app/src/components/MenuPanel/index.js
+++ b/app/src/components/MenuPanel/index.js
@@ -9,11 +9,15 @@ export default function MenuPanel () {
return (
-
+
App
+
+ Resources
+
+
diff --git a/app/src/components/MenuPanel/styles.css b/app/src/components/MenuPanel/styles.css
index b6fe3875016..7bfe61658f0 100644
--- a/app/src/components/MenuPanel/styles.css
+++ b/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%;
diff --git a/app/src/components/Resources/ResourceCard.js b/app/src/components/Resources/ResourceCard.js
new file mode 100644
index 00000000000..9f0fb45caaf
--- /dev/null
+++ b/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 (
+
+ {props.description}
+
+ View in Browser
+
+
+ )
+}
diff --git a/app/src/components/Resources/index.js b/app/src/components/Resources/index.js
new file mode 100644
index 00000000000..5b3e56e51ee
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/app/src/components/Resources/styles.css b/app/src/components/Resources/styles.css
new file mode 100644
index 00000000000..e96c75e90cc
--- /dev/null
+++ b/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);
+}
diff --git a/app/src/components/nav-bar/NavButton.js b/app/src/components/nav-bar/NavButton.js
index 0dffaa6c335..3a1c55adfee 100644
--- a/app/src/components/nav-bar/NavButton.js
+++ b/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
}
}
diff --git a/app/src/pages/More/AppSettings.js b/app/src/pages/More/AppSettings.js
new file mode 100644
index 00000000000..1648d152c4c
--- /dev/null
+++ b/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 (
+
+
+
+ (
+
+ )} />
+ {
+ if (update.available && !update.seen) {
+ return ()
+ }
+
+ return null
+ }} />
+
+
+ )
+}
+
+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'))
+ }
+ }
+}
diff --git a/app/src/pages/More/Resources.js b/app/src/pages/More/Resources.js
new file mode 100644
index 00000000000..5f069f54d09
--- /dev/null
+++ b/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 (
+
+
+
+ )
+}
diff --git a/app/src/pages/More/index.js b/app/src/pages/More/index.js
new file mode 100644
index 00000000000..c178ec8301b
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ )
+}