From 6395250dc97aecc7855e9b07c996461fbd5c9407 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Fri, 26 Jan 2024 15:19:44 +0800
Subject: [PATCH] update search form header & reset button color

---
 src/pages/DemandNote/Search/SearchForm.js     |  2 +-
 .../DemandNote/Search_Public/SearchForm.js    |  3 +-
 src/pages/Message/Search/SearchForm.js        |  3 +-
 .../DetailPage/OrganizationCard.js            | 55 +++++---------
 .../DetailPage/OrganizationPubCard.js         | 33 ++++----
 .../SearchPage/OrganizationSearchForm.js      |  4 +-
 src/pages/Payment/Search_GLD/SearchForm.js    |  3 +-
 src/pages/Payment/Search_Public/SearchForm.js |  3 +-
 src/pages/Proof/Search_GLD/SearchForm.js      |  2 +-
 src/pages/Proof/Search_Public/SearchForm.js   |  3 +-
 .../ListPanel/SearchPublicNoticeForm.js       |  1 +
 .../PublicNotice/Search_GLD/SearchForm.js     |  2 +-
 .../UserInformationCard_Individual.js         | 52 +++++--------
 .../UserInformationCard_Individual_Pub.js     |  1 +
 .../UserInformationCard_Organization.js       | 76 +++++++++----------
 .../UserInformationCard_Organization_Pub.js   |  1 +
 src/pages/User/SearchPage/UserSearchForm.js   |  2 +-
 .../UserSearchForm_Individual.js              |  2 +-
 .../UserSearchForm_Organization.js            |  2 +-
 .../UserGroupSearchForm.js                    |  2 +-
 src/themes/buttonConst.js                     |  4 +
 21 files changed, 114 insertions(+), 142 deletions(-)

diff --git a/src/pages/DemandNote/Search/SearchForm.js b/src/pages/DemandNote/Search/SearchForm.js
index 222e6b8..8717699 100644
--- a/src/pages/DemandNote/Search/SearchForm.js
+++ b/src/pages/DemandNote/Search/SearchForm.js
@@ -92,7 +92,7 @@ const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issue
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1 }} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1, ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
diff --git a/src/pages/DemandNote/Search_Public/SearchForm.js b/src/pages/DemandNote/Search_Public/SearchForm.js
index 8f3b320..10ad3ba 100644
--- a/src/pages/DemandNote/Search_Public/SearchForm.js
+++ b/src/pages/DemandNote/Search_Public/SearchForm.js
@@ -83,7 +83,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                     <Grid item xs={12}>
                         <CardContent sx={{ px: 2.5, pt: 3 }}>
                             <Grid item justifyContent="space-between" alignItems="center" >
-                                <Typography variant="h4">
+                                <Typography variant="pnspsFormHeader">
                                     <FormattedMessage id="searchForm"/>
                                 </Typography>
                             </Grid>
@@ -215,6 +215,7 @@ const SearchDemandNoteForm = ({ applySearch, searchCriteria, issueComboData
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                             <Grid item sx={{mr: 3, mb: 3}}>
                                 <Button
+                                    color="cancel"
                                     variant="contained"
                                     onClick={resetForm}
                                 >
diff --git a/src/pages/Message/Search/SearchForm.js b/src/pages/Message/Search/SearchForm.js
index e81e6b2..63d41b6 100644
--- a/src/pages/Message/Search/SearchForm.js
+++ b/src/pages/Message/Search/SearchForm.js
@@ -63,7 +63,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h4">
+                        <Typography variant="pnspsFormHeader">
                             <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
@@ -141,6 +141,7 @@ const SearchForm = ({ applySearch, searchCriteria }) => {
                     <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                             aria-label={intl.formatMessage({id: 'reset'})}
                         >
diff --git a/src/pages/Organization/DetailPage/OrganizationCard.js b/src/pages/Organization/DetailPage/OrganizationCard.js
index f81478e..f69e130 100644
--- a/src/pages/Organization/DetailPage/OrganizationCard.js
+++ b/src/pages/Organization/DetailPage/OrganizationCard.js
@@ -18,6 +18,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
 import { useIntl } from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -170,97 +172,78 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             <>
                                 {createMode ?
                                     <>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 type="submit"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Create</Typography>
+                                                Create
                                             </Button>
                                         </Grid>
+                                        </ThemeProvider>
                                     </> :
                                     <>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 onClick={loadDataFun}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
+                                                color="cancel"
                                             >
-                                                <Typography variant="h5">Reset & Back</Typography>
+                                                    Reset & Back
                                             </Button>
                                         </Grid>
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 type="submit"
                                                 color="success"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Save</Typography>
+                                                Save
                                             </Button>
                                         </Grid>
+                                        </ThemeProvider>
                                     </>
                                 }
                             </>
                             :
                             <>
                                 <Grid item sx={{ ml: 0, mr: 3 }}>
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Button
-                                        size="large"
                                         variant="contained"
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
                                         onClick={onEditClick}
                                     >
-                                        <Typography variant="h5">Edit</Typography>
+                                        Edit
                                     </Button>
+                                    </ThemeProvider>
                                 </Grid>
 
                                 {
                                     currentUserData.creditor ?
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 color="error"
                                                 onClick={() => setNonCreditorConfirmPopUp(true)}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Mark as Non-Creditor</Typography>
+                                                Mark as Non-Creditor
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         :
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 color="orange"
                                                 onClick={() => setCreditorConfirmPopUp(true)}
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">Mark as Creditor</Typography>
+                                                Mark as Creditor
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                 }
                             </>
diff --git a/src/pages/Organization/DetailPage/OrganizationPubCard.js b/src/pages/Organization/DetailPage/OrganizationPubCard.js
index e11b837..1fe6b5d 100644
--- a/src/pages/Organization/DetailPage/OrganizationPubCard.js
+++ b/src/pages/Organization/DetailPage/OrganizationPubCard.js
@@ -20,6 +20,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
 import {FormattedMessage, useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -126,43 +128,38 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 {createMode ?
                                     <>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
                                                 type="submit"
-                                                sx={{
-                                                    textTransform: 'capitalize',
-                                                    alignItems: 'end'
-                                                }}
                                             >
-                                                <Typography variant="h5">
-                                                    <FormattedMessage id="create" />
-                                                </Typography>
+                                                <FormattedMessage id="create" />
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                     </> :
                                     <>
                                         <Grid item sx={{ ml: 0, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
-                                                size="large"
                                                 variant="contained"
+                                                color="cancel"
                                                 onClick={loadDataFun}
                                             >
-                                                <Typography variant="h5">
-                                                    <FormattedMessage id="resetAndBack" />
-                                                </Typography>
+                                                <FormattedMessage id="resetAndBack" />
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button
                                                 variant="contained"
                                                 type="submit"
                                                 color="success"
                                             >
-                                                <Typography variant="h5">
-                                                    <FormattedMessage id="save" />
-                                                </Typography>
+                                                <FormattedMessage id="save" />
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                     </>
                                 }
@@ -170,14 +167,14 @@ const OrganizationPubCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             :
                             <>
                                 <Grid item sx={{ ml: 0, mr: 3 }}>
+                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Button
                                         variant="contained"
                                         onClick={onEditClick}
                                     >
-                                        <Typography variant="h5">
-                                            <FormattedMessage id="edit" />
-                                        </Typography>
+                                        <FormattedMessage id="edit" />
                                     </Button>
+                                    </ThemeProvider>
                                 </Grid>
                             </>
                         }
diff --git a/src/pages/Organization/SearchPage/OrganizationSearchForm.js b/src/pages/Organization/SearchPage/OrganizationSearchForm.js
index d1d623e..93295a4 100644
--- a/src/pages/Organization/SearchPage/OrganizationSearchForm.js
+++ b/src/pages/Organization/SearchPage/OrganizationSearchForm.js
@@ -1,6 +1,6 @@
 // material-ui
 import {
-    Button,
+    CButton,
     Grid, TextField,
     Typography,
     Autocomplete,
@@ -66,7 +66,7 @@ const OrganizationSearchForm = ({ applySearch }) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
diff --git a/src/pages/Payment/Search_GLD/SearchForm.js b/src/pages/Payment/Search_GLD/SearchForm.js
index 83dd76d..4f359db 100644
--- a/src/pages/Payment/Search_GLD/SearchForm.js
+++ b/src/pages/Payment/Search_GLD/SearchForm.js
@@ -49,7 +49,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
@@ -154,6 +154,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <Grid item sx={{ ml: 3, mb: 3}}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                         >
                             Reset
diff --git a/src/pages/Payment/Search_Public/SearchForm.js b/src/pages/Payment/Search_Public/SearchForm.js
index ea71f11..a7b5c65 100644
--- a/src/pages/Payment/Search_Public/SearchForm.js
+++ b/src/pages/Payment/Search_Public/SearchForm.js
@@ -68,7 +68,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center" >
-                        <Typography variant="h4">
+                        <Typography variant="pnspsFormHeader">
                             <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
@@ -182,6 +182,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                     <Grid item sx={{mr: 3, mb: 3 }}>
                         <Button
+                            color="cancel"
                             variant="contained"
                             onClick={resetForm}
                             aria-label={intl.formatMessage({id: 'reset'})}
diff --git a/src/pages/Proof/Search_GLD/SearchForm.js b/src/pages/Proof/Search_GLD/SearchForm.js
index 7295f38..84b9455 100644
--- a/src/pages/Proof/Search_GLD/SearchForm.js
+++ b/src/pages/Proof/Search_GLD/SearchForm.js
@@ -96,7 +96,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
 
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
diff --git a/src/pages/Proof/Search_Public/SearchForm.js b/src/pages/Proof/Search_Public/SearchForm.js
index e826766..17bb7a7 100644
--- a/src/pages/Proof/Search_Public/SearchForm.js
+++ b/src/pages/Proof/Search_Public/SearchForm.js
@@ -102,7 +102,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                 {/*row 1*/}
                 <CardContent sx={{ px: 2.5, pt: 3 }}>
                     <Grid item justifyContent="space-between" alignItems="center">
-                        <Typography variant="h4">
+                        <Typography variant="pnspsFormHeader">
                             <FormattedMessage id="searchForm"/>
                         </Typography>
                     </Grid>
@@ -276,6 +276,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData
                     <Grid item sx={{ mr: 3, mb: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                             aria-label={intl.formatMessage({id: 'reset'})}
                         >
diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js
index e410c99..f668a49 100644
--- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js
+++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js
@@ -217,6 +217,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
                     <Grid item sx={{ ml: 3, mr: 3 }}>
                         <Button
                             variant="contained"
+                            color="cancel"
                             onClick={resetForm}
                             aria-label={intl.formatMessage({id: 'reset'})}
                         >
diff --git a/src/pages/PublicNotice/Search_GLD/SearchForm.js b/src/pages/PublicNotice/Search_GLD/SearchForm.js
index a640bf1..0bd2150 100644
--- a/src/pages/PublicNotice/Search_GLD/SearchForm.js
+++ b/src/pages/PublicNotice/Search_GLD/SearchForm.js
@@ -94,7 +94,7 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:marginBottom}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
index d362b0b..f713621 100644
--- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
+++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
@@ -17,6 +17,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
 import {useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -150,49 +152,39 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         <Grid container maxWidth justifyContent="flex-start">
                             {editMode ?
                                 <>
+                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Grid item sx={{ mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             onClick={loadDataFun}
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
+                                            color="cancel"
                                         >
-                                            <Typography variant="h5">Reset & Back</Typography>
+                                            Reset & Back
                                         </Button>
                                     </Grid>
 
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             type="submit"
                                             color="success"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                         >
-                                            <Typography variant="h5">Save</Typography>
+                                            Save
                                         </Button>
                                     </Grid>
+                                </ThemeProvider>
                                 </>
                                 :
                                 <>
                                     <Grid item sx={{ mr: 3 }}>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
-                                            size="large"
                                             variant="contained"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                             onClick={onEditClick}
                                         >
-                                            <Typography variant="h5">Edit</Typography>
+                                            Edit
                                         </Button>
+                                        </ThemeProvider>
                                     </Grid>
                                 </>
                             }
@@ -321,16 +313,14 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                     })}
                                                 </Grid>
                                                 <Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2 ,mb:2}}>
+                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                     <Button
                                                         variant="contained"
-                                                        sx={{
-                                                            textTransform: 'capitalize',
-                                                            alignItems: 'end',
-                                                        }}
                                                         onClick={onVerifiedClick}
                                                     >
-                                                        <Typography variant="h5">Verify</Typography>
+                                                        Verify
                                                     </Button>
+                                                    </ThemeProvider>
                                                 </Grid>
                                             </>
                                     }
@@ -454,31 +444,27 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                 </Grid>
                                                 {locked ?
                                                     <Grid item xs={2} sm={2} md={2} lg={2}  sx={{ml:2}}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
                                                             variant="contained"
                                                             color="success"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doUnlock}
                                                         >
-                                                            <Typography variant="h5">Active</Typography>
+                                                            Active
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                     :
                                                     <Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2}}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
                                                             variant="contained"
                                                             color="error"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doLock}
                                                         >
-                                                            <Typography variant="h5">Lock</Typography>
+                                                            Lock
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                 }
                                             </>
diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
index 3568388..2a2bb86 100644
--- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
+++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual_Pub.js
@@ -118,6 +118,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => {
                                         <Button
                                             aria-label={intl.formatMessage({id: 'back'})}
                                             variant="contained"
+                                            color="cancel"
                                             onClick={loadDataFun}
                                         >
                                             <FormattedMessage id="resetAndBack" />
diff --git a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
index 61bab5d..1f229f3 100644
--- a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
+++ b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization.js
@@ -18,6 +18,8 @@ import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
 import {useIntl} from "react-intl";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -196,50 +198,39 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                         <Grid container maxWidth justifyContent="flex-start">
                             {editMode ?
                                 <>
+                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             onClick={loadDataFun}
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
+                                            color="cancel"
                                         >
-                                            <Typography variant="h5">Reset & Back</Typography>
+                                            Reset & Back
                                         </Button>
                                     </Grid>
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
                                         <Button
-                                            size="large"
                                             variant="contained"
                                             type="submit"
                                             color="success"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                         >
-                                            <Typography variant="h5">Save</Typography>
+                                            Save
                                         </Button>
                                     </Grid>
-
+                                </ThemeProvider>
                                 </>
                                 :
                                 <>
 
                                     <Grid item sx={{ ml: 3, mr: 3 }}>
+                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                         <Button
-                                            size="large"
                                             variant="contained"
-                                            sx={{
-                                                textTransform: 'capitalize',
-                                                alignItems: 'end'
-                                            }}
                                             onClick={onEditClick}
                                         >
-                                            <Typography variant="h5">Edit</Typography>
+                                            Edit
                                         </Button>
+                                        </ThemeProvider>
                                     </Grid>
                                 </>
                             }
@@ -380,17 +371,14 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                                     })}
                                                 </Grid>
                                                 <Grid item xs={1} md={1} lg={1}>
+                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                     <Button
-                                                        size="large"
                                                         variant="contained"
-                                                        sx={{
-                                                            textTransform: 'capitalize',
-                                                            alignItems: 'end'
-                                                        }}
                                                         onClick={() => { onVerifiedClick() }}
                                                     >
-                                                        <Typography variant="h5">Verify</Typography>
+                                                        Verify
                                                     </Button>
+                                                    </ThemeProvider>
                                                 </Grid>
                                             </>
                                     }
@@ -436,33 +424,27 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
 
                                                 {formik.values.locked ?
                                                     <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
-                                                            size="large"
                                                             variant="contained"
                                                             color="success"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end'
-                                                            }}
                                                             onClick={doUnlock}
                                                         >
-                                                            <Typography variant="h5">Active</Typography>
+                                                            Active
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                     :
                                                     <Grid item xs={1} md={1} lg={1} sx={{ ml: 1 }}>
+                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                         <Button
-                                                            size="large"
                                                             variant="contained"
                                                             color="error"
-                                                            sx={{
-                                                                textTransform: 'capitalize',
-                                                                alignItems: 'end',
-                                                            }}
                                                             onClick={doLock}
                                                         >
-                                                            <Typography variant="h5">Lock</Typography>
+                                                           Lock
                                                         </Button>
+                                                        </ThemeProvider>
                                                     </Grid>
                                                 }
                                             </>
@@ -478,11 +460,13 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                                 <Grid container alignItems={"center"}>
                                     {currentUserData.orgId == null ?
                                         <Grid item lg={2} >
+                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                             <Button variant="contained"
                                                 onClick={createOrgClick}
                                             >
-                                                <Typography variant="h5">Create Organisation</Typography>
+                                               Create Organisation
                                             </Button>
+                                            </ThemeProvider>
                                         </Grid>
                                         : null
                                     }
@@ -593,7 +577,11 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">Close</Typography></Button>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Button onClick={() => setIsWarningPopUp(false)}>
+                            Close
+                        </Button>
+                        </ThemeProvider>
                     </DialogActions>
                 </Dialog>
             </div>
@@ -614,8 +602,14 @@ const UserInformationCard_Organization = ({ userData, loadDataFun, orgData }) =>
                         <Typography variant="h4" style={{ padding: '16px' }}>{confirmText}</Typography>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => { setIsConfirmPopUp(false) }}><Typography variant="h5">Close</Typography></Button>
-                        <Button onClick={() => { confirmAction?.function(); }}><Typography variant="h5">Confirm</Typography></Button>
+                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
+                        <Button onClick={() => { setIsConfirmPopUp(false) }}>
+                            Close
+                        </Button>
+                        <Button onClick={() => { confirmAction?.function(); }}>
+                            Confirm
+                        </Button>
+                        </ThemeProvider>
                     </DialogActions>
                 </Dialog>
             </div>
diff --git a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js
index 6d0fc88..ed94098 100644
--- a/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js
+++ b/src/pages/User/DetailsPage_Organization/UserInformationCard_Organization_Pub.js
@@ -114,6 +114,7 @@ const UserInformationCard_Organization_Pub = ({ userData, loadDataFun,}) => {
                                         <Button
                                             variant="contained"
                                             onClick={loadDataFun}
+                                            color="cancel"
                                         >
                                             <FormattedMessage id="resetAndBack" />
 
diff --git a/src/pages/User/SearchPage/UserSearchForm.js b/src/pages/User/SearchPage/UserSearchForm.js
index 0b1f1be..6581070 100644
--- a/src/pages/User/SearchPage/UserSearchForm.js
+++ b/src/pages/User/SearchPage/UserSearchForm.js
@@ -81,7 +81,7 @@ const UserSearchForm = ({ applySearch }) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form (GLD User)
                         </Typography>
                     </Grid>
diff --git a/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js b/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
index d9ade40..046fb8e 100644
--- a/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
+++ b/src/pages/User/SearchPage_Individual/UserSearchForm_Individual.js
@@ -52,7 +52,7 @@ const UserSearchForm_Individual = ({ applySearch }) => {
                 <Grid container sx={{ ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
diff --git a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
index bf3917e..f946a39 100644
--- a/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
+++ b/src/pages/User/SearchPage_Organization/UserSearchForm_Organization.js
@@ -57,7 +57,7 @@ const UserSearchForm_Organization = ({applySearch}) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
diff --git a/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js b/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
index 8c8d6fa..3e5ff42 100644
--- a/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
+++ b/src/pages/pnspsUserGroupSearchPage/UserGroupSearchForm.js
@@ -41,7 +41,7 @@ const UserGroupSearchForm = ({ applySearch }) => {
                 <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
                     {/*row 1*/}
                     <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
-                        <Typography variant="h5" >
+                        <Typography variant="pnspsFormHeader" >
                             Search Form
                         </Typography>
                     </Grid>
diff --git a/src/themes/buttonConst.js b/src/themes/buttonConst.js
index e803fe1..49df81a 100644
--- a/src/themes/buttonConst.js
+++ b/src/themes/buttonConst.js
@@ -35,6 +35,10 @@ export const PNSPS_BUTTON_THEME = createTheme({
             main: '#F3AF2B',
             contrastText: '#FFFFFF',
         },
+        error:{
+            main: '#F3AF2B',
+            contrastText: '#FFFFFF',
+        },
         exportExcel:{
             main: '#6A8B9E',
             contrastText: '#FFFFFF',