Version Bleu

typescript/Frontend/src/App.tsx

@@ -15,7 +15,7 @@ import NavigationButtons from "./components/Layout/NavigationButtons";
 import InstallationPage from "./components/Installations/InstallationPage";
 import { UserContext } from "./components/Context/UserContextProvider";
 import ResetPassword from "./ResetPassword";
-import innovenergyLogo from "./resources/innovenergy_Logo_onOrange-2.png(1).png";
+import innovenergyLogo from "./resources/test.gif";
 import { Background } from "reactflow";
 
 const App = () => {

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

@@ -88,6 +88,7 @@ const InstallationList = (props: InstallationListProps) => {
                 <ListItemButton
                   id={"installation-list-button-" + installation.id}
                   selected={installation.id === Number(routeMatch?.params.id)}
+                  disableRipple
                   sx={{
                     mr: "1px",
                     borderStyle: "solid",

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

@@ -66,6 +66,7 @@ const CheckboxTree = () => {
                 <Checkbox
                   checked={!!checked}
                   onClick={(e) => handleClick(e, element, checked)}
+                  color="info"
                 />
               )}
               {splitName[splitName.length - 1]}
@@ -86,19 +87,21 @@ const CheckboxTree = () => {
     <>
       {toggles !== null && routeMatch !== null && (
         <>
-          <Divider sx={{ mt: 2 }} />
           <TreeView
             defaultCollapseIcon={<ExpandMoreIcon />}
             defaultExpandIcon={<ChevronRightIcon />}
             sx={{
+              marginTop: 2,
               flexGrow: 100,
               overflow: "auto",
               overflowX: "hidden",
               position: ["sticky", "-webkit-sticky"],
               top: 1,
               maxHeight: "90vh",
-              borderBottomLeftRadius: 5,
-              borderBottomRightRadius: 5,
+              borderBottomLeftRadius: 7,
+              borderBottomRightRadius: 7,
+              borderTopLeftRadius: 7,
+              borderTopRightRadius: 7,
             }}
           >
             {renderTree(toggles)}

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

@@ -39,6 +39,19 @@ const DateRangePicker = (props: DateRangePickerProps) => {
           maxDate={dayjs(range[1])}
           label="From date"
           value={dayjs(range[0])}
+          sx={{
+            ".MuiInputLabel-root": {
+              color: "#2b3e54",
+            },
+
+            ".Mui-disabled": {
+              color: "red",
+            },
+            ".Mui-focused fieldset.MuiOutlinedInput-notchedOutline": {
+              borderColor: "#2b3e54",
+            },
+            marginRight: 5,
+          }}
           onChange={(newValue) => {
             if (newValue) {
               handleChange(newValue.toDate(), range[1]);
@@ -51,9 +64,16 @@ const DateRangePicker = (props: DateRangePickerProps) => {
           label="To date"
           value={dayjs(range[1])}
           sx={{
+            ".MuiInputLabel-root": {
+              color: "#2b3e54",
+            },
+
             ".Mui-disabled": {
               color: "red",
             },
+            ".Mui-focused fieldset.MuiOutlinedInput-notchedOutline": {
+              borderColor: "#2b3e54",
+            },
           }}
           onChange={(newValue) => {
             if (newValue) {

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

@@ -59,7 +59,7 @@ export const fetchData = (
 const ScalarGraph = () => {
   const timeRange = createTimes(
     UnixTime.now() /* .fromTicks(1682085650) */
-      .rangeBefore(TimeSpan.fromDays(1)),
+      .rangeBefore(TimeSpan.fromDays(4)),
     NUMBER_OF_NODES
   );
   const [timeSeries, setTimeSeries] = useState<RecordSeries>([]);
@@ -169,11 +169,10 @@ const ScalarGraph = () => {
     if (checkedToggles.length > 0) {
       const coordinateTimeSeries = transformToGraphData(timeSeries);
       const visibleGraphs = Object.keys(coordinateTimeSeries).filter((path) => {
-        console.log('checkedToggles',coordinateTimeSeries, checkedToggles)
-            return checkedToggles.find((toggle) => toggle === path)
-          }
-      );
-      console.log('visibleGraphs', visibleGraphs)
+        console.log("checkedToggles", coordinateTimeSeries, checkedToggles);
+        return checkedToggles.find((toggle) => toggle === path);
+      });
+      console.log("visibleGraphs", visibleGraphs);
       if (visibleGraphs.length > 0) {
         return (
           <div style={{ marginTop: "20px" }}>

typescript/Frontend/src/index.tsx

@@ -11,6 +11,13 @@ const root = ReactDOM.createRoot(
 );
 
 const theme = createTheme({
+  components: {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+  },
   palette: {
     text: {
       primary: "#2b3e54",
@@ -28,6 +35,7 @@ const theme = createTheme({
       main: "#90a7c5",
     },
   },
+
   typography: {
     fontFamily: `"Ubuntu", sans-serif`,
     fontWeightRegular: 300,