fix(app): place top portal at higher z index than page level portal (#…

…6950)

In order to ensure that top level modals render on top of any page level modals, this sets the z
index of the top level portal root's contents to 10 as opposed to 1 for the page level portal

app/src/components/portal/index.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from 'react'
 import ReactDom from 'react-dom'
+import { Box } from '@opentrons/components'
 
 type PortalLevel = 'page' | 'top'
 
@@ -13,20 +14,25 @@ type State = {|
   hasRoot: boolean,
 |}
 
-const PORTAL_ROOT_ID_BY_LEVEL: { [PortalLevel]: string } = {
-  page: '__otAppModalPortalRoot',
-  top: '__otAppTopPortalRoot',
+type PortalLevelInfo = {|
+  id: string,
+  zIndex: number | string,
+|}
+
+const PORTAL_ROOT_PROPS_BY_LEVEL: { [PortalLevel]: PortalLevelInfo } = {
+  page: { id: '__otAppModalPortalRoot', zIndex: 1 },
+  top: { id: '__otAppTopPortalRoot', zIndex: 10 },
 }
 
 const getPortalRoot = level =>
-  global.document.getElementById(PORTAL_ROOT_ID_BY_LEVEL[level])
+  global.document.getElementById(PORTAL_ROOT_PROPS_BY_LEVEL[level].id)
 
 export function PortalRoot(): React.Node {
-  return <div id={PORTAL_ROOT_ID_BY_LEVEL.page} />
+  return <Box {...PORTAL_ROOT_PROPS_BY_LEVEL.page} />
 }
 
 export function TopPortalRoot(): React.Node {
-  return <div id={PORTAL_ROOT_ID_BY_LEVEL.top} />
+  return <Box {...PORTAL_ROOT_PROPS_BY_LEVEL.top} />
 }
 
 // the children of Portal are rendered into the PortalRoot if it exists in DOM