clean up style and introduce scrolling tabs for files

jdrews · Mar 20, 2023 · d26ff22 · d26ff22
1 parent f6799f8
commit d26ff22
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 38 deletions.
diff --git a/web/src/MainLayout.jsx b/web/src/MainLayout.jsx
@@ -1,48 +1,87 @@
-import './LogViewer.css';
+import "./LogViewer.css";
 import LogStationLogViewer from "./LogStationLogViewer";
 
-import Container from '@mui/material/Container';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Box from '@mui/material/Box';
-import {useState} from "react";
+import Container from "@mui/material/Container";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+import { useState } from "react";
 
 function a11yProps(index) {
-    return {
-        id: `log-selector-${index}`,
-        'aria-controls': `log-selector-panel-${index}`,
-    };
+  return {
+    id: `log-selector-${index}`,
+    "aria-controls": `log-selector-panel-${index}`,
+  };
 }
 
 const MainLayout = (props) => {
-    const [selectedLogFile, setSelectedLogFile] = useState("0");
+  const [selectedLogFile, setSelectedLogFile] = useState("0");
 
-    const handleLogSelection = (event, newLogFile) => {
-        setSelectedLogFile(newLogFile);
-    };
+  const handleLogSelection = (event, newLogFile) => {
+    setSelectedLogFile(newLogFile);
+  };
 
-    return (
-        <Container disableGutters maxWidth="false" sx={{width: '100%', height: '100vh'}}>
-                <Box sx={{borderBottom: 1, borderColor: 'divider', height: '8vh', m: 0, p: 0}}>
-                    <Tabs value={selectedLogFile} aria-label="log selector bar" textColor="secondary" indicatorColor="secondary" onChange={handleLogSelection}>
-                        <Tab key="0" value="0" label="logstation" disabled={true} disableRipple={true} {...a11yProps("0")}
-                             sx={{
-                                 color: '#ffffff !important',
-                                 opacity: '0.6 !important',
-                                 textTransform: 'unset',
-                                 fontSize: '110%'
-                             }}/>
-                        {/*TODO: This should pull from the MUI theme instead of hardcoded.*/}
-                        {[...props.logFiles.keys()].map(logFile =>
-                            (<Tab key={logFile} value={logFile} label={logFile} {...a11yProps(logFile)} sx={{color: '#ffffff', background: '#222', textTransform: 'unset'}}/>)
-                        )}
-                    </Tabs>
-                </Box>
-                <Box sx={{width: '100%', height: '92vh'}} className="LogViewerBox">
-                       <LogStationLogViewer data={props.logFiles.get(selectedLogFile) ?? []} logFileName={selectedLogFile}/>
-                </Box>
-        </Container>
-    );
-}
+  return (
+    <Container
+      disableGutters
+      maxWidth="false"
+      sx={{ width: "100%", height: "100vh" }}
+    >
+      <Box
+        sx={{
+          borderBottom: 1,
+          borderColor: "divider",
+          background: '#090909',
+          height: "8vh",
+          m: 0,
+          p: 0,
+        }}
+      >
+        <Tabs
+          value={selectedLogFile}
+          aria-label="log selector bar"
+          textColor="secondary"
+          indicatorColor="secondary"
+          variant="scrollable"
+          scrollButtons="auto"
+          onChange={handleLogSelection}
+        >
+          <Tab
+            key="0"
+            value="0"
+            label="logstation"
+            disabled={true}
+            disableRipple={true}
+            {...a11yProps("0")}
+            sx={{
+              color: "#ffffff !important",
+              opacity: "0.6 !important",
+              textTransform: "unset",
+              fontSize: "110%",
+            }}
+          />
+          {[...props.logFiles.keys()].map((logFile) => (
+            <Tab
+              key={logFile}
+              value={logFile}
+              label={logFile}
+              {...a11yProps(logFile)}
+              sx={{
+                color: "#ffffff",
+                textTransform: "unset",
+              }}
+            />
+          ))}
+        </Tabs>
+      </Box>
+      <Box sx={{ width: "100%", height: "92vh", background: '#030303' }} className="LogViewerBox">
+        <LogStationLogViewer
+          data={props.logFiles.get(selectedLogFile) ?? []}
+          logFileName={selectedLogFile}
+        />
+      </Box>
+    </Container>
+  );
+};
 
 export default MainLayout;
diff --git a/web/src/index.js b/web/src/index.js
@@ -15,7 +15,7 @@ const darkTheme = createTheme({
             contrastText: '#ffffff'
         },
         secondary: {
-            main: '#455a64',
+            main: '#73bcf7',
             contrastText: '#ffffff'
         }
     },