From 7c7bc5a8edc67b815b28345fdd286dcd8950e6a4 Mon Sep 17 00:00:00 2001
From: rachana-egov <rachana.singh@egovernment.org>
Date: Tue, 5 Nov 2024 15:39:42 +0530
Subject: [PATCH] updated css for summary screen

---
 .../example/public/index.html                 |  2 +-
 .../packages/css/package.json                 |  4 +-
 .../css/src/components/microplanning.scss     | 20 ++---
 .../css/src/pages/employee/index.scss         | 12 +++
 .../src/components/AssumptionsList.js         | 28 +++---
 .../microplan/src/components/BoundaryKpi.js   | 25 +++---
 .../src/components/CampaignBoundary.js        | 86 ++++++++++---------
 .../src/components/DataMgmtComponent.js       |  6 +-
 .../src/components/FormulaConfigScreen.js     |  2 +-
 .../microplan/src/components/UserAccess.js    | 10 +--
 .../src/components/UserAccessMgmt.js          | 37 ++++----
 .../components/UserAccessMgmtTableWrapper.js  | 20 +++--
 .../src/components/subBoundaryView.js         | 16 ++--
 health/micro-ui/web/public/index.html         |  2 +-
 14 files changed, 148 insertions(+), 122 deletions(-)

diff --git a/health/micro-ui/web/micro-ui-internals/example/public/index.html b/health/micro-ui/web/micro-ui-internals/example/public/index.html
index d8a8f6b3af8..d67b2ab9ed3 100644
--- a/health/micro-ui/web/micro-ui-internals/example/public/index.html
+++ b/health/micro-ui/web/micro-ui-internals/example/public/index.html
@@ -16,7 +16,7 @@
   /> -->
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.8.2-beta.34/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.39/dist/index.css" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.18/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.19/dist/index.css" />
 
   <!-- added below css for hcm-workbench module inclusion-->
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.5.41/dist/index.css" /> -->
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/package.json b/health/micro-ui/web/micro-ui-internals/packages/css/package.json
index 087b4a26e41..170c6b3467f 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/css/package.json
+++ b/health/micro-ui/web/micro-ui-internals/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-health-css",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",
@@ -66,4 +66,4 @@
     "digit-ui",
     "css"
   ]
-}
+}
\ No newline at end of file
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss
index dc0d19ffbf4..7c920e84e77 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss
+++ b/health/micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss
@@ -1419,6 +1419,7 @@ $border-color: rgba(214, 213, 212, 1);
 }
 
 .create-microplan {
+
   .custom-action-bar,
   .custom-action-bar-no-first-button {
     display: flex !important;
@@ -1882,7 +1883,7 @@ $border-color: rgba(214, 213, 212, 1);
                 margin-right: auto;
               }
 
-              input:checked ~ .inputIconClassname {
+              input:checked~.inputIconClassname {
                 border-color: $primary-theme-color;
               }
 
@@ -2516,8 +2517,7 @@ $border-color: rgba(214, 213, 212, 1);
   }
 }
 
-.popup-wrap-rest-unfocus {
-}
+.popup-wrap-rest-unfocus {}
 
 .popup-wrap-rest-unfocus-active {
   button:focus {
@@ -2555,7 +2555,7 @@ $border-color: rgba(214, 213, 212, 1);
   margin: 0rem;
 }
 
-.mp-hypothesis-label-field > div > span {
+.mp-hypothesis-label-field>div>span {
   @extend .typography.heading-s;
   color: theme(digitv2.lightTheme.text-primary);
 }
@@ -2585,9 +2585,6 @@ $border-color: rgba(214, 213, 212, 1);
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  background-color: rgba(255, 255, 255, var(--bg-opacity));
-  margin-bottom: 1.5rem;
-  box-shadow: 0px 1px 2px 0px #00000029;
 }
 
 .kpi-card {
@@ -2598,7 +2595,8 @@ $border-color: rgba(214, 213, 212, 1);
 .kpi-card h2 {
   @extend .typography.heading-xl;
   margin: 0;
-  color: theme(digitv2.lightTheme.primary-2); /* Custom color */
+  color: theme(digitv2.lightTheme.primary-2);
+  /* Custom color */
 }
 
 .kpi-card p {
@@ -2614,7 +2612,7 @@ $border-color: rgba(214, 213, 212, 1);
   align-items: start !important;
 }
 
-.assumptionsForm-label-field > div > span {
+.assumptionsForm-label-field>div>span {
   font-size: 1.5rem;
   font-weight: bold;
 }
@@ -2673,6 +2671,7 @@ $border-color: rgba(214, 213, 212, 1);
 
 .digit-tag-container.userAccessCell {
   margin: unset !important;
+  max-width: unset !important;
 }
 
 .digit-card-component.primary.microPlanBulkTable {
@@ -2738,6 +2737,7 @@ $border-color: rgba(214, 213, 212, 1);
     }
   }
 }
-.sc-fzXfNN.sc-fzXfNO.sc-fzXfNP.iSamCd.rdt_TableCell > div:first-of-type {
+
+.sc-fzXfNN.sc-fzXfNO.sc-fzXfNP.iSamCd.rdt_TableCell>div:first-of-type {
   width: 100%;
 }
\ No newline at end of file
diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
index f548f4039c0..3aba8e16cd1 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
+++ b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
@@ -116,6 +116,18 @@
   margin-bottom: 0rem;
 }
 
+.summary-main-heading {
+  @extend .typography.heading-l;
+  color: theme(digitv2.lightTheme.text-primary);
+  margin-bottom: 0rem;
+}
+
+.summary-sub-heading {
+  @extend .typography.heading-m;
+  color: theme(digitv2.lightTheme.primary-2) !important;
+  margin-bottom: 0rem;
+}
+
 .view-composer-header-section {
   display: flex;
   justify-content: space-between;
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js
index e2d2f2b33a4..5d8bb7ec7ce 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/AssumptionsList.js
@@ -1,4 +1,4 @@
-import React,{Fragment} from 'react';
+import React, { Fragment } from 'react';
 import { Button, Card, LabelFieldPair } from '@egovernments/digit-ui-components';
 import HeaderComp from './HeaderComp';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +34,7 @@ const AssumptionsList = ({ customProps, setupCompleted }) => {
                             <Button
                                 label={t("WBH_EDIT")}
                                 variation="secondary"
-                                icon={"EditIcon"}
+                                icon={"Edit"}
                                 type="button"
                                 onClick={(e) => {
                                     const urlParams = Digit.Hooks.useQueryParams();
@@ -53,18 +53,18 @@ const AssumptionsList = ({ customProps, setupCompleted }) => {
 
                             return (
                                 <>
-                                <LabelFieldPair className="as-label-field" style={{marginBottom:"1rem"}}>
-                                    <span >
-                                        <strong>{t(key)}</strong>
-                                    </span>
-                                    <span >
-                                        {t(value)}
-                                    </span>
-                                    {/* </div> */}
-                                </LabelFieldPair>
-                                {index < dic[item].length - 1 && (
-                                    <div style={{ borderBottom: '1px solid #D3D3D3',marginBottom:"1rem" }}></div>
-                                )}
+                                    <LabelFieldPair className="as-label-field" style={{ marginBottom: "1rem" }}>
+                                        <span >
+                                            <strong>{t(key)}</strong>
+                                        </span>
+                                        <span >
+                                            {t(value)}
+                                        </span>
+                                        {/* </div> */}
+                                    </LabelFieldPair>
+                                    {index < dic[item].length - 1 && (
+                                        <div style={{ borderBottom: '1px solid #D3D3D3', marginBottom: "1rem" }}></div>
+                                    )}
                                 </>
                             );
                         })}
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundaryKpi.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundaryKpi.js
index 10103dca364..7c4e3e85164 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundaryKpi.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundaryKpi.js
@@ -2,19 +2,24 @@ import React from 'react';
 import { Card } from '@egovernments/digit-ui-components';
 import { useMyContext } from '../utils/context';
 import { useTranslation } from 'react-i18next';
-const BoundaryKpi = ({ data }) => {
+import { Fragment } from 'react';
+const BoundaryKpi = ({ data, heading }) => {
   const { state: { boundaryHierarchy } } = useMyContext()
   const { t } = useTranslation();
   return (
-    <Card className="kpi-container">
-      {Object.keys(data).map((key) => {
-        return (
-          <div key={key} className="kpi-card">
-            <h2>{String(data[key]).padStart(2, '0')}</h2>
-            <p>{t(`MICROPLAN_${key.toUpperCase()}`)}</p> {/* Correct use of t with template literal */}
-          </div>
-        );
-      })}
+
+    <Card className="middle-child">
+      {heading && <div className="summary-main-heading">{heading}</div>}
+      <div className="kpi-container">
+        {Object.keys(data).map((key) => {
+          return (
+            <div key={key} className="kpi-card">
+              <h2>{String(data[key]).padStart(2, '0')}</h2>
+              <p>{t(`MICROPLAN_${key.toUpperCase()}`)}</p> {/* Correct use of t with template literal */}
+            </div>
+          );
+        })}
+      </div>
     </Card>
   );
 };
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js
index ee48ef7e9f0..ac102495802 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/CampaignBoundary.js
@@ -5,13 +5,14 @@ import SubBoundaryView from "./subBoundaryView";
 import HeaderComp from "./HeaderComp";
 import { Card, Button } from "@egovernments/digit-ui-components";
 import BoundaryKpi from "./BoundaryKpi";
+import { Header } from "@egovernments/digit-ui-react-components";
 import { useHistory } from "react-router-dom";
 
-const CampaignBoundary = ({ customProps,setupCompleted }) => {
+const CampaignBoundary = ({ customProps, setupCompleted }) => {
   const { dispatch, state } = useMyContext();
   const { t } = useTranslation();
 
-  
+
 
   const handleViewMore = (ind) => {
     // Create a copy of the boundaryStatus array
@@ -294,57 +295,60 @@ const CampaignBoundary = ({ customProps,setupCompleted }) => {
     const updatedUrl = `${window.location.pathname}?${new URLSearchParams(urlParams).toString()}`;
     history.push(updatedUrl);
   }
-  const isEditable=setupCompleted==='true'? false:true;
+  const isEditable = setupCompleted === 'true' ? false : true;
 
 
   return (
     <div>
-      <BoundaryKpi data={statusMap} />
+      <BoundaryKpi data={statusMap} heading={t("CAMPAIGN_BOUNDARY")} />
       {bHierarchy.length > 1 ? (
-        <div className="marginBottom">
-  <SubBoundaryView style={{ background: "#fff" }} title={bHierarchy?.[1]} arr={parent_group?.[bHierarchy?.[1]]} editHandler={editHandler} isEditable={isEditable} />
+        <div>
+          <SubBoundaryView style={{ background: "#fff", gap: "1.5rem" }} title={bHierarchy?.[1]} arr={parent_group?.[bHierarchy?.[1]]} editHandler={editHandler} isEditable={isEditable} />
         </div>
       ) : null}
 
       {bHierarchy.length > 1 &&
         bHierarchy.slice(1, -1).map((item, ind) => {
           return (
-          <div key={`header_${ind}`}>
-            <Card className="marginBottom">
-              <div className="header-container">
-                <HeaderComp title={bHierarchy[ind + 2]} />
-                {!(setupCompleted==='true') &&
-                  <Button
-                    label={t("WBH_EDIT")}
-                    variation="secondary"
-                    icon={"EditIcon"}
-                    type="button"
-                    onClick={(e) => {
-                      editHandler();
-                    }}
-                  /> 
-                }
-              </div>
-              {/* <HeaderComp title={bHierarchy[ind + 2]} /> */}
-              {parent_group?.[item]?.map((item1, idx) =>
-                Array.isArray(parents?.[item1]) && boundaryStatus?.[ind + 2] && (idx === 0 || idx === 1) ? (
-                  <SubBoundaryView key={`${item1}_${idx}`} title={item1} arr={parents?.[item1]} />
-                ) : Array.isArray(parents?.[item1]) && !boundaryStatus?.[ind + 2] ? (
-                  <SubBoundaryView key={`${item1}_${idx}`} title={item1} arr={parents?.[item1]} />
-                ) : null
-              ) || null}
-              {boundaryStatus?.[ind + 2] && parent_group[item]?.length > 2 ? (
-                <div onClick={() => handleViewMore(ind + 2)} className="view-more">
-                  {t("VIEW_MORE")}
-                </div>
-              ) : !boundaryStatus?.[ind + 2] ? (
-                <div onClick={() => handleViewMore(ind + 2)} className="view-more">
-                  {t("VIEW_LESS")}
+            <div key={`header_${ind}`}>
+              <Card className="middle-child">
+                <div className="header-container" style={{ marginBottom: "0px" }}>
+                  <Header className="summary-sub-heading">
+                    {bHierarchy[ind + 2]}
+                  </Header>
+                  {!(setupCompleted === 'true') &&
+                    <Button
+                      label={t("WBH_EDIT")}
+                      variation="secondary"
+                      icon={"Edit"}
+                      type="button"
+                      onClick={(e) => {
+                        editHandler();
+                      }}
+                    />
+                  }
                 </div>
-              ) : null}
-            </Card>
-          </div>
-)})}
+                {/* <HeaderComp title={bHierarchy[ind + 2]} /> */}
+                {parent_group?.[item]?.map((item1, idx) =>
+                  Array.isArray(parents?.[item1]) && boundaryStatus?.[ind + 2] && (idx === 0 || idx === 1) ? (
+                    <SubBoundaryView style={{ gap: "1.5rem", marginBottom: "0px" }} key={`${item1}_${idx}`} title={item1} arr={parents?.[item1]} />
+                  ) : Array.isArray(parents?.[item1]) && !boundaryStatus?.[ind + 2] ? (
+                    <SubBoundaryView style={{ gap: "1.5rem", marginBottom: "0px" }} key={`${item1}_${idx}`} title={item1} arr={parents?.[item1]} />
+                  ) : null
+                ) || null}
+                {boundaryStatus?.[ind + 2] && parent_group[item]?.length > 2 ? (
+                  <div onClick={() => handleViewMore(ind + 2)} className="view-more">
+                    {t("VIEW_MORE")}
+                  </div>
+                ) : !boundaryStatus?.[ind + 2] ? (
+                  <div onClick={() => handleViewMore(ind + 2)} className="view-more">
+                    {t("VIEW_LESS")}
+                  </div>
+                ) : null}
+              </Card>
+            </div>
+          )
+        })}
     </div>
   );
 };
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js
index 211a33ffff4..c58792e7e6a 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/DataMgmtComponent.js
@@ -23,14 +23,14 @@ export const DataMgmtComponent = ({ customProps, setupCompleted }) => {
 
     return (
         <>
-            <Card style={{ marginBottom: "1rem" }}>
+            <Card className="middle">
                 <div className="header-container">
                     <HeaderComp title="POPULATION" styles={{ color: "black" }} />
                     {!(setupCompleted === 'true') &&
                         <Button
                             label={t("WBH_EDIT")}
                             variation="secondary"
-                            icon={"EditIcon"}
+                            icon={"Edit"}
                             type="button"
                             onClick={(e) => {
                                 const url = Digit.Hooks.useQueryParams();
@@ -75,7 +75,7 @@ export const DataMgmtComponent = ({ customProps, setupCompleted }) => {
                         <Button
                             label={t("WBH_EDIT")}
                             variation="secondary"
-                            icon={"EditIcon"}
+                            icon={"Edit"}
                             type="button"
                             onClick={(e) => {
                                 const url = Digit.Hooks.useQueryParams();
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigScreen.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigScreen.js
index 5ee2117defa..ff2d2562a24 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigScreen.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/FormulaConfigScreen.js
@@ -46,7 +46,7 @@ const FormulaConfigScreen = ({ customProps, setupCompleted }) => {
                                 <Button
                                     label={t("WBH_EDIT")}
                                     variation="secondary"
-                                    icon={"EditIcon"}
+                                    icon={"Edit"}
                                     type="button"
                                     onClick={(e) => {
                                         const urlParams = Digit.Hooks.useQueryParams();
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js
index 2a124e01241..cf06c33262a 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccess.js
@@ -162,13 +162,11 @@ function UserAccess({ category, setData, nationalRoles }) {
       name: t("ADMINISTRATIVE_BOUNDARY"),
       selector: (row) => {
         return (
-          <>
+          <div className="digit-tag-container userAccessCell">
             {row?.jurisdiction?.length > 0 && (
               <>
                 {row.jurisdiction.slice(0, 2).map((item, index) => (
-                  <div className="digit-tag-container userAccessCell" key={index}>
-                    <Chip className="" error="" extraStyles={{}} iconReq="" hideClose={true} text={t(item)} />
-                  </div>
+                  <Chip className="" error="" extraStyles={{}} iconReq="" hideClose={true} text={t(item)} />
                 ))}
 
                 {row.jurisdiction.length > 2 && (
@@ -198,7 +196,7 @@ function UserAccess({ category, setData, nationalRoles }) {
                 {chipPopUp && <Wrapper setShowPopUp={setChipPopUp} alreadyQueuedSelectedState={row.jurisdiction} />}
               </>
             )}
-          </>
+          </div>
         );
       },
       sortable: true,
@@ -238,7 +236,7 @@ function UserAccess({ category, setData, nationalRoles }) {
         <p className="mp-description">{t(`${category}_DESCRIPTION`)}</p>
       </Card>
 
-      <Card>
+      <Card style={{ maxWidth: "100%", overflow: "auto", marginBottom: "2.5rem" }}>
         {planEmployee?.data?.length > 0 || searchQuery ? (
           <div style={styles.container}>
             <TableSearchField onSearch={handleSearch} />
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmt.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmt.js
index a6ddf2ecec4..f4a90d03538 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmt.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmt.js
@@ -1,38 +1,39 @@
 import React, { Fragment, } from "react";
 import { useTranslation } from "react-i18next";
-import { Card, Header } from "@egovernments/digit-ui-react-components";
+import { Header } from "@egovernments/digit-ui-react-components";
+import { Card } from "@egovernments/digit-ui-components";
 import { useMyContext } from "../utils/context";
 import UserAccessMgmtTableWrapper from "./UserAccessMgmtTableWrapper";
 
 
-const UserAccessMgmt = ({setupCompleted}) => {
+const UserAccessMgmt = ({ setupCompleted }) => {
     const { state } = useMyContext();
     const rolesArray = state?.rolesForMicroplan?.sort((a, b) => a.orderNumber - b.orderNumber).map((item) => item.roleCode) || [];
-    
+
     const { t } = useTranslation();
 
-    if(rolesArray?.length === 0){
-        <Card/>
+    if (rolesArray?.length === 0) {
+        <Card />
     }
 
     return (
         <div>
-        <Card>
-        <Header styles={{ fontSize: "32px" }}>{t("USER_ACCESS_MGMT")}</Header>
-        </Card>
-        {rolesArray?.map((role, index) => {
+            <Card style={{ marginBottom: "1px" }}>
+                <Header className="summary-main-heading">{t("USER_ACCESS_MGMT")} </Header>
+            </Card>
+            {rolesArray?.map((role, index) => {
 
-            return(
-              <UserAccessMgmtTableWrapper
-              internalKey={index}
-              role={role}
-              setupCompleted={setupCompleted}
-              />
+                return (
+                    <UserAccessMgmtTableWrapper
+                        internalKey={index}
+                        role={role}
+                        setupCompleted={setupCompleted}
+                    />
                 );
-        })
-        }
+            })
+            }
         </div>
-        )
+    )
 };
 
 export default UserAccessMgmt;
\ No newline at end of file
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
index 78a0fc89fe2..20bef9fce22 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
@@ -1,11 +1,10 @@
-import { Button, PopUp, Chip, Loader, } from "@egovernments/digit-ui-components";
+import { Button, PopUp, Chip, Loader, Card } from "@egovernments/digit-ui-components";
 import React, { Fragment, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import DataTable from "react-data-table-component";
-import { CardSubHeader, Card } from "@egovernments/digit-ui-react-components";
+import { CardSubHeader, Header } from "@egovernments/digit-ui-react-components";
 import { tableCustomStyle } from "./tableCustomStyle";
 import { ShowMoreWrapper } from "./ShowMoreWrapper";
-import HeaderComp from "./HeaderComp";
 import { useHistory } from "react-router-dom";
 
 
@@ -34,7 +33,7 @@ function groupEmployeesByPlan(data, planData) {
   return groupedEmployees ? Object.values(groupedEmployees) : [];
 }
 
-const UserAccessMgmtTableWrapper = ({ role, internalKey,setupCompleted }) => {
+const UserAccessMgmtTableWrapper = ({ role, internalKey, setupCompleted }) => {
   const history = useHistory();
   const { t } = useTranslation();
   const tenantId = Digit.ULBService.getCurrentTenantId();
@@ -179,19 +178,23 @@ const UserAccessMgmtTableWrapper = ({ role, internalKey,setupCompleted }) => {
   }
   else {
     return (
-      <Card>
+      <Card className="middle-child">
         {/* <div className="view-composer-header-section">
                 <CardSubHeader style={{ marginTop: 0, fontSize: "1.5rem", color: " #0B4B66", marginBottom: "0rem" }}>{t(planAssignmentData?.role)}</CardSubHeader>
             </div> */}
         <div className="header-container">
-          <HeaderComp title={t(planAssignmentData?.role)} styles={{ color: "black" }} />
+          <Header className="summary-sub-heading">
+            {t(planAssignmentData?.role)}
+          </Header>
           {!(setupCompleted === 'true') &&
 
             <Button
               label={t("WBH_EDIT")}
               variation="secondary"
-              icon={"EditIcon"}
+              icon={"Edit"}
+              style={{ width: "110px" }}
               type="button"
+              size="medium"
               onClick={(e) => {
                 const url = Digit.Hooks.useQueryParams();
                 const urlParams = Digit.Hooks.useQueryParams();
@@ -203,6 +206,7 @@ const UserAccessMgmtTableWrapper = ({ role, internalKey,setupCompleted }) => {
             />
           }
         </div>
+        {/* <Card > */}
         <DataTable
           columns={columns}
           data={planAssignmentData?.data}
@@ -214,7 +218,7 @@ const UserAccessMgmtTableWrapper = ({ role, internalKey,setupCompleted }) => {
           paginationPerPage={rowsPerPage}
           paginationRowsPerPageOptions={[5, 10, 15, 20]}
         />
-
+        {/* </Card> */}
       </Card>
     );
   }
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
index 53e876c2ccc..c4fb6dd3972 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
-import HeaderComp from './HeaderComp';
+import { Header } from '@egovernments/digit-ui-react-components';
 import { Card, Button, PopUp, Chip, Loader } from '@egovernments/digit-ui-components';
 import { ShowMoreWrapper } from './ShowMoreWrapper';
 import { useTranslation } from 'react-i18next';
 
-const SubBoundaryView = ({ title, arr, style,editHandler,isEditable}) => {
-  
+const SubBoundaryView = ({ title, arr, style, editHandler, isEditable }) => {
+
   const [showPopUp, setShowPopUp] = useState(false);
   const { t } = useTranslation();
 
@@ -19,15 +19,17 @@ const SubBoundaryView = ({ title, arr, style,editHandler,isEditable}) => {
         arr && arr.length > 0 ? (
           <Card type={"secondary"} style={style}>
 
-            <div className="header-container">
-              <HeaderComp title={title} />
+            <div className="header-container" style={{ marginBottom: "0px" }}>
+              <Header className="summary-sub-heading">
+                {t(title)}
+              </Header>
               {isEditable && editHandler && <Button
                 label={t("WBH_EDIT")}
                 variation="secondary"
-                icon={"EditIcon"}
+                icon={"Edit"}
                 type="button"
                 onClick={(e) => {
-                 editHandler();
+                  editHandler();
                 }}
               />}
             </div>
diff --git a/health/micro-ui/web/public/index.html b/health/micro-ui/web/public/index.html
index 823ad835675..b26d634a72b 100644
--- a/health/micro-ui/web/public/index.html
+++ b/health/micro-ui/web/public/index.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css@1.8.2-beta.34/dist/index.css" />
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.39/dist/index.css" />
   <!-- added below css for hcm-workbench module inclusion-->
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.18/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-health-css@0.1.19/dist/index.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
   <title>DIGIT HCM</title>