From 410513709aa64c7d92281a52581d5ea35710af32 Mon Sep 17 00:00:00 2001
From: fmazzini <fmazzini@unibz.it>
Date: Tue, 13 Apr 2021 20:08:33 +0200
Subject: [PATCH] Header of the page finished
---
src/App.tsx | 5 +++
.../AuthUser/HomePage2/HomePage2.tsx | 35 +++++++++++++++----
2 files changed, 33 insertions(+), 7 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index 9fe4d45..764d4a2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -23,6 +23,11 @@ const theme = createMuiTheme({
backgroundColor: 'white',
},
},
+ MuiTab: {
+ wrapper: {
+ flexDirection: 'row',
+ },
+ },
},
});
diff --git a/src/components/AuthUser/HomePage2/HomePage2.tsx b/src/components/AuthUser/HomePage2/HomePage2.tsx
index 3972ce3..7a74ca2 100644
--- a/src/components/AuthUser/HomePage2/HomePage2.tsx
+++ b/src/components/AuthUser/HomePage2/HomePage2.tsx
@@ -1,6 +1,9 @@
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import { CssBaseline, Tabs, Tab, Paper } from '@material-ui/core';
+import { CssBaseline, Tabs, Tab } from '@material-ui/core';
+import HomeIcon from '@material-ui/icons/Home';
+import ImportContactsIcon from '@material-ui/icons/ImportContacts';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
const useStyles = makeStyles((theme) => ({
root: {
@@ -12,14 +15,19 @@ const useStyles = makeStyles((theme) => ({
tabs: {
color: 'white',
paddingLeft: '25px',
+ paddingRight: '25px',
paddingTop: '8px',
},
tabPan: {
paddingLeft: '56px',
paddingRight: '56px',
},
- leftAlign: {
- marginRight: 'auto',
+ rightAlign: {
+ marginLeft: 'auto',
+ },
+ tabIcon: {
+ paddingRight: '10px',
+ fontSize: '38px',
},
}));
@@ -31,12 +39,25 @@ export const HomePage2: FC = () => {
return (
<div className={classes.root}>
<CssBaseline />
- <Tabs value={selectedTab} className={classes.tabs}>
- <Tab label="HomePage" className={classes.tabPan} />
- <Tab label="Reservation" className={classes.tabPan} />
+ <Tabs
+ value={selectedTab}
+ className={classes.tabs}
+ TabIndicatorProps={{ style: { display: 'none' } }}
+ >
+ <Tab
+ label="HomePage"
+ icon={<HomeIcon className={classes.tabIcon} />}
+ className={classes.tabPan}
+ />
+ <Tab
+ label="Reservation"
+ icon={<ImportContactsIcon className={classes.tabIcon} />}
+ className={`${classes.tabPan} ${classes.rightAlign}`}
+ />
<Tab
label="Profile"
- className={`${classes.tabPan} ${classes.leftAlign}`}
+ className={classes.tabPan}
+ icon={<AccountCircleIcon className={classes.tabIcon} />}
/>
</Tabs>
</div>
--
GitLab