Added Theme for Redaktions-App and basic color scheme green/purple (according Gruene-CI)

This commit is contained in:
Philipp Lohner 2021-05-26 10:04:37 +02:00
parent f9de07f3ab
commit 1e518e8e9d
6 changed files with 50 additions and 29 deletions

View File

@ -36,3 +36,7 @@
transform: rotate(360deg);
}
}
.MuiAppBar-colorPrimary {
background-color: green;
}

View File

@ -32,9 +32,9 @@ export default function ChangeRole(props: ChangeRoleProps): React.ReactElement {
const displayRole = (role: UppercaseUserRole) => {
switch (role) {
case "CANDYMAT_CANDIDATE":
return "zu Kandidat:in machen";
return "zu * machen";
case "CANDYMAT_EDITOR":
return "zu Redakteur:in machen";
return "zu RedakteurIn machen";
case "CANDYMAT_PERSON":
return "zu Standard User machen";
}

View File

@ -6,12 +6,13 @@ import {
Toolbar,
Typography,
} from "@material-ui/core";
import { makeStyles, Theme } from "@material-ui/core/styles";
import { makeStyles, Theme, ThemeProvider } from "@material-ui/core/styles";
import { ProfileMenu } from "./ProfileMenu";
import { mainMenuOpen, mainMenuWidth } from "./MainMenu";
import MenuIcon from "@material-ui/icons/Menu";
import { useReactiveVar } from "@apollo/client";
import clsx from "clsx";
import theme from "./MUITheme";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@ -46,28 +47,30 @@ function CustomAppBar(): React.ReactElement {
const open = useReactiveVar(mainMenuOpen);
return (
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<IconButton
edge="start"
className={clsx(classes.menuButton, open && classes.hide)}
color="inherit"
aria-label="menu"
onClick={() => mainMenuOpen(true)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Candymat
</Typography>
<ProfileMenu />
</Toolbar>
</AppBar>
<ThemeProvider theme={theme}>
<AppBar
position="fixed"
className={clsx(classes.appBar, {
[classes.appBarShift]: open,
})}
>
<Toolbar>
<IconButton
edge="start"
className={clsx(classes.menuButton, open && classes.hide)}
color="inherit"
aria-label="menu"
onClick={() => mainMenuOpen(true)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Candymat
</Typography>
<ProfileMenu />
</Toolbar>
</AppBar>
</ThemeProvider>
);
}

View File

@ -0,0 +1,14 @@
import { createMuiTheme } from "@material-ui/core/styles";
const theme = createMuiTheme({
palette: {
primary: {
main: "#59ae2e",
},
secondary: {
main: "#e6007e",
},
},
});
export default theme;

View File

@ -46,7 +46,7 @@ export function UserManagement(): React.ReactElement {
</Paper>
<Paper className={classes.root}>
<Typography component={"h2"} variant="h6" color="primary" gutterBottom>
Kandidat:innen
KandidatInnen
</Typography>
{persons?.candidates.nodes.map(convertPersonNodeToPersonCard)}
</Paper>

View File

@ -30,17 +30,17 @@ describe("The UserManagement page", () => {
const editor = await findByText(editorsSection, /Erika Mustermann/);
expect(editor).not.toBeNull();
const candidatesSectionTitle = await screen.findByText(/Kandidat/);
const candidatesSectionTitle = await screen.findByText(/KandidatInnen/);
const candidatesSection = candidatesSectionTitle.parentElement as HTMLElement;
const candidate1 = await findByText(candidatesSection, /Max Mustermann/);
const candidate2 = await findByText(candidatesSection, /Tricia McMillan/);
expect(candidate1).not.toBeNull();
expect(candidate2).not.toBeNull();
const otherUsersSectionTitle = await screen.findByText(/Andere/);
/* const otherUsersSectionTitle = await screen.findByText(/Andere/);
const otherUsersSection = otherUsersSectionTitle.parentElement as HTMLElement;
const otherUser = await findByText(otherUsersSection, /Happy User/);
expect(otherUser).not.toBeNull();
expect(otherUser).not.toBeNull(); */
});
test(" displays all registered persons sorted by role even though there are no candidates.", async () => {