Merge pull request #7 from luzmo-official/feat/improve-styling-and-fe…

…atures Feat: improve styling and features of wearables app
luzmo-official · Sep 2, 2024 · e671538 · e671538
2 parents da25855 + e17c94c
commit e671538
Show file tree

Hide file tree

Showing 16 changed files with 787 additions and 193 deletions.
diff --git a/wearables-dashboard/bun.lockb b/wearables-dashboard/bun.lockb
diff --git a/wearables-dashboard/index.html b/wearables-dashboard/index.html
@@ -8,7 +8,7 @@
       rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Flex showcase</title>
+    <title>Healthosia - Luzmo Flex SDK sample application</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/wearables-dashboard/package-lock.json b/wearables-dashboard/package-lock.json
diff --git a/wearables-dashboard/package.json b/wearables-dashboard/package.json
@@ -17,6 +17,7 @@
     "@luzmo/react-embed": "next",
     "@mui/icons-material": "^5.16.4",
     "@mui/lab": "^5.0.0-alpha.172",
+    "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "userflow.js": "^2.12.1"

diff --git a/wearables-dashboard/src/App.tsx b/wearables-dashboard/src/App.tsx
@@ -13,6 +13,27 @@ const theme = createTheme({
   typography: {
     fontFamily: "Lato",
   },
+  palette: {
+    primary: {
+      main: "#6440EB",
+    },
+    secondary: {
+      main: "#fefefe",
+    },
+    // background color for the entire app
+    background: {
+      default: "#f4f5fd",
+    },
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 900,
+      md: 1200,
+      lg: 1536,
+      xl: 1920,
+    },
+  },
 });
 
 import "./App.css";
@@ -33,23 +54,23 @@ function App() {
     <>
       <UserContext.Provider value={{ user, switchUser }}>
         <ThemeProvider theme={theme}>
-          <Topnav selectedTab={selectedTab} onTabChange={setSelectedTab} />
-          <Grid
-            container
-            spacing={2}
-            paddingX={2}
-            paddingBottom={2}
+          <Box
             className="userflow-wearables"
+            bgcolor="background.default"
+            minHeight="100vh"
           >
-            {selectedTab === "analytics" && <Analytics />}
-            {selectedTab === "settings" && (
-              <Grid item xs={12}>
-                <Box padding={2}>
-                  <Settings />
-                </Box>
-              </Grid>
-            )}
-          </Grid>
+            <Topnav selectedTab={selectedTab} onTabChange={setSelectedTab} />
+            <Grid container spacing={2} padding={2}>
+              {selectedTab === "analytics" && <Analytics />}
+              {selectedTab === "settings" && (
+                <Grid item xs={12}>
+                  <Box padding={2}>
+                    <Settings />
+                  </Box>
+                </Grid>
+              )}
+            </Grid>
+          </Box>
         </ThemeProvider>
       </UserContext.Provider>
     </>