change tabs components so they're not redundant anymore, left them in there for now tho so Noe can work on the style

typescript/Frontend/src/components/Groups/GroupTabs.tsx

@@ -5,11 +5,8 @@ import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
 import { GroupContext } from "../Context/GroupContextProvider";
 import { useContext } from "react";
-import {
+import InnovenergyTab from "../Layout/InnovenergyTab";
-  AntTabs,
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";
-  StyledTab,
-  StyledTabBlue,
-} from "../../util/installation.util";
 
 const GroupTabs = () => {
   const routeMatch = useRouteMatch([
@@ -26,16 +23,9 @@ const GroupTabs = () => {
     return (
       <Box sx={{ width: "100%" }}>
         <Box sx={{}}>
-          <AntTabs
+          <InnovenergyTabs id="group-tabs" value={routeMatch?.pattern?.path}>
-            value={routeMatch?.pattern?.path}
-            aria-label={intl.formatMessage({
-              id: "groupTabs",
-              defaultMessage: "Group tabs",
-            })}
-          >
             {currentType === "Folder" ? (
-              <StyledTabBlue
+              <InnovenergyTab
-                sx={{ bgcolor: "#90A7C5" }}
                 id="styled-tab-folder"
                 label={intl.formatMessage({
                   id: "folder",
@@ -48,7 +38,7 @@ const GroupTabs = () => {
                 to={routes.folder + id}
               />
             ) : (
-              <StyledTabBlue
+              <InnovenergyTab
                 sx={{ bgcolor: "#90A7C5" }}
                 id="styled-tab-installation"
                 label={intl.formatMessage({
@@ -66,7 +56,7 @@ const GroupTabs = () => {
               />
             )}
 
-            <StyledTabBlue
+            <InnovenergyTab
               sx={{ bgcolor: "#90A7C5" }}
               id="styled-tab-manage-access"
               label={intl.formatMessage({
@@ -79,7 +69,7 @@ const GroupTabs = () => {
               component={Link}
               to={routes.manageAccess + id}
             />
-          </AntTabs>
+          </InnovenergyTabs>
         </Box>
       </Box>
     );

typescript/Frontend/src/components/Installations/InstallationTabs.tsx

@@ -4,14 +4,8 @@ import { Link } from "react-router-dom";
 import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
-import {
+import InnovenergyTab from "../Layout/InnovenergyTab";
-  AntTabs,
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";
-  StyledTab,
-  StyledTabBlue,
-  StyledTabWhite,
-} from "../../util/installation.util";
-import { colors } from "@mui/material";
-import { Background } from "reactflow";
 
 const InstallationTabs = () => {
   const routeMatch = useRouteMatch([
@@ -27,15 +21,11 @@ const InstallationTabs = () => {
     return (
       <Box sx={{ width: "100%" }}>
         <Box sx={{}}>
-          <AntTabs
+          <InnovenergyTabs
+            id="installation-tabs"
             value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
-            aria-label={intl.formatMessage({
-              id: "installationTabs",
-              defaultMessage: "Installation tabs",
-            })}
           >
-            <StyledTabBlue
+            <InnovenergyTab
-              sx={{ bgcolor: "#90A7C5" }}
               id={"installation-tab-installation"}
               label={intl.formatMessage({
                 id: "installation",
@@ -47,8 +37,7 @@ const InstallationTabs = () => {
               component={Link}
               to={routes.installation + id}
             />
-            <StyledTabWhite
+            <InnovenergyTab
-              sx={{ bgcolor: "#90A7C5" }}
               id={"installation-tab-liveView"}
               label={intl.formatMessage({
                 id: "liveView",
@@ -60,8 +49,7 @@ const InstallationTabs = () => {
               component={Link}
               to={routes.liveView + id}
             />
-            <StyledTab
+            <InnovenergyTab
-              sx={{ bgcolor: "#90A7C5" }}
               id={"installation-tab-log"}
               label={intl.formatMessage({
                 id: "log",
@@ -71,7 +59,7 @@ const InstallationTabs = () => {
               component={Link}
               to={routes.log + id}
             />
-          </AntTabs>
+          </InnovenergyTabs>
         </Box>
       </Box>
     );

typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx

@@ -7,7 +7,7 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import useRouteMatch from "../../../hooks/useRouteMatch";
 import routes from "../../../routes.json";
 import React from "react";
-import { blueGrey } from "@mui/material/colors";
+import "library.scss";
 
 export interface ToggleElement {
   [key: string]: boolean;
@@ -72,8 +72,11 @@ const CheckboxTree = () => {
             </>
           }
           sx={{
-            ".MuiTreeItem-content": { paddingY: "5px" },
+            ".MuiTreeItem-content": {
-            bgcolor: "#CCD6E4",
+              paddingY: "5px",
+              minHeight: "52px",
+            },
+            bgcolor: "$innovenergy-orange",
           }}
         >
           {getNodes(element)}

typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx

@@ -13,6 +13,7 @@ interface DateRangePickerProps {
   range: Date[];
   getCacheSeries: (xaxisRange0: Date, xaxisRange1: Date) => void;
 }
+
 const DateRangePicker = (props: DateRangePickerProps) => {
   const { setRange, range, getCacheSeries } = props;
 
@@ -45,6 +46,7 @@ const DateRangePicker = (props: DateRangePickerProps) => {
             }
           }}
         />
+
         <DatePicker
           disableFuture
           minDate={dayjs(range[0])}
@@ -54,6 +56,9 @@ const DateRangePicker = (props: DateRangePickerProps) => {
             ".Mui-disabled": {
               color: "red",
             },
+            ".MuiPickersDay-root .Mui-selected": {
+              backgroundColor: "red",
+            },
           }}
           onChange={(newValue) => {
             if (newValue) {

typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx

@@ -60,7 +60,7 @@ export const fetchData = (
 const ScalarGraph = () => {
   const timeRange = createTimes(
     UnixTime.now() /* .fromTicks(1682085650) */
-      .rangeBefore(TimeSpan.fromDays(1)),
+      .rangeBefore(TimeSpan.fromDays(5)),
     NUMBER_OF_NODES
   );
   const [timeSeries, setTimeSeries] = useState<RecordSeries>([]);

typescript/Frontend/src/components/Layout/InnovenergyTab.tsx

@@ -0,0 +1,41 @@
+import { styled, SxProps, Tab, Tabs, Theme, useTheme } from "@mui/material";
+import { TabProps } from "@mui/material/Tab/Tab";
+
+const InnovenergyTab = (props: any) => {
+  const theme = useTheme();
+  return (
+    <Tab
+      {...props}
+      disableRipple
+      sx={{
+        ...props.sx,
+        bottom: -1,
+        textTransform: "uppercase",
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.typography.pxToRem(14),
+        marginRight: theme.spacing(1),
+        background: "0 0",
+        border: "1px solid transparent",
+        borderTopLeftRadius: "0.3rem",
+        borderTopRightRadius: "0.3rem",
+        padding: ".5rem 1rem",
+        textDecoration: "none",
+        transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
+        "&.Mui-selected": {
+          color: "#000000",
+          backgroundColor: "#CCD6E4",
+          borderColor: "#90A7c5 #90A7c5 #F2F4F8",
+          marginTop: "1px",
+          bottom: -1,
+          ...(props.sx ? props.sx["&.Mui-selected"] : {}),
+        },
+        "&.Mui-focusVisible": {
+          backgroundColor: "rgba(100, 95, 228, 0.32)",
+          ...(props.sx ? props.sx["&.Mui-focusVisible"] : {}),
+        },
+      }}
+    />
+  );
+};
+
+export default InnovenergyTab;

typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx

@@ -0,0 +1,42 @@
+import { SxProps, Tabs, Theme } from "@mui/material";
+import { ReactNode } from "react";
+
+interface AntTabsProps {
+  id: string;
+  value?: string;
+  sx?: SxProps<Theme>;
+  children: ReactNode;
+}
+
+const InnovenergyTabs = (props: AntTabsProps) => {
+  return (
+    <Tabs
+      {...props}
+      sx={{
+        ...props.sx,
+        borderBottom: "1px solid #90A7c5",
+        overflow: "visible!important",
+        "& div.MuiTabs-scroller": {
+          overflow: "visible!important",
+        },
+        "&.Mui-selected": {
+          color: "#000000",
+          backgroundColor: "red",
+          borderColor: `#90A7c5 #90A7c5 #fff`,
+        },
+        "& .MuiTabs-indicator": {
+          display: "flex",
+          justifyContent: "center",
+          backgroundColor: "transparent",
+        },
+        "&.MuiTabs-root": {
+          width: "100%",
+        },
+      }}
+    >
+      {props.children}
+    </Tabs>
+  );
+};
+
+export default InnovenergyTabs;

typescript/Frontend/src/components/Layout/ModeButtons.tsx

@@ -13,23 +13,6 @@ const ModeButtons = () => {
 
   return (
     <>
-      {/*   <AntTabs
-        value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
-        aria-label="basic tabs example"
-      >
-        <StyledTab
-          icon={<ListIcon />}
-          value={routes.installations + routes.list + "*"}
-          component={Link}
-          to={routes.list}
-        />
-        <StyledTab
-          icon={<AccountTreeIcon />}
-          value={routes.installations + routes.tree + "*"}
-          component={Link}
-          to={routes.tree}
-        />
-      </AntTabs> */}
       <ToggleButtonGroup
         id="mode-button-group"
         color="primary"

typescript/Frontend/src/components/Layout/NavigationButtons.tsx

@@ -2,13 +2,8 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";
-import {
+import InnovenergyTab from "./InnovenergyTab";
-  AntTabs,
+import InnovenergyTabs from "./InnovenergyTabs";
-  AntTabsBig,
-  StyledTab,
-  StyledTabBig,
-} from "../../util/installation.util";
-import { Background } from "reactflow";
 
 const NavigationButtons = () => {
   const routeMatch = useRouteMatch([
@@ -19,37 +14,11 @@ const NavigationButtons = () => {
 
   return (
     <>
-      {/*   <ToggleButtonGroup
+      <InnovenergyTabs
-        color="primary"
+        id="navigation-buttons-tabs"
         value={routeMatch?.pattern?.path}
-        exclusive
-        sx={{ mb: 1 }}
-        fullWidth
       >
-        <ToggleButton
+        <InnovenergyTab
-          value={routes.installations + "*"}
-          component={Link}
-          to={routes.installations}
-        >
-          <FormattedMessage id="installations" defaultMessage="Installations" />
-        </ToggleButton>
-        <ToggleButton
-          value={routes.users + "*"}
-          component={Link}
-          to={routes.users}
-        >
-          <FormattedMessage id="users" defaultMessage="Users" />
-        </ToggleButton>
-      </ToggleButtonGroup> */}
-      <AntTabsBig
-        id="navigation-buttons-group"
-        value={routeMatch?.pattern?.path}
-        aria-label={intl.formatMessage({
-          id: "navigationTabs",
-          defaultMessage: "Navigation tabs",
-        })}
-      >
-        <StyledTabBig
           id="navigation-tab-installations"
           value={routes.installations + "*"}
           component={Link}
@@ -61,14 +30,14 @@ const NavigationButtons = () => {
             />
           }
         />
-        <StyledTabBig
+        <InnovenergyTab
           id="navigation-tab-users"
           value={routes.users + "*"}
           component={Link}
           to={routes.users}
           label={<FormattedMessage id="users" defaultMessage="Users" />}
         />
-      </AntTabsBig>
+      </InnovenergyTabs>
     </>
   );
 };

typescript/Frontend/src/components/Users/UserTabs.tsx

@@ -3,11 +3,8 @@ import { Link } from "react-router-dom";
 import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
-import {
+import InnovenergyTab from "../Layout/InnovenergyTab";
-  AntTabs,
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";
-  StyledTab,
-  StyledTabBlue,
-} from "../../util/installation.util";
 
 const UserTabs = () => {
   const routeMatch = useRouteMatch([routes.users + routes.user + ":id"]);
@@ -17,7 +14,7 @@ const UserTabs = () => {
 
   if (id) {
     return (
-      <AntTabs
+      <InnovenergyTabs
         id="users-tabs"
         value={routeMatch?.pattern?.path ?? routes.user + ":id"}
         aria-label={intl.formatMessage({
@@ -25,7 +22,7 @@ const UserTabs = () => {
           defaultMessage: "user tabs",
         })}
       >
-        <StyledTabBlue
+        <InnovenergyTab
           id="users-tab-user"
           label={intl.formatMessage({
             id: "user",
@@ -34,8 +31,13 @@ const UserTabs = () => {
           value={routes.users + routes.user + ":id"}
           component={Link}
           to={routes.user + id}
+          sx={{
+            "&.Mui-selected": {
+              backgroundColor: "#CCD6E4",
+            },
+          }}
         />
-      </AntTabs>
+      </InnovenergyTabs>
     );
   }
   return null;

typescript/Frontend/src/library.scss

@@ -0,0 +1 @@
+$innovenergy-orange: #F59100;

typescript/Frontend/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
     "target": "es5",
     "lib": [
       "dom",