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

new colors scheme, centralize colors configs

This commit is contained in:
Noe 2023-07-04 10:20:15 +02:00
parent c6fbb1d931
commit 24463d23ac
25 changed files with 190 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
typescript/Frontend/src/App.tsx
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16
typescript/Frontend/src/components/Layout/InnovenergyTab.tsx
View File

@ -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"] : {}),
},
}}
/>
);

12
typescript/Frontend/src/components/Layout/InnovenergyTabs.tsx
View File

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

18
typescript/Frontend/src/components/Layout/NavigationButtons.tsx
View File

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

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

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

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

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

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

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

18
typescript/Frontend/src/components/Users/UserTabs.tsx
View File

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

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

@ -12,7 +12,5 @@ code {
monospace;
}
body {
background-color: #f3f4f8;
}
background-color: #f3f4f7;
}

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

@ -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,21 +38,22 @@ 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`,
fontWeightRegular: 300,

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

@ -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`,
},
@ -129,7 +131,7 @@ export const AntTabs = styled(Tabs)({
overflow: "visible!important",
},
"&.Mui-selected": {
color: "#000000",
color: colors.black,
backgroundColor: "red",
borderColor: `#90A7c5 #90A7c5 #fff`,
},