Added Page Component to make padding across pages to be consistent

src/Components/Assets/AssetConfigure.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback } from "react";
 import Loading from "../Common/Loading";
-import PageTitle from "../Common/PageTitle";
 import { AssetData } from "./AssetTypes";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import { useDispatch } from "react-redux";
 import { getAsset } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
 import HL7Monitor from "./AssetType/HL7Monitor";
 import ONVIFCamera from "./AssetType/ONVIFCamera";
+import Page from "../Common/components/Page";
 
 interface AssetConfigureProps {
   assetId: string;
@@ -49,37 +49,35 @@ const AssetConfigure = (props: AssetConfigureProps) => {
 
   if (isLoading) return <Loading />;
   return (
-    <div>
+    <>
       {assetType === "HL7MONITOR" ? (
-        <>
-          <PageTitle
-            title={`Configure HL7 Monitor: ${asset?.name}`}
-            crumbsReplacements={{
-              [facilityId]: { name: asset?.location_object.facility.name },
-              assets: { uri: `/assets?facility=${facilityId}` },
-              [assetId]: { name: asset?.name },
-            }}
-          />
+        <Page
+          title={`Configure HL7 Monitor: ${asset?.name}`}
+          crumbsReplacements={{
+            [facilityId]: { name: asset?.location_object.facility.name },
+            assets: { uri: `/assets?facility=${facilityId}` },
+            [assetId]: { name: asset?.name },
+          }}
+        >
           <HL7Monitor asset={asset} assetId={assetId} facilityId={facilityId} />
-        </>
+        </Page>
       ) : (
-        <>
-          <PageTitle
-            title={`Configure ONVIF Camera: ${asset?.name}`}
-            crumbsReplacements={{
-              [facilityId]: { name: asset?.location_object.facility.name },
-              assets: { uri: `/assets?facility=${facilityId}` },
-              [assetId]: { name: asset?.name },
-            }}
-          />
+        <Page
+          title={`Configure ONVIF Camera: ${asset?.name}`}
+          crumbsReplacements={{
+            [facilityId]: { name: asset?.location_object.facility.name },
+            assets: { uri: `/assets?facility=${facilityId}` },
+            [assetId]: { name: asset?.name },
+          }}
+        >
           <ONVIFCamera
             asset={asset}
             assetId={assetId}
             facilityId={facilityId}
           />
-        </>
+        </Page>
       )}
-    </div>
+    </>
   );
 };
 

src/Components/Assets/AssetManage.tsx

@@ -20,7 +20,7 @@ import ButtonV2 from "../Common/components/ButtonV2";
 import { UserRole, USER_TYPES } from "../../Common/constants";
 import moment from "moment";
 import ConfirmDialogV2 from "../Common/ConfirmDialogV2";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 const Loading = loadable(() => import("../Common/Loading"));
 
 interface AssetManageProps {
@@ -201,17 +201,16 @@ const AssetManage = (props: AssetManageProps) => {
   };
 
   return (
-    <div className="px-2 pb-2">
-      <PageTitle
-        title="Asset Details"
-        crumbsReplacements={{
-          [facilityId]: { name: asset?.location_object.facility.name },
-          assets: { uri: `/assets?facility=${facilityId}` },
-          [assetId]: {
-            name: asset?.name,
-          },
-        }}
-      />
+    <Page
+      title="Asset Details"
+      crumbsReplacements={{
+        [facilityId]: { name: asset?.location_object.facility.name },
+        assets: { uri: `/assets?facility=${facilityId}` },
+        [assetId]: {
+          name: asset?.name,
+        },
+      }}
+    >
       <ConfirmDialogV2
         title="Delete Asset"
         description="Are you sure you want to delete this asset?"
@@ -404,7 +403,7 @@ const AssetManage = (props: AssetManageProps) => {
           />
         </div>
       )}
-    </div>
+    </Page>
   );
 };
 

src/Components/Assets/AssetsList.tsx

@@ -2,7 +2,6 @@ import { useDispatch } from "react-redux";
 import QrReader from "react-qr-reader";
 import { statusType, useAbortableEffect } from "../../Common/utils";
 import * as Notification from "../../Utils/Notifications.js";
-import PageTitle from "../Common/PageTitle";
 import {
   getAnyFacility,
   listAssets,
@@ -29,6 +28,7 @@ import AuthorizeFor from "../../Utils/AuthorizeFor";
 import ButtonV2 from "../Common/components/ButtonV2";
 import FacilitiesSelectDialogue from "../ExternalResult/FacilitiesSelectDialogue";
 import ExportMenu from "../Common/Export";
+import Page from "../Common/components/Page";
 
 const Loading = loadable(() => import("../Common/Loading"));
 
@@ -265,52 +265,57 @@ const AssetsList = () => {
   }
 
   return (
-    <div className="px-6">
-      <div className="flex justify-between items-center">
-        <PageTitle title="Assets" breadcrumbs={false} hideBack />
-        {authorizedForImportExport && (
-          <div className="tooltip">
-            {!facility && (
-              <span className="tooltip-text tooltip-bottom -translate-x-2/3 flex flex-col items-center">
-                <p>Select a facility from the Facilities</p>
-                <p>page and click 'View Assets' from the</p>
-                <p>Manage Facility dropdown</p>
-              </span>
-            )}
-            {/* TODO: ask for facility select dialog instead of disabling */}
-            <ExportMenu
-              disabled={!facility || importAssetModalOpen}
-              label={importAssetModalOpen ? "Importing..." : "Import/Export"}
-              exportItems={[
-                {
-                  label: "Import Assets",
-                  // action: () => setImportAssetModalOpen(true),
-                  options: {
-                    icon: <CareIcon className="care-l-import" />,
-                    onClick: () => setImportAssetModalOpen(true),
+    <Page
+      title="Assets"
+      breadcrumbs={false}
+      hideBack
+      options={
+        <>
+          {authorizedForImportExport && (
+            <div className="tooltip">
+              {!facility && (
+                <span className="tooltip-text tooltip-bottom -translate-x-2/3 flex flex-col items-center">
+                  <p>Select a facility from the Facilities</p>
+                  <p>page and click 'View Assets' from the</p>
+                  <p>Manage Facility dropdown</p>
+                </span>
+              )}
+              {/* TODO: ask for facility select dialog instead of disabling */}
+              <ExportMenu
+                disabled={!facility || importAssetModalOpen}
+                label={importAssetModalOpen ? "Importing..." : "Import/Export"}
+                exportItems={[
+                  {
+                    label: "Import Assets",
+                    // action: () => setImportAssetModalOpen(true),
+                    options: {
+                      icon: <CareIcon className="care-l-import" />,
+                      onClick: () => setImportAssetModalOpen(true),
+                    },
                   },
-                },
-                {
-                  label: "Export Assets",
-                  action: () =>
-                    authorizedForImportExport &&
-                    listAssets({
-                      ...qParams,
-                      json: true,
-                      limit: totalCount,
-                    }),
-                  type: "json",
-                  filePrefix: `assets_${facility?.name}`,
-                  options: {
-                    icon: <CareIcon className="care-l-export" />,
-                    disabled: totalCount === 0 || !authorizedForImportExport,
+                  {
+                    label: "Export Assets",
+                    action: () =>
+                      authorizedForImportExport &&
+                      listAssets({
+                        ...qParams,
+                        json: true,
+                        limit: totalCount,
+                      }),
+                    type: "json",
+                    filePrefix: `assets_${facility?.name}`,
+                    options: {
+                      icon: <CareIcon className="care-l-export" />,
+                      disabled: totalCount === 0 || !authorizedForImportExport,
+                    },
                   },
-                },
-              ]}
-            />
-          </div>
-        )}
-      </div>
+                ]}
+              />
+            </div>
+          )}
+        </>
+      }
+    >
       <div className="lg:flex mt-5 space-y-2">
         <div className="bg-white overflow-hidden shadow rounded-lg flex-1 md:mr-2">
           <div className="px-4 py-5 sm:p-6">
@@ -385,7 +390,7 @@ const AssetsList = () => {
             ]}
           />
           <div className="grow">
-            <div className="py-8 md:px-5">
+            <div className="py-8 md:px-6">
               {manageAssets}
               <Pagination totalCount={totalCount} />
             </div>
@@ -409,7 +414,7 @@ const AssetsList = () => {
           setSelectedFacility({ name: "" });
         }}
       />
-    </div>
+    </Page>
   );
 };
 

src/Components/Common/Export.tsx

@@ -71,7 +71,7 @@ export const ExportButton = ({
       <ButtonV2
         disabled={isExporting || props.disabled}
         onClick={() => exportFile(props.action, props.filenamePrefix, type)}
-        className="mx-2 tooltip p-4 text-lg text-secondary-800 disabled:text-secondary-500 disabled:bg-transparent"
+        className="mx-2 tooltip px-4 text-lg text-secondary-800 disabled:text-secondary-500 disabled:bg-transparent"
         variant="secondary"
         ghost
         circle

src/Components/Common/PageTitle.tsx

@@ -3,12 +3,12 @@ import Breadcrumbs from "./Breadcrumbs";
 import PageHeadTitle from "./PageHeadTitle";
 import { classNames, goBack } from "../../Utils/utils";
 
-interface PageTitleProps {
+export interface PageTitleProps {
   title: string;
   hideBack?: boolean;
   backUrl?: string;
   backButtonCB?: () => number | void;
-  className?: string;
+  // className?: string;
   componentRight?: React.ReactNode;
   justifyContents?:
     | "justify-center"
@@ -27,7 +27,7 @@ export default function PageTitle({
   hideBack = false,
   backUrl,
   backButtonCB,
-  className = "",
+  // className = "",
   componentRight = <></>,
   breadcrumbs = true,
   crumbsReplacements = {},
@@ -46,13 +46,13 @@ export default function PageTitle({
     backButtonCB ? goBack(backButtonCB()) : goBack(backUrl);
 
   return (
-    <div ref={divRef} className={`pt-4 mb-4 ${className}`}>
+    <div ref={divRef}>
       <PageHeadTitle title={title} />
       <div className={classNames("flex items-center", justifyContents)}>
         <div className="flex items-center">
           {!hideBack && (
             <button onClick={onBackButtonClick}>
-              <i className="fas fa-chevron-left text-2xl rounded-md p-2 hover:bg-gray-200 mr-1">
+              <i className="fas fa-chevron-left text-base rounded-md p-2 hover:bg-gray-300 mr-1">
                 {" "}
               </i>
             </button>

src/Components/Common/components/Page.tsx

@@ -0,0 +1,38 @@
+import { RefObject } from "react";
+import PageTitle, { PageTitleProps } from "../PageTitle";
+
+interface PageProps extends PageTitleProps {
+  children: any;
+  options?: any;
+  className?: string;
+  noImplicitPadding?: boolean;
+  ref?: RefObject<HTMLDivElement>;
+}
+
+export default function Page(props: PageProps) {
+  let padding = "";
+  if (!props.noImplicitPadding) {
+    if (!props.hideBack || props.componentRight) padding = "px-6 py-3.5";
+    else padding = "px-6 py-5";
+  }
+
+  return (
+    <div className={`${padding} ${props.className}`} ref={props.ref}>
+      <div className="flex flex-col md:flex-row justify-between md:items-center md:gap-6 gap-2">
+        <PageTitle
+          title={props.title}
+          breadcrumbs={props.breadcrumbs}
+          backUrl={props.backUrl}
+          hideBack={props.hideBack}
+          justifyContents={props.justifyContents}
+          componentRight={props.componentRight}
+          crumbsReplacements={props.crumbsReplacements}
+          focusOnLoad={props.focusOnLoad}
+          backButtonCB={props.backButtonCB}
+        />
+        {props.options}
+      </div>
+      {props.children}
+    </div>
+  );
+}

src/Components/Dashboard/HubDashboard.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import PageTitle from "../Common/PageTitle";
 import LiveFeedTile from "../Hub/LiveFeedTile";
 
 export default function HubDashboard() {

src/Components/ExternalResult/ExternalResultUpload.tsx

@@ -1,12 +1,11 @@
-import loadable from "@loadable/component";
 import _ from "lodash";
 import { navigate } from "raviger";
 import { useState } from "react";
 import CSVReader from "react-csv-reader";
 import { useDispatch } from "react-redux";
 import { externalResultUploadCsv } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
-const PageTitle = loadable(() => import("../Common/PageTitle"));
+import Page from "../Common/components/Page";
 
 export default function ExternalResultUpload() {
   const dispatch: any = useDispatch();
@@ -58,12 +57,7 @@ export default function ExternalResultUpload() {
   };
 
   return (
-    <div className="px-4">
-      <PageTitle
-        title="Upload External Results"
-        backUrl="/external_results"
-        className="mt-4"
-      />
+    <Page title="Upload External Results" backUrl="/external_results">
       <div className="max-w-3xl mx-auto mt-6">
         <div className="py-4">
           <div className="block text-sm leading-5 font-medium text-gray-700 sm:mt-px sm:pt-2">
@@ -139,6 +133,6 @@ export default function ExternalResultUpload() {
           </div>
         </div>
       </div>
-    </div>
+    </Page>
   );
 }