refactor: added RO description to first RO & changes to research outp…

…ut form CSS
OPIDoR · Jan 6, 2025 · 52dd9b6 · 52dd9b6
1 parent b41499a
commit 52dd9b6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 27 deletions.
diff --git a/src/components/ResearchOutput/ResearchOutputForm.jsx b/src/components/ResearchOutput/ResearchOutputForm.jsx
@@ -2,6 +2,8 @@ import React, { useContext } from "react";
 import { Tab } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Tabs } from "react-bootstrap";
+import DOMPurify from "dompurify";
+
 import AddResearchOutput from "./AddResearchOutput";
 import ImportResearchOutput from "./ImportResearchOutput";
 import * as styles from "../assets/css/modal.module.css";
@@ -16,20 +18,35 @@ function ResearchOutputForm({ planId, handleClose, edit = false }) {
   const { configuration } = useContext(GlobalContext);
 
   return (
-    <>
+    <div className="dmpopidor-branding">
+      <div className={`col-md-12 ${styles.info_box}`}>
+        <fieldset>
+          <legend className={styles.legend}>
+            Info
+          </legend>
+          <div
+            className="col-md-12"
+            style={{ margin: 0, wordWrap: 'break-word' }}
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize([t('Research product: dataset, software, workflow, sample, protocol, etc.<br />The creation of a research product allows you to describe the specific management of this product according to its nature or discipline.<br />You can create as many research products as you need.')]),
+            }}
+          >
+          </div>
+        </fieldset>
+      </div>
       {edit ? (
         <AddResearchOutput planId={planId} handleClose={handleClose} inEdition={edit} />
       ) : (
-        <Tabs className={`mb-3 ${styles.modal_tabs}`} defaultActiveKey={"create"} id="create-edit-research-output-tabs">
-          <Tab eventKey={"create"} title={t("Create")}>
+        <Tabs className={`mb-3 ${styles.modal_tabs}`} defaultActiveKey={"create"}  id="create-edit-research-output-tabs">
+          <Tab eventKey={"create"} title={t("Create")} tabClassName="toto">
             <AddResearchOutput planId={planId} handleClose={handleClose} inEdition={edit} />
           </Tab>
-          {configuration.enableImportResearchOutput && (<Tab eventKey="import" title={t("Import")}>
+          {configuration.enableImportResearchOutput && (<Tab eventKey="import" title={t("Import")} tabClassName="toto">
             <ImportResearchOutput planId={planId} handleClose={handleClose} />
           </Tab>)}
         </Tabs>
       )}
-    </>
+    </div>
   );
 }
 

diff --git a/src/components/ResearchOutput/ResearchOutputModal.jsx b/src/components/ResearchOutput/ResearchOutputModal.jsx
@@ -1,11 +1,6 @@
 import React, { useContext } from "react";
-import { Modal, Tab } from "react-bootstrap";
+import { Modal } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { Tabs } from "react-bootstrap";
-import DOMPurify from "dompurify";
-import AddResearchOutput from "./AddResearchOutput";
-import ImportResearchOutput from "./ImportResearchOutput";
-import * as styles from "../assets/css/modal.module.css";
 import { GlobalContext } from "../context/Global";
 import ResearchOutputForm from "./ResearchOutputForm";
 
@@ -23,21 +18,6 @@ function ResearchOutputModal({ planId, handleClose, show, edit = false }) {
         <Modal.Title>{t(edit ? 'Edit research output' : `Create${configuration.enableImportResearchOutput ? ' or import' : ''} a research output`)}</Modal.Title>
       </Modal.Header>
       <Modal.Body style={{ padding: "20px !important" }}>
-        <div className={`col-md-12 ${styles.info_box}`}>
-          <fieldset>
-            <legend className={styles.legend}>
-              Info
-            </legend>
-            <div
-              className="col-md-12"
-              style={{ margin: 0, wordWrap: 'break-word' }}
-              dangerouslySetInnerHTML={{
-                __html: DOMPurify.sanitize([t('Research product: dataset, software, workflow, sample, protocol, etc.<br />The creation of a research product allows you to describe the specific management of this product according to its nature or discipline.<br />You can create as many research products as you need.')]),
-              }}
-            >
-            </div>
-          </fieldset>
-        </div>
         <ResearchOutputForm planId={planId} handleClose={handleClose} edit={edit}/>
       </Modal.Body>
     </Modal>

diff --git a/src/components/WritePlan/WritePlan.jsx b/src/components/WritePlan/WritePlan.jsx
@@ -138,7 +138,7 @@ function WritePlan({
       )}
       {!loading && !error && researchOutputs.length === 0 && (
         <div style={{ display: 'flex', justifyContent: 'center' }}>
-          <Panel style={{ width: '700px' }}>
+          <Panel style={{ width: '1024px' }}>
             <Panel.Body>
               <h2 style={{ textAlign: 'center' }}>{t('Your plan does not yet include any research output')}</h2>
               <div style={{ justifyContent: 'center', alignItems: 'center', left: 0 }}>