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
ComPlat · Dec 3, 2024 · 2e043bf · 2e043bf
1 parent 66f6946
commit 2e043bf
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,18 +249,18 @@ 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>
           { displaySaveButton &&
             <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
@@ -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
@@ -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>
     );