Commit 6b4719a2 authored by Florent Chehab's avatar Florent Chehab

fix(new theme): links & other

* Change the way links are styled to handle multiline
* Make sure the drawer menu closes on item click
* Limit width of user info
* Less flashy main menu icons
parent 4cfe777a
Pipeline #38660 passed with stages
in 3 minutes and 12 seconds
......@@ -105,6 +105,10 @@ const styles = theme => ({
marginLeft: theme.spacing.unit,
marginRight: theme.spacing.unit,
},
primaryDark: {
backgroundColor: theme.palette.primary.dark,
boxShadow: theme.shadows[1],
},
desktopOnly: {
[theme.breakpoints.down("md")]: {
display: "none"
......@@ -190,7 +194,11 @@ class AppFrame extends React.Component {
<div className={classes.ifNotTooSmallAndInlined}>
{items.map(({name, Icon, route}, idx) => (
<CustomNavLink to={route} key={idx}>
<Fab size="medium" color="secondary" aria-label={name} className={classes.mobileIconContainer}>
<Fab size="medium"
color="primary"
classes={{primary: classes.primaryDark}}
aria-label={name}
className={classes.mobileIconContainer}>
{<Icon className={classNames(classes.mobileIcon, classes.contrastTextSecondary)}/>}
</Fab>
</CustomNavLink>
......@@ -246,7 +254,7 @@ class AppFrame extends React.Component {
<div className={classes.ifNotTooSmallAndInlined}>
<IconWithMenu Icon={InfoIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "secondary", className: classes.mobileIconContainer}}
fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
menuItems={[
{label: "Mes informations", route: APP_ROUTES.userCurrent},
{label: "Conditions d'utilisations", route: APP_ROUTES.aboutConditions},
......@@ -254,7 +262,7 @@ class AppFrame extends React.Component {
/>
<IconWithMenu Icon={SettingsIcon}
iconProps={{color: "inherit", className: classes.mobileIcon}}
fabProps={{color: "secondary", className: classes.mobileIconContainer}}
fabProps={{color: "primary", className: classes.mobileIconContainer, classes: {primary: classes.primaryDark}}}
menuItems={[{label: "Thème", route: APP_ROUTES.themeSettings}]}
/>
</div>
......
......@@ -15,7 +15,7 @@ class DrawerMenu extends React.Component {
toListItem(items) {
return items.map(({name, route, Icon}, idx) => (
<CustomNavLink key={idx} to={route} onClick={() => this.props.closeDrawer()}>
<ListItem button>
<ListItem button onClick={() => this.props.closeDrawer()}>
<ListItemIcon>
<Icon/>
</ListItemIcon>
......
......@@ -14,23 +14,11 @@ export const styles = theme => ({
link: {
color: theme.palette.text.primary,
textDecoration: "none",
position: "relative",
zIndex: 1,
// fontWeight: "bold",
["&::after"]: {
position: "absolute",
content: "no-close-quote",
height: "0.4em",
maxHeight: 6,
left: -2,
top: "1em",
backgroundColor: getLinkColor(theme),
borderBottomLeftRadius: "100%",
borderBottomRightRadius: "50%",
borderTopRightRadius: "30%",
width: "calc(100% + 4px)",
zIndex: -1,
}
boxShadow: `0px 0.08em 0.01em -0.01em ${getLinkColor(theme)}, inset 0px -0.1em 0.03em -0.03em ${getLinkColor(theme)}`,
borderTopRightRadius: "100%",
borderTopLeftRadius: "100%",
borderBottomLeftRadius: "10%",
borderBottomRightRadius: "30%",
},
});
......
......@@ -13,6 +13,7 @@ import SameLine from "../common/SameLine";
import {compose} from "recompose";
import UserInfoEditor from "./UserInfoEditor";
import CreateIcon from "@material-ui/icons/Create";
import {classNames} from "../../utils/classNames";
function TypographyWithIcon(props) {
return (
......@@ -57,7 +58,7 @@ class UserInfo extends CustomComponentForAPI {
this.setState({editorOpen: false});
}
check(){
check() {
const userId = parseInt(this.props.userId);
if (lastUserId !== userId) {
// we make sure to update the data if the userId changes
......@@ -94,7 +95,8 @@ class UserInfo extends CustomComponentForAPI {
displayData = isOwner || userSharesInfo;
return (
<>
<div className={classes.root}>
<div className={classNames(classes.wrapper, classes.centered)}>
<TypographyWithIcon public={userSharesInfo}
variant="h3"
text={displayData && firstName && lastName ? `${firstName} ${lastName.toUpperCase()}` : "Prénom et Nom"}/>
......@@ -177,12 +179,14 @@ class UserInfo extends CustomComponentForAPI {
{
isOwner ?
<>
<div style={{width: "100%"}}>
<Button variant={"contained"}
color={"primary"}
fullWidth
onClick={() => this.openEditorPanel()}>
onClick={() => this.openEditorPanel()} >
Éditer<CreateIcon className={classes.rightIcon}/>
</Button>
</div>
<UserInfoEditor open={this.state.editorOpen}
closeEditorPanel={() => this.closeEditorPanel()}
rawModelData={userModelData}/>
......@@ -191,7 +195,8 @@ class UserInfo extends CustomComponentForAPI {
<></>
}
</>
</div>
</div>
);
}
}
......@@ -218,6 +223,12 @@ const mapDispatchToProps = (dispatch) => {
};
const styles = theme => ({
root: {
width: "100%",
},
wrapper: {
maxWidth: "800px",
},
button: {
margin: theme.spacing.unit,
},
......@@ -231,6 +242,10 @@ const styles = theme => ({
marginTop: 2 * theme.spacing.unit,
marginBottom: theme.spacing.unit,
},
centered: {
margin: "0 auto",
display: "block",
}
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment