From b7eb4676023bef99e3f2a86b89de3749757490ff Mon Sep 17 00:00:00 2001 From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com> Date: Thu, 26 Dec 2024 14:34:06 +0000 Subject: [PATCH 1/6] Update organization-fund-campaign css --- .../CampaignModal.tsx | 2 +- .../OrganizationFundCampagins.tsx | 16 +- .../OrganizationFundCampaign.module.css | 202 ------------------ src/style/app.module.css | 168 +++++++++++++++ 4 files changed, 178 insertions(+), 210 deletions(-) delete mode 100644 src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx index 63d1e8de3a..32d0851f24 100644 --- a/src/screens/OrganizationFundCampaign/CampaignModal.tsx +++ b/src/screens/OrganizationFundCampaign/CampaignModal.tsx @@ -301,7 +301,7 @@ const CampaignModal: React.FC = ({ {/* Button to create the campaign */} -
+
@@ -426,7 +426,9 @@ const orgFundCampaign = (): JSX.Element => { ), }} sx={dataGridStyle} - getRowClassName={() => `${styles.rowBackground}`} + getRowClassName={() => + `${styles.rowBackgroundOrganizationFundCampaign}` + } autoHeight rowHeight={65} rows={campaigns.map((campaign, index) => ({ diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css b/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css deleted file mode 100644 index 55202baef9..0000000000 --- a/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css +++ /dev/null @@ -1,202 +0,0 @@ -.organizationFundCampaignContainer { - margin: 0.5rem 0; -} -.goalButton { - border: 1px solid rgba(49, 187, 107, 1) !important; - color: rgba(49, 187, 107, 1) !important; - width: 75%; - padding: 10px; - border-radius: 8px; - display: block; - margin: auto; - box-shadow: 5px 5px 4px 0px rgba(49, 187, 107, 0.12); -} -.rowBackground { - background-color: var(--bs-white); - max-height: 120px; -} -.container { - min-height: 100vh; -} -.campaignModal { - max-width: 80vw; - margin-top: 2vh; - margin-left: 13vw; -} -.titlemodal { - color: #707070; - font-weight: 600; - font-size: 32px; - width: 65%; - margin-bottom: 0px; -} -.noOutline input { - outline: none; -} -.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%; - flex: 1; -} - -.redregbtn { - margin: 1rem 0 0; - margin-top: 15px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - padding: 10px 10px; - border-radius: 5px; - width: 100%; - font-size: 16px; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; - width: 100%; - flex: 1; -} -.campaignNameInfo { - font-size: medium; - cursor: pointer; -} -.campaignNameInfo:hover { - color: blue; - transform: translateY(-2px); -} -.message { - margin-top: 25%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.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; -} - -.btnsContainer { - display: flex; - margin: 2rem 0 2rem 0; - gap: 0.8rem; -} - -.btnsContainer .btnsBlock { - display: flex; - gap: 0.8rem; -} - -.btnsContainer .btnsBlock div button { - display: flex; - margin-left: 1rem; - justify-content: center; - align-items: center; -} - -.btnsContainer .input { - flex: 1; - position: relative; -} - -.btnsContainer input { - outline: 1px solid var(--bs-gray-400); -} - -.btnsContainer .input button { - width: 52px; -} - -.mainpageright > hr { - margin-top: 20px; - width: 100%; - margin-left: -15px; - margin-right: -15px; - margin-bottom: 20px; -} - -.tableHeader { - background-color: var(--bs-primary); - color: var(--bs-white); - font-size: 1rem; -} - -@media (max-width: 1020px) { - .btnsContainer { - flex-direction: column; - margin: 1.5rem 0; - } - - .btnsContainer .btnsBlock { - margin: 1.5rem 0 0 0; - justify-content: space-between; - } - - .btnsContainer .btnsBlock div button { - margin: 0; - } - - .createFundBtn { - margin-top: 0; - } -} - -@media screen and (max-width: 575.5px) { - .mainpageright { - width: 98%; - } -} - -/* For mobile devices */ - -@media (max-width: 520px) { - .btnsContainer { - margin-bottom: 0; - } - - .btnsContainer .btnsBlock { - display: block; - margin-top: 1rem; - margin-right: 0; - } - - .btnsContainer .btnsBlock div button { - margin-bottom: 1rem; - margin-right: 0; - width: 100%; - } -} diff --git a/src/style/app.module.css b/src/style/app.module.css index 3bc46315f9..c5e0cc2b11 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -992,6 +992,174 @@ hr { background: #afffe8 !important; } +.organizationFundCampaignContainer { + margin: 0.5rem 0; +} + +.rowBackgroundOrganizationFundCampaign { + background-color: var(--bs-white); + max-height: 120px; +} + +.campaignModal { + max-width: 80vw; + margin-top: 2vh; + margin-left: 13vw; +} + +.greenregbtnOrganizationFundCampaign { + margin: 1rem 0 0; + margin-top: 15px; + border: 1px solid var(--bs-gray-300); + 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%; + flex: 1; +} + +.goalButtonOrganizationFundCampaign { + border: 1px solid #31bb6b !important; + color: #31bb6b !important; + width: 75%; + padding: 10px; + border-radius: 8px; + display: block; + margin: auto; + box-shadow: 5px 5px 4px 0px rgba(49, 187, 107, 0.12); +} + +.redregbtn { + margin: 1rem 0 0; + margin-top: 15px; + border: 1px solid #e8e5e5; + box-shadow: 0 2px 2px #e8e5e5; + padding: 10px 10px; + border-radius: 5px; + width: 100%; + font-size: 16px; + color: white; + outline: none; + font-weight: 600; + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; + width: 100%; + flex: 1; +} + +.campaignNameInfo { + font-size: medium; + cursor: pointer; +} +.campaignNameInfo:hover { + color: blue; + transform: translateY(-2px); +} + +.inputFieldOrganizationFundCampaign { + background-color: white; + box-shadow: 0 1px 1px #31bb6b; +} + +.dropdownOrganizationFundCampaign { + background-color: white; + border: 1px solid #31bb6b; + position: relative; + display: inline-block; + color: #31bb6b; +} + +.btnsContainerOrganizationFundCampaign { + display: flex; + margin: 2rem 0 2rem 0; + gap: 0.8rem; +} + +.btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign { + display: flex; + gap: 0.8rem; +} + +.btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign div button { + display: flex; + margin-left: 1rem; + justify-content: center; + align-items: center; +} + +.btnsContainerOrganizationFundCampaign .inputOrganizationFundCampaign { + flex: 1; + position: relative; +} + +.btnsContainerOrganizationFundCampaign input { + outline: 1px solid var(--bs-gray-400); +} + +.btnsContainerOrganizationFundCampaign .inputOrganizationFundCampaign button { + width: 52px; +} + + + +@media (max-width: 1020px) { + .btnsContainerOrganizationFundCampaign { + flex-direction: column; + margin: 1.5rem 0; + } + + .btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign { + margin: 1.5rem 0 0 0; + justify-content: space-between; + } + + .btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign div button { + margin: 0; + } + + .createFundBtn { + margin-top: 0; + } +} + +@media screen and (max-width: 575.5px) { + .mainpageright { + width: 98%; + } +} + +/* For mobile devices */ + +@media (max-width: 520px) { + .btnsContainerOrganizationFundCampaign { + margin-bottom: 0; + } + + .btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign { + display: block; + margin-top: 1rem; + margin-right: 0; + } + + .btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign div button { + margin-bottom: 1rem; + margin-right: 0; + width: 100%; + } +} + @media (max-width: 1024px) { .pageNotFound h1.head { font-size: 200px; From 4aaea6d8d46327a5728ea2bb84d46fa704e5264c Mon Sep 17 00:00:00 2001 From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com> Date: Thu, 26 Dec 2024 15:23:44 +0000 Subject: [PATCH 2/6] Fix linting --- src/style/app.module.css | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/style/app.module.css b/src/style/app.module.css index c5e0cc2b11..6abfdb2542 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -18,8 +18,8 @@ --table-head-bg: var(--bs-primary, blue); --table-head-bg: var( --bs-primary, - blue --loader-size: 10em; --loader-border-width: 1.1em; --loader-color: - #febc59; + blue --loader-size: 10em; --loader-border-width: 1.1em; + --loader-color: #febc59; ); /* Assuming var(--bs-primary) is defined elsewhere */ --table-head-color: white; @@ -1092,7 +1092,10 @@ hr { gap: 0.8rem; } -.btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign div button { +.btnsContainerOrganizationFundCampaign + .btnsBlockOrganizationFundCampaign + div + button { display: flex; margin-left: 1rem; justify-content: center; @@ -1112,8 +1115,6 @@ hr { width: 52px; } - - @media (max-width: 1020px) { .btnsContainerOrganizationFundCampaign { flex-direction: column; @@ -1125,7 +1126,10 @@ hr { justify-content: space-between; } - .btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign div button { + .btnsContainerOrganizationFundCampaign + .btnsBlockOrganizationFundCampaign + div + button { margin: 0; } @@ -1153,7 +1157,10 @@ hr { margin-right: 0; } - .btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign div button { + .btnsContainerOrganizationFundCampaign + .btnsBlockOrganizationFundCampaign + div + button { margin-bottom: 1rem; margin-right: 0; width: 100%; From a711bb5dadb6c94294c52053630a7d9a3b1c6662 Mon Sep 17 00:00:00 2001 From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com> Date: Thu, 26 Dec 2024 15:36:50 +0000 Subject: [PATCH 3/6] Fix some issues --- src/style/app.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style/app.module.css b/src/style/app.module.css index 6abfdb2542..13ec3aea7e 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -18,8 +18,8 @@ --table-head-bg: var(--bs-primary, blue); --table-head-bg: var( --bs-primary, - blue --loader-size: 10em; --loader-border-width: 1.1em; - --loader-color: #febc59; + blue --loader-size: 10em; --loader-border-width: 1.1em; --loader-color: + #febc59; ); /* Assuming var(--bs-primary) is defined elsewhere */ --table-head-color: white; From 405d1ecd5a2e4953fd5fe6dd74031f894bd75f77 Mon Sep 17 00:00:00 2001 From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com> Date: Thu, 26 Dec 2024 16:04:41 +0000 Subject: [PATCH 4/6] Fix import issue --- src/screens/OrganizationFundCampaign/CampaignModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx index 32d0851f24..6706b80ee5 100644 --- a/src/screens/OrganizationFundCampaign/CampaignModal.tsx +++ b/src/screens/OrganizationFundCampaign/CampaignModal.tsx @@ -5,7 +5,7 @@ import type { ChangeEvent } from 'react'; import React, { useEffect, useState } from 'react'; import { Button, Form, Modal } from 'react-bootstrap'; import { currencyOptions, currencySymbols } from 'utils/currency'; -import styles from './OrganizationFundCampaign.module.css'; +import styles from '../../style/app.module.css'; import { useTranslation } from 'react-i18next'; import { useMutation } from '@apollo/client'; import { From 4c84746ce0e2d4c63eac95dfb10bdfdd1c5d95f3 Mon Sep 17 00:00:00 2001 From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com> Date: Thu, 26 Dec 2024 16:20:31 +0000 Subject: [PATCH 5/6] Fix color change --- src/style/app.module.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/style/app.module.css b/src/style/app.module.css index 13ec3aea7e..73ac1027cc 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -1014,7 +1014,7 @@ hr { box-shadow: 0 2px 2px #e8e5e5; padding: 10px 10px; border-radius: 5px; - background-color: #31bb6b; + background-color: #eaebef; width: 100%; font-size: 16px; color: white; @@ -1029,8 +1029,8 @@ hr { } .goalButtonOrganizationFundCampaign { - border: 1px solid #31bb6b !important; - color: #31bb6b !important; + border: 1px solid #e8e5e5 !important; + color: #707070 !important; width: 75%; padding: 10px; border-radius: 8px; @@ -1070,15 +1070,15 @@ hr { .inputFieldOrganizationFundCampaign { background-color: white; - box-shadow: 0 1px 1px #31bb6b; + box-shadow: 0 1px 1px var(--search-button-bg); } .dropdownOrganizationFundCampaign { background-color: white; - border: 1px solid #31bb6b; + border: 1px solid #e8e5e5; position: relative; display: inline-block; - color: #31bb6b; + color: #707070; } .btnsContainerOrganizationFundCampaign { From 73642ac1a2f5205ed9ffec094d854e5a0454fe1e Mon Sep 17 00:00:00 2001 From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com> Date: Thu, 26 Dec 2024 22:03:41 +0530 Subject: [PATCH 6/6] Update src/style/app.module.css Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/style/app.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/style/app.module.css b/src/style/app.module.css index 73ac1027cc..102245fc74 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -1014,7 +1014,7 @@ hr { box-shadow: 0 2px 2px #e8e5e5; padding: 10px 10px; border-radius: 5px; - background-color: #eaebef; + background-color: var(--bs-primary); width: 100%; font-size: 16px; color: white; @@ -1024,7 +1024,6 @@ hr { transition: transform 0.2s, box-shadow 0.2s; - width: 100%; flex: 1; }