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

frontend/src/components/app/AppFrame.js

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

frontend/src/components/app/DrawerMenu.js

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

frontend/src/components/common/TextLink.js

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

frontend/src/components/user/UserInfo.js

@@ -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,104 +95,108 @@ class UserInfo extends CustomComponentForAPI {
       displayData = isOwner || userSharesInfo;
 
     return (
-      <>
-        <TypographyWithIcon public={userSharesInfo}
-                            variant="h3"
-                            text={displayData && firstName && lastName ? `${firstName} ${lastName.toUpperCase()}` : "Prénom et Nom"}/>
+      <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"}/>
 
-        <TypographyWithIcon public={userSharesInfo}
-                            variant="h5"
-                            text={displayData ? login : "Login UTC"}
-                            typographyClass={classes.login}/>
+          <TypographyWithIcon public={userSharesInfo}
+                              variant="h5"
+                              text={displayData ? login : "Login UTC"}
+                              typographyClass={classes.login}/>
 
-        <Typography variant="caption">Les prénom, nom et login sont fournis par le CAS de l'UTC.</Typography>
+          <Typography variant="caption">Les prénom, nom et login sont fournis par le CAS de l'UTC.</Typography>
 
 
-        <div className={classes.spacer}/>
+          <div className={classes.spacer}/>
 
 
-        <TypographyWithIcon public={true}
-                            variant="h6"
-                            text="Pseudo"/>
+          <TypographyWithIcon public={true}
+                              variant="h6"
+                              text="Pseudo"/>
 
-        <Typography variant="body1"><em>{pseudo}</em></Typography>
+          <Typography variant="body1"><em>{pseudo}</em></Typography>
 
 
-        <div className={classes.spacer}/>
+          <div className={classes.spacer}/>
 
 
-        <TypographyWithIcon public={userSharesInfo}
-                            variant="h6"
-                            text="Adresse mail UTC"/>
-        {
-          displayData && email ?
-            <>
-              <Button
-                variant="outlined"
-                color="secondary"
-                className={classes.button}
-                href={`mailto:${email}`}
-              >
-                {email} <SendIcon className={classes.rightIcon}/>
-              </Button>
+          <TypographyWithIcon public={userSharesInfo}
+                              variant="h6"
+                              text="Adresse mail UTC"/>
+          {
+            displayData && email ?
+              <>
+                <Button
+                  variant="outlined"
+                  color="secondary"
+                  className={classes.button}
+                  href={`mailto:${email}`}
+                >
+                  {email} <SendIcon className={classes.rightIcon}/>
+                </Button>
+                <Typography variant="caption">
+                  Cette adresse mail a été fournie par le CAS de l'UTC lors de la connexion de la personne.
+                  Si la personne n"est plus à l"UTC, il se peut que cette adresse ne soit plus d'actualité.
+                </Typography>
+              </>
+              :
               <Typography variant="caption">
-                Cette adresse mail a été fournie par le CAS de l'UTC lors de la connexion de la personne.
-                Si la personne n"est plus à l"UTC, il se peut que cette adresse ne soit plus d'actualité.
+                Aucune adresse mail rattachée à ce compte (compte créé hors CAS).
               </Typography>
-            </>
-            :
-            <Typography variant="caption">
-              Aucune adresse mail rattachée à ce compte (compte créé hors CAS).
-            </Typography>
-        }
-
-
-        <div className={classes.spacer}/>
-
-
-        <TypographyWithIcon public={userSharesInfo}
-                            variant={"h6"}
-                            text={"Autre adresse de contact"}/>
-        {
-          displayData && secondaryEmail !== null ?
-            <>
-              <Button variant="outlined"
-                      color="secondary"
-                      className={classes.button}
-                      href={`mailto:${secondaryEmail}`}>
-                {secondaryEmail} <SendIcon className={classes.rightIcon}/>
-              </Button>
+          }
+
+
+          <div className={classes.spacer}/>
+
+
+          <TypographyWithIcon public={userSharesInfo}
+                              variant={"h6"}
+                              text={"Autre adresse de contact"}/>
+          {
+            displayData && secondaryEmail !== null ?
+              <>
+                <Button variant="outlined"
+                        color="secondary"
+                        className={classes.button}
+                        href={`mailto:${secondaryEmail}`}>
+                  {secondaryEmail} <SendIcon className={classes.rightIcon}/>
+                </Button>
+                <Typography variant="caption">
+                  Cette adresse mail a été mise à disposition par la personne comme autre point de contact.
+                </Typography>
+              </>
+              :
               <Typography variant="caption">
-                Cette adresse mail a été mise à disposition par la personne comme autre point de contact.
+                Aucune addresse email secondaire n'est disponible.
               </Typography>
-            </>
-            :
-            <Typography variant="caption">
-              Aucune addresse email secondaire n'est disponible.
-            </Typography>
-        }
-
-
-        <div className={classes.spacer}/>
-
-        {
-          isOwner ?
-            <>
-              <Button variant={"contained"}
-                      color={"primary"}
-                      fullWidth
-                      onClick={() => this.openEditorPanel()}>
-                Éditer<CreateIcon className={classes.rightIcon}/>
-              </Button>
-              <UserInfoEditor open={this.state.editorOpen}
-                              closeEditorPanel={() => this.closeEditorPanel()}
-                              rawModelData={userModelData}/>
-            </>
-            :
-            <></>
-        }
-
-      </>
+          }
+
+
+          <div className={classes.spacer}/>
+
+          {
+            isOwner ?
+              <>
+                <div style={{width: "100%"}}>
+                  <Button variant={"contained"}
+                          color={"primary"}
+                          fullWidth
+                          onClick={() => this.openEditorPanel()} >
+                    Éditer<CreateIcon className={classes.rightIcon}/>
+                  </Button>
+                </div>
+                <UserInfoEditor open={this.state.editorOpen}
+                                closeEditorPanel={() => this.closeEditorPanel()}
+                                rawModelData={userModelData}/>
+              </>
+              :
+              <></>
+          }
+
+        </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",
+  }
 });