Use app provider and adjusts overall layout

5 files changed, 28 insertions, 9 deletions

diff --git a/client/js/app/src/app/app.jsx b/client/js/app/src/app/app.jsx
index 57eba3ea95d..b1933071ef8 100644
--- a/client/js/app/src/app/app.jsx
+++ b/client/js/app/src/app/app.jsx
@@ -3,14 +3,17 @@ import { Layout } from 'app/components';
 import { AppRouter } from 'app/libs/app-router';
 import { Home } from 'app/pages/home/home';
 import { QueryBuilder } from 'app/pages/querybuilder/query-builder';
+import { AppProvider } from 'app/libs/app-provider';
 
 export function App() {
   return (
-    <Layout>
-      <AppRouter>
-        <Home path="/" />
-        <QueryBuilder path="querybuilder" />
-      </AppRouter>
-    </Layout>
+    <AppProvider>
+      <Layout>
+        <AppRouter>
+          <Home path="/" />
+          <QueryBuilder path="querybuilder" />
+        </AppRouter>
+      </Layout>
+    </AppProvider>
   );
 }
diff --git a/client/js/app/src/app/components/index.js b/client/js/app/src/app/components/index.js
index 488fc1b23fa..7439cc0b6e7 100644
--- a/client/js/app/src/app/components/index.js
+++ b/client/js/app/src/app/components/index.js
@@ -1,2 +1,6 @@
 export { Error } from 'app/components/layout/error';
 export { Layout } from 'app/components/layout/layout';
+export { Message } from 'app/components/containers/message';
+export { Container } from 'app/components/containers/container';
+export { Content } from 'app/components/containers/content';
+export { Section } from 'app/components/containers/section';
diff --git a/client/js/app/src/app/components/layout/header.jsx b/client/js/app/src/app/components/layout/header.jsx
index 2ddc3943445..b4eac293826 100644
--- a/client/js/app/src/app/components/layout/header.jsx
+++ b/client/js/app/src/app/components/layout/header.jsx
@@ -4,7 +4,17 @@ import { HeaderLogo } from 'app/components/layout/header-logo';
 
 export function Header() {
   return (
-    <MantineHeader height={55} sx={{ display: 'flex', alignItems: 'center' }}>
+    <MantineHeader
+      height={55}
+      sx={(theme) => ({
+        display: 'flex',
+        alignItems: 'center',
+        paddingLeft: theme.spacing.md,
+        paddingRight: theme.spacing.md,
+        background: theme.cr.getSolidBackground(),
+        borderBottom: `1px solid ${theme.cr.getSubtleBorderAndSeparator()}`,
+      })}
+    >
       <HeaderLogo />
     </MantineHeader>
   );
diff --git a/client/js/app/src/app/pages/home/home.jsx b/client/js/app/src/app/pages/home/home.jsx
index d39b696bf08..3e7699a7d5f 100644
--- a/client/js/app/src/app/pages/home/home.jsx
+++ b/client/js/app/src/app/pages/home/home.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
+import { Container } from 'app/components';
 
 export function Home() {
-  return <>home</>;
+  return <Container>home</Container>;
 }
diff --git a/client/js/app/src/app/pages/querybuilder/query-builder.jsx b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
index 7e8f133f9ec..fe158fb5b98 100644
--- a/client/js/app/src/app/pages/querybuilder/query-builder.jsx
+++ b/client/js/app/src/app/pages/querybuilder/query-builder.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
+import { Container } from 'app/components';
 
 export function QueryBuilder() {
-  return <>query builder</>;
+  return <Container>query builder</Container>;
 }