import styled from "@emotion/styled" ; import React from "react" ; import { colors } from "./styles/variables" ; import "flexboxgrid/dist/flexboxgrid.min.css" ; import "./styles/padding-margin-mixin.scss" ; import "./styles/custom-flexboxgrid.scss" ; import "./styles/icons.scss" ; import { UiStateProvider } from "./contexts/ui" ; import { ApiProvider } from "./contexts/api" ; import { Modal } from "./components/modal" ; import ErrorBoundary from "./components/error-boundary" ; import Routes from "./containers/routes" ; import { InfoBox } from "./components/InfoBox" ; const AppWrapper = styled . div `
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 100vh;
  max-height: 100vh;
  overflow-y: hidden;
  background: ${ colors . gardenGrayLighter };
` ; const App = ( ) => { return ( < ErrorBoundary errorMsg = { "Unable to load dashboard" } > < AppWrapper > < UiStateProvider > < Modal /> < ApiProvider > < Routes /> < /ApiProvider> < InfoBox / > < /UiStateProvider> < /AppWrapper> < /ErrorBoundary>); } ; export default App ;