🍎🪐 ↣ [STA-13 HDASH-5] Attempting to fix inheritance issues with layouts

[Gizmotronn]

On the magic frontend, the tags run through the component. This allows us to automate the magic signin useStates/useEffects & have the header menu included, but it leads to issues with custom pages (say from other formats/templates like this main dashboard) (see image below):

I don't think this will format correctly on mobile devices (and it looks sort of odd on desktop views. Maybe we can add a custom header format and remove the margins between the menu divider and the header, include deeplinking to other parts of the app)

The main issue is that currently we don't seem to be able to add multiple layouts with react-router-dom…

import Header from "./header";

const Layout = ({ children }) => (
  <>
    <Header />
    <main>
      <div className="container">{children}</div>
    </main>
    <style>{`
      * {
        font-family: sans-serif !important;
        outline: none;
      }
      .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 10px;
      }
    `}</style>
  </>
);

export default Layout;

Here's my attempt to create a new layout:
src/components/db-layout.js

import Header from "./header";
import Dashboard from "../pages/Dashboard";

const dbLayout = ({}) => (
  <>
    <Header />
    <main>
      <Dashboard />
    </main>
  </>
);

export default dbLayout;

App.jsx has the Route configuration for different pages:

return (
    
    <Router>
      <Switch>
        <UserContext.Provider value={[user, setUser]}>
          <LifetimeContext.Provider value={[lifetimeAccess, setLifetimeAccess]}>
            <LifetimeAccessRequestStatusContext.Provider
              value={[
                lifetimeAccessRequestStatus,
                setLifetimeAccessRequestStatus,
              ]}
            >
              <Layout>
                <Route path="/" exact component={Home} />
                <Route path="/premium-content" component={PremiumContent} />
                <Route path="/signup" component={SignUp} />
                <Route path="/login" component={Login} />
                <Route path="/profile" component={Profile} />
                <Route path="/dashboard" component={Dashboard} />
                <Route
                  path="/payment"
                  render={(props) => {
                    return (
                      <Payment
                        Elements={Elements}
                        PaymentForm={PaymentForm}
                        promise={promise}
                      />
                    );
                  }}
                />
              </Layout>
              <div>
              </div>
            </LifetimeAccessRequestStatusContext.Provider>
          </LifetimeContext.Provider>
        </UserContext.Provider>
      </Switch>
    </Router>
  );