From 17e37ebdc9a0d2a7c7973ad1b1902fe227d20707 Mon Sep 17 00:00:00 2001
From: Florent Chehab <florent.chehab@gmail.com>
Date: Sat, 9 Mar 2019 18:47:25 +0100
Subject: [PATCH] Fixed #71

---
 frontend/src/components/common/MyBadge.js     | 24 +++++++++++++++----
 .../modules/common/ModuleWrapper.js           |  6 -----
 .../moduleWrapperFunctions/renderFirstRow.js  |  4 ++--
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/common/MyBadge.js b/frontend/src/components/common/MyBadge.js
index eaa8b990..642ee901 100644
--- a/frontend/src/components/common/MyBadge.js
+++ b/frontend/src/components/common/MyBadge.js
@@ -1,5 +1,16 @@
 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);
   }
-}
+});
diff --git a/frontend/src/components/university/modules/common/ModuleWrapper.js b/frontend/src/components/university/modules/common/ModuleWrapper.js
index 2f1fb1de..87e640a4 100644
--- a/frontend/src/components/university/modules/common/ModuleWrapper.js
+++ b/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,
   },
diff --git a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderFirstRow.js b/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderFirstRow.js
index 55cd6b03..38c79577 100644
--- a/frontend/src/components/university/modules/common/moduleWrapperFunctions/renderFirstRow.js
+++ b/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>
-- 
GitLab