From 2e043bf10d2ed22f7dc15e8543ae48206c933cc8 Mon Sep 17 00:00:00 2001
From: Ashwini <amurthy.ashwini@gmail.com>
Date: Tue, 3 Dec 2024 11:15:30 +0100
Subject: [PATCH] fix: bootstrap styles (#2225)

* fix inventory label badge color in collection

* fix: align safety phrases with headers

* handle invalid strings on fast sample create

* fix overflowing labels

* fix: enable disabled units in Reactions

* fix: drag and drop bugs in reactionscheme

* fix: fix bug when many labels exist in ElementsSampleEntries

* fix: reduce size and space of wellplate header buttons
---
 .../apps/mydb/collections/CollectionSubtree.js   |  2 +-
 .../details/NumeralInputWithUnitsCompo.js        |  2 +-
 .../details/reactions/schemeTab/Material.js      |  2 +-
 .../elements/details/samples/SampleDetails.js    |  4 ++--
 .../details/wellplates/WellplateDetails.js       |  8 ++++----
 .../elements/list/ElementsTableSampleEntries.js  | 16 +++++++++-------
 app/packs/src/components/ChemicalTab.js          |  6 +++---
 7 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/app/packs/src/apps/mydb/collections/CollectionSubtree.js b/app/packs/src/apps/mydb/collections/CollectionSubtree.js
index 90588b3187..fa2e47f54b 100644
--- a/app/packs/src/apps/mydb/collections/CollectionSubtree.js
+++ b/app/packs/src/apps/mydb/collections/CollectionSubtree.js
@@ -157,7 +157,7 @@ export default class CollectionSubtree extends React.Component {
               placement="top"
               overlay={<Tooltip id="collection_inventory_label">Inventory Label</Tooltip>}
             >
-              <Badge>{root.inventory_prefix}</Badge>
+              <Badge bg="secondary">{root.inventory_prefix}</Badge>
             </OverlayTrigger>
           )}
           {this.canTakeOwnership() && (
diff --git a/app/packs/src/apps/mydb/elements/details/NumeralInputWithUnitsCompo.js b/app/packs/src/apps/mydb/elements/details/NumeralInputWithUnitsCompo.js
index e1bc89da43..2ccadfa78b 100644
--- a/app/packs/src/apps/mydb/elements/details/NumeralInputWithUnitsCompo.js
+++ b/app/packs/src/apps/mydb/elements/details/NumeralInputWithUnitsCompo.js
@@ -175,7 +175,7 @@ export default class NumeralInputWithUnitsCompo extends Component {
     if (unit !== 'n') {
       const prefixSwitch = (
         <Button
-          disabled={inputDisabled}
+          disabled={unitDisplayMode}
           active
           onClick={() => { this.togglePrefix(unit); }}
           variant={variantBtnAfter}
diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
index ad18b38d98..720b5465e4 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
+++ b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/Material.js
@@ -1032,7 +1032,7 @@ class Material extends Component {
     let className = 'text-center';
     if (isDragging) { className += ' dnd-dragging'; }
     if (canDrop) {
-      className += ' dnd-zone';
+      className += ' border-3 border-dashed';
       if (isOver) {
         className += ' dnd-zone-over';
       }
diff --git a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
index 439e9b538f..b13d5ee236 100644
--- a/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/samples/SampleDetails.js
@@ -957,7 +957,7 @@ export default class SampleDetails extends React.Component {
 
     return (
       <div className="d-flex align-items-center justify-content-between">
-        <div className="d-flex align-items-center gap-2">
+        <div className="d-flex align-items-center flex-wrap gap-2">
           <OverlayTrigger placement="bottom" overlay={<Tooltip id="sampleDates">{titleTooltip}</Tooltip>}>
             <span className="flex-shrink-0">
               <i className="icon-sample me-1" />
@@ -1262,7 +1262,7 @@ export default class SampleDetails extends React.Component {
 
   renderMolfileModal() {
     const { molfile } = this.state;
-    const molfileText = molfile.replace(/\r?\n/g, '<br />');
+    const molfileText = molfile ? molfile.replace(/\r?\n/g, '<br />') : '';
 
     return (
       <Modal
diff --git a/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js b/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
index 2875ba522e..621bc7fdab 100644
--- a/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
+++ b/app/packs/src/apps/mydb/elements/details/wellplates/WellplateDetails.js
@@ -239,7 +239,7 @@ export default class WellplateDetails extends Component {
 
     return (
       <div className="d-flex justify-content-between">
-        <div className="d-flex justify-content-start gap-2">
+        <div className="d-flex justify-content-start gap-1">
           <OverlayTrigger placement="bottom" overlay={<Tooltip id="screenDatesx">{datetp}</Tooltip>}>
             <span>
               <i className="icon-wellplate" />
@@ -249,10 +249,10 @@ export default class WellplateDetails extends Component {
           <ElementCollectionLabels element={wellplate} placement="right" />
           <HeaderCommentSection element={wellplate} />
         </div>
-        <div className="d-flex justify-content-end gap-2">
+        <div className="d-flex justify-content-end gap-1">
           <PrintCodeButton element={wellplate} />
           <OverlayTrigger placement="bottom" overlay={<Tooltip id="fullSample">FullScreen</Tooltip>}>
-            <Button variant="info" size="sm" onClick={() => this.props.toggleFullScreen()}>
+            <Button variant="info" size="xxsm" onClick={() => this.props.toggleFullScreen()}>
               <i className="fa fa-expand" />
             </Button>
           </OverlayTrigger>
@@ -260,7 +260,7 @@ export default class WellplateDetails extends Component {
             <OverlayTrigger placement="bottom" overlay={<Tooltip id="saveWellplate">Save Wellplate</Tooltip>}>
               <Button
                 variant="warning"
-                size="sm"
+                size="xxsm"
                 onClick={() => this.handleSubmit()}
               >
                 <i className="fa fa-floppy-o " />
diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
index c9e6f6e152..913fd4dfed 100644
--- a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
+++ b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
@@ -376,19 +376,21 @@ export default class ElementsTableSampleEntries extends Component {
             onClick={() => showDetails(sample.id)}
             role="button"
           >
-            <div className="d-flex justify-content-between">
+            <div className="d-flex justify-content-between flex-wrap">
               {sample.title(selected)}
 
-              <div className="d-flex align-items-center gap-1">
+              <div className="d-flex align-items-center gap-1 flex-wrap">
                 {showInventoryLabelIcon(sample)}
                 <CommentIcon commentCount={sample.comment_count} />
                 <ShowUserLabels element={sample} />
                 <XvialIcon label={sample.external_label} />
-                <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
-                <ElementWellplateLabels element={sample} key={`${sample.id}_wellplate`} />
-                <GenericElementLabels element={sample} key={`${sample.id}_element`} />
-                <ElementCollectionLabels element={sample} key={`${sample.id}`} />
-                <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
+                <div className="d-flex align-items-center gap-1 ms-auto">
+                  <ElementReactionLabels element={sample} key={`${sample.id}_reactions`} />
+                  <ElementWellplateLabels element={sample} key={`${sample.id}_wellplate`} />
+                  <GenericElementLabels element={sample} key={`${sample.id}_element`} />
+                  <ElementCollectionLabels element={sample} key={`${sample.id}`} />
+                  <ElementAnalysesLabels element={sample} key={`${sample.id}_analyses`} />
+                </div>
                 {showDecoupledIcon(sample)}
                 <TopSecretIcon element={sample} />
               </div>
diff --git a/app/packs/src/components/ChemicalTab.js b/app/packs/src/components/ChemicalTab.js
index e2241d32ad..69bab547ca 100644
--- a/app/packs/src/components/ChemicalTab.js
+++ b/app/packs/src/components/ChemicalTab.js
@@ -246,12 +246,12 @@ export default class ChemicalTab extends React.Component {
 
     return (
       <div>
-        <p className="fw-bold m-3">Pictograms: </p>
+        <p className="fw-bold">Pictograms: </p>
         {(str.pictograms !== undefined && str.pictograms.length !== 0)
           ? pictogramsArray : <p>Could not find pictograms</p>}
-        <p className="fw-bold m-3">Hazard Statements: </p>
+        <p className="fw-bold mt-3">Hazard Statements: </p>
         {HazardPhrases}
-        <p className="fw-bold m-3">Precautionary Statements: </p>
+        <p className="fw-bold">Precautionary Statements: </p>
         {precautionaryPhrases}
       </div>
     );