From da32dd0d8ffc0b239cd75b69dfca9d05f8ede150 Mon Sep 17 00:00:00 2001
From: Francesco <fmazzini@unibz.it>
Date: Mon, 21 Jun 2021 22:01:20 +0200
Subject: [PATCH] Adjust ChoseRole not finished THO
---
src/components/Auth/ChoseRole/ChoseRole.tsx | 61 ++++++++++++++++-----
1 file changed, 47 insertions(+), 14 deletions(-)
diff --git a/src/components/Auth/ChoseRole/ChoseRole.tsx b/src/components/Auth/ChoseRole/ChoseRole.tsx
index 7cb3b87..75a953b 100644
--- a/src/components/Auth/ChoseRole/ChoseRole.tsx
+++ b/src/components/Auth/ChoseRole/ChoseRole.tsx
@@ -1,9 +1,11 @@
import React, { FC, useEffect, useState } from 'react';
import Button from '@material-ui/core/Button';
+import { Grid, Typography, Hidden } from '@material-ui/core';
import { getRoles } from 'api/getRoles';
import { setRole } from 'api/setRole';
import { useHistory } from 'react-router-dom';
import { AuthRoutes } from 'api/routes';
+import { choseRoleStyle } from './ChoseRoleStyle.style';
/**
* Page that let's users decide role between available roles.
@@ -11,6 +13,8 @@ import { AuthRoutes } from 'api/routes';
* @returns ChoseRole component.
*/
export const ChoseRole: FC = () => {
+ const classes = choseRoleStyle();
+
const history = useHistory();
const [userRoles, setUserRoles] = useState<string[]>(['']);
@@ -26,20 +30,49 @@ export const ChoseRole: FC = () => {
return (
<div data-testid="ChoseRole">
- {userRoles ? (
- userRoles.map((role) => (
- <Button
- variant="outlined"
- color="default"
- key={role}
- onClick={() => choseAndForward(role)}
- >
- {role}
- </Button>
- ))
- ) : (
- <h1>No roles were returned.</h1>
- )}
+ <Grid container direction="column" className={classes.paddingBottom}>
+ <div className={classes.root}>
+ <header>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
+
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Choose Your
+ </Typography>
+ <Typography variant="h2" className={classes.whiteText}>
+ ROLE
+ </Typography>
+ </Grid>
+
+ <Grid item xs={1} />
+ </Grid>
+ </header>
+ </div>
+ </Grid>
+
+ <Grid container>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ {userRoles ? (
+ userRoles.map((role) => (
+ <Button
+ variant="outlined"
+ fullWidth
+ color="default"
+ key={role}
+ onClick={() => choseAndForward(role)}
+ className={classes.paddingTopKlein}
+ >
+ {role}
+ </Button>
+ ))
+ ) : (
+ <h1>No roles were returned.</h1>
+ )}
+ </Grid>
+ <Grid item xs={1} lg={2} />
+ </Grid>
</div>
);
};
--
GitLab