From fbfd339d4966887aa510bc03e4d3b148334e46aa Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Sun, 22 Dec 2024 04:43:09 +0000
Subject: [PATCH 1/9] Update fundcomapignpledge

---
 .../FundCampaignPledge/FundCampaignPledge.tsx |  48 ++--
 .../FundCampaignPledge/PledgeDeleteModal.tsx  |   2 +-
 .../FundCampaignPledge/PledgeModal.tsx        |  10 +-
 src/style/app.module.css                      | 267 ++++++++++++++++++
 4 files changed, 297 insertions(+), 30 deletions(-)

diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
index d14ee9de06..fce056da86 100644
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
@@ -9,7 +9,7 @@ import { Button, Dropdown, Form } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { Navigate, useParams } from 'react-router-dom';
 import { currencySymbols } from 'utils/currency';
-import styles from './FundCampaignPledge.module.css';
+import styles from '../../style/app.module.css';
 import PledgeDeleteModal from './PledgeDeleteModal';
 import PledgeModal from './PledgeModal';
 import { Breadcrumbs, Link, Stack, Typography } from '@mui/material';
@@ -200,11 +200,11 @@ const fundCampaignPledge = (): JSX.Element => {
     return (
       <div className={`${styles.container} bg-white rounded-4 my-3`}>
         <div className={styles.message} data-testid="errorMsg">
-          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
+          <WarningAmberRounded className={styles.errorIconPledge} fontSize="large" />
           <h6 className="fw-bold text-danger text-center">
             {tErrors('errorLoading', { entity: 'Pledges' })}
             <br />
-            {pledgeError.message}
+            {pledgeError.messagePledge}
           </h6>
         </div>
       </div>
@@ -219,7 +219,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 50,
       align: 'left',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaderPledge}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return (
@@ -233,14 +233,14 @@ const fundCampaignPledge = (): JSX.Element => {
                       src={user.image}
                       alt="pledge"
                       data-testid={`image${index + 1}`}
-                      className={styles.TableImage}
+                      className={styles.TableImagePledge}
                     />
                   ) : (
                     <div className={styles.avatarContainer}>
                       <Avatar
                         key={user._id + '1'}
                         containerStyle={styles.imageContainer}
-                        avatarStyle={styles.TableImage}
+                        avatarStyle={styles.TableImagePledge}
                         name={user.firstName + ' ' + user.lastName}
                         alt={user.firstName + ' ' + user.lastName}
                       />
@@ -272,7 +272,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 150,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaderPledge}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return dayjs(params.row.startDate).format('DD/MM/YYYY');
@@ -284,7 +284,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 150,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaderPledge}`,
       flex: 1,
       sortable: false,
       renderCell: (params: GridCellParams) => {
@@ -298,7 +298,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaderPledge}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return (
@@ -323,7 +323,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaderPledge}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return (
@@ -348,7 +348,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeader}`,
+      headerClassName: `${styles.tableHeaderPledge}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return (
@@ -419,27 +419,27 @@ const fundCampaignPledge = (): JSX.Element => {
         <div className={styles.progressContainer}>
           <div className="d-flex justify-content-center">
             <div
-              className={`btn-group ${styles.toggleGroup}`}
+              className={`btn-group ${styles.toggleGroupPledge}`}
               role="group"
               aria-label="Toggle between Pledged and Raised amounts"
             >
               <input
-                type="radio"
-                className={`btn-check ${styles.toggleBtn}`}
+                type="radioPledge"
+                className={`btn-check ${styles.toggleBtnPledge}`}
                 name="btnradio"
                 id="pledgedRadio"
                 checked={progressIndicator === 'pledged'}
                 onChange={() => setProgressIndicator('pledged')}
               />
               <label
-                className={`btn btn-outline-primary ${styles.toggleBtn}`}
+                className={`btn btn-outline-primary ${styles.toggleBtnPledge}`}
                 htmlFor="pledgedRadio"
               >
                 {t('pledgedAmount')}
               </label>
 
               <input
-                type="radio"
+                type="radioPledge"
                 className={`btn-check`}
                 name="btnradio"
                 id="raisedRadio"
@@ -447,7 +447,7 @@ const fundCampaignPledge = (): JSX.Element => {
                 checked={progressIndicator === 'raised'}
               />
               <label
-                className={`btn btn-outline-primary ${styles.toggleBtn}`}
+                className={`btn btn-outline-primary ${styles.toggleBtnPledge}`}
                 htmlFor="raisedRadio"
               >
                 {t('raisedAmount')}
@@ -470,14 +470,14 @@ const fundCampaignPledge = (): JSX.Element => {
           </div>
         </div>
       </div>
-      <div className={`${styles.btnsContainer} gap-4 flex-wrap`}>
-        <div className={`${styles.input} mb-1`}>
+      <div className={`${styles.btnsContainerPledge} gap-4 flex-wrap`}>
+        <div className={`${styles.inputPledge} mb-1`}>
           <Form.Control
             type="name"
             placeholder={t('searchPledger')}
             autoComplete="off"
             required
-            className={styles.inputField}
+            className={styles.inputFieldPledge}
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             data-testid="searchPledger"
@@ -496,7 +496,7 @@ const fundCampaignPledge = (): JSX.Element => {
               <Dropdown.Toggle
                 variant="success"
                 id="dropdown-basic"
-                className={styles.dropdown}
+                className={styles.dropdownPledge}
                 data-testid="filter"
               >
                 <Sort className={'me-1'} />
@@ -557,7 +557,7 @@ const fundCampaignPledge = (): JSX.Element => {
           ),
         }}
         sx={dataGridStyle}
-        getRowClassName={() => `${styles.rowBackground}`}
+        getRowClassName={() => `${styles.rowBackgroundPledge}`}
         autoHeight
         rowHeight={65}
         rows={pledges.map((pledge) => ({
@@ -607,14 +607,14 @@ const fundCampaignPledge = (): JSX.Element => {
                 src={user.image}
                 alt="pledger"
                 data-testid={`extraImage${index + 1}`}
-                className={styles.TableImage}
+                className={styles.TableImagePledge}
               />
             ) : (
               <div className={styles.avatarContainer}>
                 <Avatar
                   key={user._id + '1'}
                   containerStyle={styles.imageContainer}
-                  avatarStyle={styles.TableImage}
+                  avatarStyle={styles.TableImagePledge}
                   name={user.firstName + ' ' + user.lastName}
                   alt={user.firstName + ' ' + user.lastName}
                   dataTestId={`extraAvatar${index + 1}`}
diff --git a/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx b/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
index 288baa16ef..669611ffe6 100644
--- a/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
+++ b/src/screens/FundCampaignPledge/PledgeDeleteModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Modal } from 'react-bootstrap';
-import styles from './FundCampaignPledge.module.css';
+import styles from '../../style/app.module.css';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from '@apollo/client';
diff --git a/src/screens/FundCampaignPledge/PledgeModal.tsx b/src/screens/FundCampaignPledge/PledgeModal.tsx
index 911d90e77e..f51e0ffe51 100644
--- a/src/screens/FundCampaignPledge/PledgeModal.tsx
+++ b/src/screens/FundCampaignPledge/PledgeModal.tsx
@@ -8,7 +8,7 @@ import type {
   InterfacePledgeInfo,
   InterfaceUserInfo,
 } from 'utils/interfaces';
-import styles from './FundCampaignPledge.module.css';
+import styles from '../../style/app.module.css';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from '@apollo/client';
@@ -228,7 +228,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
           <Form.Group className="d-flex mb-3 w-100">
             <Autocomplete
               multiple
-              className={`${styles.noOutline} w-100`}
+              className={`${styles.noOutlinePledge} w-100`}
               limitTags={2}
               data-testid="pledgerSelect"
               options={pledgers}
@@ -258,7 +258,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
               format="DD/MM/YYYY"
               label={tCommon('startDate')}
               value={dayjs(pledgeStartDate)}
-              className={styles.noOutline}
+              className={styles.noOutlinePledge}
               onChange={(date: Dayjs | null): void => {
                 if (date) {
                   setFormState({
@@ -280,7 +280,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
             <DatePicker
               format="DD/MM/YYYY"
               label={tCommon('endDate')}
-              className={styles.noOutline}
+              className={styles.noOutlinePledge}
               value={dayjs(pledgeEndDate)}
               onChange={(date: Dayjs | null): void => {
                 if (date) {
@@ -327,7 +327,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
               <TextField
                 label={t('amount')}
                 variant="outlined"
-                className={styles.noOutline}
+                className={styles.noOutlinePledge}
                 value={pledgeAmount}
                 onChange={(e) => {
                   if (parseInt(e.target.value) > 0) {
diff --git a/src/style/app.module.css b/src/style/app.module.css
index d21c2bb845..67810f426e 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -585,6 +585,273 @@ hr {
   right: -55%;
 }
 
+.pledgeContainer {
+  margin: 0.6rem 0;
+}
+
+.container {
+  min-height: 100vh;
+}
+
+.pledgeModal {
+  max-width: 80vw;
+  margin-top: 2vh;
+  margin-left: 13vw;
+}
+
+.titlemodal {
+  color: #707070;
+  font-weight: 600;
+  font-size: 32px;
+  width: 65%;
+  margin-bottom: 0px;
+}
+
+.modalCloseBtn {
+  width: 40px;
+  height: 40px;
+  padding: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.greenregbtn {
+  margin: 1rem 0 0;
+  margin-top: 15px;
+  border: 1px solid #e8e5e5;
+  box-shadow: 0 2px 2px #e8e5e5;
+  padding: 10px 10px;
+  border-radius: 5px;
+  background-color: #31bb6b;
+  width: 100%;
+  font-size: 16px;
+  color: white;
+  outline: none;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+  width: 100%;
+}
+
+.errorIconPledge {
+  transform: scale(1.5);
+  color: var(--bs-danger);
+  margin-bottom: 1rem;
+}
+
+.btnsContainerPledge {
+  display: flex;
+  gap: 0.8rem;
+  margin: 2.2rem 0 0.8rem 0;
+}
+
+.btnsContainerPledge .inputPledge {
+  flex: 1;
+  min-width: 18rem;
+  position: relative;
+}
+
+.btnsContainerPledge input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainerPledge .inputPledge button {
+  width: 52px;
+}
+
+.inputFieldPledge {
+  background-color: white;
+  box-shadow: 0 1px 1px #31bb6b;
+}
+
+.dropdownPledge {
+  background-color: white;
+  border: 1px solid #31bb6b;
+  position: relative;
+  display: inline-block;
+  color: #31bb6b;
+}
+
+.tableHeaderPledge {
+  background-color: var(--bs-primary);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+
+.rowBackgroundPledge {
+  background-color: var(--bs-white);
+  max-height: 120px;
+}
+
+.TableImagePledge {
+  object-fit: cover;
+  width: 25px !important;
+  height: 25px !important;
+  border-radius: 100% !important;
+}
+
+.avatarContainer {
+  width: 28px;
+  height: 26px;
+}
+
+.imageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pledgerContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.1rem 0.25rem;
+  gap: 0.25rem;
+  padding: 0.25rem 0.45rem;
+  border-radius: 0.35rem;
+  background-color: #31bb6b33;
+  height: 2.2rem;
+  margin-top: 0.75rem;
+}
+
+.noOutlinePledge input {
+  outline: none;
+}
+
+.overviewContainer {
+  display: flex;
+  gap: 7rem;
+  width: 100%;
+  justify-content: space-between;
+  margin: 1.5rem 0 0 0;
+  padding: 1.25rem 2rem;
+  background-color: rgba(255, 255, 255, 0.591);
+
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  border-radius: 0.5rem;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.titleContainer h3 {
+  font-size: 1.75rem;
+  font-weight: 750;
+  color: #5e5e5e;
+  margin-top: 0.2rem;
+}
+
+.titleContainer span {
+  font-size: 0.9rem;
+  margin-left: 0.5rem;
+  font-weight: lighter;
+  color: #707070;
+}
+
+.raisedAmount {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.25rem;
+  font-weight: 750;
+  color: #5e5e5e;
+}
+
+.progressContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-grow: 1;
+}
+
+.progress {
+  margin-top: 0.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.endpoints {
+  display: flex;
+  position: relative;
+  font-size: 0.85rem;
+}
+
+.start {
+  position: absolute;
+  top: 0px;
+}
+
+.end {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+}
+
+.moreContainer {
+  display: flex;
+  align-items: center;
+}
+
+.moreContainer:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.popup {
+  z-index: 50;
+  border-radius: 0.5rem;
+  font-family: sans-serif;
+  font-weight: 500;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #e2e8f0;
+  background-color: white;
+  color: #1e293b;
+  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.popupExtra {
+  max-height: 15rem;
+  overflow-y: auto;
+}
+
+.toggleGroupPledge {
+  width: 50%;
+  min-width: 27.75rem;
+  margin: 0.5rem 0rem;
+}
+
+.toggleBtnPledge {
+  padding: 0rem;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.toggleBtnPledge:hover {
+  color: #31bb6b !important;
+}
+
+input[type='radioPledge']:checked + label {
+  background-color: #31bb6a50 !important;
+}
+
+input[type='radioPledge']:checked + label:hover {
+  color: black !important;
+}
+
 @media (max-width: 1024px) {
   .pageNotFound h1.head {
     font-size: 200px;

From 5e84b98693d38141e9f96fd5d0eb8ade1954f400 Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Sun, 22 Dec 2024 04:47:51 +0000
Subject: [PATCH 2/9] deleted fundcompaignpledge local css file

---
 .../FundCampaignPledge.module.css             | 273 ------------------
 1 file changed, 273 deletions(-)
 delete mode 100644 src/screens/FundCampaignPledge/FundCampaignPledge.module.css

diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css b/src/screens/FundCampaignPledge/FundCampaignPledge.module.css
deleted file mode 100644
index cdf4476267..0000000000
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.module.css
+++ /dev/null
@@ -1,273 +0,0 @@
-.pledgeContainer {
-  margin: 0.6rem 0;
-}
-
-.container {
-  min-height: 100vh;
-}
-
-.pledgeModal {
-  max-width: 80vw;
-  margin-top: 2vh;
-  margin-left: 13vw;
-}
-
-.titlemodal {
-  color: #707070;
-  font-weight: 600;
-  font-size: 32px;
-  width: 65%;
-  margin-bottom: 0px;
-}
-
-.modalCloseBtn {
-  width: 40px;
-  height: 40px;
-  padding: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 15px;
-  border: 1px solid #e8e5e5;
-  box-shadow: 0 2px 2px #e8e5e5;
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: #31bb6b;
-  width: 100%;
-  font-size: 16px;
-  color: white;
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-  width: 100%;
-}
-.message {
-  margin-top: 25%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.errorIcon {
-  transform: scale(1.5);
-  color: var(--bs-danger);
-  margin-bottom: 1rem;
-}
-
-.btnsContainer {
-  display: flex;
-  gap: 0.8rem;
-  margin: 2.2rem 0 0.8rem 0;
-}
-
-.btnsContainer .input {
-  flex: 1;
-  min-width: 18rem;
-  position: relative;
-}
-
-.btnsContainer input {
-  outline: 1px solid var(--bs-gray-400);
-}
-
-.btnsContainer .input button {
-  width: 52px;
-}
-
-.inputField {
-  background-color: white;
-  box-shadow: 0 1px 1px #31bb6b;
-}
-
-.dropdown {
-  background-color: white;
-  border: 1px solid #31bb6b;
-  position: relative;
-  display: inline-block;
-  color: #31bb6b;
-}
-
-.tableHeader {
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 1rem;
-}
-
-.rowBackground {
-  background-color: var(--bs-white);
-  max-height: 120px;
-}
-
-.TableImage {
-  object-fit: cover;
-  width: 25px !important;
-  height: 25px !important;
-  border-radius: 100% !important;
-}
-
-.avatarContainer {
-  width: 28px;
-  height: 26px;
-}
-
-.imageContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pledgerContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0.1rem 0.25rem;
-  gap: 0.25rem;
-  padding: 0.25rem 0.45rem;
-  border-radius: 0.35rem;
-  background-color: #31bb6b33;
-  height: 2.2rem;
-  margin-top: 0.75rem;
-}
-
-.noOutline input {
-  outline: none;
-}
-
-.overviewContainer {
-  display: flex;
-  gap: 7rem;
-  width: 100%;
-  justify-content: space-between;
-  margin: 1.5rem 0 0 0;
-  padding: 1.25rem 2rem;
-  background-color: rgba(255, 255, 255, 0.591);
-
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-  border-radius: 0.5rem;
-}
-
-.titleContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-}
-
-.titleContainer h3 {
-  font-size: 1.75rem;
-  font-weight: 750;
-  color: #5e5e5e;
-  margin-top: 0.2rem;
-}
-
-.titleContainer span {
-  font-size: 0.9rem;
-  margin-left: 0.5rem;
-  font-weight: lighter;
-  color: #707070;
-}
-
-.raisedAmount {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1.25rem;
-  font-weight: 750;
-  color: #5e5e5e;
-}
-
-.progressContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-grow: 1;
-}
-
-.progress {
-  margin-top: 0.2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.endpoints {
-  display: flex;
-  position: relative;
-  font-size: 0.85rem;
-}
-
-.start {
-  position: absolute;
-  top: 0px;
-}
-
-.end {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-}
-
-.moreContainer {
-  display: flex;
-  align-items: center;
-}
-
-.moreContainer:hover {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.popup {
-  z-index: 50;
-  border-radius: 0.5rem;
-  font-family: sans-serif;
-  font-weight: 500;
-  font-size: 0.875rem;
-  margin-top: 0.5rem;
-  padding: 0.75rem;
-  border: 1px solid #e2e8f0;
-  background-color: white;
-  color: #1e293b;
-  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.popupExtra {
-  max-height: 15rem;
-  overflow-y: auto;
-}
-
-.toggleGroup {
-  width: 50%;
-  min-width: 27.75rem;
-  margin: 0.5rem 0rem;
-}
-
-.toggleBtn {
-  padding: 0rem;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.toggleBtn:hover {
-  color: #31bb6b !important;
-}
-
-input[type='radio']:checked + label {
-  background-color: #31bb6a50 !important;
-}
-
-input[type='radio']:checked + label:hover {
-  color: black !important;
-}

From 8be933cf2fa73a9007102542dd1a9f3d35d314fb Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Sun, 22 Dec 2024 05:00:44 +0000
Subject: [PATCH 3/9] Fix linting issues

---
 src/screens/FundCampaignPledge/FundCampaignPledge.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
index fce056da86..52b2db9a38 100644
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
@@ -200,7 +200,10 @@ const fundCampaignPledge = (): JSX.Element => {
     return (
       <div className={`${styles.container} bg-white rounded-4 my-3`}>
         <div className={styles.message} data-testid="errorMsg">
-          <WarningAmberRounded className={styles.errorIconPledge} fontSize="large" />
+          <WarningAmberRounded
+            className={styles.errorIconPledge}
+            fontSize="large"
+          />
           <h6 className="fw-bold text-danger text-center">
             {tErrors('errorLoading', { entity: 'Pledges' })}
             <br />

From 3a9a91cde20b314680845fe2d79ce229d6252c12 Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Sun, 22 Dec 2024 05:05:42 +0000
Subject: [PATCH 4/9] fixed type check

---
 src/screens/FundCampaignPledge/FundCampaignPledge.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
index 52b2db9a38..bf4661a690 100644
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
@@ -207,7 +207,7 @@ const fundCampaignPledge = (): JSX.Element => {
           <h6 className="fw-bold text-danger text-center">
             {tErrors('errorLoading', { entity: 'Pledges' })}
             <br />
-            {pledgeError.messagePledge}
+            {pledgeError.message}
           </h6>
         </div>
       </div>

From 2dd3e74d0ec27bb81b51fa45633e3ac2b272c864 Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Mon, 23 Dec 2024 18:10:41 +0530
Subject: [PATCH 5/9] Update src/style/app.module.css

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/style/app.module.css | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index d9f898e79a..6fb83ade2a 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -622,14 +622,6 @@ hr {
   margin-left: 13vw;
 }
 
-.titlemodal {
-  color: #707070;
-  font-weight: 600;
-  font-size: 32px;
-  width: 65%;
-  margin-bottom: 0px;
-}
-
 .modalCloseBtn {
   width: 40px;
   height: 40px;
@@ -638,7 +630,6 @@ hr {
   justify-content: center;
   align-items: center;
 }
-
 .greenregbtn {
   margin: 1rem 0 0;
   margin-top: 15px;

From b0f9b43d8e82680997c7ee34ba89ca39e8ca541e Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Mon, 23 Dec 2024 12:41:30 +0000
Subject: [PATCH 6/9] fixed some coderabbit issue

---
 src/style/app.module.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 6fb83ade2a..aadc4f28f0 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -633,14 +633,14 @@ hr {
 .greenregbtn {
   margin: 1rem 0 0;
   margin-top: 15px;
-  border: 1px solid #e8e5e5;
+  border: 1px solid var(--bs-gray-300);
   box-shadow: 0 2px 2px #e8e5e5;
   padding: 10px 10px;
   border-radius: 5px;
-  background-color: #31bb6b;
+  background-color: var(--bs-primary);
   width: 100%;
   font-size: 16px;
-  color: white;
+  color: var(--bs-white);
   outline: none;
   font-weight: 600;
   cursor: pointer;

From ef7d9e231312abc19634a2fff0c131cb56ccef95 Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:29:28 +0000
Subject: [PATCH 7/9] Fixed testing issue

---
 .../FundCampaignPledge/FundCampaignPledge.tsx | 29 ++++++-------
 .../FundCampaignPledge/PledgeModal.tsx        |  2 +-
 src/style/app.module.css                      | 43 +++----------------
 3 files changed, 19 insertions(+), 55 deletions(-)

diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
index bf4661a690..8942265eea 100644
--- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
+++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx
@@ -200,10 +200,7 @@ const fundCampaignPledge = (): JSX.Element => {
     return (
       <div className={`${styles.container} bg-white rounded-4 my-3`}>
         <div className={styles.message} data-testid="errorMsg">
-          <WarningAmberRounded
-            className={styles.errorIconPledge}
-            fontSize="large"
-          />
+          <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
           <h6 className="fw-bold text-danger text-center">
             {tErrors('errorLoading', { entity: 'Pledges' })}
             <br />
@@ -222,7 +219,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 50,
       align: 'left',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaderPledge}`,
+      headerClassName: `${styles.tableHeader}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return (
@@ -242,7 +239,7 @@ const fundCampaignPledge = (): JSX.Element => {
                     <div className={styles.avatarContainer}>
                       <Avatar
                         key={user._id + '1'}
-                        containerStyle={styles.imageContainer}
+                        containerStyle={styles.imageContainerPledge}
                         avatarStyle={styles.TableImagePledge}
                         name={user.firstName + ' ' + user.lastName}
                         alt={user.firstName + ' ' + user.lastName}
@@ -275,7 +272,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 150,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaderPledge}`,
+      headerClassName: `${styles.tableHeader}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return dayjs(params.row.startDate).format('DD/MM/YYYY');
@@ -287,7 +284,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 150,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaderPledge}`,
+      headerClassName: `${styles.tableHeader}`,
       flex: 1,
       sortable: false,
       renderCell: (params: GridCellParams) => {
@@ -301,7 +298,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaderPledge}`,
+      headerClassName: `${styles.tableHeader}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return (
@@ -326,7 +323,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaderPledge}`,
+      headerClassName: `${styles.tableHeader}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return (
@@ -351,7 +348,7 @@ const fundCampaignPledge = (): JSX.Element => {
       minWidth: 100,
       align: 'center',
       headerAlign: 'center',
-      headerClassName: `${styles.tableHeaderPledge}`,
+      headerClassName: `${styles.tableHeader}`,
       sortable: false,
       renderCell: (params: GridCellParams) => {
         return (
@@ -422,12 +419,12 @@ const fundCampaignPledge = (): JSX.Element => {
         <div className={styles.progressContainer}>
           <div className="d-flex justify-content-center">
             <div
-              className={`btn-group ${styles.toggleGroupPledge}`}
+              className={`btn-group ${styles.toggleGroup}`}
               role="group"
               aria-label="Toggle between Pledged and Raised amounts"
             >
               <input
-                type="radioPledge"
+                type="radio"
                 className={`btn-check ${styles.toggleBtnPledge}`}
                 name="btnradio"
                 id="pledgedRadio"
@@ -442,7 +439,7 @@ const fundCampaignPledge = (): JSX.Element => {
               </label>
 
               <input
-                type="radioPledge"
+                type="radio"
                 className={`btn-check`}
                 name="btnradio"
                 id="raisedRadio"
@@ -499,7 +496,7 @@ const fundCampaignPledge = (): JSX.Element => {
               <Dropdown.Toggle
                 variant="success"
                 id="dropdown-basic"
-                className={styles.dropdownPledge}
+                className={styles.dropdown}
                 data-testid="filter"
               >
                 <Sort className={'me-1'} />
@@ -616,7 +613,7 @@ const fundCampaignPledge = (): JSX.Element => {
               <div className={styles.avatarContainer}>
                 <Avatar
                   key={user._id + '1'}
-                  containerStyle={styles.imageContainer}
+                  containerStyle={styles.imageContainerPledge}
                   avatarStyle={styles.TableImagePledge}
                   name={user.firstName + ' ' + user.lastName}
                   alt={user.firstName + ' ' + user.lastName}
diff --git a/src/screens/FundCampaignPledge/PledgeModal.tsx b/src/screens/FundCampaignPledge/PledgeModal.tsx
index f51e0ffe51..04b8aae7da 100644
--- a/src/screens/FundCampaignPledge/PledgeModal.tsx
+++ b/src/screens/FundCampaignPledge/PledgeModal.tsx
@@ -343,7 +343,7 @@ const PledgeModal: React.FC<InterfacePledgeModal> = ({
           {/* Button to submit the pledge form */}
           <Button
             type="submit"
-            className={styles.greenregbtn}
+            className={styles.greenregbtnPledge}
             data-testid="submitPledgeBtn"
           >
             {t(mode === 'edit' ? 'updatePledge' : 'createPledge')}
diff --git a/src/style/app.module.css b/src/style/app.module.css
index aadc4f28f0..2dccbf19b9 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -622,25 +622,17 @@ hr {
   margin-left: 13vw;
 }
 
-.modalCloseBtn {
-  width: 40px;
-  height: 40px;
-  padding: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.greenregbtn {
+.greenregbtnPledge {
   margin: 1rem 0 0;
   margin-top: 15px;
-  border: 1px solid var(--bs-gray-300);
+  border: 1px solid #e8e5e5;
   box-shadow: 0 2px 2px #e8e5e5;
   padding: 10px 10px;
   border-radius: 5px;
-  background-color: var(--bs-primary);
+  background-color: #31bb6b;
   width: 100%;
   font-size: 16px;
-  color: var(--bs-white);
+  color: white;
   outline: none;
   font-weight: 600;
   cursor: pointer;
@@ -650,12 +642,6 @@ hr {
   width: 100%;
 }
 
-.errorIconPledge {
-  transform: scale(1.5);
-  color: var(--bs-danger);
-  margin-bottom: 1rem;
-}
-
 .btnsContainerPledge {
   display: flex;
   gap: 0.8rem;
@@ -689,12 +675,6 @@ hr {
   color: #31bb6b;
 }
 
-.tableHeaderPledge {
-  background-color: var(--bs-primary);
-  color: var(--bs-white);
-  font-size: 1rem;
-}
-
 .rowBackgroundPledge {
   background-color: var(--bs-white);
   max-height: 120px;
@@ -707,12 +687,7 @@ hr {
   border-radius: 100% !important;
 }
 
-.avatarContainer {
-  width: 28px;
-  height: 26px;
-}
-
-.imageContainer {
+.imageContainerPledge {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -858,14 +833,6 @@ hr {
   color: #31bb6b !important;
 }
 
-input[type='radioPledge']:checked + label {
-  background-color: #31bb6a50 !important;
-}
-
-input[type='radioPledge']:checked + label:hover {
-  color: black !important;
-}
-
 @media (max-width: 1024px) {
   .pageNotFound h1.head {
     font-size: 200px;

From 95f23d4ffda9e6cd7f223b8d209e142387e2261d Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Mon, 23 Dec 2024 20:05:07 +0530
Subject: [PATCH 8/9] Update src/style/app.module.css

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 src/style/app.module.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index 2dccbf19b9..e37a0fdfd7 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -623,23 +623,21 @@ hr {
 }
 
 .greenregbtnPledge {
-  margin: 1rem 0 0;
   margin-top: 15px;
-  border: 1px solid #e8e5e5;
+  border: 1px solid var(--bs-gray-300);
   box-shadow: 0 2px 2px #e8e5e5;
   padding: 10px 10px;
   border-radius: 5px;
-  background-color: #31bb6b;
+  background-color: var(--bs-primary);
   width: 100%;
   font-size: 16px;
-  color: white;
+  color: var(--bs-white);
   outline: none;
   font-weight: 600;
   cursor: pointer;
   transition:
     transform 0.2s,
     box-shadow 0.2s;
-  width: 100%;
 }
 
 .btnsContainerPledge {
@@ -701,7 +699,7 @@ hr {
   gap: 0.25rem;
   padding: 0.25rem 0.45rem;
   border-radius: 0.35rem;
-  background-color: #31bb6b33;
+  background-color: var(--bs-primary-rgb, 49, 187, 107, 0.2);
   height: 2.2rem;
   margin-top: 0.75rem;
 }

From 72422301ed70b0b0bd7b884dfcbdecf40e71c983 Mon Sep 17 00:00:00 2001
From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com>
Date: Mon, 23 Dec 2024 14:42:37 +0000
Subject: [PATCH 9/9] Fix coderabbit suggestion

---
 src/style/app.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/style/app.module.css b/src/style/app.module.css
index e37a0fdfd7..6d6413aa86 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -667,10 +667,10 @@ hr {
 
 .dropdownPledge {
   background-color: white;
-  border: 1px solid #31bb6b;
+  border: 1px solid var(--bs-primary);
   position: relative;
   display: inline-block;
-  color: #31bb6b;
+  color: var(--bs-primary);
 }
 
 .rowBackgroundPledge {
@@ -680,8 +680,8 @@ hr {
 
 .TableImagePledge {
   object-fit: cover;
-  width: 25px !important;
-  height: 25px !important;
+  width: calc(var(--table-image-size) / 2) !important;
+  height: calc(var(--table-image-size) / 2) !important;
   border-radius: 100% !important;
 }