diff --git a/typescript/Frontend/src/components/Groups/GroupTabs.tsx b/typescript/Frontend/src/components/Groups/GroupTabs.tsx
index 7bddabd7a..dd473d39b 100644
--- a/typescript/Frontend/src/components/Groups/GroupTabs.tsx
+++ b/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 {
- AntTabs,
- StyledTab,
- StyledTabBlue,
-} from "../../util/installation.util";
+import InnovenergyTab from "../Layout/InnovenergyTab";
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";
const GroupTabs = () => {
const routeMatch = useRouteMatch([
@@ -26,16 +23,9 @@ const GroupTabs = () => {
return (
-
+
{currentType === "Folder" ? (
- {
to={routes.folder + id}
/>
) : (
- {
/>
)}
- {
component={Link}
to={routes.manageAccess + id}
/>
-
+
);
diff --git a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
index 63a57e2b5..39ea23694 100644
--- a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
+++ b/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 {
- AntTabs,
- StyledTab,
- StyledTabBlue,
- StyledTabWhite,
-} from "../../util/installation.util";
-import { colors } from "@mui/material";
-import { Background } from "reactflow";
+import InnovenergyTab from "../Layout/InnovenergyTab";
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";
const InstallationTabs = () => {
const routeMatch = useRouteMatch([
@@ -27,15 +21,11 @@ const InstallationTabs = () => {
return (
-
- {
component={Link}
to={routes.installation + id}
/>
- {
component={Link}
to={routes.liveView + id}
/>
- {
component={Link}
to={routes.log + id}
/>
-
+
);
diff --git a/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx b/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx
index 06a43c33c..615aa40f9 100644
--- a/typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx
+++ b/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" },
- bgcolor: "#CCD6E4",
+ ".MuiTreeItem-content": {
+ paddingY: "5px",
+ minHeight: "52px",
+ },
+ bgcolor: "$innovenergy-orange",
}}
>
{getNodes(element)}
diff --git a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx
index e6fe2b1f1..c93da8de2 100644
--- a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx
+++ b/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) => {
}
}}
/>
+
{
".Mui-disabled": {
color: "red",
},
+ ".MuiPickersDay-root .Mui-selected": {
+ backgroundColor: "red",
+ },
}}
onChange={(newValue) => {
if (newValue) {
diff --git a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
index 89a559628..ec9836eb4 100644
--- a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
+++ b/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([]);
diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx
new file mode 100644
index 000000000..43a04815f
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default InnovenergyTab;
diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx
new file mode 100644
index 000000000..bf98f5510
--- /dev/null
+++ b/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;
+ children: ReactNode;
+}
+
+const InnovenergyTabs = (props: AntTabsProps) => {
+ return (
+
+ {props.children}
+
+ );
+};
+
+export default InnovenergyTabs;
diff --git a/typescript/Frontend/src/components/Layout/ModeButtons.tsx b/typescript/Frontend/src/components/Layout/ModeButtons.tsx
index f71e513a2..344f4efb5 100644
--- a/typescript/Frontend/src/components/Layout/ModeButtons.tsx
+++ b/typescript/Frontend/src/components/Layout/ModeButtons.tsx
@@ -13,23 +13,6 @@ const ModeButtons = () => {
return (
<>
- {/*
- }
- value={routes.installations + routes.list + "*"}
- component={Link}
- to={routes.list}
- />
- }
- value={routes.installations + routes.tree + "*"}
- component={Link}
- to={routes.tree}
- />
- */}
{
const routeMatch = useRouteMatch([
@@ -19,37 +14,11 @@ const NavigationButtons = () => {
return (
<>
- {/*
-
-
-
-
-
-
- */}
-
- {
/>
}
/>
- }
/>
-
+
>
);
};
diff --git a/typescript/Frontend/src/components/Users/UserTabs.tsx b/typescript/Frontend/src/components/Users/UserTabs.tsx
index 16d84292c..c2d60c5b4 100644
--- a/typescript/Frontend/src/components/Users/UserTabs.tsx
+++ b/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 {
- AntTabs,
- StyledTab,
- StyledTabBlue,
-} from "../../util/installation.util";
+import InnovenergyTab from "../Layout/InnovenergyTab";
+import InnovenergyTabs from "components/Layout/InnovenergyTabs";
const UserTabs = () => {
const routeMatch = useRouteMatch([routes.users + routes.user + ":id"]);
@@ -17,7 +14,7 @@ const UserTabs = () => {
if (id) {
return (
- {
defaultMessage: "user tabs",
})}
>
- {
value={routes.users + routes.user + ":id"}
component={Link}
to={routes.user + id}
+ sx={{
+ "&.Mui-selected": {
+ backgroundColor: "#CCD6E4",
+ },
+ }}
/>
-
+
);
}
return null;
diff --git a/typescript/Frontend/src/library.scss b/typescript/Frontend/src/library.scss
new file mode 100644
index 000000000..27a714e89
--- /dev/null
+++ b/typescript/Frontend/src/library.scss
@@ -0,0 +1 @@
+$innovenergy-orange: #F59100;
diff --git a/typescript/Frontend/tsconfig.json b/typescript/Frontend/tsconfig.json
index 423cb75a1..888329764 100644
--- a/typescript/Frontend/tsconfig.json
+++ b/typescript/Frontend/tsconfig.json
@@ -1,5 +1,6 @@
{
"compilerOptions": {
+ "baseUrl": "src",
"target": "es5",
"lib": [
"dom",