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 = () => {
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
- {loading && }
+ {loading && }
);
};
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
- {loading && }
+ {loading && }
);
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 = () => {
-
+
);
} 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}
/>
- {loading && }
+ {loading && }
{!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 = () => {
{currentType === "Folder" ? (
-
{
) : (
{
)}
{
if (loading) {
return (
-
+
);
}
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();
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,
}}
>
{
-
+
);
} 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 (
-
+
);
} 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 }}
>
{
+ 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 (
-
+
{
component={Link}
to={routes.installation + id}
/>
+
+
+
+
{
component={Link}
to={routes.liveView + id}
/>
+
+
+
+
+
+
+
{
component={Link}
to={routes.log + id}
/>
+
+
+
+
+
+
diff --git a/typescript/Frontend/src/components/Installations/Log/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 (
-
+
{
- const [values, setValues] = useState(null);
+ const [values, setValues] = useState(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 (
-
+
-
+
);
};
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 = (props: I_DetailProps) => {
-
+
);
} 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}
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 (
{
+ const theme = useTheme();
const routeMatch = useRouteMatch([
routes.installations + "*",
routes.users + "*",
@@ -19,6 +21,14 @@ const NavigationButtons = () => {
value={routeMatch?.pattern?.path}
>
{
}
/>
;
id: string;
@@ -74,7 +75,7 @@ const SearchSidebar = (props: SearchSidebarProps) => {
{
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,
}}
>
@@ -68,7 +68,7 @@ const Detail = (props: I_DetailProps) => {
-
+
);
} 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}
/>
- {loading && }
+ {loading && }
{currentUser.hasWriteAccess && (
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 = () => {
})}
>
{
value={routes.users + routes.user + ":id"}
component={Link}
to={routes.user + id}
- sx={{
- "&.Mui-selected": {
- backgroundColor: "#CCD6E4",
- },
- }}
+
/>
);
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) => (
@@ -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`,
},