switching branches

Author: javanang

ksqLight/package-lock.json

@@ -29,6 +29,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.54.0",
     "wait-on": "^6.0.1",
     "web-vitals": "^2.1.4"
   },

ksqLight/package.json

@@ -8,6 +8,7 @@ import { PermanentDrawer } from "./components/PermanentDrawer.js";
 import { QueryPage } from "./components/QueryPage.js";
 import { CssBaseline, ThemeProvider, createTheme, Box, Grid } from "@mui/material";
 import { LivenessCard } from "./components/LivenessCard.js";
+import { Welcomepage } from "./components/Welcomepage.js";
 
 const theme = createTheme({
   palette: {
@@ -24,46 +25,47 @@ function App() {
 
 
   return (
-    <BrowserRouter>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-        <Box sx={{
-          display: 'flex',
-          flexDirection: 'column'
-        }}>
+    <Welcomepage></Welcomepage>
+    // <BrowserRouter>
+    //   <ThemeProvider theme={theme}>
+    //     <CssBaseline />
+    //     <Box sx={{
+    //       display: 'flex',
+    //       flexDirection: 'column'
+    //     }}>
 
-          <Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics} showSettings={showSettings} setShowSettings={setShowSettings} />
-          <SettingsSidebar showSettings={showSettings} setShowSettings={setShowSettings}></SettingsSidebar>
-          <Box sx={{ display: 'flex' }}>
-            <PermanentDrawer
-              setShowQueries={setShowQueries}
-              setShowMessages={setShowMessages}
-              setShowErrors={setShowErrors}
-            />
-            <Box sx={{
-              display: 'flex',
-              flexDirection: 'column'
-            }}>
-              <Grid container spacing={4} sx={{ display: 'flex', flexDirection: "row", p: 3 }}>
-                <Grid item xs={4} md={4} lg={4}>
-                  <LivenessCard />
-                </Grid>
-                <Grid item xs={4} md={4} lg={4}>
-                  <LivenessCard />
-                </Grid>
-                <Grid item xs={4} md={4} lg={4}>
-                  <LivenessCard />
-                </Grid>
-              </Grid>
-              <Routes>
-                <Route path="/" element={<Homepage showQueries={showQueries} showMessages={showMessages} showErrors={showErrors} />} />
-                <Route path="/queryPage" element={<QueryPage />} />
-              </Routes>
-            </Box>
-          </Box>
-        </Box>
-      </ThemeProvider>
-    </BrowserRouter >
+    //       <Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics} showSettings={showSettings} setShowSettings={setShowSettings} />
+    //       <SettingsSidebar showSettings={showSettings} setShowSettings={setShowSettings}></SettingsSidebar>
+    //       <Box sx={{ display: 'flex' }}>
+    //         <PermanentDrawer
+    //           setShowQueries={setShowQueries}
+    //           setShowMessages={setShowMessages}
+    //           setShowErrors={setShowErrors}
+    //         />
+    //         <Box sx={{
+    //           display: 'flex',
+    //           flexDirection: 'column'
+    //         }}>
+    //           <Grid container spacing={4} sx={{ display: 'flex', flexDirection: "row", p: 3 }}>
+    //             <Grid item xs={4} md={4} lg={4}>
+    //               <LivenessCard />
+    //             </Grid>
+    //             <Grid item xs={4} md={4} lg={4}>
+    //               <LivenessCard />
+    //             </Grid>
+    //             <Grid item xs={4} md={4} lg={4}>
+    //               <LivenessCard />
+    //             </Grid>
+    //           </Grid>
+    //           <Routes>
+    //             <Route path="/" element={<Homepage showQueries={showQueries} showMessages={showMessages} showErrors={showErrors} />} />
+    //             <Route path="/queryPage" element={<QueryPage />} />
+    //           </Routes>
+    //         </Box>
+    //       </Box>
+    //     </Box>
+    //   </ThemeProvider>
+    // </BrowserRouter >
 
   );
 }

ksqLight/src/App.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { Typography, createTheme, Box } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+
+export const Welcomepage = () => {
+  const navigate = useNavigate();
+
+  const navHome = () => {
+    navigate("/dashboard");
+  };
+
+  return (
+    <Box class="hero">
+      <Box class="diagonal-hero-bg">
+        <Box class="stars">
+          <Box class="small"></Box>
+          <Box class="medium"></Box>
+          <Box class="big"></Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+

ksqLight/src/components/Welcomepage.js

@@ -38,4 +38,5 @@ code {
   .header-viewport {
     height: calc(100vh - 64px);
   }
-}
+}
+