Innovenergy
/
Innovenergy_trunk
2
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Color

This commit is contained in:
Noe 2023-07-03 14:43:12 +02:00
parent 869a83b799
commit c5ff15d6f4
27 changed files with 153 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
typescript/Frontend/src/Login.tsx
View File

@ -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>
);
};

6
typescript/Frontend/src/ResetPassword.tsx
View File

@ -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>
);

3
typescript/Frontend/src/components/Groups/AccessManagement/AccessManagement.tsx
View File

@ -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 />

10
typescript/Frontend/src/components/Groups/Folder.tsx
View File

@ -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) {

5
typescript/Frontend/src/components/Groups/FolderForm.tsx
View File

@ -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)}

5
typescript/Frontend/src/components/Groups/GroupTabs.tsx
View File

@ -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",

8
typescript/Frontend/src/components/Groups/Tree/GroupTree.tsx
View File

@ -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>
);
}

10
typescript/Frontend/src/components/Installations/Installation.tsx
View File

@ -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) {

19
typescript/Frontend/src/components/Installations/InstallationList.tsx
View File

@ -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,7 +45,11 @@ 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();
@ -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,
},
}}
>

8
typescript/Frontend/src/components/Installations/InstallationTabs.tsx
View File

@ -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",

12
typescript/Frontend/src/components/Installations/Log/CheckboxTree.tsx
View File

@ -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)}

13
typescript/Frontend/src/components/Installations/Log/DateRangePicker.tsx
View File

@ -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) {

6
typescript/Frontend/src/components/Installations/Log/ScalarGraph.tsx
View File

@ -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"

9
typescript/Frontend/src/components/Installations/Log/TopologyView.tsx
View File

@ -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"

5
typescript/Frontend/src/components/Layout/Detail.tsx
View File

@ -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) {

8
typescript/Frontend/src/components/Layout/InnovenergyButton.tsx
View File

@ -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;

5
typescript/Frontend/src/components/Layout/InnovenergyTextfield.tsx
View File

@ -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}

2
typescript/Frontend/src/components/Layout/LanguageSelect.tsx
View File

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

3
typescript/Frontend/src/components/Layout/LogoutButton.tsx
View File

@ -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>

11
typescript/Frontend/src/components/Layout/ModeButtons.tsx
View File

@ -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}

29
typescript/Frontend/src/components/Layout/Search.tsx
View File

@ -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",
border: "1px solid",
borderColor: "#577ba840",
backgroundColor: theme.palette.primary.dark,
border: "2px solid",
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",
color: "info",
backgroundColor: theme.palette.primary.dark,
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} />

10
typescript/Frontend/src/components/Users/User.tsx
View File

@ -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) {

5
typescript/Frontend/src/components/Users/UserForm.tsx
View File

@ -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" />

13
typescript/Frontend/src/components/Users/UserList.tsx
View File

@ -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,
},
}}
>

2
typescript/Frontend/src/index.css
View File

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

29
typescript/Frontend/src/index.tsx
View File

@ -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",
dark: "#CCD6E4",
},
info: {
main: "#2b3e54",
},
warning: {
main: "#90a7c5",
main: colors.orangeSelected,
light: colors.orangeHover,
},
},
typography: {
fontFamily: `"Ubuntu", sans-serif`,
fontWeightRegular: 300,

15
typescript/Frontend/src/util/installation.util.tsx
View File

@ -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)({