Merge branch 'fix/badgePosition#71' into 'master'

Fixed #71

Closes #71

See merge request rex-dri/rex-dri!62

frontend/src/components/common/MyBadge.js

 import React from "react";
 import Badge from "@material-ui/core/Badge";
+import { withStyles } from "@material-ui/core";
+
+
+// fix positioning of the badge that was a bit too high
+const styles = theme => ({
+  badge: {
+    top: "8px",
+    right: "9px",
+    border: `1px solid ${theme.palette.background.paper}`,
+  }
+});
 
 
 /**
@@ -9,14 +20,19 @@ import Badge from "@material-ui/core/Badge";
  * @param {object} props
  * @returns
  */
-export default function MyBadge(props) {
-  if (props.badgeContent > 1) {
+export default withStyles(styles, { withTheme: true })(function MyBadge(props) {
+  if (props.badgeContent >= props.minNumber) {
     return (
-      <Badge badgeContent={props.badgeContent} color={props.color} max={5} >
+      <Badge
+        classes={{ badge: props.classes.badge }}
+        badgeContent={props.badgeContent}
+        color={props.color}
+        max={5}
+      >
         {props.children}
       </Badge>
     );
   } else {
     return (props.children);
   }
-}
+});

frontend/src/components/university/modules/common/ModuleWrapper.js

@@ -325,12 +325,6 @@ const styles = theme => ({
     justifyContent: "flex-start",
     flexWrap: "wrap",
   },
-  badge: {
-    // margin: 0.5 * theme.spacing.unit,
-    top: -0.5 * theme.spacing.unit,
-    right: -0.5 * theme.spacing.unit,
-    border: `2px solid ${theme.palette.background.paper}`,
-  },
   green: {
     color: green.A700,
   },

frontend/src/components/university/modules/common/moduleWrapperFunctions/renderFirstRow.js

@@ -41,7 +41,7 @@ export default function renderFirstRow(userCanModerate) {
 
         <Tooltip title={moderTooltip} placement="top">
           <div style={{ display: "inline-block" }}> {/* Needed to fire events for the tooltip when below is disabled! when below is disabled!! */}
-            <MyBadge className={classes.badge} badgeContent={nbPendingModeration} color="secondary">
+            <MyBadge badgeContent={nbPendingModeration} color="secondary" minNumber={1}>
               <IconButton aria-label="Modération" disabled={moderClass == "disabled" || moderClass == "green"} onClick={() => this.openPendingModerationPanel()} className={classes.button}>
                 <VerifiedUserIcon className={classes[moderClass]} />
               </IconButton>
@@ -59,7 +59,7 @@ export default function renderFirstRow(userCanModerate) {
 
         <Tooltip title={versionTooltip} placement="top">
           <div style={{ display: "inline-block" }}> {/* Needed to fire events for the tooltip when below is disabled!! */}
-            <MyBadge className={classes.badge} badgeContent={nbVersions} color="secondary">
+            <MyBadge badgeContent={nbVersions} color="secondary" minNumber={2}>
               <IconButton aria-label="Restorer" disabled={versionClass == "disabled"} className={classes.button} onClick={() => this.setState({ historyOpen: true })}>
                 <SettingsBackRestoreIcon className={classes[versionClass]} />
               </IconButton>