Merge branch 'main' of https://git.innov.energy/Innovenergy/git_trunk

typescript/Frontend/lang/de.json

@@ -0,0 +1,136 @@
+{
+  "Information": {
+    "defaultMessage": "Information"
+  },
+  "addNewChild": {
+    "defaultMessage": "Neues Kind hinzufügen"
+  },
+  "addNewDialogButton": {
+    "defaultMessage": "Neue Dialogschaltfläche hinzufügen"
+  },
+  "addUser": {
+    "defaultMessage": "Nutzer erstellen"
+  },
+  "alarms": {
+    "defaultMessage": "Alarme"
+  },
+  "applyChanges": {
+    "defaultMessage": "Änderungen speichern"
+  },
+  "country": {
+    "defaultMessage": "Land"
+  },
+  "createNewFolder": {
+    "defaultMessage": "Neuen Ordner erstellen"
+  },
+  "createNewUser": {
+    "defaultMessage": "Neuen Nutzer erstellen"
+  },
+  "customerName": {
+    "defaultMessage": "Kundenname"
+  },
+  "email": {
+    "defaultMessage": "Email"
+  },
+  "english": {
+    "defaultMessage": "Englisch"
+  },
+  "error": {
+  },
+  "folder": {
+    "defaultMessage": "Ordner"
+  },
+  "german": {
+    "defaultMessage": "Deutsch"
+  },
+  "groupTabs": {
+    "defaultMessage": "Gruppen"
+  },
+  "groupTree": {
+    "defaultMessage": "Gruppenbaum"
+  },
+  "information": {
+    "defaultMessage": "Information"
+  },
+  "inheritedAccess": {
+    "defaultMessage": "Vererbter Zugriff von"
+  },
+  "installation": {
+    "defaultMessage": "Installation"
+  },
+  "installationTabs": {
+    "defaultMessage": "Installationen"
+  },
+  "installations": {
+    "defaultMessage": "Installationen"
+  },
+  "lastWeek": {
+    "defaultMessage": "Letzte Woche"
+  },
+  "location": {
+    "defaultMessage": "Standort"
+  },
+  "log": {
+    "defaultMessage": "Logbuch"
+  },
+  "logout": {
+    "defaultMessage": "Abmelden"
+  },
+  "makeASelection": {
+    "defaultMessage": "Bitte wählen Sie links eine Auswahl"
+  },
+  "manageAccess": {
+    "defaultMessage": "Zugriff verwalten"
+  },
+  "move": {
+    "defaultMessage": "Verschieben"
+  },
+  "moveTo": {
+    "defaultMessage": "Verschieben zu"
+  },
+  "moveTree": {
+    "defaultMessage": "Baum verschieben"
+  },
+  "name": {
+    "defaultMessage": "Name"
+  },
+  "navigationTabs": {
+    "defaultMessage": "Navigation"
+  },
+  "orderNumbers": {
+    "defaultMessage": "Bestellnummer"
+  },
+  "region": {
+    "defaultMessage": "Region"
+  },
+  "requiredLocation": {
+    "defaultMessage": "Standort ist erforderlich"
+  },
+  "requiredName": {
+    "defaultMessage": "Name ist erforderlich"
+  },
+  "requiredRegion": {
+    "defaultMessage": "Region ist erforderlich"
+  },
+  "search": {
+    "defaultMessage": "Suche"
+  },
+  "submit": {
+    "defaultMessage": "Senden"
+  },
+  "updateFolderErrorMessage": {
+    "defaultMessage": "Fehler, Ordner kann nicht aktualisiert werden"
+  },
+  "updatedSuccessfully": {
+    "defaultMessage": "Erfolgreich aktualisiert"
+  },
+  "user": {
+    "defaultMessage": "Nutzer"
+  },
+  "userTabs": {
+    "defaultMessage": "Nutzer"
+  },
+  "users": {
+    "defaultMessage": "Nutzer"
+  }
+}

typescript/Frontend/lang/en.json

@@ -27,7 +27,7 @@
     "defaultMessage": "Create new user"
   },
   "customerName": {
-    "defaultMessage": "Customer name"
+    "defaultMessage": "Customer"
   },
   "email": {
     "defaultMessage": "Email"
@@ -35,8 +35,7 @@
   "english": {
     "defaultMessage": "English"
   },
-  "error": {
+  "error": {},
-  },
   "folder": {
     "defaultMessage": "Folder"
   },

typescript/Frontend/lang/fr.json

@@ -0,0 +1,136 @@
+{
+  "Information": {
+    "defaultMessage": "Informations"
+  },
+  "addNewChild": {
+    "defaultMessage": "Ajouter un nouvel enfant"
+  },
+  "addNewDialogButton": {
+    "defaultMessage": "Ajouter un nouveau bouton de dialogue"
+  },
+  "addUser": {
+    "defaultMessage": "Créer un utilisateur"
+  },
+  "alarms": {
+    "defaultMessage": "Alarmes"
+  },
+  "applyChanges": {
+    "defaultMessage": "Appliquer les modifications"
+  },
+  "country": {
+    "defaultMessage": "Pays"
+  },
+  "createNewFolder": {
+    "defaultMessage": "Créer un nouveau dossier"
+  },
+  "createNewUser": {
+    "defaultMessage": "Créer un nouvel utilisateur"
+  },
+  "customerName": {
+    "defaultMessage": "Nom du client"
+  },
+  "email": {
+    "defaultMessage": "E-mail"
+  },
+  "english": {
+    "defaultMessage": "Anglais"
+  },
+  "error": {
+  },
+  "folder": {
+    "defaultMessage": "Dossier"
+  },
+  "german": {
+    "defaultMessage": "Allemand"
+  },
+  "groupTabs": {
+    "defaultMessage": "Onglets de groupe"
+  },
+  "groupTree": {
+    "defaultMessage": "Arbre de groupe"
+  },
+  "information": {
+    "defaultMessage": "Informations"
+  },
+  "inheritedAccess": {
+    "defaultMessage": "Accès hérité de"
+  },
+  "installation": {
+    "defaultMessage": "Installation"
+  },
+  "installationTabs": {
+    "defaultMessage": "Onglets d'installation"
+  },
+  "installations": {
+    "defaultMessage": "Installations"
+  },
+  "lastWeek": {
+    "defaultMessage": "La semaine dernière"
+  },
+  "location": {
+    "defaultMessage": "Localisation"
+  },
+  "log": {
+    "defaultMessage": "Journal"
+  },
+  "logout": {
+    "defaultMessage": "Déconnexion"
+  },
+  "makeASelection": {
+    "defaultMessage": "Veuillez faire une sélection à gauche"
+  },
+  "manageAccess": {
+    "defaultMessage": "Gérer l'accès"
+  },
+  "move": {
+    "defaultMessage": "Déplacer"
+  },
+  "moveTo": {
+    "defaultMessage": "Déplacer à"
+  },
+  "moveTree": {
+    "defaultMessage": "Déplacer l'arbre"
+  },
+  "name": {
+    "defaultMessage": "Nom"
+  },
+  "navigationTabs": {
+    "defaultMessage": "Onglets de navigation"
+  },
+  "orderNumbers": {
+    "defaultMessage": "Numéro de commande"
+  },
+  "region": {
+    "defaultMessage": "Région"
+  },
+  "requiredLocation": {
+    "defaultMessage": "L'emplacement est requis"
+  },
+  "requiredName": {
+    "defaultMessage": "Le nom est obligatoire"
+  },
+  "requiredRegion": {
+    "defaultMessage": "La région est obligatoire"
+  },
+  "search": {
+    "defaultMessage": "Recherche"
+  },
+  "submit": {
+    "defaultMessage": "Soumettre"
+  },
+  "updateFolderErrorMessage": {
+    "defaultMessage": "Une erreur s'est produite, impossible de mettre à jour le dossier."
+  },
+  "updatedSuccessfully": {
+    "defaultMessage": "Mise à jour réussie"
+  },
+  "user": {
+    "defaultMessage": "Utilisateur"
+  },
+  "userTabs": {
+    "defaultMessage": "Onglets utilisateurs"
+  },
+  "users": {
+    "defaultMessage": "Utilisateurs"
+  }
+}

typescript/Frontend/package-lock.json

@@ -9,7 +9,6 @@
       "version": "0.1.0",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.316.0",
-        "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
         "@minoru/react-dnd-treeview": "^3.4.1",
         "@mui/icons-material": "^5.11.0",
@@ -3541,6 +3540,7 @@
       "version": "11.10.5",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
       "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.10.5",
@@ -27667,6 +27667,7 @@
       "version": "11.10.5",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
       "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+      "peer": true,
       "requires": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.10.5",

typescript/Frontend/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@aws-sdk/client-s3": "^3.316.0",
-    "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@minoru/react-dnd-treeview": "^3.4.1",
     "@mui/icons-material": "^5.11.0",

typescript/Frontend/src/App.tsx

@@ -47,13 +47,15 @@ const App = () => {
         <Container maxWidth="xl" sx={{ marginTop: 2, height: "100vh" }}>
           <Grid container maxHeight="20vh">
             <Grid item xs={3} container justifyContent="flex-start">
-              <img
+              <img src={innovenergyLogo} alt="innovenergy logo" height="100" />
-                src={innovenergyLogo}
-                alt="innovenergy logo"
-                height="100" 
-              />
             </Grid>
-            <Grid item xs={9} container justifyContent="flex-end" style={{ height: 30 }}>
+            <Grid
+              item
+              xs={9}
+              container
+              justifyContent="flex-end"
+              style={{ height: 30 }}
+            >
               <LanguageSelect language={language} setLanguage={setLanguage} />
               <LogoutButton removeToken={removeToken} />
             </Grid>

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

@@ -7,7 +7,10 @@ import { I_Folder } from "../../util/types";
 import { GroupContext } from "../Context/GroupContextProvider";
 import InnovenergySnackbar from "../InnovenergySnackbar";
 import InnovenergyButton from "../Layout/InnovenergyButton";
-import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
+import InnovenergyTextfield, {
+  I_InnovenergyTextfieldProps,
+  IePropertyGrid,
+} from "../Layout/InnovenergyTextfield";
 import { UserContext } from "../Context/UserContextProvider";
 
 interface I_CustomerFormProps {
@@ -54,33 +57,39 @@ const FolderForm = (props: I_CustomerFormProps) => {
   });
   const theme = useTheme();
 
+  const rows: I_InnovenergyTextfieldProps[] = [
+    {
+      id: "folder-name-textfield",
+      disabled: readOnly,
+      label: intl.formatMessage({
+        id: "name",
+        defaultMessage: "Name",
+      }),
+      name: "name",
+      value: formik.values.name,
+      handleChange: formik.handleChange,
+    },
+    {
+      id: "folder-information-textfield",
+      disabled: readOnly,
+      label: intl.formatMessage({
+        id: "information",
+        defaultMessage: "Information",
+      }),
+      name: "information",
+      value: formik.values.information,
+      handleChange: formik.handleChange,
+    },
+  ];
+
   return (
     <>
       <form onSubmit={formik.handleSubmit}>
-        <InnovenergyTextfield
+        <IePropertyGrid rows={rows} />
-          id="folder-name-textfield"
-          disabled={readOnly}
-          label={intl.formatMessage({
-            id: "name",
-            defaultMessage: "Name",
-          })}
-          name="name"
-          value={formik.values.name}
-          handleChange={formik.handleChange}
-        />
-        <InnovenergyTextfield
-          id="folder-information-textfield"
-          disabled={readOnly}
-          label={intl.formatMessage({
-            id: "information",
-            defaultMessage: "Information",
-          })}
-          name="information"
-          value={formik.values.information}
-          handleChange={formik.handleChange}
-        />
         <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
-          {loading && <CircularProgress sx={{color: theme.palette.secondary.main}} />}
+          {loading && (
+            <CircularProgress sx={{ color: theme.palette.secondary.main }} />
+          )}
           {!readOnly &&
             additionalButtons &&
             additionalButtons.map((button) => button)}

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

@@ -7,7 +7,10 @@ import { I_Installation } from "../../util/types";
 import { InstallationsContext } from "../Context/InstallationsContextProvider";
 import MoveDialog from "../Groups/Tree/MoveDialog";
 import InnovenergyButton from "../Layout/InnovenergyButton";
-import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
+import InnovenergyTextfield, {
+  I_InnovenergyTextfieldProps,
+  IePropertyGrid,
+} from "../Layout/InnovenergyTextfield";
 import { UserContext } from "../Context/UserContextProvider";
 import * as Yup from "yup";
 
@@ -74,79 +77,80 @@ const InstallationForm = (props: I_InstallationFormProps) => {
     setOpen(false);
   };
 
-  return (
+  const rows: I_InnovenergyTextfieldProps[] = [
-    <form onSubmit={formik.handleSubmit}>
+    {
-      <InnovenergyTextfield
+      disabled: readOnly,
-        disabled={readOnly}
+      id: "installation-name-textfield",
-        id="installation-name-textfield"
+      label: intl.formatMessage({
-        label={intl.formatMessage({
         id: "customerName",
         defaultMessage: "Customer name",
-        })}
+      }),
-        name="name"
+      name: "name",
-        value={formik.values.name}
+      value: formik.values.name,
-        handleChange={formik.handleChange}
+      handleChange: formik.handleChange,
-        helperText={
+      helperText:
-          formik.errors.name && formik.touched.name ? formik.errors.name : ""
+        formik.errors.name && formik.touched.name ? formik.errors.name : "",
-        }
+      error: !!formik.errors.name && formik.touched.name,
-        error={!!formik.errors.name && formik.touched.name}
+    },
-      />
+    {
-      <InnovenergyTextfield
+      disabled: readOnly,
-        disabled={readOnly}
+      id: "installation-region-textfield",
-        id="installation-region-textfield"
+      label: intl.formatMessage({
-        label={intl.formatMessage({
         id: "region",
         defaultMessage: "Region",
-        })}
+      }),
-        name="region"
+      name: "region",
-        value={formik.values.region}
+      value: formik.values.region,
-        handleChange={formik.handleChange}
+      handleChange: formik.handleChange,
-        helperText={
+      helperText:
         formik.errors.region && formik.touched.region
           ? formik.errors.region
-            : ""
+          : "",
-        }
+      error: !!formik.errors.region && formik.touched.region,
-        error={!!formik.errors.region && formik.touched.region}
+    },
-      />
+    {
-      <InnovenergyTextfield
+      disabled: readOnly,
-        disabled={readOnly}
+      id: "installation-location-textfield",
-        id="installation-location-textfield"
+      label: intl.formatMessage({
-        label={intl.formatMessage({
         id: "location",
         defaultMessage: "Location",
-        })}
+      }),
-        name="location"
+      name: "location",
-        value={formik.values.location}
+      value: formik.values.location,
-        handleChange={formik.handleChange}
+      handleChange: formik.handleChange,
-        helperText={
+      helperText:
         formik.errors.location && formik.touched.location
           ? formik.errors.location
-            : ""
+          : "",
-        }
+      error: !!formik.errors.location && formik.touched.location,
-        error={!!formik.errors.location && formik.touched.location}
+    },
-      />
+    {
-      <InnovenergyTextfield
+      disabled: readOnly,
-        disabled={readOnly}
+      id: "installation-country-textfield",
-        id="installation-country-textfield"
+      label: intl.formatMessage({
-        label={intl.formatMessage({
         id: "country",
         defaultMessage: "Country",
-        })}
+      }),
-        name="country"
+      name: "country",
-        value={formik.values.country}
+      value: formik.values.country,
-        handleChange={formik.handleChange}
+      handleChange: formik.handleChange,
-      />
+    },
-      <InnovenergyTextfield
+    {
-        disabled={readOnly}
+      disabled: readOnly,
-        id="installation-orderNumbers-textfield"
+      id: "installation-orderNumbers-textfield",
-        label={intl.formatMessage({
+      label: intl.formatMessage({
         id: "orderNumbers",
         defaultMessage: "Order number",
-        })}
+      }),
-        name="orderNumbers"
+      name: "orderNumbers",
-        value={formik.values.orderNumbers}
+      value: formik.values.orderNumbers,
-        handleChange={formik.handleChange}
+      handleChange: formik.handleChange,
-      />
+    },
+  ];
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <IePropertyGrid rows={rows} />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
         {hasMoveButton && !readOnly && <MoveDialog values={values} />}
         {!readOnly && (

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

@@ -75,11 +75,12 @@ const InstallationList = (props: InstallationListProps) => {
           overflow: "auto",
           py: 0,
           mt: 1,
+          borderRadius: 1.5,
           height:
             routeMatch?.pattern.path ===
             routes.installations + routes.list + routes.log + ":id"
               ? "130px"
-              : "500px",
+              : "367px",
         }}
         component="nav"
         aria-labelledby="nested-list-subheader"

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

@@ -5,6 +5,7 @@ import routes from "../../routes.json";
 import useRouteMatch from "../../hooks/useRouteMatch";
 import { useIntl } from "react-intl";
 import InnovenergyTab from "../Layout/InnovenergyTab";
+import InnovenergyTabBorder from "../Layout/InnovenergyTab";
 import InnovenergyTabs from "components/Layout/InnovenergyTabs";
 import { useTheme } from "@mui/material";
 import { red } from "@mui/material/colors";
@@ -23,14 +24,12 @@ 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": {
@@ -39,7 +38,8 @@ const InstallationTabs = () => {
                   borderColor: theme.palette.text.disabled,
                   borderBottom: 0,
                   mb: -1 / 8,
-              }}}
+                },
+              }}
               id={"installation-tab-installation"}
               label={intl.formatMessage({
                 id: "installation",
@@ -52,9 +52,6 @@ const InstallationTabs = () => {
               to={routes.installation + id}
             />
 
-
-
-
             <InnovenergyTab
               sx={{
                 "&.Mui-selected": {
@@ -63,7 +60,8 @@ const InstallationTabs = () => {
                   borderColor: theme.palette.text.disabled,
                   borderBottom: 0,
                   mb: -1 / 8,
-              }}}
+                },
+              }}
               id={"installation-tab-liveView"}
               label={intl.formatMessage({
                 id: "liveView",
@@ -83,7 +81,8 @@ const InstallationTabs = () => {
                   borderColor: theme.palette.text.disabled,
                   borderBottom: 0,
                   mb: -1 / 8,
-              }}} 
+                },
+              }}
               id={"installation-tab-log"}
               label={intl.formatMessage({
                 id: "log",

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

@@ -2,7 +2,6 @@ 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();
   return (
@@ -36,4 +35,38 @@ const InnovenergyTab = (props: any) => {
   );
 };
 
+const InnovenergyTabBorder = (props: any) => {
+  const theme = useTheme();
+  return (
+    <Tab
+      {...props}
+      disableRipple
+      sx={{
+        textTransform: "none",
+        ...props.sx,
+        bottom: 0,
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.typography.pxToRem(14),
+        marginRight: theme.spacing(1),
+        background: "0 0",
+        border: "2px solid",
+        borderColor: "#c0c6d0",
+        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: colors.black,
+          borderColor: theme.palette.text.disabled,
+          marginTop: "1px",
+          bottom: -1,
+          ...(props.sx ? props.sx["&.Mui-selected"] : {}),
+        },
+      }}
+    />
+  );
+};
+
 export default InnovenergyTab;

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

@@ -9,7 +9,6 @@ interface AntTabsProps {
   children: ReactNode;
 }
 
-
 const InnovenergyTabs = (props: AntTabsProps) => {
   const theme = useTheme();
   return (
@@ -31,7 +30,7 @@ const InnovenergyTabs = (props: AntTabsProps) => {
         "& .MuiTabs-indicator": {
           display: "flex",
           justifyContent: "center",
-          backgroundColor: "transparent",
+          backgroundColor: "red",
         },
         "&.MuiTabs-root": {
           width: "100%",

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

@@ -1,6 +1,18 @@
-import { Grid, InputLabel, TextField, useTheme } from "@mui/material";
+import {
+  Grid,
+  InputLabel,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  useTheme,
+} from "@mui/material";
 
-interface I_InnovenergyTextfieldProps {
+export interface I_InnovenergyTextfieldProps {
   id: string;
   label: string;
   value: string;
@@ -13,15 +25,79 @@ interface I_InnovenergyTextfieldProps {
   error?: boolean;
 }
 
+export const IePropertyGrid = (props: {
+  rows: I_InnovenergyTextfieldProps[];
+}) => {
+  const theme = useTheme();
+
+  const findLongestLength = () => {
+    return (
+      11 *
+      props.rows.reduce(
+        (acc, curr) => (acc > curr.label.length ? acc : curr.label.length),
+        0
+      )
+    );
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-around",
+          marginRight: "20px",
+        }}
+      >
+        {props.rows.map((prop) => (
+          <InputLabel>{prop.label}</InputLabel>
+        ))}
+      </div>
+      <div>
+        {props.rows.map((element) => {
+          return (
+            <TextField
+              color="secondary"
+              id={element.id}
+              variant="outlined"
+              name={element.name}
+              type={element.type}
+              fullWidth
+              sx={{
+                input: {
+                  bgcolor: "white",
+                  border: 0.5,
+                  borderRadius: 1,
+                  height: 15,
+                },
+                my: 0.5,
+                borderColor: "red",
+              }}
+              value={element.value || ""}
+              onChange={element.handleChange}
+              InputProps={{
+                readOnly: element.readOnly,
+              }}
+              disabled={element.disabled}
+              helperText={element.helperText}
+              error={element.error}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
   const theme = useTheme();
   return (
     <Grid container direction="row" alignItems="center" spacing={2}>
-        <Grid item xs={2}>
+      <Grid item xs={3}>
         <InputLabel>{props.label}</InputLabel>
-        
       </Grid>
-      <Grid item xs={10}>
+      <Grid item xs={9}>
         <TextField
           color="secondary"
           id={props.id}
@@ -36,6 +112,7 @@ const InnovenergyTextfield = (props: I_InnovenergyTextfieldProps) => {
               borderRadius: 1,
             },
             my: 0.5,
+            borderColor: "red",
           }}
           value={props.value || ""}
           onChange={props.handleChange}

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

@@ -10,7 +10,6 @@ const ModeButtons = () => {
   const routeMatch = useRouteMatch([
     routes.installations + routes.tree + "*",
     routes.installations + routes.list + "*",
-
   ]);
 
   return (
@@ -20,21 +19,35 @@ const ModeButtons = () => {
         color="primary"
         value={routeMatch?.pattern?.path}
         exclusive
-        sx={{ mb: 1, bgcolor: theme.palette.primary.main,}}
+        sx={{
+          mb: 1,
+          bgcolor: theme.palette.primary.light,
+        }}
         size="small"
       >
         <ToggleButton
-          color="secondary"
+          sx={{
+            color: "#707071",
+            "&.Mui-selected": {
+              bgcolor: theme.palette.primary.dark,
+              color: "#707071",
+            },
+          }}
           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="secondary"
+          sx={{
+            color: "#707071",
+            "&.Mui-selected": {
+              bgcolor: theme.palette.primary.dark,
+              color: "#707071",
+            },
+          }}
           id="mode-toggle-button-tree"
           value={routes.installations + routes.tree + "*"}
           component={Link}

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

@@ -29,7 +29,8 @@ const NavigationButtons = () => {
               borderColor: theme.palette.text.disabled,
               borderBottom: 0,
               mb: -1 / 8,
-          }}}
+            },
+          }}
           id="navigation-tab-installations"
           value={routes.installations + "*"}
           component={Link}
@@ -49,7 +50,8 @@ const NavigationButtons = () => {
               borderColor: theme.palette.text.disabled,
               borderBottom: 0,
               mb: -1 / 8,
-          }}}
+            },
+          }}
           id="navigation-tab-users"
           value={routes.users + "*"}
           component={Link}

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

@@ -1,11 +1,20 @@
-import { Alert, CircularProgress, Grid, Snackbar, useTheme } 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";
 import { FormattedMessage, useIntl } from "react-intl";
 import { I_User } from "../../util/user.util";
 import InnovenergyButton from "../Layout/InnovenergyButton";
-import InnovenergyTextfield from "../Layout/InnovenergyTextfield";
+import InnovenergyTextfield, {
+  I_InnovenergyTextfieldProps,
+  IePropertyGrid,
+} from "../Layout/InnovenergyTextfield";
 import { UserContext } from "../Context/UserContextProvider";
 import { UsersContext } from "../Context/UsersContextProvider";
 
@@ -53,43 +62,49 @@ const UserForm = (props: I_UserFormProps) => {
     setOpen(false);
   };
 
-  return (
+  const rows: I_InnovenergyTextfieldProps[] = [
-    <form onSubmit={formik.handleSubmit}>
+    {
-      <InnovenergyTextfield
+      id: "name-textfield",
-        id="name-textfield"
+      label: intl.formatMessage({
-        label={intl.formatMessage({
         id: "name",
         defaultMessage: "Name",
-        })}
+      }),
-        name="name"
+      name: "name",
-        value={formik.values.name}
+      value: formik.values.name,
-        handleChange={formik.handleChange}
+      handleChange: formik.handleChange,
-        disabled={readOnly}
+      disabled: readOnly,
-      />
+    },
-      <InnovenergyTextfield
+    {
-        id="email-textfield"
+      id: "email-textfield",
-        label={intl.formatMessage({
+      label: intl.formatMessage({
         id: "email",
         defaultMessage: "Email",
-        })}
+      }),
-        name="email"
+      name: "email",
-        value={formik.values.email}
+      value: formik.values.email,
-        handleChange={formik.handleChange}
+      handleChange: formik.handleChange,
-        disabled={readOnly}
+      disabled: readOnly,
-      />
+    },
-      <InnovenergyTextfield
+    {
-        id="information-textfield"
+      id: "information-textfield",
-        label={intl.formatMessage({
+      label: intl.formatMessage({
         id: "Information",
         defaultMessage: "Information",
-        })}
+      }),
-        name="information"
+      name: "information",
-        value={formik.values.information}
+      value: formik.values.information,
-        handleChange={formik.handleChange}
+      handleChange: formik.handleChange,
-        disabled={readOnly}
+      disabled: readOnly,
-      />
+    },
+  ];
+
+  return (
+    <form onSubmit={formik.handleSubmit}>
+      <IePropertyGrid rows={rows} />
       <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
-        {loading && <CircularProgress sx={{color: theme.palette.secondary.main}} />}
+        {loading && (
+          <CircularProgress sx={{ color: theme.palette.secondary.main }} />
+        )}
         {currentUser.hasWriteAccess && (
           <InnovenergyButton type="submit">
             <FormattedMessage id="submit" defaultMessage="Submit" />

typescript/Frontend/src/index.tsx

@@ -13,20 +13,20 @@ const root = ReactDOM.createRoot(
 
 export const colors = {
   black: "#000000",
-  blueBlack: '#2b3e54',
+  blueBlack: "#2b3e54",
-  borderColor: '#c0c6d0',
+  borderColor: "#a8b0be",
 
-  background: '#f3f4f7',
+  background: "#f3f4f7",
   //change this color in index.css too
 
-  greyDark: '#d1d7de',
+  greyDark: "#d1d7de",
-  greyLight:'#e1e4e7',
+  greyLight: "#e1e4e7",
 
-  orangeSelected: '#ffd280',
+  orangeSelected: "#ffd280",
-  orangeHover: '#ffe4b3',
+  orangeHover: "#ffe4b3",
 
   orangeDark: "#ffc04d",
-}
+};
 
 const theme = createTheme({
   components: {
@@ -51,7 +51,6 @@ const theme = createTheme({
       main: colors.orangeSelected,
       light: colors.orangeHover,
       dark: colors.orangeDark,
-
     },
   },
   typography: {