Update Donate button state on campaign card (#1526)

* Update Donate button state on campaign card * Update disabled button text color and background color --------- Co-authored-by: ani-kalpachka <[email protected]>
podkrepi-bg · Jul 31, 2023 · 6fa85a4 · 6fa85a4
1 parent 5101fc6
commit 6fa85a4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/client/campaigns/CampaignCard/CampaignCard.tsx b/src/components/client/campaigns/CampaignCard/CampaignCard.tsx
@@ -96,11 +96,7 @@ export default function ActiveCampaignCard({ campaign, index }: Props) {
       <StyledCardActions disableSpacing>
         <DonateButton
           href={routes.campaigns.oneTimeDonation(slug)}
-          disabled={
-            campaignState === CampaignState.complete &&
-            percentage >= 100 &&
-            !allowDonationOnComplete
-          }
+          disabled={campaignState === CampaignState.complete && !allowDonationOnComplete}
           variant="contained"
           color="secondary">
           {t('cta.support')}

diff --git a/...nt/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx b/...nt/index/sections/ActiveCampaignsSection/ActiveCampaignCard/ActiveCampaignCard.styled.tsx
@@ -109,6 +109,11 @@ export const DonateButton = styled(LinkButton)(() => ({
       '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12)',
   },
 
+  '&.Mui-disabled': {
+    backgroundColor: 'rgba(152, 152, 152, 0.8)',
+    color: 'rgba(0, 0, 0, 0.4)',
+  },
+
   [theme.breakpoints.up(1111)]: {
     display: 'inline-flex',
     marginBottom: 0,