Use Carbon Grid for Layout instead of Using custom css classes

frontend/cypress/e2e/report.cy.js

@@ -71,8 +71,8 @@ describe("Routine Reports", function () {
   });
 
   it('Should check/uncheck "All" checkbox for priority', () => {
-    reportPage.checkAllCheckboxes(2, 6, ".inlineDiv");
-    reportPage.uncheckCheckbox(2, ".inlineDiv");
+    reportPage.checkAllCheckboxes(2, 6, ".cds--css-grid-column");
+    reportPage.uncheckCheckbox(2, ".cds--css-grid-column");
     reportPage.validateButtonVisible(
       ":nth-child(3) > .cds--sm\\:col-span-4 > :nth-child(2) > :nth-child(1) > .cds--checkbox-label",
     );

frontend/src/components/Style.css

@@ -130,12 +130,6 @@ button {
   width: 120%;
 }
 
-.inlineDiv {
-  display: flex;
-  margin-top: 2%;
-  margin-bottom: 3%;
-  margin-left: 1%;
-}
 .section {
   border: 0.5px solid green;
   border-radius: 3px;
@@ -331,13 +325,6 @@ button {
   padding: 0.5%;
 }
 
-.inlineDiv {
-  display: flex;
-  margin-top: 2%;
-  margin-bottom: 3%;
-  margin-left: 1%;
-}
-
 .section {
   border: 0.5px solid green;
   border-radius: 3px;
@@ -522,11 +509,6 @@ button {
   }
 }
 
-@media screen and (max-width: 460px) {
-  .inlineDiv {
-    flex-direction: column;
-  }
-}
 @media screen and (max-width: 500px) {
   .adminPageContent {
     margin-left: 17%;

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, Grid, 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>
+            <Grid>
+              <Column>
+                <Button onClick={handleAddNewSample}>
+                  {<FormattedMessage id="sample.add.action" />}
+                  &nbsp; &nbsp;
+                  <Add size={16} />
+                </Button>
+              </Column>
+            </Grid>
           </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";
@@ -486,40 +488,49 @@ 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}
-          />
-
-          <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}
-            onChange={(value) => handleCollector(value)}
-            defaultValue={""}
-            value={sampleXml.collector}
-            labelText={intl.formatMessage({ id: "collector.label" })}
-            className="inputText"
-          />
-        </div>
+        <Grid condensed>
+          <Column sm={4}>
+            <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}
+            />
+          </Column>
+          <Column
+            sm={{ span: 1, end: 1 }}
+            md={{ span: 4, end: 9 }}
+            lg={{ span: 8, end: 17 }}
+          >
+            <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" })}
+            />
+          </Column>
+        </Grid>
+        <Grid condensed>
+          <Column lg={8}>
+            <CustomTextInput
+              id={"collector_" + index}
+              onChange={(value) => handleCollector(value)}
+              defaultValue={""}
+              value={sampleXml.collector}
+              labelText={intl.formatMessage({ id: "collector.label" })}
+              className="inputText"
+            />
+          </Column>
+        </Grid>
         <div className="testPanels">
           <div className="cds--col">
             <h4>

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

@@ -123,9 +123,25 @@
 }
 
 .cds--time-picker__input-field {
-  width: 31.875rem !important;
+  width: clamp(15rem, 50vw, 28vw);
 }
 
+.cds--css-grid {
+  padding-left: 0 !important;
+}
+
+.cds--form-item {
+  padding-top: 1.5rem;
+}
+
+.cds--col {
+  padding-top: 1.5rem;
+  padding-left: 0 !important;
+}
+
+.cds--css-grid-column {
+  padding-bottom: 0.5rem;
+}
 .requestTestReferral {
   margin-top: 40px;
   margin-bottom: 10px;