resolve merge conflicts

src/components/ContextualInfoNew/index.js

@@ -32,7 +32,8 @@ const SummaryWrapperContainer = styled.div`
 
 const Details = styled.div`
   background-color: ${({ theme }) => theme.concreteGray};
-  /* padding: 1.25rem 1.25rem 1rem 1.25rem; */
+  padding: 1.5rem;
+  padding-bottom: 1rem;
   border-radius: 1rem;
   font-size: 0.75rem;
   margin: 1rem 0.5rem 0 0.5rem;

src/components/Modal/index.js

@@ -5,9 +5,8 @@ import { DialogOverlay, DialogContent } from '@reach/dialog'
 import '@reach/dialog/styles.css'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
-const WrappedDialogOverlay = ({ suppressClassNameWarning, ...rest }) => <AnimatedDialogOverlay {...rest} />
-const StyledDialogOverlay = styled(WrappedDialogOverlay).attrs({
-  suppressClassNameWarning: true
+const StyledDialogOverlay = styled(AnimatedDialogOverlay).attrs({
+  suppressclassnamewarning: 'true'
 })`
   &[data-reach-dialog-overlay] {
     z-index: 2;

src/pages/App.js

@@ -46,7 +46,7 @@ export default function App() {
                 {/* this Suspense is for route code-splitting */}
                 <Suspense fallback={null}>
                   <Switch>
-                    <Route exact strict path="/swap" component={Swap} />
+                    <Route exact strict path="/swap" component={() => <Swap />} />
                     <Route
                       exact
                       strict
@@ -59,7 +59,7 @@ export default function App() {
                         }
                       }}
                     />
-                    <Route exact strict path="/send" component={Send} />
+                    <Route exact strict path="/send" component={() => <Send />} />
                     <Route
                       exact
                       strict