Fix InformationPanel design

components/common/information-panel/InformationPanel.module.scss

+.window {
+  background-color: #D2DFFF;
+  border-radius: 5px;
+  padding: 5px;
+  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
+
+  .header, .content {
+    padding: 10px 20px;
+  }
+
+  .header {
+    font-size: 1.1rem;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      cursor: pointer;
+    }
+  }
+
+  .content {
+    background-color: white;
+    max-height: 600px;
+    overflow: scroll;
+    line-height: 1.3;
+  }
+
+}
\ No newline at end of file

components/common/information-panel/InformationPanel.tsx

-import lightBulb from "@iconify/icons-twemoji/light-bulb";
-import { Icon } from "@iconify/react";
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import IconButton from "@material-ui/core/IconButton";
-import { withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
 import React, { PureComponent } from "react";
 // eslint-disable-next-line no-unused-vars
@@ -13,71 +6,10 @@ import { connect, ConnectedProps } from "react-redux";
 import { hideInformationPanel } from "../../../redux/actions";
 // eslint-disable-next-line no-unused-vars
 import { RootState } from "../../../redux/reducers";
-
-const styles = () => ({
-  cardContainer: {
-    backgroundColor: "rgba(222, 213, 0, 0.3)",
-    minWidth: 50,
-    paddingBottom: 0,
-  },
-  cardContent: {
-    "&:last-child": {
-      paddingBottom: 0,
-    },
-    padding: 0,
-    width: "moz-available",
-  },
-  cardEditDeleteButton: {
-    "&:hover": {
-      backgroundColor: "transparent",
-    },
-    margin: 0,
-    marginLeft: 0,
-    padding: 0,
-  },
-  cardHeader: {
-    display: "flex",
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    padding: 15,
-    paddingBottom: 5,
-    textAlign: "left",
-  },
-  divTitre: {
-    display: "inline-block",
-    paddingLeft: "3px",
-  },
-  styleExpansionPanel: {
-    backgroundColor: "rgba(222, 213, 0, 0)",
-    boxShadow: "none",
-    padding: "0px",
-  },
-  subtitleCard: {
-    color: "#565656",
-    fontFamily: "Lato",
-    fontSize: "0.875em",
-    marginBottom: "0.7em",
-    marginLeft: "10px",
-    textAlign: "justify",
-  },
-  subtitleEnSavoirPlus: {
-    color: "#565656",
-    fontFamily: "Lato",
-    fontSize: "0.875em",
-    padding: "0",
-  },
-  titleCard: {
-    color: "#565656",
-    fontFamily: "Lato",
-    fontSize: "1.125em",
-    fontWeight: "bold",
-    marginLeft: "10px",
-  },
-});
+import styles from "./InformationPanel.module.scss";
 
 interface Props {
-  classes: any;
+  children:|string;
   title: string;
   name: string;
 }
@@ -98,7 +30,6 @@ class InformationPanel extends PureComponent<PropsFromRedux & Props> {
   render() {
     const {
       children,
-      classes,
       isVisible,
       onClose,
       title,
@@ -109,37 +40,19 @@ class InformationPanel extends PureComponent<PropsFromRedux & Props> {
     }
 
     return (
-      <Card className={classes.cardContainer}>
-        <CardContent className={classes.cardContent}>
-          <div className={classes.cardHeader}>
-            <div className={classes.divTitre}>
-              <Icon height="40" icon={lightBulb} width="40" />
+      <div className={styles.window}>
+        <div className={styles.header}>
+          <span>{title}</span>
+          <CloseIcon className={styles.close} onClick={onClose} />
         </div>
-            <div className={classes.divTitre}>
-              <Typography className={classes.titleCard}>
-                {title}
-              </Typography>
-              <Typography className={classes.subtitleCard}>
+        <div className={styles.content}>
           {children}
-              </Typography>
-            </div>
-
-            <div className={classes.cardHeaderButtons}>
-              <IconButton
-                disableRipple
-                aria-label="Delete"
-                classes={{ root: classes.cardEditDeleteButton }}
-                onClick={onClose}>
-                <CloseIcon fontSize="small" />
-              </IconButton>
         </div>
       </div>
-        </CardContent>
-      </Card>
     );
   }
 }
 
-const Component = withStyles(styles as any)(connector(InformationPanel));
+const Component = connector(InformationPanel);
 
 export { Component as InformationPanel };

components/dotations/results/Results.tsx

@@ -34,12 +34,14 @@ class Results extends PureComponent<Props> {
       <div className={styles.container}>
         {isInformationPanelVisible && (
           <Grid container spacing={3}>
-            <Grid item>
-              <InformationPanel name={INFORMATION_PANEL_NAME} title="Information">
-                Les montants des dotations calculées ci-dessous sont des estimations.
-                Elles s’appuient sur les données disponibles des années précédentes et
+            <Grid item lg={8} md={12} sm={12} xl={9} xs={12}>
+              <InformationPanel
+                name={INFORMATION_PANEL_NAME}
+                title="Les montants des dotations calculées ci-dessous sont des estimations."
+              >
+                Les dotations de LexImpact s’appuient sur les données de l’année 2019. Elles
                 peuvent donc différer des montants effectivement perçus l’année prochaine.
-                Seuls les montants calculés par la DGCL feront foi.
+                Seuls les montants calculés par la DGCL font foi.
               </InformationPanel>
             </Grid>
           </Grid>

components/ir/cartes-impact/impact-component.jsx

@@ -17,16 +17,13 @@ class ImpactComponent extends PureComponent {
       <div className={styles.container}>
         <Grid container spacing={3}>
           {isInformationPanelVisible && isUserLogged && (
-            <Grid item xs={12}>
-              <InformationPanel name={INFORMATION_PANEL_NAME} title="Epidémie de Covid-19">
+            <Grid item lg={8} md={12} sm={12} xl={9} xs={12}>
+              <InformationPanel name={INFORMATION_PANEL_NAME} title="Incidence de la crise sanitaire sur les résultats">
                 L&apos;épidémie actuelle affectant l&apos;économie dans une mesure qui
-                est à ce jour impossible à prévoir, les résultats que nous affichons sont
-                très probablement surestimés.
-                <br />
-                Les estimations de Leximpact des effets sur le budget de l&apos;État sont
-                calculées à partir de données recalibrées s&apos;appuyant sur des enquêtes
-                d&apos;années passées. Dès que nous aurons plus d&apos;informations,
-                nous recalibrerons le modèle en conséquence.
+                est à ce jour difficile à prévoir, les résultats que nous affichons sont
+                très probablement surestimés. Les estimations de Leximpact des effets sur
+                le budget de l&apos;État sont calculées à partir de données recalibrées
+                s&apos;appuyant sur des enquêtes d&apos;années passées.
               </InformationPanel>
             </Grid>
           )}