Color

typescript/Frontend/src/Login.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { Alert, CircularProgress, Grid } from "@mui/material";
+import { Alert, CircularProgress, Grid, useTheme } from "@mui/material";
 import Container from "@mui/material/Container";
 import { axiosConfigWithoutToken } from "./config/axiosConfig";
 import InnovenergyTextfield from "./components/Layout/InnovenergyTextfield";
@@ -23,6 +23,7 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   const { saveCurrentUser } = useContext(UserContext);
+  const theme = useTheme();
 
   const verifyToken = async (token: string) => {
     axiosConfigWithoutToken.get("/GetAllInstallations", {
@@ -80,7 +81,7 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => {
           Login
         </InnovenergyButton>
       </Grid>
-      {loading && <CircularProgress color="secondary" />}
+      {loading && <CircularProgress sx={{color: theme.palette.secondary.dark}} />}
     </Container>
   );
 };

typescript/Frontend/src/ResetPassword.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { Alert, CircularProgress, Grid, Typography } from "@mui/material";
+import { Alert, CircularProgress, Grid, Typography, useTheme } from "@mui/material";
 import Container from "@mui/material/Container";
 import axiosConfig from "./config/axiosConfig";
 import InnovenergyTextfield from "./components/Layout/InnovenergyTextfield";
@@ -20,6 +20,7 @@ const ResetPassword = () => {
       .oneOf([Yup.ref("password")], "Passwords must match")
       .required(),
   });
+  const theme = useTheme();
 
   const formik = useFormik({
     initialValues: {
@@ -42,6 +43,7 @@ const ResetPassword = () => {
   });
 
   return (
+    
     <Container maxWidth="sm" sx={{ p: 2, alignContent: "center" }}>
       <Typography variant="h6" marginBottom="20px" textAlign="center">
         Change password
@@ -72,7 +74,7 @@ const ResetPassword = () => {
             Submit
           </InnovenergyButton>
         </Grid>
-        {loading && <CircularProgress color="secondary" />}
+        {loading && <CircularProgress sx={{color: theme.palette.secondary.dark}}/>}
       </form>
     </Container>
   );

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

@@ -6,6 +6,7 @@ import UsersWithDirectAccess from "./UsersWithDirectAccess";
 import UsersWithInheritedAccess from "./UsersWithInheritedAccess";
 import { useContext } from "react";
 import { UserContext } from "../../Context/UserContextProvider";
+import { colors } from "../../..";
 
 const AccessManagement = () => {
   const { getCurrentUser } = useContext(UserContext);
@@ -13,7 +14,7 @@ const AccessManagement = () => {
   return (
     <UsersContextProvider>
       <Grid container sx={{ mt: 0 }}>
-        <Grid item xs={60} bgcolor={"#CCD6E4"}>
+        <Grid item xs={60} bgcolor={colors.greyDark}>
           {getCurrentUser().hasWriteAccess && <AvailableUserDialog />}
           <InnovenergyList id="access-management-list">
             <UsersWithDirectAccess />

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

@@ -1,4 +1,4 @@
-import { Box, CircularProgress, Alert } from "@mui/material";
+import { Box, CircularProgress, Alert, useTheme } from "@mui/material";
 import { AxiosError } from "axios";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
@@ -7,6 +7,7 @@ import { I_Folder } from "../../util/types";
 import AddNewDialog from "./AddNewDialog";
 import FolderForm from "./FolderForm";
 import MoveDialog from "./Tree/MoveDialog";
+import { colors } from "/home/ig/code/git_trunk/typescript/Frontend/src/index";
 
 const Folder = () => {
   const { id } = useParams();
@@ -31,6 +32,7 @@ const Folder = () => {
   const handleSubmit = (data: I_Folder, formikValues: Partial<I_Folder>) => {
     return axiosConfig.put("/UpdateFolder", { ...data, ...formikValues });
   };
+  const theme = useTheme();
 
   if (values && values.id && values.id.toString() === id) {
     const moveDialog = <MoveDialog values={values} />;
@@ -41,7 +43,7 @@ const Folder = () => {
         <Box
           sx={{
             py: 3,
-            bgcolor: "#CCD6E4",
+            bgcolor: colors.greyDark,
             px: 1,
             borderBottom: 1,
             borderRight: 1,
@@ -51,7 +53,7 @@ const Folder = () => {
             WebkitBorderTopRightRadius: 0,
             borderBottomLeftRadius: 4,
             borderBottomRightRadius: 4,
-            borderColor: "#90a7c5",
+            borderColor: colors.greyLight,
             marginTop: 0.05,
           }}
         >
@@ -68,7 +70,7 @@ const Folder = () => {
       <Box
         sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
       >
-        <CircularProgress sx={{ m: 2 }} color="secondary" />
+        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.dark}} />
       </Box>
     );
   } else if (error) {

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

@@ -1,4 +1,4 @@
-import { CircularProgress, Grid } from "@mui/material";
+import { CircularProgress, Grid, useTheme } from "@mui/material";
 import { AxiosResponse } from "axios";
 import { useFormik } from "formik";
 import { ReactNode, useContext, useState } from "react";
@@ -52,6 +52,7 @@ const FolderForm = (props: I_CustomerFormProps) => {
         });
     },
   });
+  const theme = useTheme();
 
   return (
     <>
@@ -79,7 +80,7 @@ const FolderForm = (props: I_CustomerFormProps) => {
           handleChange={formik.handleChange}
         />
         <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
-          {loading && <CircularProgress color="secondary" />}
+          {loading && <CircularProgress sx={{color: theme.palette.secondary.dark}} />}
           {!readOnly &&
             additionalButtons &&
             additionalButtons.map((button) => button)}

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

@@ -10,6 +10,7 @@ import {
   StyledTab,
   StyledTabBlue,
 } from "../../util/installation.util";
+import { colors } from "../..";
 
 const GroupTabs = () => {
   const routeMatch = useRouteMatch([
@@ -35,7 +36,6 @@ const GroupTabs = () => {
           >
             {currentType === "Folder" ? (
               <StyledTabBlue
-                sx={{ bgcolor: "#90A7C5" }}
                 id="styled-tab-folder"
                 label={intl.formatMessage({
                   id: "folder",
@@ -49,7 +49,6 @@ const GroupTabs = () => {
               />
             ) : (
               <StyledTabBlue
-                sx={{ bgcolor: "#90A7C5" }}
                 id="styled-tab-installation"
                 label={intl.formatMessage({
                   id: "installation",
@@ -67,7 +66,7 @@ const GroupTabs = () => {
             )}
 
             <StyledTabBlue
-              sx={{ bgcolor: "#90A7C5" }}
+              sx={{ bgcolor: colors.greyLight }}
               id="styled-tab-manage-access"
               label={intl.formatMessage({
                 id: "manageAccess",

typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx

@@ -8,8 +8,9 @@ import { Link } from "react-router-dom";
 import routes from "../../../routes.json";
 import { GroupContext } from "../../Context/GroupContextProvider";
 import { instanceOfFolder } from "../../../util/group.util";
-import { Grid, CircularProgress } from "@mui/material";
+import { Grid, CircularProgress, useTheme } from "@mui/material";
 import { useIntl } from "react-intl";
+import { colors } from "../../..";
 
 const GroupTree = () => {
   const { setCurrentType, fetchData, data, loading } = useContext(GroupContext);
@@ -27,6 +28,7 @@ const GroupTree = () => {
     }
     return null;
   };
+  const theme = useTheme();
 
   const renderTree = (data: (I_Folder | I_Installation)[]): ReactNode => {
     return data.map((element) => {
@@ -53,7 +55,7 @@ const GroupTree = () => {
             onClick={() => setCurrentType(element.type)}
             sx={{
               ".MuiTreeItem-content": { paddingY: "12px" },
-              bgcolor: "#CCD6E4",
+              bgcolor: colors.greyDark,
               borderRadius: 2,
             }}
           >
@@ -66,7 +68,7 @@ const GroupTree = () => {
   if (loading) {
     return (
       <Grid container justifyContent="center" width="100%">
-        <CircularProgress color="secondary" />
+        <CircularProgress sx={{color: theme.palette.secondary.dark}} />
       </Grid>
     );
   }

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

@@ -1,10 +1,11 @@
-import { Alert, Box, CircularProgress } from "@mui/material";
+import { Alert, Box, CircularProgress, useTheme } from "@mui/material";
 import { AxiosError } from "axios";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import axiosConfig from "../../config/axiosConfig";
 import { I_Installation } from "../../util/types";
 import InstallationForm from "./InstallationForm";
+import { colors } from "../..";
 
 interface I_InstallationProps {
   hasMoveButton?: boolean;
@@ -14,6 +15,7 @@ const Installation = (props: I_InstallationProps) => {
   const [values, setValues] = useState<I_Installation>();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<AxiosError>();
+  const theme = useTheme();
 
   useEffect(() => {
     setLoading(true);
@@ -34,7 +36,7 @@ const Installation = (props: I_InstallationProps) => {
       <Box
         sx={{
           py: 3,
-          bgcolor: "#CCD6E4",
+          bgcolor: colors.greyDark,
           px: 1,
           borderLeft: 1,
           borderRight: 1,
@@ -43,7 +45,7 @@ const Installation = (props: I_InstallationProps) => {
           WebkitBorderTopRightRadius: 0,
           borderBottomLeftRadius: 4,
           borderBottomRightRadius: 4,
-          borderColor: "#90a7c5",
+          borderColor: colors.greyLight,
           marginTop: 0.05,
         }}
       >
@@ -59,7 +61,7 @@ const Installation = (props: I_InstallationProps) => {
       <Box
         sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
       >
-        <CircularProgress sx={{ m: 2 }} color="secondary" />
+        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.dark}}/>
       </Box>
     );
   } else if (error) {

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

@@ -1,13 +1,14 @@
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
-import { Alert, CircularProgress, Divider, Grid } from "@mui/material";
+import { Alert, CircularProgress, Divider, Grid, useTheme } from "@mui/material";
 import { Link } from "react-router-dom";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";
 import { Fragment, useContext, useEffect } from "react";
 import { I_Installation } from "../../util/types";
 import { InstallationContext } from "../Context/InstallationContextProvider";
+import { colors } from "../..";
 
 interface InstallationListProps {
   searchQuery: string;
@@ -44,8 +45,12 @@ const InstallationList = (props: InstallationListProps) => {
     routes.installations + routes.list + routes.installation + ":id",
     routes.installations + routes.list + routes.liveView + ":id",
     routes.installations + routes.list + routes.log + ":id",
+    
   ]);
   
+  const theme = useTheme();
+
+
   useEffect(() => {
     fetchData();
   }, [fetchData]);
@@ -53,7 +58,7 @@ const InstallationList = (props: InstallationListProps) => {
   if (loading) {
     return (
       <Grid container justifyContent="center" width="100%">
-        <CircularProgress sx={{ m: 6 }} color="secondary" />
+        <CircularProgress sx={{ m: 6, color: theme.palette.secondary.dark }} />
       </Grid>
     );
   } else if (data && data.length) {
@@ -83,7 +88,7 @@ const InstallationList = (props: InstallationListProps) => {
                 to={
                   getPathWithoutId(routeMatch?.pattern?.path) + installation.id
                 }
-                style={{ textDecoration: "none", color: "#2b3e54" }}
+                style={{ textDecoration: "none", color: colors.black }}
               >
                 <ListItemButton
                   id={"installation-list-button-" + installation.id}
@@ -92,15 +97,15 @@ const InstallationList = (props: InstallationListProps) => {
                   sx={{
                     mr: "1px",
                     borderStyle: "solid",
-                    backgroundColor: "#577ba840",
+                    backgroundColor: theme.palette.primary.dark,
                     "&.Mui-selected": {
-                      backgroundColor: "#90A7C5",
+                      backgroundColor: colors.orangeSelected,
                     },
                     ":hover": {
-                      backgroundColor: "#AFC0D5",
+                      backgroundColor: colors.orangeHover,
                     },
                     "&.Mui-selected:hover": {
-                      backgroundColor: "#90A7C5",
+                      backgroundColor: colors.orangeSelected,
                     },
                   }}
                 >

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

@@ -10,8 +10,8 @@ import {
   StyledTabBlue,
   StyledTabWhite,
 } from "../../util/installation.util";
-import { colors } from "@mui/material";
 import { Background } from "reactflow";
+import {colors} from '/home/ig/code/git_trunk/typescript/Frontend/src/index';
 
 const InstallationTabs = () => {
   const routeMatch = useRouteMatch([
@@ -35,7 +35,7 @@ const InstallationTabs = () => {
             })}
           >
             <StyledTabBlue
-              sx={{ bgcolor: "#90A7C5" }}
+              sx={{ bgcolor: colors }}
               id={"installation-tab-installation"}
               label={intl.formatMessage({
                 id: "installation",
@@ -48,7 +48,7 @@ const InstallationTabs = () => {
               to={routes.installation + id}
             />
             <StyledTabWhite
-              sx={{ bgcolor: "#90A7C5" }}
+              sx={{ bgcolor: colors.greyLight}}
               id={"installation-tab-liveView"}
               label={intl.formatMessage({
                 id: "liveView",
@@ -61,7 +61,7 @@ const InstallationTabs = () => {
               to={routes.liveView + id}
             />
             <StyledTab
-              sx={{ bgcolor: "#90A7C5" }}
+              sx={{ bgcolor: colors.greyLight }}
               id={"installation-tab-log"}
               label={intl.formatMessage({
                 id: "log",

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

@@ -1,5 +1,5 @@
 import { TreeItem, TreeView } from "@mui/lab";
-import { Checkbox, Divider, colors } from "@mui/material";
+import { Checkbox, Divider, useTheme } from "@mui/material";
 import { useContext, ReactNode } from "react";
 import { LogContext } from "../../Context/LogContextProvider";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@@ -8,6 +8,7 @@ import useRouteMatch from "../../../hooks/useRouteMatch";
 import routes from "../../../routes.json";
 import React from "react";
 import { blueGrey } from "@mui/material/colors";
+import {colors} from "/home/ig/code/git_trunk/typescript/Frontend/src/index";
 
 export interface ToggleElement {
   [key: string]: boolean;
@@ -49,7 +50,7 @@ const CheckboxTree = () => {
   ) => {
     event.stopPropagation();
   };
-
+  const theme = useTheme();
   const renderTree = (data: TreeElement[]): ReactNode => {
     return data.map((element) => {
       const checked = checkedToggles.find((toggle) => element.id === toggle);
@@ -66,7 +67,10 @@ const CheckboxTree = () => {
                 <Checkbox
                   checked={!!checked}
                   onClick={(e) => handleClick(e, element, checked)}
-                  color="info"
+                  style ={{
+                    color: theme.palette.text.primary   ,
+                  }}
+
                 />
               )}
               {splitName[splitName.length - 1]}
@@ -74,7 +78,7 @@ const CheckboxTree = () => {
           }
           sx={{
             ".MuiTreeItem-content": { paddingY: "5px" },
-            bgcolor: "#CCD6E4",
+            bgcolor: colors.greyDark,
           }}
         >
           {getNodes(element)}

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

@@ -6,7 +6,8 @@ import { FormattedMessage } from "react-intl";
 import ShortcutButton from "./ShortcutButton";
 import { createTimes } from "../../../util/graph.util";
 import { TimeRange, UnixTime } from "../../../dataCache/time";
-import { TextField } from "@mui/material";
+import { TextField, useTheme } from "@mui/material";
+import { colors } from "../../..";
 
 interface DateRangePickerProps {
   setRange: (value: Date[]) => void;
@@ -14,6 +15,7 @@ interface DateRangePickerProps {
   getCacheSeries: (xaxisRange0: Date, xaxisRange1: Date) => void;
 }
 const DateRangePicker = (props: DateRangePickerProps) => {
+  const theme = useTheme();
   const { setRange, range, getCacheSeries } = props;
 
   const handleChange = (fromDate: Date, toDate: Date) => {
@@ -41,14 +43,14 @@ const DateRangePicker = (props: DateRangePickerProps) => {
           value={dayjs(range[0])}
           sx={{
             ".MuiInputLabel-root": {
-              color: "#2b3e54",
+              color: colors.black,
             },
 
             ".Mui-disabled": {
               color: "red",
             },
             ".Mui-focused fieldset.MuiOutlinedInput-notchedOutline": {
-              borderColor: "#2b3e54",
+              borderColor: theme.palette.secondary.main,
             },
             marginRight: 5,
           }}
@@ -65,15 +67,14 @@ const DateRangePicker = (props: DateRangePickerProps) => {
           value={dayjs(range[1])}
           sx={{
             ".MuiInputLabel-root": {
-              color: "#2b3e54",
+              color: colors.black,
             },
 
             ".Mui-disabled": {
               color: "red",
             },
             ".Mui-focused fieldset.MuiOutlinedInput-notchedOutline": {
-              borderColor: "#2b3e54",
+              borderColor: theme.palette.secondary.main,            },
-            },
           }}
           onChange={(newValue) => {
             if (newValue) {

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

@@ -21,7 +21,7 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { FormattedMessage } from "react-intl";
 import DateRangePicker from "./DateRangePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers";
-import { Alert } from "@mui/material";
+import { Alert, useTheme } from "@mui/material";
 
 const NUMBER_OF_NODES = 100;
 
@@ -167,6 +167,8 @@ const ScalarGraph = () => {
     [getCacheSeries]
   );
 
+
+  const theme = useTheme();
   const renderGraphs = () => {
     if (checkedToggles.length > 0) {
       const coordinateTimeSeries = transformToGraphData(timeSeries);
@@ -243,7 +245,7 @@ const ScalarGraph = () => {
       }
     }
     return (
-      <Alert sx={{ mt: 2 }} severity="info">
+      <Alert sx={{ mt: 2, bgcolor: theme.palette.primary.dark, color: theme.palette.text.primary}}>
         <FormattedMessage
           id="makeASelection"
           defaultMessage="Please make a selection on the left"

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

@@ -1,4 +1,4 @@
-import { Alert, Box } from "@mui/material";
+import { Alert, Box, useTheme } from "@mui/material";
 import TopologyColumn from "./TopologyColumn";
 import { TimeSpan, UnixTime } from "../../../dataCache/time";
 import {
@@ -11,6 +11,8 @@ import { fetchData } from "./ScalarGraph";
 import { useEffect, useState } from "react";
 import { FetchResult } from "../../../dataCache/dataCache";
 import { FormattedMessage } from "react-intl";
+import { colors } from "../../..";
+import { error } from "console";
 
 const TopologyView = () => {
   const [values, setValues] = useState<TopologyValues | null>(null);
@@ -37,6 +39,7 @@ const TopologyView = () => {
 
     return () => clearInterval(interval);
   }, []);
+  const theme = useTheme();
 
   if (values) {
     const highestConnectionValue = getHighestConnectionValue(values);
@@ -54,7 +57,7 @@ const TopologyView = () => {
           WebkitBorderTopRightRadius: 0,
           borderBottomLeftRadius: 4,
           borderBottomRightRadius: 4,
-          borderColor: "#CCD6E4",
+          borderColor: colors.greyDark,
           borderTopColor: "white",
           marginTop: 0.05,
           fontFamily: `"Ubuntu", sans-serif`,
@@ -222,7 +225,7 @@ const TopologyView = () => {
     );
   }
   return (
-    <Alert severity="info" sx={{ mt: 1 }}>
+    <Alert sx={{ mt: 1, bgcolor: theme.palette.primary.dark, color: theme.palette.text.primary }} severity="error" color="warning">
       <FormattedMessage
         id="noData"
         defaultMessage="Couldn't find any live data"

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

@@ -1,4 +1,4 @@
-import { Box, CircularProgress, Alert } from "@mui/material";
+import { Box, CircularProgress, Alert, useTheme } from "@mui/material";
 import { AxiosError } from "axios";
 import { useState, useEffect, FC } from "react";
 import { useParams } from "react-router-dom";
@@ -33,6 +33,7 @@ const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
         setLoading(false);
       });
   }, [id, route]);
+  const theme = useTheme();
 
   if (values && values.id && values.id.toString() === id) {
     return (
@@ -43,7 +44,7 @@ const Detail = <T extends { id: number }>(props: I_DetailProps<T>) => {
       <Box
         sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
       >
-        <CircularProgress sx={{ m: 2 }} color="secondary" />
+        <CircularProgress sx={{ m: 2, color: theme.palette.secondary.dark }} />
       </Box>
     );
   } else if (error) {

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

@@ -1,4 +1,4 @@
-import { Button, SxProps, Theme, colors } from "@mui/material";
+import { Button, SxProps, Theme, colors, useTheme } from "@mui/material";
 import { DAY_MARGIN } from "@mui/x-date-pickers/internals";
 import { ReactNode } from "react";
 import { Background } from "reactflow";
@@ -12,18 +12,20 @@ interface I_InnovenergyButtonProps {
 }
 
 const InnovenergyButton = (props: I_InnovenergyButtonProps) => {
+  const theme = useTheme();
   return (
     <Button
-      color="secondary"
       id={props.id}
       variant="contained"
       type={props.type}
       onClick={props.onClick}
-      sx={props.sx}
+      sx={{...props.sx, bgcolor: theme.palette.secondary.main}}
     >
       {props.children}
     </Button>
   );
 };
 
+
 export default InnovenergyButton;
+

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

@@ -1,4 +1,4 @@
-import { Grid, InputLabel, TextField } from "@mui/material";
+import { Grid, InputLabel, TextField, useTheme } from "@mui/material";
 
 interface I_InnovenergyTextfieldProps {
   id: string;
@@ -14,6 +14,7 @@ interface I_InnovenergyTextfieldProps {
 }
 
 const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
+  const theme = useTheme();
   return (
     <Grid container direction="row" alignItems="center" spacing={2}>
       <Grid item xs={3}>
@@ -21,7 +22,7 @@ const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
       </Grid>
       <Grid item xs={9}>
         <TextField
-          color="info"
+          color="secondary"  
           id={props.id}
           variant="outlined"
           name={props.name}

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

@@ -8,7 +8,7 @@ interface LanguageSelectProps {
 const LanguageSelect = (props: LanguageSelectProps) => {
   return (
     <Select
-      color="info"
+      color="secondary"
       id="language-select"
       value={props.language}
       label="Age"

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

@@ -2,6 +2,7 @@ import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import axiosConfig from "../../config/axiosConfig";
 import InnovenergyButton from "./InnovenergyButton";
+import {colors} from "/home/ig/code/git_trunk/typescript/Frontend/src/index"
 
 interface LogoutButtonProps {
   removeToken: () => void;
@@ -18,7 +19,7 @@ const LogoutButton = (props: LogoutButtonProps) => {
           props.removeToken();
         });
       }}
-      sx={{ mx: 1 }}
+      sx={{ mx: 1, bgcolor: colors.orangeSelected }}
     >
       <FormattedMessage id="logout" defaultMessage="Logout" />
     </InnovenergyButton>

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

@@ -3,12 +3,14 @@ import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";
 import ListIcon from "@mui/icons-material/List";
 import AccountTreeIcon from "@mui/icons-material/AccountTree";
-import { ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { ToggleButtonGroup, ToggleButton, useTheme } from "@mui/material";
 
 const ModeButtons = () => {
+  const theme = useTheme();
   const routeMatch = useRouteMatch([
     routes.installations + routes.tree + "*",
     routes.installations + routes.list + "*",
+
   ]);
 
   return (
@@ -35,20 +37,21 @@ const ModeButtons = () => {
         color="primary"
         value={routeMatch?.pattern?.path}
         exclusive
-        sx={{ mb: 1 }}
+        sx={{ mb: 1, bgcolor: theme.palette.primary.main,}}
         size="small"
       >
         <ToggleButton
-          color="info"
+          color="secondary"
           id="mode-toggle-button-list"
           value={routes.installations + routes.list + "*"}
           component={Link}
           to={routes.list}
+
         >
           <ListIcon id="mode-toggle-button-list-icon" />
         </ToggleButton>
         <ToggleButton
-          color="info"
+          color="secondary"
           id="mode-toggle-button-tree"
           value={routes.installations + routes.tree + "*"}
           component={Link}

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

@@ -5,6 +5,7 @@ import {
   alpha,
   colors,
   styled,
+  useTheme,
 } from "@mui/material";
 import { FC, useState } from "react";
 import { useIntl } from "react-intl";
@@ -14,37 +15,46 @@ interface SearchSidebarProps {
   id: string;
   height?: string;
 }
+
 const SearchInputTextfield = styled((props: TextFieldProps) => (
   <TextField
     InputProps={{ disableUnderline: true } as Partial<OutlinedInputProps>}
     {...props}
   />
+  
 ))(({ theme }) => ({
   "& .MuiFilledInput-root": {
     overflow: "hidden",
     borderRadius: 4,
-    backgroundColor: "#577ba840",
+    backgroundColor: theme.palette.primary.dark,
-    border: "1px solid",
+    border: "2px solid",
-    borderColor: "#577ba840",
+    borderColor: theme.palette.primary.dark,
+
     transition: theme.transitions.create([
       "border-color",
       "background-color",
       "box-shadow",
     ]),
+
     "&:hover": {
-      backgroundColor: "#577ba840",
+      backgroundColor: theme.palette.primary.dark,
     },
     "&.Mui-focused": {
-      backgroundColor: "#AFCOD5",
+
-      borderColor: "#577ba840",
+      backgroundColor: theme.palette.primary.dark,
-      color: "info",
+      borderColor: theme.palette.secondary.main,
     },
+
   },
 }));
+
 const SearchSidebar = (props: SearchSidebarProps) => {
   const { listComponent: ListComponent, id, height } = props;
   const [searchQuery, setSearchQuery] = useState("");
   const intl = useIntl();
+  const theme = useTheme();
+
+  
 
   return (
     <div style={{ height: height ?? "750px", overflow: "hidden" }}>
@@ -62,6 +72,10 @@ const SearchSidebar = (props: SearchSidebarProps) => {
         onChange={(e) => setSearchQuery(e.target.value)}
       /> */}
       <SearchInputTextfield
+        sx={{    
+          ".MuiInputLabel-root" :{
+          color: theme.palette.text.primary
+        }}}
         id={id}
         variant="filled"
         onChange={(e) => setSearchQuery(e.target.value)}
@@ -71,7 +85,6 @@ const SearchSidebar = (props: SearchSidebarProps) => {
           id: "search",
           defaultMessage: "Search",
         })}
-        color="info"
         type="search"
       />
       <ListComponent searchQuery={searchQuery} />

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

@@ -1,4 +1,4 @@
-import { Box, CircularProgress, Alert } from "@mui/material";
+import { Box, CircularProgress, Alert, collapseClasses, useTheme } from "@mui/material";
 import { AxiosError } from "axios";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
@@ -6,6 +6,7 @@ import axiosConfig from "../../config/axiosConfig";
 import { I_User } from "../../util/user.util";
 import UserForm from "./UserForm";
 import { useIntl } from "react-intl";
+import { colors } from "../..";
 
 interface I_DetailProps {
   hasMoveButton?: boolean;
@@ -39,13 +40,14 @@ const Detail = (props: I_DetailProps) => {
       language: locale,
     });
   };
+  const theme = useTheme();
 
   if (values && values.id && values.id.toString() === id) {
     return (
       <Box
         sx={{
           py: 3,
-          bgcolor: "#CCD6E4",
+          bgcolor: colors.greyDark,
           px: 1,
           borderBottom: 1,
           borderRight: 1,
@@ -55,7 +57,7 @@ const Detail = (props: I_DetailProps) => {
           WebkitBorderTopRightRadius: 0,
           borderBottomLeftRadius: 4,
           borderBottomRightRadius: 4,
-          borderColor: "#90a7c5",
+          borderColor: colors.greyLight,
         }}
       >
         <UserForm values={values} handleSubmit={handleUpdate} />
@@ -66,7 +68,7 @@ const Detail = (props: I_DetailProps) => {
       <Box
         sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
       >
-        <CircularProgress sx={{ m: 2 }} color="secondary" />
+        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.dark}} />
       </Box>
     );
   } else if (error) {

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

@@ -1,4 +1,4 @@
-import { Alert, CircularProgress, Grid, Snackbar } from "@mui/material";
+import { Alert, CircularProgress, Grid, Snackbar, useTheme } from "@mui/material";
 import { AxiosError, AxiosResponse } from "axios";
 import { useFormik } from "formik";
 import { useContext, useState } from "react";
@@ -25,6 +25,7 @@ const UserForm = (props: I_UserFormProps) => {
 
   const currentUser = getCurrentUser();
   const readOnly = !currentUser.hasWriteAccess;
+  const theme = useTheme();
 
   const formik = useFormik({
     initialValues: {
@@ -88,7 +89,7 @@ const UserForm = (props: I_UserFormProps) => {
         disabled={readOnly}
       />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
-        {loading && <CircularProgress color="secondary" />}
+        {loading && <CircularProgress sx={{color: theme.palette.secondary.dark}} />}
         {currentUser.hasWriteAccess && (
           <InnovenergyButton type="submit">
             <FormattedMessage id="submit" defaultMessage="Submit" />

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

@@ -1,13 +1,14 @@
 import List from "@mui/material/List";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
-import { Divider } from "@mui/material";
+import { Divider, useTheme } from "@mui/material";
 import { Link } from "react-router-dom";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";
 import { Fragment, useContext } from "react";
 import { UsersContext } from "../Context/UsersContextProvider";
 import { I_User } from "../../util/user.util";
+import { colors } from "../..";
 
 const getPathWithoutId = (path?: string) => {
   if (path) {
@@ -35,6 +36,7 @@ const UserList = (props: UserListProps) => {
   const filteredData = filterData(props.searchQuery, availableUsers);
 
   const routeMatch = useRouteMatch([routes.users + routes.user + ":id"]);
+  const theme = useTheme();
 
   if (filteredData && filteredData.length) {
     return (
@@ -44,7 +46,6 @@ const UserList = (props: UserListProps) => {
           bgcolor: "background.paper",
           position: "relative",
           overflow: "auto",
-          maxHeight: 400,
           py: 0,
           mt: 1,
         }}
@@ -63,15 +64,15 @@ const UserList = (props: UserListProps) => {
                   sx={{
                     mr: "1px",
                     borderStyle: "solid",
-                    backgroundColor: "#577ba840",
+                    backgroundColor: theme.palette.primary.dark,
                     "&.Mui-selected": {
-                      backgroundColor: "#90A7C5",
+                      backgroundColor: colors.orangeSelected,
                     },
                     ":hover": {
-                      backgroundColor: "#AFC0D5",
+                      backgroundColor: colors.orangeHover,
                     },
                     "&.Mui-selected:hover": {
-                      backgroundColor: "#90A7C5",
+                      backgroundColor: colors.orangeSelected,
                     },
                   }}
                 >

typescript/Frontend/src/index.css

@@ -13,6 +13,6 @@ code {
 }
 body {
 
-  background-color: #F2F4F8;
+  background-color: #f3f4f8;
   
   } 

typescript/Frontend/src/index.tsx

@@ -5,11 +5,21 @@ import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { createTheme, ThemeProvider } from "@mui/material";
 import UserContextProvider from "./components/Context/UserContextProvider";
+import { orange } from "@mui/material/colors";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 
+export const colors = {
+  black: '#2b3e54',
+  fond: '#f3f4f7',
+  greyDark: '#d1d7de',
+  greyLight:'#e1e4e7',
+  orangeSelected: '#ffd280',
+  orangeHover: '#ffe4b3',
+}
+
 const theme = createTheme({
   components: {
     MuiButtonBase: {
@@ -20,22 +30,21 @@ const theme = createTheme({
   },
   palette: {
     text: {
-      primary: "#2b3e54",
+      primary: colors.black,
       secondary: "#000000",
       disabled: "#000000",
     },
+    primary: {
+      main: colors.fond,
+      light: colors.greyLight,
+      dark: colors.greyDark,
+    },
     secondary: {
-      main: "#90A7C5",
+      main: colors.orangeSelected,
-      dark: "#CCD6E4",
+      light: colors.orangeHover,
     },
-    info: {
-      main: "#2b3e54",
-    },
-    warning: {
-      main: "#90a7c5",
-    },
-  },
     
+  },
   typography: {
     fontFamily: `"Ubuntu", sans-serif`,
     fontWeightRegular: 300,

typescript/Frontend/src/util/installation.util.tsx

@@ -22,9 +22,6 @@ export const StyledTab = styled((props: any) => (
     marginTop: "1px",
     bottom: -1,
   },
-  "&.Mui-focusVisible": {
-    backgroundColor: "rgba(100, 95, 228, 0.32)",
-  },
 }));
 
 export const StyledTabBlue = styled((props: any) => (
@@ -50,9 +47,7 @@ export const StyledTabBlue = styled((props: any) => (
     borderColor: "#90A7c5  #90A7c5 #CCD6E4",
     marginTop: "1px",
   },
-  "&.Mui-focusVisible": {
+
-    backgroundColor: "rgba(100, 95, 228, 0.32)",
-  },
 }));
 
 export const StyledTabBig = styled((props: any) => (
@@ -78,9 +73,7 @@ export const StyledTabBig = styled((props: any) => (
     marginTop: "1px",
     bottom: -2,
   },
-  "&.Mui-focusVisible": {
+
-    backgroundColor: "rgba(100, 95, 228, 0.32)",
-  },
 }));
 
 export const StyledTabWhite = styled((props: any) => (
@@ -105,9 +98,7 @@ export const StyledTabWhite = styled((props: any) => (
     marginTop: "1px",
     bottom: -1,
   },
-  "&.Mui-focusVisible": {
+  
-    backgroundColor: "rgba(100, 95, 228, 0.32)",
-  },
 }));
 
 export const AntTabsBig = styled(Tabs)({