Tweaked app shell

components/pages/ListDetail.jsx

@@ -11,6 +11,7 @@ import {
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
+import { useParams } from 'react-router-dom';
 
 import Store from '../../store';
 import * as actions from '../../store/actions';
@@ -35,14 +36,13 @@ const ListItemEntry = ({ list, item }) => (
 
 const ListDetail = ({ match }) => {
   const lists = Store.useState(selectors.getLists);
-  const {
-    params: { listId },
-  } = match;
+  const params = useParams();
+  const { listId } = params;
   const loadedList = lists.find(l => l.id === listId);
 
   return (
     <IonPage>
-      <IonHeader>
+      <IonHeader translucent>
         <IonToolbar>
           <IonButtons slot="start">
             <IonBackButton defaultHref="/tabs/lists" />

components/pages/Lists.jsx

@@ -9,6 +9,7 @@ import {
   IonContent,
   IonItem,
   IonLabel,
+  IonList,
 } from '@ionic/react';
 
 const ListEntry = ({ list, ...props }) => (
@@ -43,7 +44,9 @@ const Lists = () => {
             <IonTitle size="large">Lists</IonTitle>
           </IonToolbar>
         </IonHeader>
-        <AllLists />
+        <IonList>
+          <AllLists />
+        </IonList>
       </IonContent>
     </IonPage>
   );

components/pages/Tabs.jsx

@@ -1,39 +0,0 @@
-import { Redirect, Route } from 'react-router-dom';
-import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
-import { IonReactRouter } from '@ionic/react-router';
-import { cog, flash, list } from 'ionicons/icons';
-
-import Home from './Feed';
-import Lists from './Lists';
-import ListDetail from './ListDetail';
-import Settings from './Settings';
-
-const Tabs = () => {
-  return (
-    <IonTabs>
-      <IonRouterOutlet>
-        <Route path="/tabs/feed" component={Home} exact={true} />
-        <Route path="/tabs/lists" component={Lists} exact={true} />
-        <Route path="/tabs/lists/:listId" component={ListDetail} exact={true} />
-        <Route path="/tabs/settings" component={Settings} exact={true} />
-        <Route path="/tabs" render={() => <Redirect to="/tabs/feed" />} exact={true} />
-      </IonRouterOutlet>
-      <IonTabBar slot="bottom">
-        <IonTabButton tab="tab1" href="/tabs/feed">
-          <IonIcon icon={flash} />
-          <IonLabel>Feed</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab2" href="/tabs/lists">
-          <IonIcon icon={list} />
-          <IonLabel>Lists</IonLabel>
-        </IonTabButton>
-        <IonTabButton tab="tab3" href="/tabs/settings">
-          <IonIcon icon={cog} />
-          <IonLabel>Settings</IonLabel>
-        </IonTabButton>
-      </IonTabBar>
-    </IonTabs>
-  );
-};
-
-export default Tabs;