WIP: remove inlineDiv from all instance its used and replace with carbon grid

frontend/cypress/pages/ModifyOrderPage.js

@@ -7,7 +7,7 @@ class ModifyOrderPage {
 
   enterAccessionNo(accessionNo) {
     cy.enterText(
-      ".inlineDiv > .cds--form-item > .cds--text-input__field-outer-wrapper > .cds--text-input__field-wrapper > #labNumber",
+      ".cds--form-item > .cds--text-input__field-outer-wrapper > .cds--text-input__field-wrapper > #labNumber",
       accessionNo,
     );
   }

frontend/src/components/Style.css

@@ -135,6 +135,7 @@ button {
   margin-bottom: 3%;
   margin-left: 1%;
 }
+
 .section {
   border: 0.5px solid green;
   border-radius: 3px;
@@ -441,6 +442,11 @@ button {
   margin-top: 16px;
 }
 
+.padding-x{
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
 .my-custom-table th,
 .my-custom-table td {
   padding: 8px;

frontend/src/components/addOrder/AddSample.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Button, Link, Row, Stack } from "@carbon/react";
+import { Button, Link, Row, Stack, Column } from "@carbon/react";
 import { Add } from "@carbon/react/icons";
 import { getFromOpenElisServer } from "../utils/Utils";
 import SampleType from "./SampleType";
@@ -135,13 +135,15 @@ const AddSample = (props) => {
             );
           })}
           <Row>
-            <div className="inlineDiv">
-              <Button onClick={handleAddNewSample}>
-                {<FormattedMessage id="sample.add.action" />}
-                &nbsp; &nbsp;
-                <Add size={16} />
-              </Button>
-            </div>
+            <Column>
+              <Column>
+                <Button onClick={handleAddNewSample}>
+                  {<FormattedMessage id="sample.add.action" />}
+                  &nbsp; &nbsp;
+                  <Add size={16} />
+                </Button>
+              </Column>
+            </Column>
           </Row>
         </div>
       </Stack>

frontend/src/components/addOrder/SampleType.js

@@ -9,6 +9,8 @@ import {
   Tag,
   Tile,
   Loading,
+  Grid,
+  Column,
 } from "@carbon/react";
 import CustomCheckBox from "../common/CustomCheckBox";
 import CustomSelect from "../common/CustomSelect";
@@ -476,30 +478,38 @@ const SampleType = (props) => {
           />
         )}
 
-        <div className="inlineDiv">
-          <CustomDatePicker
-            id={"collectionDate_" + index}
-            autofillDate={
-              configurationProperties?.AUTOFILL_COLLECTION_DATE === "true"
-            }
-            onChange={(date) => handleCollectionDate(date)}
-            value={sampleXml.collectionDate}
-            labelText={intl.formatMessage({ id: "sample.collection.date" })}
-            className="inputText"
-            disallowFutureDate={true}
-          />
+        <Grid fullWidth className="padding-x">
+          <Column lg={16} md={8} sm={4}>
+            <Grid>
+              <Column md={4} lg={8} sm={4} className="remove-margin sampleType">
+                <CustomDatePicker
+                  id={"collectionDate_" + index}
+                  autofillDate={
+                    configurationProperties?.AUTOFILL_COLLECTION_DATE === "true"
+                  }
+                  onChange={(date) => handleCollectionDate(date)}
+                  value={sampleXml.collectionDate}
+                  labelText={intl.formatMessage({ id: "sample.collection.date" })}
+                  className="remove-margin"
+                  disallowFutureDate={true}
+                  />
+              </Column>
+              <Column md={4} lg={8} sm={4} className="remove-margin sampleType">
+                <CustomTimePicker
+                  id={"collectionTime_" + index}
+                  autofillTime={
+                    configurationProperties?.AUTOFILL_COLLECTION_DATE === "true"
+                  }
+                  onChange={(time) => handleCollectionTime(time)}
+                  value={sampleXml.collectionTime}
+                  className="collection-time-margin"
+                  labelText={intl.formatMessage({ id: "sample.collection.time" })}
+                  />
+              </Column>
+            </Grid>
+          </Column>
+        </Grid>
 
-          <CustomTimePicker
-            id={"collectionTime_" + index}
-            autofillTime={
-              configurationProperties?.AUTOFILL_COLLECTION_DATE === "true"
-            }
-            onChange={(time) => handleCollectionTime(time)}
-            value={sampleXml.collectionTime}
-            className="inputText"
-            labelText={intl.formatMessage({ id: "sample.collection.time" })}
-          />
-        </div>
         <div className="inlineDiv">
           <CustomTextInput
             id={"collector_" + index}

frontend/src/components/addOrder/add-order.scss

@@ -119,11 +119,28 @@
 }
 
 .cds--date-picker__input {
-  width: 33rem !important;
+  width: 100% !important;
+}
+
+.cds--time-picker{
+  width: 100%;
 }
 
 .cds--time-picker__input-field {
-  width: 31.875rem !important;
+  width: 100% !important;
+}
+
+.remove-margin{
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.cds--time-picker{
+  display: block !important;
+}
+
+.collection-time-margin{
+  margin-right: 5px;
 }
 
 .requestTestReferral {

frontend/src/components/common/CustomTimePicker.js

@@ -22,6 +22,7 @@ const CustomTimePicker = (props) => {
         value={currentTime == null ? "" : currentTime}
         onChange={(e) => handleTimePicker(e)}
         labelText={props.labelText == null ? "" : props.labelText}
+        className={props.className}
       />
     </>
   );