Inlinecss update

forms-flow-web/src/components/Application/Application.scss

@@ -22,6 +22,31 @@
     font-size: 14px;
 }
 
+.appFilter-list-view {
+    min-width: 500px;
+}
+
+.draftTable{
+    min-height: 400px;
+}
+
+.draft-disacard{
+    width: 8.5em;
+}
+
+.draft-details{
+    font-weight: 500px;
+}
+
+.draft-edit{
+    max-width: 900px;
+    height: 50vh
+}
+
+.application-details{
+    font-weight: 500px;
+}
+
 .filter-sort-bar {
     margin-bottom: 1rem;
     .filter-list-view {

forms-flow-web/src/components/Application/ApplicationFilter.js

@@ -105,8 +105,7 @@ const ApplicationFilter = ({
 
   return (
     <div
-      className="Filter-listview "
-      style={{ minWidth: "500px" }}
+      className="appFilter-list-view"
       ref={createSearchNode}
     >
 

forms-flow-web/src/components/Application/Details/index.js

@@ -16,7 +16,7 @@ const Details = React.memo((props) => {
       spinner
       text={t("Select a task in the list.")}
     >
-      <div className="row m-0 bg-white py-3" style={{ fontWeight: "500px" }}>
+      <div className="application-details row m-0 bg-white py-3">
         <div className="col-md-6 px-0">
           <ApplicationDetails application={props.application} />
         </div>

forms-flow-web/src/components/Dashboard/Dashboard.js

@@ -285,36 +285,28 @@ const Dashboard = React.memo(() => {
               <div className="ms-2">
                 {isAscending ? (
                   <i
-                    className="fa fa-sort-alpha-asc"
+                    className="fa fa-sort-alpha-asc dashboard-sort cursor-pointer"
                     onClick={() => {
                       handleSort("desc");
                     }}
                     data-toggle="tooltip"
                     title={t("Descending")}
-                    style={{
-                      cursor: "pointer",
-                      fontSize: "20px",
-                    }}
                   ></i>
                 ) : (
                   <i
-                    className="fa fa-sort-alpha-desc"
+                    className="fa fa-sort-alpha-desc dashboard-sort cursor-pointer"
                     onClick={() => {
                       handleSort("asc");
                     }}
                     data-toggle="tooltip"
                     title={t("Ascending")}
-                    style={{
-                      cursor: "pointer",
-                      fontSize: "20px",
-                    }}
                   ></i>
                 )}
               </div>
             </div>
           </div>
 
-          <div className="dashboard d-flex" style={{ minHeight: "60vh" }}>
+          <div className="dashboard dashboard-height d-flex">
             {submissionsList.length ? (
               <div className="col-12 px-0">
                 {!metricsDateRangeLoader && (

forms-flow-web/src/components/Dashboard/dashboard.scss

@@ -188,6 +188,13 @@
   border-color: var(--color-primary-ltst);
 }
 
+.dashboard-sort{
+  font-size: 20px;
+}
+
+.dashboard-height{
+  min-height: 60vh;
+}
 
 .date-select {
   width: 150px;

forms-flow-web/src/components/Draft/Details/index.js

@@ -16,7 +16,7 @@ const Details = React.memo((props) => {
       spinner
       text={t("Select a task in the list.")}
     >
-      <div className="row m-0 bg-white py-3" style={{ fontWeight: "500px" }}>
+      <div className="row m-0 bg-white py-3 draft-details">
         <div className="col-md-6 px-0">
           <DraftDetails draft={props.draft} />
         </div>

forms-flow-web/src/components/Draft/DraftFilter.js

@@ -84,8 +84,7 @@ const DraftFilter = ({ setDisplayFilter, filterParams, setFilterParams }) => {
 
   return (
     <div
-      className="Filter-listview "
-      style={{ minWidth: "500px" }}
+      className="appFilter-list-view"
       ref={createSearchNode}
     >
 

forms-flow-web/src/components/Draft/DraftOperations.js

@@ -19,7 +19,7 @@ const DraftOperations = ({ row }) => {
   return (
     <>
       <div>
-        <span style={{ marginLeft: "2rem" }}>
+        <span className="ms-2">
           <span>
             <button
               data-testid={`draft-delete-button-${row.id}`}

forms-flow-web/src/components/Draft/DraftTable.js

@@ -128,7 +128,7 @@ const DraftTable = () => {
   return (
     <>
      <LoadingOverlay active={isDraftLoading} spinner text={t("Loading...")}>
-      <div style={{ minHeight: "400px" }}>
+      <div className="draftTable">
 
           <table className="table custom-table table-responsive-sm">
             <thead>

forms-flow-web/src/components/Draft/Edit.js

@@ -267,7 +267,6 @@ const View = React.memo((props) => {
           <button
             data-testid="draft-discard"
             className="btn btn-danger me-2"
-            style={{ width: "8.5em" }}
             onClick={() => deleteDraft()}
           >
             {t("Discard Draft")}
@@ -290,11 +289,11 @@ const View = React.memo((props) => {
     <>
 
       {t("Are you sure to delete the draft")} 
-      <span style={{ fontWeight: "bold" }}>&nbsp;
+      <span className="fw-bold">&nbsp;
         {textTruncate(14, 12, draftDelete.draftName)}
       </span>&nbsp;
       {t("with ID")} 
-      <span style={{ fontWeight: "bold" }}>&nbsp;
+      <span className="fw-bold">&nbsp;
         {draftDelete.draftId}
       </span> ?
     </>
@@ -332,17 +331,7 @@ const View = React.memo((props) => {
           ) : (
             <span>
               <div
-                className=""
-                style={{
-                  maxWidth: "900px",
-                  margin: "auto",
-                  height: "50vh",
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
+                className="container-md d-flex align-items-center justify-content-center draft-edit">
                 <h3>{t("Form not published")}</h3>
                 <p>{t("You can't submit this form until it is published")}</p>
               </div>

forms-flow-web/src/components/Draft/List.js

@@ -130,9 +130,9 @@ export const DraftList = React.memo(() => {
             {
             <div>
             {t("Are you sure to delete the draft")}
-            <span style={{ fontWeight: "bold" }} > {draftDelete.draftName.includes(' ') ? draftDelete.draftName : textTruncate(50,40,draftDelete.draftName)} </span>
+            <span className="fw-bold"> {draftDelete.draftName.includes(' ') ? draftDelete.draftName : textTruncate(50,40,draftDelete.draftName)} </span>
             {t("with ID")}
-            <span style={{fontWeight: "bold"}}> {draftDelete.draftId}</span> ?
+            <span className="fw-bold"> {draftDelete.draftId}</span> ?
             </div>
             }
 

forms-flow-web/src/components/Form/Create.js

@@ -4,6 +4,7 @@ import _set from "lodash/set";
 import _cloneDeep from "lodash/cloneDeep";
 import _camelCase from "lodash/camelCase";
 import { push } from "connected-react-router";
+import "../Form/Create.scss";
 
 import {
   MULTITENANCY_ENABLED,
@@ -232,8 +233,7 @@ const Create = React.memo(() => {
       </div>
 
       <Errors errors={errors} />
-      <div className="p-4"
-        style={{ border: "1px solid #c2c0be", borderRadius: "5px" }}>
+      <div className="p-4 create-border">
         <div className="d-flex pb-4 flex-wrap">
           <div className="col-lg-6 col-md-6 col-sm-6 col-12 px-3">
             <div>
@@ -345,10 +345,7 @@ const Create = React.memo(() => {
                         <div className="input-group mb-2">
                           {
                             MULTITENANCY_ENABLED && tenantKey ? <div className="input-group-prepend">
-                              <div
-                                className="input-group-text"
-                                style={{ maxWidth: "150px" }}
-                              >
+                              <div className="input-group-text input-width">
                                 <span className="text-truncate">{tenantKey}</span>
                               </div>
                             </div> : ""
@@ -401,10 +398,7 @@ const Create = React.memo(() => {
                           <div className="input-group mb-2">
                             {
                               MULTITENANCY_ENABLED && tenantKey ? <div className="input-group-prepend">
-                                <div
-                                  className="input-group-text"
-                                  style={{ maxWidth: "150px" }}
-                                >
+                                <div className="input-group-text input-width">
                                   <span className="text-truncate">{tenantKey}</span>
                                 </div>
                               </div> : ""

forms-flow-web/src/components/Form/Create.scss

@@ -0,0 +1,8 @@
+.create-border {
+    border: 1px solid #c2c0be;
+    border-radius: 5px;
+  }
+.input-width{
+    max-width: 150px;
+}
+

forms-flow-web/src/components/Form/FileUpload/SelectFormForDownload.js

@@ -87,7 +87,7 @@ const SelectFormForDownload = React.memo(({ form, type }) => {
   return (
     <Form.Check>
       <Form.Check.Input
-        style={{ width: "15px", height: "15px" }}
+        className="form-check-input"        
         aria-label="option"
         data-testid={`download-form-checkbox-${form._id}`}
         checked={isFormChecked}

forms-flow-web/src/components/Form/FileUpload/fileUploadModal.js

@@ -41,7 +41,7 @@ const FileModal = React.memo(({ modalOpen = false, onClose, forms, }) => {
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <div style={{ paddingBottom: "7px", color: "#450ccb", fontWeight: "bold" }}>
+          <div className="text-primary pb-3 fw-bold">
             {`${formUploadCounter} of ${formUploadList.length} ${formUploadList.length > 1
               ? t("forms uploaded")
               : t("form uploaded")
@@ -59,7 +59,8 @@ const FileModal = React.memo(({ modalOpen = false, onClose, forms, }) => {
             </span>}
           </div>
           {formUploadList.length ? (
-            <div className="progress" style={{ height: "5px", marginTop: "11px" }}>
+            <div className="progress upload-progress" 
+            >
               <div
                 className="progress-bar"
                 role="progressbar"
@@ -77,7 +78,7 @@ const FileModal = React.memo(({ modalOpen = false, onClose, forms, }) => {
         </Modal.Body>
         <Modal.Footer style={{ justifyContent: `${noAccess ? "space-between" : ''}` }}>
           {noAccess && <span className="fileupload-fail">{t("Access restricted by its designer..!")}</span>}
-          <Button style={{ width: "20%" }} type="button" className="btn btn-default" onClick={() => {
+          <Button type="button" className="btn btn-default w-20" onClick={() => {
             dispatch(DesignerAccessDenied(false));
             onClose();
           }}>

forms-flow-web/src/components/Form/Item/Edit.js

@@ -560,8 +560,7 @@ const Edit = React.memo(() => {
 
       <Errors errors={errors} />
       <div
-        className="p-4"
-        style={{ border: "1px solid #c2c0be", borderRadius: "5px" }}
+        className="p-4 edit-border"
       >
         <Modal show={show} onHide={handleClose}>
           <Modal.Header closeButton>
@@ -703,8 +702,7 @@ const Edit = React.memo(() => {
                             {
                               MULTITENANCY_ENABLED && tenantKey ? <div className="input-group-prepend">
                                 <div
-                                  className="input-group-text"
-                                  style={{ maxWidth: "150px" }}
+                                  className="input-group-text edit-input"
                                 >
                                   <span className="text-truncate">{tenantKey}</span>
                                 </div>
@@ -759,8 +757,7 @@ const Edit = React.memo(() => {
                               {
                                 MULTITENANCY_ENABLED && tenantKey ? <div className="input-group-prepend">
                                   <div
-                                    className="input-group-text"
-                                    style={{ maxWidth: "150px" }}
+                                    className="input-group-text edit-input"
                                   >
                                     <span className="text-truncate">{tenantKey}</span>
                                   </div>

forms-flow-web/src/components/Form/Item/FormHistoryModal.js

@@ -91,7 +91,7 @@ const FormHistoryModal = ({ historyModal, handleModalChange, gotoEdit }) => {
                         index === 0 ? "active" : ""
                       }`}
                     >
-                      <div style={{ maxWidth: "150px", minWidth: "150px" }}>
+                      <div className="form-history">
                         <span className="text-muted text-small">
                           {formHistory.length === 1
                             ? t("Created By")

forms-flow-web/src/components/Form/Item/Submission/Item/Edit.js

@@ -113,7 +113,7 @@ const Edit = React.memo((props) => {
           message={props.submissionError.message}
           onConfirm={props.onConfirm}
         ></SubmissionError>
-        <h3 className="task-head text-truncate" style={{ height:"45px" }}>{form.title}</h3>
+        <h3 className="task-head text-truncate form-title">{form.title}</h3>
       </div>
       <Errors errors={errors} />
       <LoadingOverlay

forms-flow-web/src/components/Form/Item/Submission/Item/View.js

@@ -53,7 +53,7 @@ const View = React.memo((props) => {
 
   return (
     <div className="container row task-container bg-white p-2 m-0">
-      <div className="main-header" style={{ "height": "45px" }}>
+      <div className="main-header form-title">
         <h3 className="task-head text-truncate"> {form.title}</h3>
         {showPrintButton && form?._id ? (
           <div className="btn-right d-flex flex-row">

forms-flow-web/src/components/Form/Item/View.js

@@ -378,7 +378,7 @@ const View = React.memo((props) => {
           ) : null}
 
           {form.title ? (
-            <h3 className="ms-3 text-truncate" style={{height :"45px"}}>
+            <h3 className="ms-3 text-truncate form-title">
               <span className="task-head-details">
                 <i className="fa-solid fa-file-lines me-2" aria-hidden="true" /> &nbsp;{" "}
                 {t("Forms")}/

forms-flow-web/src/components/Form/Item/item.scss

@@ -0,0 +1,16 @@
+.edit-border{
+    border: 1px solid #c2c0be;
+    border-radius: 5px;
+}
+
+.edit-input{
+    max-width: 150px;
+}
+
+.form-history {
+    width: 150px;
+  }
+
+.form-title{
+    height: 45px;
+}