From 24463d23ac18b30783e8df366728af5d7d7e840c Mon Sep 17 00:00:00 2001
From: Noe <noe@devnullmail.com>
Date: Tue, 4 Jul 2023 10:20:15 +0200
Subject: [PATCH] new colors scheme, centralize colors configs

---
 typescript/Frontend/src/App.tsx               |  2 +-
 typescript/Frontend/src/Login.tsx             |  2 +-
 typescript/Frontend/src/ResetPassword.tsx     |  2 +-
 .../Frontend/src/components/Groups/Folder.tsx | 10 ++--
 .../src/components/Groups/FolderForm.tsx      |  2 +-
 .../src/components/Groups/GroupTabs.tsx       | 29 +++++++++--
 .../src/components/Groups/Tree/GroupTree.tsx  |  2 +-
 .../components/Installations/Installation.tsx | 12 ++---
 .../Installations/InstallationList.tsx        |  4 +-
 .../Installations/InstallationTabs.tsx        | 48 ++++++++++++++++++-
 .../Installations/Log/DateRangePicker.tsx     |  4 +-
 .../Installations/Log/ScalarGraph.tsx         |  2 +-
 .../Installations/Log/TopologyView.tsx        | 13 +++--
 .../Frontend/src/components/Layout/Detail.tsx |  2 +-
 .../components/Layout/InnovenergyButton.tsx   |  8 +++-
 .../src/components/Layout/InnovenergyTab.tsx  | 16 +++----
 .../src/components/Layout/InnovenergyTabs.tsx | 12 +++--
 .../components/Layout/NavigationButtons.tsx   | 18 +++++++
 .../Frontend/src/components/Layout/Search.tsx |  5 +-
 .../Frontend/src/components/Users/User.tsx    | 12 ++---
 .../src/components/Users/UserForm.tsx         |  2 +-
 .../src/components/Users/UserTabs.tsx         | 18 +++++--
 typescript/Frontend/src/index.css             |  6 +--
 typescript/Frontend/src/index.tsx             | 21 +++++---
 .../Frontend/src/util/installation.util.tsx   | 16 ++++---
 25 files changed, 190 insertions(+), 78 deletions(-)

diff --git a/typescript/Frontend/src/App.tsx b/typescript/Frontend/src/App.tsx
index ba7ff39e7..248cd4971 100644
--- a/typescript/Frontend/src/App.tsx
+++ b/typescript/Frontend/src/App.tsx
@@ -50,7 +50,7 @@ const App = () => {
               <img
                 src={innovenergyLogo}
                 alt="innovenergy logo"
-                height="75" //style={color: #0960ac;background: #df7900;}
+                height="75" 
               />
             </Grid>
             <Grid item xs={9} container justifyContent="flex-end">
diff --git a/typescript/Frontend/src/Login.tsx b/typescript/Frontend/src/Login.tsx
index 091daafb3..29c1f51d2 100644
--- a/typescript/Frontend/src/Login.tsx
+++ b/typescript/Frontend/src/Login.tsx
@@ -81,7 +81,7 @@ const Login = ({ setToken, setLanguage }: I_LoginProps) => {
           Login
         </InnovenergyButton>
       </Grid>
-      {loading && <CircularProgress sx={{color: theme.palette.secondary.dark}} />}
+      {loading && <CircularProgress sx={{color: theme.palette.secondary.main}} />}
     </Container>
   );
 };
diff --git a/typescript/Frontend/src/ResetPassword.tsx b/typescript/Frontend/src/ResetPassword.tsx
index d96979bb7..d899f3e4c 100644
--- a/typescript/Frontend/src/ResetPassword.tsx
+++ b/typescript/Frontend/src/ResetPassword.tsx
@@ -74,7 +74,7 @@ const ResetPassword = () => {
             Submit
           </InnovenergyButton>
         </Grid>
-        {loading && <CircularProgress sx={{color: theme.palette.secondary.dark}}/>}
+        {loading && <CircularProgress sx={{color: theme.palette.secondary.main}}/>}
       </form>
     </Container>
   );
diff --git a/typescript/Frontend/src/components/Groups/Folder.tsx b/typescript/Frontend/src/components/Groups/Folder.tsx
index d1765a1f6..496b921a4 100644
--- a/typescript/Frontend/src/components/Groups/Folder.tsx
+++ b/typescript/Frontend/src/components/Groups/Folder.tsx
@@ -45,15 +45,15 @@ const Folder = () => {
             py: 3,
             bgcolor: colors.greyDark,
             px: 1,
-            borderBottom: 1,
-            borderRight: 1,
-            borderLeft: 1,
+            borderBottom: 2,
+            borderRight: 2,
+            borderLeft: 2,
             bordertop: 0,
             borderTopLeftRadius: 0,
             WebkitBorderTopRightRadius: 0,
             borderBottomLeftRadius: 4,
             borderBottomRightRadius: 4,
-            borderColor: colors.greyLight,
+            borderColor: theme.palette.text.disabled,
             marginTop: 0.05,
           }}
         >
@@ -70,7 +70,7 @@ const Folder = () => {
       <Box
         sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
       >
-        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.dark}} />
+        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.main}} />
       </Box>
     );
   } else if (error) {
diff --git a/typescript/Frontend/src/components/Groups/FolderForm.tsx b/typescript/Frontend/src/components/Groups/FolderForm.tsx
index 6012a95c1..5aa02516b 100644
--- a/typescript/Frontend/src/components/Groups/FolderForm.tsx
+++ b/typescript/Frontend/src/components/Groups/FolderForm.tsx
@@ -80,7 +80,7 @@ const FolderForm = (props: I_CustomerFormProps) => {
           handleChange={formik.handleChange}
         />
         <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
-          {loading && <CircularProgress sx={{color: theme.palette.secondary.dark}} />}
+          {loading && <CircularProgress sx={{color: theme.palette.secondary.main}} />}
           {!readOnly &&
             additionalButtons &&
             additionalButtons.map((button) => button)}
diff --git a/typescript/Frontend/src/components/Groups/GroupTabs.tsx b/typescript/Frontend/src/components/Groups/GroupTabs.tsx
index bfa8a317b..e53311afa 100644
--- a/typescript/Frontend/src/components/Groups/GroupTabs.tsx
+++ b/typescript/Frontend/src/components/Groups/GroupTabs.tsx
@@ -8,8 +8,10 @@ import { useContext } from "react";
 import { colors } from "../..";
 import InnovenergyTab from "../Layout/InnovenergyTab";
 import InnovenergyTabs from "components/Layout/InnovenergyTabs";
+import { useTheme } from "@mui/material";
 
 const GroupTabs = () => {
+  const theme = useTheme();
   const routeMatch = useRouteMatch([
     routes.installations + routes.tree + routes.folder + ":id",
     routes.installations + routes.tree + routes.manageAccess + ":id",
@@ -26,8 +28,15 @@ const GroupTabs = () => {
         <Box sx={{}}>
           <InnovenergyTabs id="group-tabs" value={routeMatch?.pattern?.path}>
             {currentType === "Folder" ? (
-
               <InnovenergyTab
+              sx={{
+                "&.Mui-selected": {
+                  color: colors.black,
+                  backgroundColor: theme.palette.primary.dark, 
+                  borderColor: theme.palette.text.disabled,
+                  borderBottom: 0,
+                  mb:-1/8,
+              }}}
                 id="styled-tab-folder"
                 label={intl.formatMessage({
                   id: "folder",
@@ -42,7 +51,14 @@ const GroupTabs = () => {
             ) : (
 
               <InnovenergyTab
-                sx={{ bgcolor: "#90A7C5" }}
+              sx={{
+                "&.Mui-selected": {
+                  color: colors.black,
+                  backgroundColor: theme.palette.primary.dark, 
+                  borderColor: theme.palette.text.disabled,
+                  borderBottom: 0,
+                  mb:-1/8,
+              }}}
                 id="styled-tab-installation"
                 label={intl.formatMessage({
                   id: "installation",
@@ -60,7 +76,14 @@ const GroupTabs = () => {
             )}
 
             <InnovenergyTab
-              sx={{ bgcolor: "#90A7C5" }}
+              sx={{
+                "&.Mui-selected": {
+                  color: colors.black,
+                  backgroundColor: theme.palette.primary.dark, 
+                  borderColor: theme.palette.text.disabled,
+                  borderBottom: 0,
+                  mb:-1/8,
+              }}}
               id="styled-tab-manage-access"
               label={intl.formatMessage({
                 id: "manageAccess",
diff --git a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
index 1ee5c6e30..718237679 100644
--- a/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
+++ b/typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
@@ -68,7 +68,7 @@ const GroupTree = () => {
   if (loading) {
     return (
       <Grid container justifyContent="center" width="100%">
-        <CircularProgress sx={{color: theme.palette.secondary.dark}} />
+        <CircularProgress sx={{color: theme.palette.secondary.main}} />
       </Grid>
     );
   }
diff --git a/typescript/Frontend/src/components/Installations/Installation.tsx b/typescript/Frontend/src/components/Installations/Installation.tsx
index 5edf6ea04..18c2248d8 100644
--- a/typescript/Frontend/src/components/Installations/Installation.tsx
+++ b/typescript/Frontend/src/components/Installations/Installation.tsx
@@ -17,6 +17,7 @@ const Installation = (props: I_InstallationProps) => {
   const [error, setError] = useState<AxiosError>();
   const theme = useTheme();
 
+
   useEffect(() => {
     setLoading(true);
     axiosConfig
@@ -38,15 +39,14 @@ const Installation = (props: I_InstallationProps) => {
           py: 3,
           bgcolor: colors.greyDark,
           px: 1,
-          borderLeft: 1,
-          borderRight: 1,
-          borderBottom: 1,
+          borderLeft: 2,
+          borderRight: 2,
+          borderBottom: 2,
           borderTopLeftRadius: 0,
           WebkitBorderTopRightRadius: 0,
           borderBottomLeftRadius: 4,
           borderBottomRightRadius: 4,
-          borderColor: colors.greyLight,
-          marginTop: 0.05,
+          borderColor: theme.palette.text.disabled,
         }}
       >
         <InstallationForm
@@ -61,7 +61,7 @@ const Installation = (props: I_InstallationProps) => {
       <Box
         sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
       >
-        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.dark}}/>
+        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.main}}/>
       </Box>
     );
   } else if (error) {
diff --git a/typescript/Frontend/src/components/Installations/InstallationList.tsx b/typescript/Frontend/src/components/Installations/InstallationList.tsx
index a6692848c..607fa5995 100644
--- a/typescript/Frontend/src/components/Installations/InstallationList.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationList.tsx
@@ -58,7 +58,7 @@ const InstallationList = (props: InstallationListProps) => {
   if (loading) {
     return (
       <Grid container justifyContent="center" width="100%">
-        <CircularProgress sx={{ m: 6, color: theme.palette.secondary.dark }} />
+        <CircularProgress sx={{ m: 6, color: theme.palette.secondary.main }} />
       </Grid>
     );
   } else if (data && data.length) {
@@ -88,7 +88,7 @@ const InstallationList = (props: InstallationListProps) => {
                 to={
                   getPathWithoutId(routeMatch?.pattern?.path) + installation.id
                 }
-                style={{ textDecoration: "none", color: colors.black }}
+                style={{ textDecoration: "none", color: colors.blueBlack }}
               >
                 <ListItemButton
                   id={"installation-list-button-" + installation.id}
diff --git a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
index 6d0bd352d..497f75aa7 100644
--- a/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
+++ b/typescript/Frontend/src/components/Installations/InstallationTabs.tsx
@@ -6,8 +6,12 @@ import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
 import InnovenergyTab from "../Layout/InnovenergyTab";
 import InnovenergyTabs from "components/Layout/InnovenergyTabs";
+import { useTheme } from "@mui/material";
+import { red } from "@mui/material/colors";
+import { colors } from "index";
 
 const InstallationTabs = () => {
+  const theme = useTheme();
   const routeMatch = useRouteMatch([
     routes.installations + routes.list + routes.installation + ":id",
     routes.installations + routes.list + routes.liveView + ":id",
@@ -19,14 +23,23 @@ const InstallationTabs = () => {
 
   if (id) {
     return (
-      <Box sx={{ width: "100%" }}>
+      <Box sx={{ width: "100%", }}>
         <Box sx={{}}>
           <InnovenergyTabs
+          
             id="installation-tabs"
             value={routeMatch?.pattern?.path ?? routes.installation + ":id"}
           >
 
             <InnovenergyTab
+              sx={{
+                "&.Mui-selected": {
+                  color: colors.black,
+                  backgroundColor: theme.palette.primary.dark, 
+                  borderColor: theme.palette.text.disabled,
+                  borderBottom: 0,
+                  mb:-1/8,
+              }}}
               id={"installation-tab-installation"}
               label={intl.formatMessage({
                 id: "installation",
@@ -38,7 +51,19 @@ const InstallationTabs = () => {
               component={Link}
               to={routes.installation + id}
             />
+
+
+
+
             <InnovenergyTab
+              sx={{
+                "&.Mui-selected": {
+                  color: colors.black,
+                  backgroundColor: "white", 
+                  borderColor: theme.palette.text.disabled,
+                  borderBottom: 0,
+                  mb:-1/8,
+              }}}
               id={"installation-tab-liveView"}
               label={intl.formatMessage({
                 id: "liveView",
@@ -50,7 +75,22 @@ const InstallationTabs = () => {
               component={Link}
               to={routes.liveView + id}
             />
+
+
+
+
+
+
+
             <InnovenergyTab
+              sx={{
+                "&.Mui-selected": {
+                  color: colors.black,
+                  backgroundColor: theme.palette.primary.main, 
+                  borderColor: theme.palette.text.disabled,
+                  borderBottom: 0,
+                  mb:-1/8,
+              }}} 
               id={"installation-tab-log"}
               label={intl.formatMessage({
                 id: "log",
@@ -60,6 +100,12 @@ const InstallationTabs = () => {
               component={Link}
               to={routes.log + id}
             />
+
+
+
+
+
+
           </InnovenergyTabs>
         </Box>
       </Box>
diff --git a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx
index 0749763d0..7cebdd71e 100644
--- a/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx
+++ b/typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx
@@ -43,7 +43,7 @@ const DateRangePicker = (props: DateRangePickerProps) => {
           value={dayjs(range[0])}
           sx={{
             ".MuiInputLabel-root": {
-              color: colors.black,
+              color: colors.blueBlack,
             },
 
             ".Mui-disabled": {
@@ -67,7 +67,7 @@ const DateRangePicker = (props: DateRangePickerProps) => {
           value={dayjs(range[1])}
           sx={{
             ".MuiInputLabel-root": {
-              color: colors.black,
+              color: colors.blueBlack,
             },
 
             ".Mui-disabled": {
diff --git a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
index 4be24ca54..cebe80296 100644
--- a/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
+++ b/typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
@@ -243,7 +243,7 @@ const ScalarGraph = () => {
       }
     }
     return (
-      <Alert sx={{ mt: 2, bgcolor: theme.palette.primary.dark, color: theme.palette.text.primary}}>
+      <Alert sx={{ mt: 2}} severity="info">
         <FormattedMessage
           id="makeASelection"
           defaultMessage="Please make a selection on the left"
diff --git a/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx b/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx
index c45b0ee9d..60812f435 100644
--- a/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx
+++ b/typescript/Frontend/src/components/Installations/Log/TopologyView.tsx
@@ -15,7 +15,7 @@ import { colors } from "../../..";
 import { error } from "console";
 
 const TopologyView = () => {
-  const [values, setValues] = useState<TopologyValues | null>(null);
+  const [values, setValues] = useState<TopologyValues | null>(null);  
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -52,12 +52,11 @@ const TopologyView = () => {
           paddingBottom: 3,
           bgcolor: "white",
           px: 3 / 8,
-          border: 1,
-          borderTopLeftRadius: 0,
-          WebkitBorderTopRightRadius: 0,
+          border: 2,
+          borderTop : 0,
           borderBottomLeftRadius: 4,
           borderBottomRightRadius: 4,
-          borderColor: colors.greyDark,
+          borderColor: theme.palette.text.disabled,
           borderTopColor: "white",
           marginTop: 0.05,
           fontFamily: `"Ubuntu", sans-serif`,
@@ -225,12 +224,12 @@ const TopologyView = () => {
     );
   }
   return (
-    <Alert sx={{ mt: 1, bgcolor: theme.palette.primary.dark, color: theme.palette.text.primary }} severity="error" color="warning">
+    <Alert sx={{ mt: 1, }} severity="error">
       <FormattedMessage
         id="noData"
         defaultMessage="Couldn't find any live data"
       />
-    </Alert>
+    </Alert>  
   );
 };
 
diff --git a/typescript/Frontend/src/components/Layout/Detail.tsx b/typescript/Frontend/src/components/Layout/Detail.tsx
index 862ff46c1..c71b1eaae 100644
--- a/typescript/Frontend/src/components/Layout/Detail.tsx
+++ b/typescript/Frontend/src/components/Layout/Detail.tsx
@@ -44,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: theme.palette.secondary.dark }} />
+        <CircularProgress sx={{ m: 2, color: theme.palette.secondary.main }} />
       </Box>
     );
   } else if (error) {
diff --git a/typescript/Frontend/src/components/Layout/InnovenergyButton.tsx b/typescript/Frontend/src/components/Layout/InnovenergyButton.tsx
index 69f4053b6..ccb7aeef0 100644
--- a/typescript/Frontend/src/components/Layout/InnovenergyButton.tsx
+++ b/typescript/Frontend/src/components/Layout/InnovenergyButton.tsx
@@ -19,7 +19,13 @@ const InnovenergyButton = (props: I_InnovenergyButtonProps) => {
       variant="contained"
       type={props.type}
       onClick={props.onClick}
-      sx={{...props.sx, bgcolor: theme.palette.secondary.main}}
+      sx={{...props.sx, 
+        bgcolor: theme.palette.secondary.main,
+        ":hover":{
+          bgcolor: theme.palette.secondary.dark,
+        }
+      
+      }}
     >
       {props.children}
     </Button>
diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx
index 43a04815f..8c7b1cdc4 100644
--- a/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx
+++ b/typescript/Frontend/src/components/Layout/InnovenergyTab.tsx
@@ -1,5 +1,7 @@
 import { styled, SxProps, Tab, Tabs, Theme, useTheme } from "@mui/material";
 import { TabProps } from "@mui/material/Tab/Tab";
+import { colors } from "index";
+
 
 const InnovenergyTab = (props: any) => {
   const theme = useTheme();
@@ -9,30 +11,26 @@ const InnovenergyTab = (props: any) => {
       disableRipple
       sx={{
         ...props.sx,
-        bottom: -1,
+        bottom: 0,
         textTransform: "uppercase",
         fontWeight: theme.typography.fontWeightRegular,
         fontSize: theme.typography.pxToRem(14),
         marginRight: theme.spacing(1),
         background: "0 0",
-        border: "1px solid transparent",
+        border: "2px solid transparent",
+        bgcolor: theme.palette.primary.light,
         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",
+          color: colors.black,
+          borderColor: theme.palette.text.disabled,
           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"] : {}),
-        },
       }}
     />
   );
diff --git a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx
index bf98f5510..3c8cb1b94 100644
--- a/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx
+++ b/typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx
@@ -1,5 +1,6 @@
-import { SxProps, Tabs, Theme } from "@mui/material";
+import { SxProps, Tabs, Theme, useTheme } from "@mui/material";
 import { ReactNode } from "react";
+import { colors } from "index";
 
 interface AntTabsProps {
   id: string;
@@ -8,20 +9,23 @@ interface AntTabsProps {
   children: ReactNode;
 }
 
+
 const InnovenergyTabs = (props: AntTabsProps) => {
+  const theme = useTheme(); 
   return (
     <Tabs
       {...props}
       sx={{
         ...props.sx,
-        borderBottom: "1px solid #90A7c5",
+        borderBottom: "2px solid",
+        borderColor: theme.palette.text.disabled,
         overflow: "visible!important",
         "& div.MuiTabs-scroller": {
           overflow: "visible!important",
         },
         "&.Mui-selected": {
-          color: "#000000",
-          backgroundColor: "red",
+          color: colors.black,
+          backgroundColor: " #90A7c5",
           borderColor: `#90A7c5 #90A7c5 #fff`,
         },
         "& .MuiTabs-indicator": {
diff --git a/typescript/Frontend/src/components/Layout/NavigationButtons.tsx b/typescript/Frontend/src/components/Layout/NavigationButtons.tsx
index 7006047fe..7969a7b3d 100644
--- a/typescript/Frontend/src/components/Layout/NavigationButtons.tsx
+++ b/typescript/Frontend/src/components/Layout/NavigationButtons.tsx
@@ -4,8 +4,10 @@ import useRouteMatch from "../../hooks/useRouteMatch";
 import routes from "../../routes.json";
 import InnovenergyTab from "./InnovenergyTab";
 import InnovenergyTabs from "./InnovenergyTabs";
+import { useTheme } from "@mui/material";
 
 const NavigationButtons = () => {
+  const theme = useTheme();
   const routeMatch = useRouteMatch([
     routes.installations + "*",
     routes.users + "*",
@@ -19,6 +21,14 @@ const NavigationButtons = () => {
         value={routeMatch?.pattern?.path}
       >
         <InnovenergyTab
+          sx={{
+            bgcolor:theme.palette.primary.main,
+            "&.Mui-selected": {
+              backgroundColor: theme.palette.primary.main, 
+              borderColor: theme.palette.text.disabled,
+              borderBottom: 0,
+              mb:-1/8,
+          }}}
           id="navigation-tab-installations"
           value={routes.installations + "*"}
           component={Link}
@@ -31,6 +41,14 @@ const NavigationButtons = () => {
           }
         />
         <InnovenergyTab
+          sx={{
+            bgcolor:theme.palette.primary.main,
+            "&.Mui-selected": {
+              backgroundColor: theme.palette.primary.main, 
+              borderColor: theme.palette.text.disabled,
+              borderBottom: 0,
+              mb:-1/8,  
+          }}}
           id="navigation-tab-users"
           value={routes.users + "*"}
           component={Link}
diff --git a/typescript/Frontend/src/components/Layout/Search.tsx b/typescript/Frontend/src/components/Layout/Search.tsx
index 4e1b4b4b3..4d1947c7e 100644
--- a/typescript/Frontend/src/components/Layout/Search.tsx
+++ b/typescript/Frontend/src/components/Layout/Search.tsx
@@ -3,13 +3,14 @@ import {
   TextField,
   TextFieldProps,
   alpha,
-  colors,
   styled,
   useTheme,
 } from "@mui/material";
+import { colors } from "index";
 import { FC, useState } from "react";
 import { useIntl } from "react-intl";
 
+
 interface SearchSidebarProps {
   listComponent: FC<{ searchQuery: string }>;
   id: string;
@@ -74,7 +75,7 @@ const SearchSidebar = (props: SearchSidebarProps) => {
       <SearchInputTextfield
         sx={{    
           ".MuiInputLabel-root" :{
-          color: theme.palette.text.primary
+          color: "black"
         }}}
         id={id}
         variant="filled"
diff --git a/typescript/Frontend/src/components/Users/User.tsx b/typescript/Frontend/src/components/Users/User.tsx
index dfdee929a..c12f9cc8b 100644
--- a/typescript/Frontend/src/components/Users/User.tsx
+++ b/typescript/Frontend/src/components/Users/User.tsx
@@ -49,15 +49,15 @@ const Detail = (props: I_DetailProps) => {
           py: 3,
           bgcolor: colors.greyDark,
           px: 1,
-          borderBottom: 1,
-          borderRight: 1,
-          borderLeft: 1,
+          borderBottom: 2,
+          borderRight: 2,
+          borderLeft: 2,
           bordertop: 0,
           borderTopLeftRadius: 0,
           WebkitBorderTopRightRadius: 0,
           borderBottomLeftRadius: 4,
-          borderBottomRightRadius: 4,
-          borderColor: colors.greyLight,
+          borderBottomRightRadius: 4, 
+          borderColor: theme.palette.text.disabled,
         }}
       >
         <UserForm values={values} handleSubmit={handleUpdate} />
@@ -68,7 +68,7 @@ const Detail = (props: I_DetailProps) => {
       <Box
         sx={{ width: 1 / 2, justifyContent: "center", display: "flex", mt: 10 }}
       >
-        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.dark}} />
+        <CircularProgress sx={{ m: 2 ,color: theme.palette.secondary.main}} />
       </Box>
     );
   } else if (error) {
diff --git a/typescript/Frontend/src/components/Users/UserForm.tsx b/typescript/Frontend/src/components/Users/UserForm.tsx
index 4f6cb325d..cec9274de 100644
--- a/typescript/Frontend/src/components/Users/UserForm.tsx
+++ b/typescript/Frontend/src/components/Users/UserForm.tsx
@@ -89,7 +89,7 @@ const UserForm = (props: I_UserFormProps) => {
         disabled={readOnly}
       />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
-        {loading && <CircularProgress sx={{color: theme.palette.secondary.dark}} />}
+        {loading && <CircularProgress sx={{color: theme.palette.secondary.main}} />}
         {currentUser.hasWriteAccess && (
           <InnovenergyButton type="submit">
             <FormattedMessage id="submit" defaultMessage="Submit" />
diff --git a/typescript/Frontend/src/components/Users/UserTabs.tsx b/typescript/Frontend/src/components/Users/UserTabs.tsx
index c2d60c5b4..07a9f6934 100644
--- a/typescript/Frontend/src/components/Users/UserTabs.tsx
+++ b/typescript/Frontend/src/components/Users/UserTabs.tsx
@@ -5,8 +5,12 @@ import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
 import InnovenergyTab from "../Layout/InnovenergyTab";
 import InnovenergyTabs from "components/Layout/InnovenergyTabs";
+import { useTheme } from "@mui/material";
+import { colors } from "index";
+
 
 const UserTabs = () => {
+  const theme = useTheme();
   const routeMatch = useRouteMatch([routes.users + routes.user + ":id"]);
 
   const id = routeMatch?.params?.id;
@@ -23,6 +27,14 @@ const UserTabs = () => {
         })}
       >
         <InnovenergyTab
+              sx={{
+                "&.Mui-selected": {
+                  color: colors.black,
+                  backgroundColor: theme.palette.primary.dark, 
+                  borderColor: theme.palette.text.disabled,
+                  borderBottom: 0,
+                  mb:-1/8,
+              }}}
           id="users-tab-user"
           label={intl.formatMessage({
             id: "user",
@@ -31,11 +43,7 @@ const UserTabs = () => {
           value={routes.users + routes.user + ":id"}
           component={Link}
           to={routes.user + id}
-          sx={{
-            "&.Mui-selected": {
-              backgroundColor: "#CCD6E4",
-            },
-          }}
+
         />
       </InnovenergyTabs>
     );
diff --git a/typescript/Frontend/src/index.css b/typescript/Frontend/src/index.css
index 60529211e..15e6c892e 100644
--- a/typescript/Frontend/src/index.css
+++ b/typescript/Frontend/src/index.css
@@ -12,7 +12,5 @@ code {
     monospace;
 }
 body {
-
-  background-color: #f3f4f8;
-  
-  } 
\ No newline at end of file
+  background-color: #f3f4f7;
+}
\ No newline at end of file
diff --git a/typescript/Frontend/src/index.tsx b/typescript/Frontend/src/index.tsx
index e926be2c9..e049497cd 100644
--- a/typescript/Frontend/src/index.tsx
+++ b/typescript/Frontend/src/index.tsx
@@ -12,12 +12,20 @@ const root = ReactDOM.createRoot(
 );
 
 export const colors = {
-  black: '#2b3e54',
-  fond: '#f3f4f7',
+  black: "#000000",
+  blueBlack: '#2b3e54',
+  borderColor: '#c0c6d0',
+  
+  background: '#f3f4f7',
+  //change this color in index.css too
+
   greyDark: '#d1d7de',
   greyLight:'#e1e4e7',
+  
   orangeSelected: '#ffd280',
   orangeHover: '#ffe4b3',
+
+  orangeDark:"#ffc04d",
 }
 
 const theme = createTheme({
@@ -30,20 +38,21 @@ const theme = createTheme({
   },
   palette: {
     text: {
-      primary: colors.black,
+      primary: colors.blueBlack,
       secondary: "#000000",
-      disabled: "#000000",
+      disabled: colors.borderColor,
     },
     primary: {
-      main: colors.fond,
+      main: colors.background,
       light: colors.greyLight,
       dark: colors.greyDark,
     },
     secondary: {
       main: colors.orangeSelected,
       light: colors.orangeHover,
+      dark: colors.orangeDark,
+
     },
-    
   },
   typography: {
     fontFamily: `"Ubuntu", sans-serif`,
diff --git a/typescript/Frontend/src/util/installation.util.tsx b/typescript/Frontend/src/util/installation.util.tsx
index b3b77e36e..2689cd749 100644
--- a/typescript/Frontend/src/util/installation.util.tsx
+++ b/typescript/Frontend/src/util/installation.util.tsx
@@ -1,4 +1,6 @@
 import { styled, Tab, Tabs } from "@mui/material";
+import { colors } from "index";
+
 
 export const StyledTab = styled((props: any) => (
   <Tab disableRipple {...props} />
@@ -16,7 +18,7 @@ export const StyledTab = styled((props: any) => (
   textDecoration: "none",
   transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
   "&.Mui-selected": {
-    color: "#000000",
+    color: colors.black,
     backgroundColor: "#F2F4F8",
     borderColor: "#90A7c5 #90A7c5 #F2F4F8",
     marginTop: "1px",
@@ -42,7 +44,7 @@ export const StyledTabBlue = styled((props: any) => (
   transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
   "&.Mui-selected": {
     bottom: -1,
-    color: "#000000",
+    color: colors.black,
     backgroundColor: "#CCD6E4",
     borderColor: "#90A7c5  #90A7c5 #CCD6E4",
     marginTop: "1px",
@@ -67,7 +69,7 @@ export const StyledTabBig = styled((props: any) => (
   textDecoration: "none",
   transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
   "&.Mui-selected": {
-    color: "#000000",
+    color: colors.black,
     backgroundColor: "#F2F4F8",
     borderColor: "#90A7c5 #90A7c5 #F2F4F8",
     marginTop: "1px",
@@ -92,7 +94,7 @@ export const StyledTabWhite = styled((props: any) => (
   textDecoration: "none",
   transition: `color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out`,
   "&.Mui-selected": {
-    color: "#000000",
+    color: colors.black,
     backgroundColor: "White",
     borderColor: "#90A7c5 #90A7c5 White",
     marginTop: "1px",
@@ -108,7 +110,7 @@ export const AntTabsBig = styled(Tabs)({
     overflow: "visible!important",
   },
   "&.Mui-selected": {
-    color: "#000000",
+    color: colors.black,
     backgroundColor: "red",
     borderColor: `#90A7c5 #90A7c5 #fff`,
   },
@@ -127,9 +129,9 @@ export const AntTabs = styled(Tabs)({
   overflow: "visible!important",
   "& div.MuiTabs-scroller": {
     overflow: "visible!important",
-  },
+  },  
   "&.Mui-selected": {
-    color: "#000000",
+    color: colors.black,
     backgroundColor: "red",
     borderColor: `#90A7c5 #90A7c5 #fff`,
   },