Fixed testing issue

PalisadoesFoundation · Dec 23, 2024 · ef7d9e2 · ef7d9e2
1 parent b0f9b43
commit ef7d9e2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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;