From bc1c5345317f1aa99a81223af54e5cb07bc1c337 Mon Sep 17 00:00:00 2001 From: Rahul Chougule Date: Sat, 28 Dec 2024 10:05:49 +0530 Subject: [PATCH 01/15] changed green to blue --- src/style/app.module.css | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/style/app.module.css b/src/style/app.module.css index 6be00d217a..10b9725c50 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -30,6 +30,7 @@ --tablerow-bg-color: #eff1f7; --row-background: var(--bs-white, white); --font-size-header: 16px; + --bg-blue: #afffe8; } .fonts { color: #707070; @@ -117,7 +118,7 @@ font-size: 20px; margin-bottom: 30px; padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; + border-bottom: 3px solid var(--bg-blue); width: 15%; } @@ -127,7 +128,7 @@ font-size: 18px; margin-bottom: 20px; padding-bottom: 5px; - border-bottom: 3px solid #31bb6b; + border-bottom: 3px solid var(--bg-blue); width: 60%; } @@ -610,7 +611,7 @@ hr { .pageNotFound h1.head { font-size: 250px; font-weight: 900; - color: #31bb6b; + color: var(--bg-blue); letter-spacing: 25px; margin: 10px 0 0 0; } @@ -690,7 +691,7 @@ hr { .inputFieldPledge { background-color: var(--bs-white); - box-shadow: 0 1px 1px #31bb6b; + box-shadow: 0 1px 1px var(--bg-blue); } .dropdownPledge { @@ -856,7 +857,7 @@ hr { } .toggleBtnPledge:hover { - color: #31bb6b !important; + color: var(--bg-blue) !important; } .card { @@ -1007,7 +1008,7 @@ hr { } .customcell { - background-color: #31bb6b !important; + background-color: var(--bg-blue) !important; color: var(--bs-white) !important; font-size: medium !important; font-weight: 500 !important; @@ -1033,7 +1034,7 @@ hr { } .table-body > .table-row:nth-child(2n) { - background: #afffe8 !important; + background: var(--bg-blue) !important; } .organizationFundCampaignContainer { @@ -1469,7 +1470,7 @@ hr { } .toggleBtn:hover { - color: #31bb6b !important; + color: var(--bg-blue) !important; } input[type='radio']:checked + label { @@ -1580,10 +1581,10 @@ input[type='radio']:checked + label:hover { .dropdowns { background-color: var(--bs-white); - border: 1px solid #31bb6b; + border: 1px solid var(--dropdown-border-color); position: relative; display: inline-block; - color: #31bb6b; + color: black; } .chipIcon { @@ -1682,6 +1683,7 @@ input[type='radio']:checked + label:hover { border: 0.5px solid var(--brown-color); } .searchButtonOrgList { + background-color: var(--bg-blue); position: absolute; z-index: 10; bottom: 0; @@ -3219,7 +3221,7 @@ button[data-testid='createPostBtn'] { display: flex !important; align-items: center; background-color: transparent; - color: #31bb6b; + color: var(--bg-blue); } .entryaction .spinner-grow { From 771a2024fb6f6a6fc119550d1a238e5766accf0b Mon Sep 17 00:00:00 2001 From: rahul Date: Thu, 2 Jan 2025 21:14:39 +0530 Subject: [PATCH 02/15] updated funds section --- src/assets/css/app.css | 2 +- .../OrgListCard/OrgListCard.module.css | 4 + .../FundCampaignPledge/FundCampaignPledge.tsx | 19 ++- .../FundCampaignPledge/PledgeModal.tsx | 2 +- src/screens/OrgList/OrgList.tsx | 5 +- .../CampaignModal.tsx | 2 +- .../OrganizationFundCampagins.tsx | 139 +++++++++--------- src/screens/OrganizationFunds/FundModal.tsx | 6 +- .../OrganizationFunds/OrganizationFunds.tsx | 20 +-- src/style/app.module.css | 72 ++++++++- 10 files changed, 168 insertions(+), 103 deletions(-) diff --git a/src/assets/css/app.css b/src/assets/css/app.css index b3a8613975..e80ea147e1 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -5644,7 +5644,7 @@ fieldset:disabled .btn { --bs-progress-border-radius: var(--bs-border-radius); --bs-progress-box-shadow: var(--bs-box-shadow-inset); --bs-progress-bar-color: #fff; - --bs-progress-bar-bg: #31bb6b; + --bs-progress-bar-bg: #286fe0; --bs-progress-bar-transition: width 0.6s ease; display: flex; height: var(--bs-progress-height); diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css index f242b39f01..292456f310 100644 --- a/src/components/OrgListCard/OrgListCard.module.css +++ b/src/components/OrgListCard/OrgListCard.module.css @@ -60,6 +60,10 @@ border: 1px solid var(--dropdown-border-color); } +.manageBtn:hover { + border: 1px solid var(--dropdown-border-color) !important; +} + .orgName { text-overflow: ellipsis; white-space: nowrap; diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx index 8942265eea..9c5a0860ea 100644 --- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx +++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx @@ -356,7 +356,7 @@ const fundCampaignPledge = (): JSX.Element => { - -
-
- - +
+
+ setSearchTerm(e.target.value)} + data-testid="searchFullName" + /> + +
+
+
+ + + + {tCommon('sort')} + + + setSortBy('fundingGoal_ASC')} + data-testid="fundingGoal_ASC" + > + {t('lowestGoal')} + + setSortBy('fundingGoal_DESC')} + data-testid="fundingGoal_DESC" + > + {t('highestGoal')} + + setSortBy('endDate_DESC')} + data-testid="endDate_DESC" + > + {t('latestEndDate')} + + setSortBy('endDate_ASC')} + data-testid="endDate_ASC" + > + {t('earliestEndDate')} + + + +
+
+
-
- + + {t('addCampaign')} + +
diff --git a/src/screens/OrganizationFunds/FundModal.tsx b/src/screens/OrganizationFunds/FundModal.tsx index b33270b30f..42806f7a30 100644 --- a/src/screens/OrganizationFunds/FundModal.tsx +++ b/src/screens/OrganizationFunds/FundModal.tsx @@ -228,7 +228,7 @@ const FundModal: React.FC = ({ type="checkbox" checked={formState.taxDeductible} data-testid="setTaxDeductibleSwitch" - className="ms-2" + className={`ms-2 ${styles.switch}`} onChange={() => setFormState({ ...formState, @@ -241,7 +241,7 @@ const FundModal: React.FC = ({ @@ -259,7 +259,7 @@ const FundModal: React.FC = ({ type="checkbox" checked={formState.isArchived} data-testid="archivedSwitch" - className="ms-2" + className={`ms-2 ${styles.switch}`} onChange={() => setFormState({ ...formState, diff --git a/src/screens/OrganizationFunds/OrganizationFunds.tsx b/src/screens/OrganizationFunds/OrganizationFunds.tsx index ec9409fbe0..efd936fca6 100644 --- a/src/screens/OrganizationFunds/OrganizationFunds.tsx +++ b/src/screens/OrganizationFunds/OrganizationFunds.tsx @@ -160,7 +160,7 @@ const organizationFunds = (): JSX.Element => { minWidth: 100, align: 'center', headerAlign: 'center', - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, sortable: false, renderCell: (params: GridCellParams) => { return
{params.row.id}
; @@ -174,11 +174,11 @@ const organizationFunds = (): JSX.Element => { minWidth: 100, headerAlign: 'center', sortable: false, - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, renderCell: (params: GridCellParams) => { return (
handleClick(params.row._id as string)} > @@ -195,7 +195,7 @@ const organizationFunds = (): JSX.Element => { minWidth: 100, headerAlign: 'center', sortable: false, - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, renderCell: (params: GridCellParams) => { return params.row.creator.firstName + ' ' + params.row.creator.lastName; }, @@ -207,7 +207,7 @@ const organizationFunds = (): JSX.Element => { minWidth: 100, headerAlign: 'center', sortable: false, - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, flex: 2, renderCell: (params: GridCellParams) => { return ( @@ -225,7 +225,7 @@ const organizationFunds = (): JSX.Element => { minWidth: 100, headerAlign: 'center', sortable: false, - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, renderCell: (params: GridCellParams) => { return params.row.isArchived ? 'Archived' : 'Active'; }, @@ -238,7 +238,7 @@ const organizationFunds = (): JSX.Element => { minWidth: 100, headerAlign: 'center', sortable: false, - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, renderCell: (params: GridCellParams) => { return ( <> @@ -266,7 +266,7 @@ const organizationFunds = (): JSX.Element => { minWidth: 100, headerAlign: 'center', sortable: false, - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, renderCell: (params: GridCellParams) => { return (
- + ); diff --git a/src/style/app.module.css b/src/style/app.module.css index 46ee28974c..e47cab329a 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -273,7 +273,15 @@ margin-bottom: 10px; } -.dropdown:is(:hover, :focus, :active, :focus-visible, .show, :disabled) { +.dropdown:is( + :hover, + :focus, + :active, + :focus-visible, + .show, + :disabled, + :checked + ) { background-color: transparent !important; border: 1px solid var(--brown-color); color: var(--brown-color) !important; @@ -281,6 +289,13 @@ .dropdown:is(:focus, :focus-visible) { outline: 2px solid var(--highlight-color, var(--search-button-bg)); + border: 1px solid var(--brown-color); +} + +.dropdown:not(:focus) { + background-color: var(--bs-white); + border: 1px solid var(--brown-color); + color: var(--brown-color) !important; } /* .dropdown:disabled { @@ -376,6 +391,11 @@ gap: 8px; } +.deleteButton:is(:hover, :active) { + background-color: var(--delete-button-color) !important; + color: white; +} + .actionItemDeleteButton { background-color: var(--delete-button-bg); color: var(--delete-button-color); @@ -411,7 +431,11 @@ margin-top: 10px; margin-bottom: 10px; background-color: var(--bs-white); - box-shadow: 0 1px 1px var(--input-shadow-color); + /* box-shadow: 0 1px 1px var(--input-shadow-color); */ +} + +.inputField:focus { + box-shadow: 0 0 0 0.25rem var(--search-button-bg); } .inputFieldModal { @@ -460,11 +484,34 @@ border-color: var(--search-button-border); } +.removeButton { + margin-bottom: 10px; + background-color: var(--delete-button-bg); + color: var(--delete-button-color); + margin-right: 10px; +} + +.removeButton:is(:hover, :active, :focus) { + background-color: var(--delete-button-color) !important; + border-color: var(--delete-button-color); + color: white; +} + .yesButton { background-color: var(--search-button-bg); border-color: var(--search-button-border); } +.regularBtn { + background-color: var(--search-button-bg); + border-color: var(--search-button-border); +} + +.regularBtn:is(:hover, :active) { + background-color: #286fe0 !important; + border-color: var(--search-button-border) !important; +} + .searchIcon { color: var(--brown-color); } @@ -899,9 +946,9 @@ hr { gap: 0.3rem; } -.progressBar .bg-info { +/* .progressBar .bg-info { background-color: #286fe0 !important; -} +} */ .endpoints { display: flex; From 8090392afc6f2455e22558b631d494a89b6b8e8b Mon Sep 17 00:00:00 2001 From: rahul Date: Tue, 7 Jan 2025 00:33:23 +0530 Subject: [PATCH 04/15] updated Tags section --- .../AddPeopleToTag/AddPeopleToTag.module.css | 54 ------------------- .../AddPeopleToTag/AddPeopleToTag.tsx | 18 ++++--- .../TagActions/TagActions.module.css | 42 --------------- src/components/TagActions/TagActions.tsx | 15 ++++-- src/components/TagActions/TagNode.tsx | 2 +- src/screens/ManageTag/EditUserTagModal.tsx | 13 +++-- src/screens/ManageTag/ManageTag.tsx | 14 ++--- src/screens/ManageTag/RemoveUserTagModal.tsx | 7 +-- .../ManageTag/UnassignUserTagModal.tsx | 8 +-- .../OrganizationTags/OrganizationTags.tsx | 8 +-- src/screens/SubTags/SubTags.tsx | 8 +-- src/style/app.module.css | 41 +++++++++++++- src/utils/organizationTagsUtils.ts | 6 +++ 13 files changed, 103 insertions(+), 133 deletions(-) delete mode 100644 src/components/AddPeopleToTag/AddPeopleToTag.module.css delete mode 100644 src/components/TagActions/TagActions.module.css diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.module.css b/src/components/AddPeopleToTag/AddPeopleToTag.module.css deleted file mode 100644 index 5dd04ffed5..0000000000 --- a/src/components/AddPeopleToTag/AddPeopleToTag.module.css +++ /dev/null @@ -1,54 +0,0 @@ -.errorContainer { - min-height: 100vh; -} - -.errorMessage { - 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; -} - -.tableHeader { - background-color: var(--bs-primary); - color: var(--bs-white); - font-size: 1rem; -} - -.rowBackground { - background-color: var(--bs-white); - max-height: 120px; -} - -.scrollContainer { - height: 100px; - overflow-y: auto; - margin-bottom: 1rem; -} - -.memberBadge { - display: flex; - align-items: center; - padding: 5px 10px; - border-radius: 12px; - box-shadow: 0 1px 3px var(--bs-gray-400); - max-width: calc(100% - 2rem); -} - -.removeFilterIcon { - cursor: pointer; -} - -.loadingDiv { - min-height: 300px; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.tsx index 51d21a6a1c..450051794c 100644 --- a/src/components/AddPeopleToTag/AddPeopleToTag.tsx +++ b/src/components/AddPeopleToTag/AddPeopleToTag.tsx @@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react'; import { Modal, Form, Button } from 'react-bootstrap'; import { useParams } from 'react-router-dom'; import type { InterfaceQueryUserTagsMembersToAssignTo } from 'utils/interfaces'; -import styles from './AddPeopleToTag.module.css'; +import styles from '../../style/app.module.css'; import type { InterfaceTagUsersToAssignToQuery } from 'utils/organizationTagsUtils'; import { TAGS_QUERY_DATA_CHUNK_SIZE, @@ -244,7 +244,10 @@ const AddPeopleToTag: React.FC = ({ data-testid={ isToBeAssigned ? 'deselectMemberBtn' : 'selectMemberBtn' } - variant={!isToBeAssigned ? 'primary' : 'danger'} + // variant={!isToBeAssigned ? 'primary' : 'danger'} + className={ + !isToBeAssigned ? styles.editButton : `btn btn-danger btn-sm` + } > {isToBeAssigned ? 'x' : '+'} @@ -263,7 +266,7 @@ const AddPeopleToTag: React.FC = ({ centered > @@ -301,7 +304,7 @@ const AddPeopleToTag: React.FC = ({ setMemberToAssignToSearchFirstName(e.target.value.trim()) @@ -315,7 +318,7 @@ const AddPeopleToTag: React.FC = ({ setMemberToAssignToSearchLastName(e.target.value.trim()) @@ -396,16 +399,17 @@ const AddPeopleToTag: React.FC = ({ diff --git a/src/components/TagActions/TagActions.module.css b/src/components/TagActions/TagActions.module.css deleted file mode 100644 index 079dffea65..0000000000 --- a/src/components/TagActions/TagActions.module.css +++ /dev/null @@ -1,42 +0,0 @@ -.errorContainer { - min-height: 100vh; -} - -.errorMessage { - 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; -} - -.scrollContainer { - height: 100px; - overflow-y: auto; -} - -.tagBadge { - display: flex; - align-items: center; - padding: 5px 10px; - border-radius: 12px; - box-shadow: 0 1px 3px var(--bs-gray-400); - max-width: calc(100% - 2rem); -} - -.removeFilterIcon { - cursor: pointer; -} - -.loadingDiv { - min-height: 300px; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/src/components/TagActions/TagActions.tsx b/src/components/TagActions/TagActions.tsx index 083341372f..f7ffef8d38 100644 --- a/src/components/TagActions/TagActions.tsx +++ b/src/components/TagActions/TagActions.tsx @@ -7,7 +7,7 @@ import type { InterfaceQueryOrganizationUserTags, InterfaceTagData, } from 'utils/interfaces'; -import styles from './TagActions.module.css'; +import styles from '../../style/app.module.css'; import { ORGANIZATION_USER_TAGS_LIST } from 'GraphQl/Queries/OrganizationQueries'; import { ASSIGN_TO_TAGS, @@ -270,7 +270,7 @@ const TagActions: React.FC = ({ centered > @@ -312,7 +312,7 @@ const TagActions: React.FC = ({ setTagSearchName(e.target.value.trim())} data-testid="searchByName" @@ -388,13 +388,18 @@ const TagActions: React.FC = ({ - diff --git a/src/components/TagActions/TagNode.tsx b/src/components/TagActions/TagNode.tsx index fc41ef4066..05e3564a9b 100644 --- a/src/components/TagActions/TagNode.tsx +++ b/src/components/TagActions/TagNode.tsx @@ -7,7 +7,7 @@ import type { } from 'utils/interfaces'; import type { InterfaceOrganizationSubTagsQuery } from 'utils/organizationTagsUtils'; import { TAGS_QUERY_DATA_CHUNK_SIZE } from 'utils/organizationTagsUtils'; -import styles from './TagActions.module.css'; +import styles from '../../style/app.module.css'; import InfiniteScroll from 'react-infinite-scroll-component'; import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader'; import { WarningAmberRounded } from '@mui/icons-material'; diff --git a/src/screens/ManageTag/EditUserTagModal.tsx b/src/screens/ManageTag/EditUserTagModal.tsx index 5fa8ae2771..f75c19cbb8 100644 --- a/src/screens/ManageTag/EditUserTagModal.tsx +++ b/src/screens/ManageTag/EditUserTagModal.tsx @@ -2,6 +2,7 @@ import type { TFunction } from 'i18next'; import type { FormEvent } from 'react'; import React from 'react'; import { Button, Form, Modal } from 'react-bootstrap'; +import styles from '../../style/app.module.css'; /** * Edit UserTag Modal component for the Manage Tag screen. @@ -37,7 +38,7 @@ const EditUserTagModal: React.FC = ({ centered > @@ -56,7 +57,7 @@ const EditUserTagModal: React.FC = ({ = ({ variant="secondary" onClick={(): void => hideEditUserTagModal()} data-testid="closeEditTagModalBtn" + className={styles.removeButton} > {tCommon('cancel')} - diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx index 38466f6f11..d2af763dae 100644 --- a/src/screens/ManageTag/ManageTag.tsx +++ b/src/screens/ManageTag/ManageTag.tsx @@ -292,7 +292,7 @@ function ManageTag(): JSX.Element { minWidth: 100, align: 'center', headerAlign: 'center', - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, sortable: false, renderCell: (params: GridCellParams) => { return
{params.row.id}
; @@ -304,7 +304,7 @@ function ManageTag(): JSX.Element { flex: 2, minWidth: 100, sortable: false, - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, renderCell: (params: GridCellParams) => { return (
@@ -321,7 +321,7 @@ function ManageTag(): JSX.Element { minWidth: 100, headerAlign: 'center', sortable: false, - headerClassName: `${styles.tableHeaders}`, + headerClassName: `${styles.tableHeader}`, renderCell: (params: GridCellParams) => { return (
@@ -330,7 +330,9 @@ function ManageTag(): JSX.Element { state={{ id: params.row._id }} data-testid="viewProfileBtn" > -
+
{t('viewProfile')}
@@ -519,7 +521,7 @@ function ManageTag(): JSX.Element { setTagActionType('assignToTags'); showTagActionsModal(); }} - className="my-2 btn btn-primary btn-sm w-75" + className={`my-2 btn btn-primary btn-sm w-75 ${styles.editButton}`} data-testid="assignToTags" > {t('assignToTags')} @@ -543,7 +545,7 @@ function ManageTag(): JSX.Element { />
{tCommon('edit')} diff --git a/src/screens/ManageTag/RemoveUserTagModal.tsx b/src/screens/ManageTag/RemoveUserTagModal.tsx index dc000f443c..91ba0b38aa 100644 --- a/src/screens/ManageTag/RemoveUserTagModal.tsx +++ b/src/screens/ManageTag/RemoveUserTagModal.tsx @@ -1,6 +1,7 @@ import type { TFunction } from 'i18next'; import React from 'react'; import { Button, Modal } from 'react-bootstrap'; +import styles from '../../style/app.module.css'; /** * Remove UserTag Modal component for the Manage Tag screen. @@ -33,7 +34,7 @@ const RemoveUserTagModal: React.FC = ({ keyboard={false} centered > - + {t('removeUserTag')} @@ -44,7 +45,7 @@ const RemoveUserTagModal: React.FC = ({ @@ -407,6 +407,7 @@ function OrganizationTags(): JSX.Element { '& .MuiDataGrid-row': { backgroundColor: 'var(--tablerow-bg-color)', '&:focus-within': { + outline: '2px solid #000', outlineOffset: '-2px', }, }, @@ -419,6 +420,7 @@ function OrganizationTags(): JSX.Element { boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)', }, '& .MuiDataGrid-cell:focus': { + outline: '2px solid #000', outlineOffset: '-2px', }, }} @@ -460,7 +462,7 @@ function OrganizationTags(): JSX.Element { hideCreateTagModal()} data-testid="closeCreateTagModal" - className={styles.closeButton} + className={styles.removeButton} > {tCommon('cancel')} diff --git a/src/screens/SubTags/SubTags.tsx b/src/screens/SubTags/SubTags.tsx index 6a20e875ec..e0763997e3 100644 --- a/src/screens/SubTags/SubTags.tsx +++ b/src/screens/SubTags/SubTags.tsx @@ -266,9 +266,9 @@ function SubTags(): JSX.Element { return ( @@ -445,7 +445,7 @@ function SubTags(): JSX.Element { centered > @@ -457,7 +457,7 @@ function SubTags(): JSX.Element { hideAddSubTagModal()} data-testid="addSubTagModalCloseBtn" - className={styles.closeButton} + className={styles.removeButton} > {tCommon('cancel')} diff --git a/src/style/app.module.css b/src/style/app.module.css index 981ff08b1e..5580f21ab2 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -491,6 +491,11 @@ border-color: var(--search-button-border); } +.addButton:not(:hover, :active, :focus) { + background-color: #286fe0 !important; + border-color: var(--search-button-border); +} + .removeButton { margin-bottom: 10px; background-color: var(--delete-button-bg); @@ -558,6 +563,37 @@ overflow-y: auto; } +.scrollContainer { + height: 100px; + overflow-y: auto; + margin-bottom: 1rem; +} + +.memberBadge { + display: flex; + align-items: center; + padding: 5px 10px; + border-radius: 12px; + box-shadow: 0 1px 3px var(--bs-gray-400); + max-width: calc(100% - 2rem); +} + +.loadingDiv { + min-height: 300px; + display: flex; + justify-content: center; + align-items: center; +} + +.tagBadge { + display: flex; + align-items: center; + padding: 5px 10px; + border-radius: 12px; + box-shadow: 0 1px 3px var(--bs-gray-400); + max-width: calc(100% - 2rem); +} + .tableHeader { background-color: var(--table-head-bg); color: var(--table-header-color); @@ -630,6 +666,7 @@ scrollbar-color: var(--bs-gray-400) var(--bs-white); max-height: calc(100vh - 18rem); overflow: auto; + margin-top: 20px !important; } .tagsBreadCrumbs:hover { @@ -737,7 +774,7 @@ hr { } .switch input { - /* box-shadow: 0 0 0.1rem 0.2rem var(--bg-blue); */ + box-shadow: 0 0 0.1rem 0.2rem var(--bg-blue); } .switch input:checked { @@ -1650,6 +1687,8 @@ hr { .modalHeader { border: none; padding-bottom: 0; + background-color: var(--bs-primary) !important; + padding: 1rem 1rem; } .label { diff --git a/src/utils/organizationTagsUtils.ts b/src/utils/organizationTagsUtils.ts index 56654a3abb..9105a5629e 100644 --- a/src/utils/organizationTagsUtils.ts +++ b/src/utils/organizationTagsUtils.ts @@ -18,9 +18,11 @@ export const dataGridStyle = { }, '& .MuiDataGrid-row:hover': { backgroundColor: 'transparent', + boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)', }, '& .MuiDataGrid-row.Mui-hovered': { backgroundColor: 'transparent', + boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)', }, '& .MuiDataGrid-root': { borderRadius: '0.1rem', @@ -36,6 +38,10 @@ export const dataGridStyle = { '& .MuiDataGrid-virtualScrollerContent': { marginTop: 6.5, }, + '& .MuiDataGrid-cell:focus': { + outline: '2px solid #000', + outlineOffset: '-2px', + }, }; // the data chunk size for tag related queries From 851e246acc2c3caa7fb8def9209036279cf901c6 Mon Sep 17 00:00:00 2001 From: rahul Date: Sat, 11 Jan 2025 21:15:10 +0530 Subject: [PATCH 05/15] venues, action items, advertisments, plugins sections updated --- .../AddOn/core/AddOnEntry/AddOnEntry.tsx | 6 +- .../AdvertisementEntry.module.css | 79 -------- .../AdvertisementEntry/AdvertisementEntry.tsx | 13 +- .../AdvertisementRegister.tsx | 12 +- .../EventCalendar/EventCalendar.tsx | 2 +- src/components/EventCalendar/EventHeader.tsx | 2 +- .../EventListCard/EventListCardModals.tsx | 38 ++-- .../OrgPostCard/DeletePostModal.tsx | 4 +- src/components/OrgPostCard/OrgPostCard.tsx | 17 +- src/components/Venues/VenueCard.tsx | 4 +- src/components/Venues/VenueModal.tsx | 4 + src/screens/BlockUser/BlockUser.tsx | 20 ++- src/screens/OrgPost/OrgPost.tsx | 10 +- .../ItemUpdateStatusModal.tsx | 13 +- .../OrganizationEvents/OrganizationEvents.tsx | 14 +- .../OrganizationFundCampagins.tsx | 68 +++---- src/style/app.module.css | 168 +++++++++++++----- 17 files changed, 260 insertions(+), 214 deletions(-) delete mode 100644 src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx index 0d317266d9..9c9a822e22 100644 --- a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx +++ b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx @@ -113,7 +113,11 @@ function addOnEntry({ {description} {formStatus === 'register' ? ( diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index c9048eb552..397df845fb 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -549,7 +549,7 @@ const Calendar: React.FC = ({
) : (
))} @@ -745,7 +746,7 @@ function EventListCardModals({
))} @@ -811,7 +813,7 @@ function EventListCardModals({ - diff --git a/src/components/Venues/VenueCard.tsx b/src/components/Venues/VenueCard.tsx index 43da734bd6..557a5c77e4 100644 --- a/src/components/Venues/VenueCard.tsx +++ b/src/components/Venues/VenueCard.tsx @@ -85,22 +85,22 @@ const VenueCard = ({
{/* Edit button */} {/* Delete button */}
-
-
-
+ {/*
*/} + {/*
*/} +
{ dataTestIdPrefix="userFilter" className={`${styles.createButton} mt-2`} /> +
+
{ />
+ {/*
*/} + {/*
*/}
{/* Table */} {loadingMembers === false && diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx index 8ccdb47692..5bf11f5aba 100644 --- a/src/screens/OrgPost/OrgPost.tsx +++ b/src/screens/OrgPost/OrgPost.tsx @@ -413,7 +413,7 @@ function orgPost(): JSX.Element { {postformState.addMedia && file && ( @@ -506,13 +507,14 @@ function orgPost(): JSX.Element { pinPost: !postformState.pinPost, }) } + className={styles.switch} /> diff --git a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx index 640fdde032..099a897435 100644 --- a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx +++ b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx @@ -113,17 +113,24 @@ const ItemUpdateStatusModal: FC = ({ {isCompleted ? (
- -
) : (
-
-
- - setSortBy( - value as - | 'fundingGoal_ASC' - | 'fundingGoal_DESC' - | 'endDate_ASC' - | 'endDate_DESC', - ) - } - dataTestIdPrefix="filter" - buttonLabel={tCommon('sort')} - /> -
-
- -
+ {/*
*/} +
+ + setSortBy( + value as + | 'fundingGoal_ASC' + | 'fundingGoal_DESC' + | 'endDate_ASC' + | 'endDate_DESC', + ) + } + dataTestIdPrefix="filter" + buttonLabel={tCommon('sort')} + /> +
+
+
+ {/*
*/}
diff --git a/src/style/app.module.css b/src/style/app.module.css index 9c1a168a01..dfba774886 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -55,7 +55,7 @@ --tablerow-bg: #eff1f7; --date-picker-bg: #f2f2f2; --table-bg-color: var(--grey-bg-color); - --tablerow-bg-color: var(--dropdown-hover-color); + --tablerow-bg-color: #ffffff; --row-background: var(--bs-white, var(--bs-white)); --modal-background: rgba(0, 0, 0, 0.7); @@ -91,17 +91,16 @@ --bs-gray-400: #9ca3af; --bs-gray-300: #d1d5db; --toggle-button-bg: #1e4e8c; - - --table-head-bg: var(--blue-subtle, var(--blue-color)); + --table-head-bg: #eaebef; --table-head-color: var(--bs-white, var(--white-color)); - - --table-header-color: var(--bs-white, var(--bs-gray-300)); + --table-header-color: #000000; --input-area-color: #f1f3f6; --date-picker-background: #f2f2f2; --grey-bg-color-dark: #707070; --dropdown-border-color: #cccccc; --primary-border-solid: 1px solid var(--dropdown-border-color); - --bg-blue: #a8c7fa; + --light-blue: #a8c7fa; + --dark-blue: #1778f2; --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* breakpoints */ @@ -196,7 +195,7 @@ font-size: 20px; margin-bottom: 30px; padding-bottom: 5px; - border-bottom: 3px solid var(--bg-blue); + border-bottom: 3px solid var(--light-blue); width: 15%; } @@ -206,7 +205,7 @@ font-size: 18px; margin-bottom: 20px; padding-bottom: 5px; - border-bottom: 3px solid var(--bg-blue); + border-bottom: 3px solid var(--light-blue); width: 60%; } @@ -442,11 +441,11 @@ margin-top: 10px; margin-bottom: 10px; background-color: var(--bs-white); - /* box-shadow: 0 1px 1px var(--input-shadow-color); */ + box-shadow: 0 1px 1px var(--input-shadow-color); } .inputField:focus { - box-shadow: 0 0 0 0.25rem var(--search-button-bg); + box-shadow: 0 0 0 0.25rem var(--light-blue); } .inputFieldModal { @@ -486,17 +485,12 @@ .addButton { margin-bottom: 10px; - background-color: var(--search-button-bg); + background-color: var(--light-blue); border-color: var(--grey-bg-color); } -.addButton:is(:hover, :active, :focus) { - background-color: #286fe0 !important; - border-color: var(--search-button-border); -} - -.addButton:not(:hover, :active, :focus) { - background-color: #286fe0 !important; +.addButton:is(:hover, :active) { + background-color: var(--dark-blue) !important; border-color: var(--search-button-border); } @@ -605,21 +599,18 @@ } .editButton { - background-color: var(--bs-primary); - color: var(--bs-white); + background-color: var(--light-blue); + color: var(--brown-color); border-color: var(--grey-bg-color); + --bs-btn-active-bg: var(--dark-blue); + --bs-btn-active-border-color: var(--grey-bg-color); } -.editButton:hover { - background-color: var(--subtle-blue-grey); +.editButton:is(:hover, :active) { + background-color: var(--dark-blue); border-color: var(--search-button-border); } -.editButton:focus, -.editButton:active { - background-color: var(--bs-primary) !important; -} - .errorContainer { min-height: 100vh; } @@ -778,13 +769,14 @@ hr { } .switch input { - box-shadow: 0 0 0.1rem 0.2rem var(--bg-blue); + /* box-shadow: 0 0 0.1rem 0.2rem var(--light-blue); */ + --bs-form-switch-bg: transparent; } .switch input:checked { - background-color: #286fe0; - border: var(--bs-primary); - box-shadow: 0 0 0.1rem 0.2rem var(--bg-blue); + background-color: var(--dark-blue); + border-color: var(--dark-blue); + box-shadow: 0 0 0.1rem 0.2rem var(--light-blue); } .pageNotFound { @@ -811,7 +803,7 @@ hr { .pageNotFound h1.head { font-size: 250px; font-weight: 900; - color: var(--bg-blue); + color: var(--light-blue); letter-spacing: 25px; margin: 10px 0 0 0; } @@ -892,7 +884,7 @@ hr { .inputFieldPledge { background-color: var(--bs-white); - box-shadow: 0 1px 1px var(--bg-blue); + box-shadow: 0 1px 1px var(--light-blue); } .dropdownPledge { @@ -1072,7 +1064,7 @@ hr { } .toggleBtnPledge:is(:hover) + label { - color: var(--bg-blue) !important; + color: var(--light-blue) !important; } .card { @@ -1323,7 +1315,7 @@ hr { } .customcell { - background-color: var(--bg-blue) !important; + background-color: var(--light-blue) !important; color: var(--bs-white) !important; font-size: medium !important; font-weight: 500 !important; @@ -1349,7 +1341,7 @@ hr { } .table-body > .table-row:nth-child(2n) { - background: var(--bg-blue) !important; + background: var(--light-blue) !important; } .organizationFundCampaignContainer { @@ -1716,8 +1708,13 @@ hr { .modalHeader { border: none; padding-bottom: 0; - background-color: var(--bs-primary) !important; + background-color: var(--white-color) !important; padding: 1rem 1rem; + color: #000000; +} + +.modalHeader div { + color: #000000 !important; } .label { @@ -1814,7 +1811,7 @@ hr { } .toggleBtn:hover { - color: var(--bg-blue) !important; + color: var(--light-blue) !important; } input[type='radio']:checked + label { @@ -1941,12 +1938,19 @@ input[type='radio']:checked + label:hover { .active { background-color: var(--status-active-bg); + color: var(--light-blue) !important; + border-color: var(--light-blue) !important; } .pending { background-color: var(--status-pending-bg); - color: var(--status-pending-text); - border-color: var(--status-pending-border); + color: var(--light-blue) !important; + border-color: var(--light-blue) !important; +} + +.checkboxButton input:checked { + background-color: var(--dark-blue); + border-color: var(--dark-blue); } /* Modals */ @@ -2027,7 +2031,7 @@ input[type='radio']:checked + label:hover { border: 0.5px solid var(--brown-color); } .searchButtonOrgList { - background-color: var(--bg-blue); + background-color: var(--light-blue); position: absolute; z-index: 10; bottom: 0; @@ -3565,7 +3569,7 @@ button[data-testid='createPostBtn'] { display: flex !important; align-items: center; background-color: transparent; - color: var(--bg-blue); + color: var(--light-blue); } .entryaction .spinner-grow { @@ -3575,6 +3579,86 @@ button[data-testid='createPostBtn'] { } } +.entrytoggle { + margin: 24px 24px 0 auto; + width: fit-content; +} + +.entryaction { + display: flex !important; +} + +.entryaction i { + margin-right: 8px; + margin-top: 4px; +} + +.entryaction .spinner-grow { + height: 1rem; + width: 1rem; + margin-right: 8px; +} + +.admedia { + object-fit: cover; + height: 16rem; +} + +.buttons { + display: flex; + justify-content: flex-end; +} + +.addCard { + width: 28rem; +} + +.dropdownButton { + background-color: transparent; + color: #000; + border: none; + cursor: pointer; + display: flex; + width: 100%; + justify-content: flex-end; + padding: 8px 10px; +} + +.dropdownContainer { + position: relative; + display: inline-block; +} + +.dropdownmenu { + display: none; + position: absolute; + z-index: 1; + background-color: white; + width: 120px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + padding: 5px 0; + margin: 0; + list-style-type: none; + right: 0; + top: 100%; +} + +.dropdownmenu li { + cursor: pointer; + padding: 8px 16px; + text-decoration: none; + display: block; + color: #333; +} + +.dropdownmenu li:hover { + background-color: #f1f1f1; +} + +.dropdownContainer:hover .dropdownmenu { + display: block; +} + .leftDrawer { width: calc(300px + 2rem); position: fixed; From 43c922070425c61799b50c1545031ffd61c0a9a3 Mon Sep 17 00:00:00 2001 From: rahul Date: Sun, 12 Jan 2025 01:10:24 +0530 Subject: [PATCH 06/15] fixed code coverage test --- .../AddPeopleToTag/AddPeopleToTag.tsx | 11 +++--- src/components/EventCalendar/EventHeader.tsx | 2 +- src/components/TagActions/TagActions.tsx | 10 +++--- src/components/TagActions/TagNode.tsx | 6 ++-- .../FundCampaignPledge/FundCampaignPledge.tsx | 10 ++---- .../FundCampaignPledge/PledgeModal.tsx | 34 +++++++------------ src/screens/ManageTag/ManageTag.tsx | 29 ++++++---------- src/screens/OrgPost/OrgPost.tsx | 3 +- .../CampaignModal.tsx | 17 ++++------ src/screens/OrganizationFunds/FundModal.tsx | 1 - .../OrganizationTags/OrganizationTags.tsx | 8 ++--- src/screens/SubTags/SubTags.tsx | 24 +++++-------- 12 files changed, 57 insertions(+), 98 deletions(-) diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.tsx index 450051794c..29eeb4a56c 100644 --- a/src/components/AddPeopleToTag/AddPeopleToTag.tsx +++ b/src/components/AddPeopleToTag/AddPeopleToTag.tsx @@ -106,7 +106,7 @@ const AddPeopleToTag: React.FC = ({ }; }, ) => { - if (!fetchMoreResult) /* istanbul ignore next */ return prevResult; + if (!fetchMoreResult) return prevResult; return { getUsersToAssignTo: { @@ -127,7 +127,7 @@ const AddPeopleToTag: React.FC = ({ const userTagMembersToAssignTo = userTagsMembersToAssignToData?.getUsersToAssignTo.usersToAssignTo.edges.map( (edge) => edge.node, - ) ?? /* istanbul ignore next */ []; + ) ?? []; const handleAddOrRemoveMember = (member: InterfaceMemberData): void => { setAssignToMembers((prevMembers) => { @@ -173,7 +173,7 @@ const AddPeopleToTag: React.FC = ({ hideAddPeopleToTagModal(); setAssignToMembers([]); } - } catch (error: unknown) /* istanbul ignore next */ { + } catch (error: unknown) { const errorMessage = error instanceof Error ? error.message : tErrors('unknownError'); toast.error(errorMessage); @@ -348,8 +348,7 @@ const AddPeopleToTag: React.FC = ({ next={loadMoreMembersToAssignTo} hasMore={ userTagsMembersToAssignToData?.getUsersToAssignTo - .usersToAssignTo.pageInfo.hasNextPage ?? - /* istanbul ignore next */ false + .usersToAssignTo.pageInfo.hasNextPage ?? false } loader={} scrollableTarget="addPeopleToTagScrollableDiv" @@ -360,7 +359,7 @@ const AddPeopleToTag: React.FC = ({ hideFooter={true} getRowId={(row) => row.id} slots={{ - noRowsOverlay: /* istanbul ignore next */ () => ( + noRowsOverlay: () => ( setEventName(e.target.value)} />
@@ -454,8 +449,7 @@ function ManageTag(): JSX.Element { next={loadMoreAssignedMembers} hasMore={ userTagAssignedMembersData?.getAssignedUsers - .usersAssignedTo.pageInfo.hasNextPage ?? - /* istanbul ignore next -- @preserve */ false + .usersAssignedTo.pageInfo.hasNextPage ?? false } loader={} scrollableTarget="manageTagScrollableDiv" @@ -466,16 +460,15 @@ function ManageTag(): JSX.Element { hideFooter={true} getRowId={(row) => row.id} slots={{ - noRowsOverlay: - /* istanbul ignore next -- @preserve */ () => ( - - {t('noAssignedMembersFound')} - - ), + noRowsOverlay: () => ( + + {t('noAssignedMembersFound')} + + ), }} sx={dataGridStyle} getRowClassName={() => `${styles.rowBackgrounds}`} diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx index 5bf11f5aba..62a58f0e1a 100644 --- a/src/screens/OrgPost/OrgPost.tsx +++ b/src/screens/OrgPost/OrgPost.tsx @@ -167,7 +167,6 @@ function orgPost(): JSX.Element { }, }); - /* istanbul ignore next */ if (data) { toast.success(t('postCreatedSuccess') as string); refetch(); @@ -273,7 +272,7 @@ function orgPost(): JSX.Element { if (a.pinned === b.pinned) { return 0; } - /* istanbul ignore next */ + if (a.pinned) { return -1; } diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx index f0b944bd2b..a57c6e707a 100644 --- a/src/screens/OrganizationFundCampaign/CampaignModal.tsx +++ b/src/screens/OrganizationFundCampaign/CampaignModal.tsx @@ -127,7 +127,7 @@ const CampaignModal: React.FC = ({ * @param e - The form event. * @returns Promise */ - /*istanbul ignore next*/ + const updateCampaignHandler = async ( e: ChangeEvent, ): Promise => { @@ -263,15 +263,12 @@ const CampaignModal: React.FC = ({ value={campaignCurrency} label={t('currency')} data-testid="currencySelect" - onChange={ - /*istanbul ignore next*/ - (e) => { - setFormState({ - ...formState, - campaignCurrency: e.target.value, - }); - } - } + onChange={(e) => { + setFormState({ + ...formState, + campaignCurrency: e.target.value, + }); + }} > {currencyOptions.map((currency) => ( diff --git a/src/screens/OrganizationFunds/FundModal.tsx b/src/screens/OrganizationFunds/FundModal.tsx index 42806f7a30..ab02902c2f 100644 --- a/src/screens/OrganizationFunds/FundModal.tsx +++ b/src/screens/OrganizationFunds/FundModal.tsx @@ -115,7 +115,6 @@ const FundModal: React.FC = ({ } }; - /*istanbul ignore next*/ const updateFundHandler = async ( e: ChangeEvent, ): Promise => { diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx index 83ff0c019a..39a2a26032 100644 --- a/src/screens/OrganizationTags/OrganizationTags.tsx +++ b/src/screens/OrganizationTags/OrganizationTags.tsx @@ -82,7 +82,6 @@ function OrganizationTags(): JSX.Element { first: TAGS_QUERY_DATA_CHUNK_SIZE, after: orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo?.endCursor ?? - /* istanbul ignore next */ null, }, updateQuery: ( @@ -95,7 +94,7 @@ function OrganizationTags(): JSX.Element { }; }, ) => { - if (!fetchMoreResult) /* istanbul ignore next */ return prevResult; + if (!fetchMoreResult) return prevResult; return { organizations: [ @@ -146,7 +145,6 @@ function OrganizationTags(): JSX.Element { setCreateTagModalIsOpen(false); } } catch (error: unknown) { - /* istanbul ignore next */ if (error instanceof Error) { toast.error(error.message); } @@ -366,7 +364,7 @@ function OrganizationTags(): JSX.Element { next={loadMoreUserTags} hasMore={ orgUserTagsData?.organizations?.[0]?.userTags?.pageInfo - ?.hasNextPage ?? /* istanbul ignore next */ false + ?.hasNextPage ?? false } loader={} scrollableTarget="orgUserTagsScrollableDiv" @@ -377,7 +375,7 @@ function OrganizationTags(): JSX.Element { hideFooter={true} getRowId={(row) => row.id} slots={{ - noRowsOverlay: /* istanbul ignore next */ () => ( + noRowsOverlay: () => ( { - /* istanbul ignore next -- @preserve */ if (!fetchMoreResult) return prevResult; return { @@ -126,7 +125,6 @@ function SubTags(): JSX.Element { }, }); - /* istanbul ignore next -- @preserve */ if (data) { toast.success(t('tagCreationSuccess') as string); subTagsRefetch(); @@ -134,7 +132,6 @@ function SubTags(): JSX.Element { setAddSubTagModalIsOpen(false); } } catch (error: unknown) { - /* istanbul ignore next -- @preserve */ if (error instanceof Error) { toast.error(error.message); } @@ -155,7 +152,6 @@ function SubTags(): JSX.Element { } const subTagsList = - /* istanbul ignore next -- @preserve */ subTagsData?.getChildTags.childTags.edges.map((edge) => edge.node) ?? []; const parentTagName = subTagsData?.getChildTags.name; @@ -373,7 +369,6 @@ function SubTags(): JSX.Element { next={loadMoreSubTags} hasMore={ subTagsData?.getChildTags.childTags.pageInfo.hasNextPage ?? - /* istanbul ignore next -- @preserve */ false } loader={} @@ -385,16 +380,15 @@ function SubTags(): JSX.Element { hideFooter={true} getRowId={(row) => row.id} slots={{ - noRowsOverlay: - /* istanbul ignore next -- @preserve */ () => ( - - {t('noTagsFound')} - - ), + noRowsOverlay: () => ( + + {t('noTagsFound')} + + ), }} sx={dataGridStyle} getRowClassName={() => `${styles.rowBackground}`} From b5e6d4fc847c6e44d7cd38348887ba727611b733 Mon Sep 17 00:00:00 2001 From: rahul Date: Sun, 12 Jan 2025 01:19:02 +0530 Subject: [PATCH 07/15] fixed code coverage test --- src/screens/ManageTag/ManageTag.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx index 43af7c346d..b0748a9bf3 100644 --- a/src/screens/ManageTag/ManageTag.tsx +++ b/src/screens/ManageTag/ManageTag.tsx @@ -207,7 +207,6 @@ function ManageTag(): JSX.Element { }, }); - /* istanbul ignore else -- @preserve */ if (data) { toast.success(t('tagUpdationSuccess')); userTagAssignedMembersRefetch(); From 8ff875ca3c1dcb20630ff6e7e69327f894e5e35f Mon Sep 17 00:00:00 2001 From: rahul Date: Thu, 16 Jan 2025 09:16:27 +0530 Subject: [PATCH 08/15] CSS methodology added --- src/assets/css/app.css | 2 +- .../AddOn/core/AddOnEntry/AddOnEntry.tsx | 17 +++++++ .../AddPeopleToTag/AddPeopleToTag.tsx | 25 ++++++++++- .../AdvertisementEntry/AdvertisementEntry.tsx | 18 ++++++++ .../AdvertisementRegister.tsx | 19 ++++++++ .../EventCalendar/EventCalendar.tsx | 20 +++++++++ src/components/EventCalendar/EventHeader.tsx | 17 +++++++ .../EventListCard/EventListCardModals.tsx | 21 +++++++++ .../OrgPeopleListCard/OrgPeopleListCard.tsx | 17 +++++++ .../OrgPostCard/DeletePostModal.tsx | 17 +++++++ src/components/OrgPostCard/OrgPostCard.tsx | 24 ++++++++++ src/components/TagActions/TagActions.tsx | 20 +++++++++ src/components/TagActions/TagNode.tsx | 16 +++++++ src/components/Venues/VenueCard.tsx | 18 ++++++++ src/components/Venues/VenueModal.tsx | 17 +++++++ src/screens/BlockUser/BlockUser.tsx | 22 ++++++++++ .../FundCampaignPledge/FundCampaignPledge.tsx | 23 ++++++++++ .../FundCampaignPledge/PledgeModal.tsx | 17 +++++++ src/screens/ManageTag/EditUserTagModal.tsx | 20 +++++++++ src/screens/ManageTag/ManageTag.tsx | 18 ++++++++ src/screens/ManageTag/RemoveUserTagModal.tsx | 19 ++++++++ .../ManageTag/UnassignUserTagModal.tsx | 19 ++++++++ src/screens/OrgList/OrgList.tsx | 20 +++++++++ src/screens/OrgPost/OrgPost.tsx | 19 ++++++++ .../ItemUpdateStatusModal.tsx | 20 +++++++++ .../OrganizationEvents/OrganizationEvents.tsx | 19 ++++++++ .../CampaignModal.tsx | 17 +++++++ .../OrganizationFundCampagins.tsx | 24 ++++++++++ src/screens/OrganizationFunds/FundModal.tsx | 17 +++++++ .../OrganizationFunds/OrganizationFunds.tsx | 23 ++++++++++ src/screens/OrganizationPeople/AddMember.tsx | 18 ++++++++ .../OrganizationTags/OrganizationTags.tsx | 19 ++++++++ src/screens/SubTags/SubTags.tsx | 20 +++++++++ src/style/app.module.css | 44 ++++++++++++++++++- 34 files changed, 662 insertions(+), 4 deletions(-) diff --git a/src/assets/css/app.css b/src/assets/css/app.css index f2bc9f3aaf..16af7c92fb 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -14081,7 +14081,7 @@ fieldset:disabled .btn { .btn-info:hover, .btn-info:active { color: #fff !important; - box-shadow: inset 50px 50px 40px rgba(0, 0, 0, 0.5); + /* box-shadow: inset 50px 50px 40px rgba(0, 0, 0, 0.5); */ background-blend-mode: multiply; /* background-color: #6c757d ; */ /* filter: brightness(0.85); */ diff --git a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx index 9c9a822e22..be4f59c74e 100644 --- a/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx +++ b/src/components/AddOn/core/AddOnEntry/AddOnEntry.tsx @@ -42,6 +42,23 @@ interface InterfaceAddOnEntryProps { * getInstalledPlugins={() => {}} * /> * ``` + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.addButton` + * - `.removeButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ function addOnEntry({ id, diff --git a/src/components/AddPeopleToTag/AddPeopleToTag.tsx b/src/components/AddPeopleToTag/AddPeopleToTag.tsx index 29eeb4a56c..f277d22e50 100644 --- a/src/components/AddPeopleToTag/AddPeopleToTag.tsx +++ b/src/components/AddPeopleToTag/AddPeopleToTag.tsx @@ -22,9 +22,30 @@ import { useTranslation } from 'react-i18next'; import InfiniteScrollLoader from 'components/InfiniteScrollLoader/InfiniteScrollLoader'; import type { TFunction } from 'i18next'; -/** - * Props for the `AddPeopleToTag` component. +/** * Props for the `AddPeopleToTag` component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.editButton` + * - `.modalHeader` + * - `.inputField` + * - `.addButton` + * - `.removeButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ + export interface InterfaceAddPeopleToTagProps { addPeopleToTagModalIsOpen: boolean; hideAddPeopleToTagModal: () => void; diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index dca9adb45a..076733e633 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -27,6 +27,24 @@ interface InterfaceAddOnEntryProps { * * @param props - Component properties * @returns The rendered component + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.addButton` + * - `.removeButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ function AdvertisementEntry({ id, diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index 24290d7b13..6f1e191266 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -16,6 +16,25 @@ import { useParams } from 'react-router-dom'; /** * Props for the `advertisementRegister` component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.dropdown` + * - `.inputField` + * - `.removeButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ interface InterfaceAddOnRegisterProps { id?: string; // Optional organization ID diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index 01426ca047..c84a6d23d5 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -9,6 +9,26 @@ import HolidayCard from '../HolidayCards/HolidayCard'; import { holidays, months, weekdays } from './constants'; import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils'; import YearlyEventCalender from './YearlyEventCalender'; + +/** + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.editButton` + * + * For more details on the reusable classes, refer to the global CSS file. + */ + interface InterfaceEventListCardProps { userRole?: string; key?: string; diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx index 19492be0ae..93e1612a4c 100644 --- a/src/components/EventCalendar/EventHeader.tsx +++ b/src/components/EventCalendar/EventHeader.tsx @@ -24,6 +24,23 @@ interface InterfaceEventHeaderProps { * @param handleChangeView - Function to handle changing the view type. * @param showInviteModal - Function to show the invite modal for creating an event. * @returns JSX.Element - The rendered EventHeader component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.dropdown` + * + * For more details on the reusable classes, refer to the global CSS file. */ function eventHeader({ viewType, diff --git a/src/components/EventListCard/EventListCardModals.tsx b/src/components/EventListCard/EventListCardModals.tsx index 3bcdf38df8..29354fd282 100644 --- a/src/components/EventListCard/EventListCardModals.tsx +++ b/src/components/EventListCard/EventListCardModals.tsx @@ -41,6 +41,27 @@ enum Role { * Converts a time string to a Dayjs object representing the current date with the specified time. * @param time - A string representing the time in 'HH:mm:ss' format. * @returns A Dayjs object with the current date and specified time. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.inputField` + * - `.switch` + * - `.addButton` + * - `.removeButton` + * - `.modalHeader` + * + * For more details on the reusable classes, refer to the global CSS file. */ const timeToDayJs = (time: string): Dayjs => { const dateTimeString = dayjs().format('YYYY-MM-DD') + ' ' + time; diff --git a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx index 55c8757623..e738c379a0 100644 --- a/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx +++ b/src/components/OrgPeopleListCard/OrgPeopleListCard.tsx @@ -12,6 +12,23 @@ import { Close } from '@mui/icons-material'; /** * Props for the OrgPeopleListCard component + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.regularBtn` + * + * For more details on the reusable classes, refer to the global CSS file. */ interface InterfaceOrgPeopleListCardProps { id: string | undefined; diff --git a/src/components/OrgPostCard/DeletePostModal.tsx b/src/components/OrgPostCard/DeletePostModal.tsx index 7ed025de50..78584cfea3 100644 --- a/src/components/OrgPostCard/DeletePostModal.tsx +++ b/src/components/OrgPostCard/DeletePostModal.tsx @@ -10,6 +10,23 @@ import styles from '../../style/app.module.css'; * @param onHide - Callback invoked when the modal is dismissed. * @param onDelete - Callback invoked to actually delete the post. * @returns A rendered React Bootstrap Modal for post deletion. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ interface InterfaceDeletePostModalProps { diff --git a/src/components/OrgPostCard/OrgPostCard.tsx b/src/components/OrgPostCard/OrgPostCard.tsx index d0d8dc85ac..d79d29791e 100644 --- a/src/components/OrgPostCard/OrgPostCard.tsx +++ b/src/components/OrgPostCard/OrgPostCard.tsx @@ -16,6 +16,30 @@ import { errorHandler } from 'utils/errorHandler'; import type { InterfacePostForm } from 'utils/interfaces'; import styles from '../../style/app.module.css'; import DeletePostModal from './DeletePostModal'; + +/** + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.modalHeader` + * - `.inputField` + * - `.removeButton` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. + */ + interface InterfaceOrgPostCardProps { postID: string; id: string; diff --git a/src/components/TagActions/TagActions.tsx b/src/components/TagActions/TagActions.tsx index f237c70212..fb6ce6ca0d 100644 --- a/src/components/TagActions/TagActions.tsx +++ b/src/components/TagActions/TagActions.tsx @@ -32,6 +32,26 @@ interface InterfaceUserTagsAncestorData { /** * Props for the `AssignToTags` component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.modalHeader` + * - `.inputField` + * - `.removeButton` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ export interface InterfaceTagActionsProps { tagActionsModalIsOpen: boolean; diff --git a/src/components/TagActions/TagNode.tsx b/src/components/TagActions/TagNode.tsx index 22173e7834..fb484f004a 100644 --- a/src/components/TagActions/TagNode.tsx +++ b/src/components/TagActions/TagNode.tsx @@ -15,6 +15,22 @@ import type { TFunction } from 'i18next'; /** * Props for the `TagNode` component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * + * For more details on the reusable classes, refer to the global CSS file. */ interface InterfaceTagNodeProps { tag: InterfaceTagData; diff --git a/src/components/Venues/VenueCard.tsx b/src/components/Venues/VenueCard.tsx index 557a5c77e4..7ed0e07eb9 100644 --- a/src/components/Venues/VenueCard.tsx +++ b/src/components/Venues/VenueCard.tsx @@ -35,6 +35,24 @@ interface InterfaceVenueCardProps { * handleDelete={handleDeleteVenue} * /> * ``` + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.addButton` + * - `.removeButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ const VenueCard = ({ venueItem, diff --git a/src/components/Venues/VenueModal.tsx b/src/components/Venues/VenueModal.tsx index 97ae66c78e..7b347defed 100644 --- a/src/components/Venues/VenueModal.tsx +++ b/src/components/Venues/VenueModal.tsx @@ -35,6 +35,23 @@ export interface InterfaceVenueModalProps { * @param edit - A flag indicating if the modal is in edit mode. If true, the component will update an existing venue; if false, it will create a new one. * * @returns The rendered modal component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.inputField` + * + * For more details on the reusable classes, refer to the global CSS file. */ const VenueModal = ({ show, diff --git a/src/screens/BlockUser/BlockUser.tsx b/src/screens/BlockUser/BlockUser.tsx index 3da2bf8b8e..81c182f43f 100644 --- a/src/screens/BlockUser/BlockUser.tsx +++ b/src/screens/BlockUser/BlockUser.tsx @@ -41,6 +41,28 @@ interface InterfaceMember { * ```tsx * * ``` + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.head` + * - `.btnsContainer` + * - `.input` + * - `.inputField` + * - `.searchButton` + * - `.btnsBlock` + * + * For more details on the reusable classes, refer to the global CSS file. */ const Requests = (): JSX.Element => { // Translation hooks for internationalization diff --git a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx index 68ecfeaced..48711273ba 100644 --- a/src/screens/FundCampaignPledge/FundCampaignPledge.tsx +++ b/src/screens/FundCampaignPledge/FundCampaignPledge.tsx @@ -25,6 +25,29 @@ import ProgressBar from 'react-bootstrap/ProgressBar'; import SortingButton from 'subComponents/SortingButton'; +/** + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.editButton` + * - `.input` + * - `.inputField` + * - `.searchButton` + * - `.dropdown` + * + * For more details on the reusable classes, refer to the global CSS file. + */ + interface InterfaceCampaignInfo { name: string; goal: number; diff --git a/src/screens/FundCampaignPledge/PledgeModal.tsx b/src/screens/FundCampaignPledge/PledgeModal.tsx index a93d2c8f1d..1d9246b610 100644 --- a/src/screens/FundCampaignPledge/PledgeModal.tsx +++ b/src/screens/FundCampaignPledge/PledgeModal.tsx @@ -67,6 +67,23 @@ export interface InterfacePledgeModal { * - Calls `createPledge` mutation to create a new pledge. * * Success or error messages are displayed using toast notifications based on the result of the mutation. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ const PledgeModal: React.FC = ({ diff --git a/src/screens/ManageTag/EditUserTagModal.tsx b/src/screens/ManageTag/EditUserTagModal.tsx index f75c19cbb8..93a6feb45c 100644 --- a/src/screens/ManageTag/EditUserTagModal.tsx +++ b/src/screens/ManageTag/EditUserTagModal.tsx @@ -6,6 +6,26 @@ import styles from '../../style/app.module.css'; /** * Edit UserTag Modal component for the Manage Tag screen. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.modalHeader` + * - `.inputField` + * - `.removeButton` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ export interface InterfaceEditUserTagModalProps { diff --git a/src/screens/ManageTag/ManageTag.tsx b/src/screens/ManageTag/ManageTag.tsx index b0748a9bf3..649f9ade48 100644 --- a/src/screens/ManageTag/ManageTag.tsx +++ b/src/screens/ManageTag/ManageTag.tsx @@ -41,6 +41,24 @@ import SortingButton from 'subComponents/SortingButton'; /** * Component that renders the Manage Tag screen when the app navigates to '/orgtags/:orgId/manageTag/:tagId'. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.tableHeader` + * - `.editButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ function ManageTag(): JSX.Element { diff --git a/src/screens/ManageTag/RemoveUserTagModal.tsx b/src/screens/ManageTag/RemoveUserTagModal.tsx index 91ba0b38aa..bc2681b097 100644 --- a/src/screens/ManageTag/RemoveUserTagModal.tsx +++ b/src/screens/ManageTag/RemoveUserTagModal.tsx @@ -5,6 +5,25 @@ import styles from '../../style/app.module.css'; /** * Remove UserTag Modal component for the Manage Tag screen. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.modalHeader` + * - `.removeButton` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ export interface InterfaceRemoveUserTagModalProps { diff --git a/src/screens/ManageTag/UnassignUserTagModal.tsx b/src/screens/ManageTag/UnassignUserTagModal.tsx index d5448667d1..83c6ee18b9 100644 --- a/src/screens/ManageTag/UnassignUserTagModal.tsx +++ b/src/screens/ManageTag/UnassignUserTagModal.tsx @@ -4,6 +4,25 @@ import { Button, Modal } from 'react-bootstrap'; import styles from '../../style/app.module.css'; /** * Unassign UserTag Modal component for the Manage Tag screen. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.modalHeader` + * - `.removeButton` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ export interface InterfaceUnassignUserTagModalProps { diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx index 555eb0beff..4aaa9bfa32 100644 --- a/src/screens/OrgList/OrgList.tsx +++ b/src/screens/OrgList/OrgList.tsx @@ -30,6 +30,26 @@ import styles from '../../style/app.module.css'; import OrganizationModal from './OrganizationModal'; import SortingButton from 'subComponents/SortingButton'; +/** + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.inputField` + * - `.searchButton` + * + * For more details on the reusable classes, refer to the global CSS file. + */ + function orgList(): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'orgList' }); const { t: tCommon } = useTranslation('common'); diff --git a/src/screens/OrgPost/OrgPost.tsx b/src/screens/OrgPost/OrgPost.tsx index 62a58f0e1a..74bc79d873 100644 --- a/src/screens/OrgPost/OrgPost.tsx +++ b/src/screens/OrgPost/OrgPost.tsx @@ -47,6 +47,25 @@ interface InterfaceOrgPost { * It also provides the functionality to create a new post. The user can also sort the posts based on the date of creation. * The user can also search for a post based on the title of the post. * @returns JSX.Element which contains the posts of the organization. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.inputField` + * - `.removeButton` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ function orgPost(): JSX.Element { const { t } = useTranslation('translation', { diff --git a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx index 099a897435..878ce10d60 100644 --- a/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx +++ b/src/screens/OrganizationActionItems/ItemUpdateStatusModal.tsx @@ -8,6 +8,26 @@ import { UPDATE_ACTION_ITEM_MUTATION } from 'GraphQl/Mutations/ActionItemMutatio import { toast } from 'react-toastify'; import type { InterfaceActionItemInfo } from 'utils/interfaces'; +/** + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.addButton` + * - `.removeButton` + * + * For more details on the reusable classes, refer to the global CSS file. + */ + export interface InterfaceItemUpdateStatusModalProps { isOpen: boolean; hide: () => void; diff --git a/src/screens/OrganizationEvents/OrganizationEvents.tsx b/src/screens/OrganizationEvents/OrganizationEvents.tsx index d07631b64e..e2e53ed8ab 100644 --- a/src/screens/OrganizationEvents/OrganizationEvents.tsx +++ b/src/screens/OrganizationEvents/OrganizationEvents.tsx @@ -52,6 +52,25 @@ export enum ViewType { * The component uses the useLocalStorage hook to get the user details from the local storage. * * @returns JSX.Element to display the Organization Events Page + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.inputField` + * - `.switch` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ function organizationEvents(): JSX.Element { const { t } = useTranslation('translation', { diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx index a57c6e707a..a55d74825c 100644 --- a/src/screens/OrganizationFundCampaign/CampaignModal.tsx +++ b/src/screens/OrganizationFundCampaign/CampaignModal.tsx @@ -24,6 +24,23 @@ import type { InterfaceCampaignInfo } from 'utils/interfaces'; /** * Props for the CampaignModal component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ export interface InterfaceCampaignModal { isOpen: boolean; diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx index c4d85a0eef..b826c7b645 100644 --- a/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx +++ b/src/screens/OrganizationFundCampaign/OrganizationFundCampagins.tsx @@ -74,6 +74,30 @@ const dataGridStyle = { * - Shows error and loading states using `Loader` and error message components. * * @returns The rendered component including breadcrumbs, search and filter controls, data grid, and modals. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.editButton` + * - `.head` + * - `.btnsContainer` + * - `.input` + * - `.inputField` + * - `.searchButon` + * - `.btnsBlock` + * - `.dropdown` + * + * For more details on the reusable classes, refer to the global CSS file. */ const orgFundCampaign = (): JSX.Element => { const { t } = useTranslation('translation', { diff --git a/src/screens/OrganizationFunds/FundModal.tsx b/src/screens/OrganizationFunds/FundModal.tsx index ab02902c2f..e5c44cd2e0 100644 --- a/src/screens/OrganizationFunds/FundModal.tsx +++ b/src/screens/OrganizationFunds/FundModal.tsx @@ -48,6 +48,23 @@ export interface InterfaceFundModal { * - `handleChange(event: React.ChangeEvent)`: Updates the state based on user input. * * @returns The rendered modal dialog. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.switch` + * + * For more details on the reusable classes, refer to the global CSS file. */ const FundModal: React.FC = ({ isOpen, diff --git a/src/screens/OrganizationFunds/OrganizationFunds.tsx b/src/screens/OrganizationFunds/OrganizationFunds.tsx index 3794da0338..d06e1bd355 100644 --- a/src/screens/OrganizationFunds/OrganizationFunds.tsx +++ b/src/screens/OrganizationFunds/OrganizationFunds.tsx @@ -75,6 +75,29 @@ const dataGridStyle = { * - `handleClick(fundId: string)`: Navigates to the campaign page for the specified fund. * * @returns The rendered component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.tableHeader` + * - `.subtleBlueGrey` + * - `.head` + * - `.btnsContainer` + * - `.input` + * - `.inputField` + * - `.searchButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ const organizationFunds = (): JSX.Element => { const { t } = useTranslation('translation', { diff --git a/src/screens/OrganizationPeople/AddMember.tsx b/src/screens/OrganizationPeople/AddMember.tsx index a6f8fbe4b0..5cf76f9171 100644 --- a/src/screens/OrganizationPeople/AddMember.tsx +++ b/src/screens/OrganizationPeople/AddMember.tsx @@ -58,6 +58,24 @@ const StyledTableRow = styled(TableRow)(() => ({ * ORGANIZATIONS_MEMBER_CONNECTION_LIST, * USERS_CONNECTION_LIST, * ADD_MEMBER_MUTATION,SIGNUP_MUTATION. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.removeButton` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ function AddMember(): JSX.Element { const { t: translateOrgPeople } = useTranslation('translation', { diff --git a/src/screens/OrganizationTags/OrganizationTags.tsx b/src/screens/OrganizationTags/OrganizationTags.tsx index 39a2a26032..0539466364 100644 --- a/src/screens/OrganizationTags/OrganizationTags.tsx +++ b/src/screens/OrganizationTags/OrganizationTags.tsx @@ -34,6 +34,25 @@ import SortingButton from 'subComponents/SortingButton'; * * This component does not accept any props and is responsible for displaying * the content associated with the corresponding route. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.editButton` + * - `.inputField` + * - `.removeButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ function OrganizationTags(): JSX.Element { diff --git a/src/screens/SubTags/SubTags.tsx b/src/screens/SubTags/SubTags.tsx index cb2f7ba053..c9ccc4d28c 100644 --- a/src/screens/SubTags/SubTags.tsx +++ b/src/screens/SubTags/SubTags.tsx @@ -35,6 +35,26 @@ import SortingButton from 'subComponents/SortingButton'; * * This component does not accept any props and is responsible for displaying * the content associated with the corresponding route. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.editButton` + * - `.modalHeader` + * - `.inputField` + * - `.removeButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ function SubTags(): JSX.Element { diff --git a/src/style/app.module.css b/src/style/app.module.css index fea01199a5..1db6012eae 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -1,3 +1,42 @@ +/** + * CSS Methodology for Common Styles: + * + * This project aims to reduce CSS duplication by merging similar styles across components + * into reusable global classes. This ensures consistency and simplifies maintenance. + * + * Steps for contributors: + * 1. Identify duplicate or similar styles in different components (e.g., buttons, modals). + * 2. Create a global class with a clear, descriptive name (e.g., .addButton, .removeButton). + * 3. Use the new global class in all components requiring that style. + * + * Naming Convention: + * - Use lowercase, descriptive names for global classes (e.g., .addButton, .removeButton). + * - Keep names generic enough for reuse but clear in their purpose. + * + * Example: + * Instead of component-specific classes like: + * .greenregbtnOrganizationFundCampaign, .greenregbtnPledge (used in two different components for same functionality) + * Use: + * .addButton (a single reusable class in the global CSS file that is used for functionalities that add/create tasks) + * + * Global Classes: + * `.inputField` (for form input fields) + * `.searchButton` (for form input field search button) + * `.addButton` (for buttons that add/create task) + * `.removeButton` (for buttons that remove/delete task) + * `.modalHeader` (for header section of any modal) + * `.editButton` (for buttons inside table) + * `.switch` (for form toggles) + * `.regularBtn` (for a simple blue button) + * `.tableHeader` (for header section of any table component) + * `.subtleBlueGrey` (for blue Text) + * + * + * GLobal Varibles: + * --light-blue (for light blue contrast) + * --dark-blue (for dark blue contrast) + */ + :root { /* Neutral Colors */ --grey-light: #eaebef; @@ -106,6 +145,7 @@ --primary-border-solid: 1px solid var(--dropdown-border-color); --light-blue: #a8c7fa; --dark-blue: #1778f2; + --remove-button-color: #c8102e; --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* breakpoints */ @@ -498,6 +538,7 @@ .addButton { margin-bottom: 10px; + color: var(--brown-color); background-color: var(--light-blue); border-color: var(--grey-bg-color); } @@ -510,8 +551,9 @@ .removeButton { margin-bottom: 10px; background-color: var(--delete-button-bg); - color: var(--delete-button-color); + color: var(--remove-button-color); margin-right: 10px; + --bs-btn-border-color: #dc3545; } .removeButton:is(:hover, :active, :focus) { From 7df4a857a27e7d4f0db0da1a2bfe073a83b3099e Mon Sep 17 00:00:00 2001 From: rahul Date: Thu, 16 Jan 2025 20:53:36 +0530 Subject: [PATCH 09/15] fixed linting --- 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 1db6012eae..4b0b1f90b6 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -15,9 +15,9 @@ * * Example: * Instead of component-specific classes like: - * .greenregbtnOrganizationFundCampaign, .greenregbtnPledge (used in two different components for same functionality) + * `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge` (used in two different components for same functionality) * Use: - * .addButton (a single reusable class in the global CSS file that is used for functionalities that add/create tasks) + * `.addButton` (a single reusable class in the global CSS file that is used for functionalities that add/create tasks) * * Global Classes: * `.inputField` (for form input fields) From 50566a0e433e44a4996422b9fe590dbeafa08ba0 Mon Sep 17 00:00:00 2001 From: rahul Date: Sun, 19 Jan 2025 21:03:14 +0530 Subject: [PATCH 10/15] SuperAdmin and Users CSS Updated --- src/assets/css/app.css | 4 +- src/components/EventCalendar/EventHeader.tsx | 11 +- .../UpdateSession/UpdateSession.tsx | 25 +- .../DonationCard/DonationCard.module.css | 41 - .../UserPortal/DonationCard/DonationCard.tsx | 25 +- .../OrganizationCard.module.css | 149 --- .../OrganizationCard/OrganizationCard.tsx | 10 +- .../PeopleCard/PeopleCard.module.css | 33 - .../UserPortal/PeopleCard/PeopleCard.tsx | 21 +- .../UserPortal/PostCard/PostCard.tsx | 25 +- .../PromotedPost/PromotedPost.module.css | 61 - .../UserPortal/PromotedPost/PromotedPost.tsx | 25 +- .../StartPostModal/StartPostModal.module.css | 50 - .../StartPostModal/StartPostModal.tsx | 31 +- .../UsersTableItem/UsersTableItem.module.css | 26 - .../UsersTableItem/UsersTableItem.tsx | 46 +- src/screens/BlockUser/BlockUser.tsx | 4 - .../CommunityProfile/CommunityProfile.tsx | 44 +- src/screens/OrgList/OrgList.tsx | 15 +- src/screens/OrgList/OrganizationModal.tsx | 42 +- .../UserPortal/Campaigns/Campaigns.module.css | 137 -- .../UserPortal/Campaigns/Campaigns.tsx | 105 +- .../UserPortal/Campaigns/PledgeModal.tsx | 4 +- .../UserPortal/Donate/Donate.module.css | 84 -- src/screens/UserPortal/Donate/Donate.tsx | 36 +- src/screens/UserPortal/Events/Events.tsx | 407 +++--- .../Organizations/Organizations.module.css | 145 --- .../Organizations/Organizations.tsx | 114 +- .../UserPortal/People/People.module.css | 78 -- src/screens/UserPortal/People/People.tsx | 84 +- .../UserPortal/Pledges/Pledges.module.css | 202 --- src/screens/UserPortal/Pledges/Pledges.tsx | 30 +- src/screens/UserPortal/Posts/Posts.module.css | 191 --- src/screens/UserPortal/Posts/Posts.tsx | 73 +- .../UserPortal/Volunteer/Actions/Actions.tsx | 24 +- .../UserPortal/Volunteer/Groups/Groups.tsx | 19 +- .../Volunteer/Invitations/Invitations.tsx | 21 +- .../UpcomingEvents/UpcomingEvents.tsx | 84 +- .../Volunteer/VolunteerManagement.tsx | 27 +- src/screens/Users/Users.tsx | 69 +- src/style/app.module.css | 1138 ++++++++++++++--- 41 files changed, 1918 insertions(+), 1842 deletions(-) delete mode 100644 src/components/UserPortal/DonationCard/DonationCard.module.css delete mode 100644 src/components/UserPortal/OrganizationCard/OrganizationCard.module.css delete mode 100644 src/components/UserPortal/PeopleCard/PeopleCard.module.css delete mode 100644 src/components/UserPortal/PromotedPost/PromotedPost.module.css delete mode 100644 src/components/UserPortal/StartPostModal/StartPostModal.module.css delete mode 100644 src/components/UsersTableItem/UsersTableItem.module.css delete mode 100644 src/screens/UserPortal/Campaigns/Campaigns.module.css delete mode 100644 src/screens/UserPortal/Donate/Donate.module.css delete mode 100644 src/screens/UserPortal/Organizations/Organizations.module.css delete mode 100644 src/screens/UserPortal/People/People.module.css delete mode 100644 src/screens/UserPortal/Pledges/Pledges.module.css delete mode 100644 src/screens/UserPortal/Posts/Posts.module.css diff --git a/src/assets/css/app.css b/src/assets/css/app.css index 16af7c92fb..a007e0ca34 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -2875,7 +2875,7 @@ textarea.form-control-lg { width: 1rem; height: 1rem; margin-top: -0.25rem; - background-color: #31bb6b; + background-color: #1778f2; border: 0; border-radius: 1rem; transition: @@ -2900,7 +2900,7 @@ textarea.form-control-lg { height: 0.5rem; color: transparent; cursor: pointer; - background-color: var(--bs-tertiary-bg); + background-color: #1778f2; border-color: transparent; border-radius: 1rem; } diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx index 93e1612a4c..0cdf5f7610 100644 --- a/src/components/EventCalendar/EventHeader.tsx +++ b/src/components/EventCalendar/EventHeader.tsx @@ -39,6 +39,8 @@ interface InterfaceEventHeaderProps { * * ### Global CSS Classes used: * - `.dropdown` + * - `.btnsContainer` + * - `.btnsBlock` * * For more details on the reusable classes, refer to the global CSS file. */ @@ -57,7 +59,7 @@ function eventHeader({ className={styles.calendarEventHeader} data-testid="calendarEventHeader" > -
+
- {/*
*/} -
+
+
+
+
+
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css b/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css deleted file mode 100644 index 15634f7ad0..0000000000 --- a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css +++ /dev/null @@ -1,149 +0,0 @@ -.orgCard { - background-color: var(--bs-white); - margin: 0.5rem; - height: calc(120px + 2rem); - padding: 1rem; - border-radius: 8px; - outline: 1px solid var(--bs-gray-200); - position: relative; -} - -.orgCard .innerContainer { - display: flex; -} - -.orgCard .innerContainer .orgImgContainer { - display: flex; - justify-content: center; - align-items: center; - position: relative; - overflow: hidden; - border-radius: 4px; - width: 125px; - height: 120px; - object-fit: contain; - background-color: var(--bs-gray-200); -} - -.orgCard .innerContainer .content { - flex: 1; - margin-left: 1rem; - width: 70%; - margin-top: 0.7rem; -} - -.orgCard button { - position: absolute; - bottom: 1rem; - right: 1rem; - z-index: 1; -} - -.joinBtn { - display: flex; - justify-content: space-around; - width: 8rem; - border-width: medium; -} - -.joinedBtn { - display: flex; - justify-content: space-around; - width: 8rem; -} - -.withdrawBtn { - display: flex; - justify-content: space-around; - width: 8rem; -} - -.orgName { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - font-size: 1rem; -} - -.orgdesc { - font-size: 0.9rem; - color: var(--bs-gray-600); - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 1; - line-clamp: 1; - -webkit-box-orient: vertical; - max-width: 20rem; -} - -.orgadmin { - font-size: 0.9rem; -} - -.orgmember { - font-size: 0.9rem; -} - -.address { - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 1; - line-clamp: 1; - -webkit-box-orient: vertical; - align-items: center; -} - -.address h6 { - font-size: 0.9rem; - color: var(--bs-gray-600); -} - -@media (max-width: 1420px) { - .orgCard { - width: 100%; - } -} - -@media (max-width: 550px) { - .orgCard { - width: 100%; - } - - .orgCard { - height: unset; - margin: 0.5rem 0; - padding: 1.25rem 1.5rem; - } - - .orgCard .innerContainer .orgImgContainer { - margin-bottom: 0.8rem; - } - - .orgCard .innerContainer { - flex-direction: column; - } - - .orgCard .innerContainer .orgImgContainer img { - height: auto; - width: 100%; - } - - .orgCard .innerContainer .content { - margin-left: 0; - } - - .orgCard button { - bottom: 0; - right: 0; - position: relative; - margin-left: auto; - display: block; - } - .joinBtn, - .joinedBtn, - .withdrawBtn { - display: flex; - justify-content: space-around; - width: 100%; - } -} diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx index e1c2c23beb..27a359c223 100644 --- a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx +++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import styles from './OrganizationCard.module.css'; +import styles from '../../../style/app.module.css'; import { Button } from 'react-bootstrap'; import { Tooltip } from '@mui/material'; import { useTranslation } from 'react-i18next'; @@ -189,12 +189,12 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
{props.membershipRequestStatus === 'accepted' && ( @@ -214,8 +214,8 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element { diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.module.css b/src/components/UserPortal/PeopleCard/PeopleCard.module.css deleted file mode 100644 index fe9fc3bcbd..0000000000 --- a/src/components/UserPortal/PeopleCard/PeopleCard.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.mainContainer { - width: 100%; - display: flex; - flex-direction: row; - padding: 10px; - cursor: pointer; - background-color: white; - border-radius: 10px; - box-shadow: 2px 2px 8px 0px #c8c8c8; - overflow: hidden; -} - -.personDetails { - display: flex; - flex-direction: column; - justify-content: center; -} - -.personImage { - border-radius: 50%; - margin-right: 20px; - max-width: 70px; -} - -.borderBox { - border: 1px solid #dddddd; - box-shadow: 5px 5px 4px 0px #31bb6b1f; - border-radius: 4px; -} - -.greenText { - color: #31bb6b; -} diff --git a/src/components/UserPortal/PeopleCard/PeopleCard.tsx b/src/components/UserPortal/PeopleCard/PeopleCard.tsx index e6b6088801..83823b1d78 100644 --- a/src/components/UserPortal/PeopleCard/PeopleCard.tsx +++ b/src/components/UserPortal/PeopleCard/PeopleCard.tsx @@ -1,6 +1,6 @@ import React from 'react'; import aboutImg from 'assets/images/defaultImg.png'; -import styles from './PeopleCard.module.css'; +import styles from '../../../style/app.module.css'; /** * Props interface for the PeopleCard component. @@ -26,6 +26,23 @@ interface InterfaceOrganizationCardProps { * * @param props - The properties passed to the component. * @returns JSX.Element representing a card with the person's details. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.blueText` + * + * For more details on the reusable classes, refer to the global CSS file. */ function peopleCard(props: InterfaceOrganizationCardProps): JSX.Element { // Determine the image URL; use default image if no image URL is provided @@ -60,7 +77,7 @@ function peopleCard(props: InterfaceOrganizationCardProps): JSX.Element { {/* Person's role with additional styling */}
- {props.role} + {props.role}
diff --git a/src/components/UserPortal/PostCard/PostCard.tsx b/src/components/UserPortal/PostCard/PostCard.tsx index 1ac693b85a..0438e684f3 100644 --- a/src/components/UserPortal/PostCard/PostCard.tsx +++ b/src/components/UserPortal/PostCard/PostCard.tsx @@ -65,6 +65,23 @@ interface InterfaceCommentCardProps { * * @param props - The properties passed to the component including post details, comments, and related actions. * @returns JSX.Element representing a post card with interactive features. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ export default function postCard(props: InterfacePostCard): JSX.Element { const { t } = useTranslation('translation', { @@ -324,8 +341,7 @@ export default function postCard(props: InterfacePostCard): JSX.Element {
- {/*
*/} - {/*
*/}
{ />
- {/*
*/} - {/*
*/}
{/* Table */} {loadingMembers === false && diff --git a/src/screens/CommunityProfile/CommunityProfile.tsx b/src/screens/CommunityProfile/CommunityProfile.tsx index 349069f9bc..e0fd792e95 100644 --- a/src/screens/CommunityProfile/CommunityProfile.tsx +++ b/src/screens/CommunityProfile/CommunityProfile.tsx @@ -36,6 +36,25 @@ import UpdateSession from '../../components/UpdateSession/UpdateSession'; * ```tsx * * ``` + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.inputField` + * - `.outlineButton` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ const CommunityProfile = (): JSX.Element => { // Translation hooks for internationalization @@ -226,7 +245,7 @@ const CommunityProfile = (): JSX.Element => { name="name" value={profileVariable.name} onChange={handleOnChange} - className="mb-3" + className={`mb-3 ${styles.inputField}`} placeholder={t('communityName')} autoComplete="off" required @@ -242,7 +261,7 @@ const CommunityProfile = (): JSX.Element => { name="websiteLink" value={profileVariable.websiteLink} onChange={handleOnChange} - className="mb-3" + className={`mb-3 ${styles.inputField}`} placeholder={t('wesiteLink')} autoComplete="off" required @@ -272,7 +291,7 @@ const CommunityProfile = (): JSX.Element => { logoUrl: base64file ?? '', }); }} - className="mb-3" + className={`mb-3 ${styles.inputField}`} autoComplete="off" required /> @@ -289,7 +308,7 @@ const CommunityProfile = (): JSX.Element => { id="facebook" name="facebook" data-testid="facebook" - className={styles.socialInput} + className={`mb-0 mt-0 ${styles.inputField}`} value={profileVariable.facebook} onChange={handleOnChange} placeholder={t('url')} @@ -303,7 +322,7 @@ const CommunityProfile = (): JSX.Element => { id="instagram" name="instagram" data-testid="instagram" - className={styles.socialInput} + className={`mb-0 mt-0 ${styles.inputField}`} value={profileVariable.instagram} onChange={handleOnChange} placeholder={t('url')} @@ -317,7 +336,7 @@ const CommunityProfile = (): JSX.Element => { id="X" name="X" data-testid="X" - className={styles.socialInput} + className={`mb-0 mt-0 ${styles.inputField}`} value={profileVariable.X} onChange={handleOnChange} placeholder={t('url')} @@ -331,7 +350,7 @@ const CommunityProfile = (): JSX.Element => { id="linkedIn" name="linkedIn" data-testid="linkedIn" - className={styles.socialInput} + className={`mb-0 mt-0 ${styles.inputField}`} value={profileVariable.linkedIn} onChange={handleOnChange} placeholder={t('url')} @@ -345,7 +364,7 @@ const CommunityProfile = (): JSX.Element => { id="github" name="github" data-testid="github" - className={styles.socialInput} + className={`mb-0 mt-0 ${styles.inputField}`} value={profileVariable.github} onChange={handleOnChange} placeholder={t('url')} @@ -359,7 +378,7 @@ const CommunityProfile = (): JSX.Element => { id="youtube" name="youtube" data-testid="youtube" - className={styles.socialInput} + className={`mb-0 mt-0 ${styles.inputField}`} value={profileVariable.youtube} onChange={handleOnChange} placeholder={t('url')} @@ -373,7 +392,7 @@ const CommunityProfile = (): JSX.Element => { id="reddit" name="reddit" data-testid="reddit" - className={styles.socialInput} + className={`mb-0 mt-0 ${styles.inputField}`} value={profileVariable.reddit} onChange={handleOnChange} placeholder={t('url')} @@ -387,7 +406,7 @@ const CommunityProfile = (): JSX.Element => { id="slack" name="slack" data-testid="slack" - className={styles.socialInput} + className={`mb-0 mt-0 ${styles.inputField}`} value={profileVariable.slack} onChange={handleOnChange} placeholder={t('url')} @@ -399,7 +418,7 @@ const CommunityProfile = (): JSX.Element => { className={`${styles.btn} d-flex justify-content-end gap-3 my-3`} > diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx index 4aaa9bfa32..a88437bde7 100644 --- a/src/screens/OrgList/OrgList.tsx +++ b/src/screens/OrgList/OrgList.tsx @@ -46,6 +46,11 @@ import SortingButton from 'subComponents/SortingButton'; * ### Global CSS Classes used: * - `.inputField` * - `.searchButton` + * - `.btnsContainer` + * - `.input` + * - `.btnsBlock` + * - `.dropdown` + * - `.modalHeader` * * For more details on the reusable classes, refer to the global CSS file. */ @@ -349,7 +354,7 @@ function orgList(): JSX.Element { return ( <> {/* Buttons Container */} -
+
-
+
+
+
{superAdmin && (
-
-
- - setSortBy( - value as - | 'fundingGoal_ASC' - | 'fundingGoal_DESC' - | 'endDate_ASC' - | 'endDate_DESC', - ) - } - dataTestIdPrefix="filter" - buttonLabel={tCommon('sort')} - /> -
-
- {/* Button to navigate to the user's pledges */} - -
+
+ + setSortBy( + value as + | 'fundingGoal_ASC' + | 'fundingGoal_DESC' + | 'endDate_ASC' + | 'endDate_DESC', + ) + } + dataTestIdPrefix="filter" + buttonLabel={tCommon('sort')} + /> +
+
+ {/* Button to navigate to the user's pledges */} +
{campaigns.length < 1 ? ( @@ -198,7 +220,7 @@ const Campaigns = (): JSX.Element => { }>
@@ -245,6 +267,7 @@ const Campaigns = (): JSX.Element => { data-testid="addPledgeBtn" disabled={new Date(campaign.endDate) < new Date()} onClick={() => openModal(campaign)} + className={styles.outlineBtn} > {t('addPledge')} @@ -254,13 +277,13 @@ const Campaigns = (): JSX.Element => { Amount Raised: -
+
$0 $1000 diff --git a/src/screens/UserPortal/Campaigns/PledgeModal.tsx b/src/screens/UserPortal/Campaigns/PledgeModal.tsx index 44cc82401b..f6306de75e 100644 --- a/src/screens/UserPortal/Campaigns/PledgeModal.tsx +++ b/src/screens/UserPortal/Campaigns/PledgeModal.tsx @@ -8,7 +8,7 @@ import type { InterfacePledgeInfo, InterfaceUserInfo, } from 'utils/interfaces'; -import styles from './Campaigns.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'; @@ -360,7 +360,7 @@ const PledgeModal: React.FC = ({ {/* Button to submit the pledge form */} @@ -197,7 +217,7 @@ export default function donate(): JSX.Element { {t('donateForThe')} {organizationDetails.name}
- + {t('donate')} @@ -252,7 +272,7 @@ export default function donate(): JSX.Element {
{t('yourPreviousDonations')}
{loading ? ( diff --git a/src/screens/UserPortal/Events/Events.tsx b/src/screens/UserPortal/Events/Events.tsx index 2e3cadedc3..90475efcc6 100644 --- a/src/screens/UserPortal/Events/Events.tsx +++ b/src/screens/UserPortal/Events/Events.tsx @@ -39,6 +39,25 @@ const timeToDayJs = (time: string): Dayjs => { * It includes a calendar view, a form to create new events, and various filters and settings. * * @returns The JSX element for the events management interface. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.inputField` + * - `.switch` + * - `.addButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ export default function events(): JSX.Element { const { t } = useTranslation('translation', { @@ -213,206 +232,212 @@ export default function events(): JSX.Element { return ( <> -
-
+ {/*
*/} +
+
-
- +
+ {/*
*/} + + {/*
*/} + + +

+ {t('eventDetails')} +

+ + + + + + + + + + -
- - -

{t('eventDetails')}

- - - - - - +
+ { + if (date) { + setStartDate(date?.toDate()); + setEndDate(date?.toDate()); + } + }} + data-testid="eventStartDate" /> - - +
+ { + if (date) { + setEndDate(date?.toDate()); + } + }} + minDate={dayjs(startDate)} + data-testid="eventEndDate" /> - - +
+
+
+ { + if (time) { + setStartTime(time?.format('HH:mm:ss')); + setEndTime(time?.format('HH:mm:ss')); + } + }} + disabled={isAllDay} /> -
-
- { - if (date) { - setStartDate(date?.toDate()); - setEndDate(date?.toDate()); - } - }} - data-testid="eventStartDate" - /> -
-
- { - if (date) { - setEndDate(date?.toDate()); - } - }} - minDate={dayjs(startDate)} - data-testid="eventEndDate" - /> -
-
-
-
- { - if (time) { - setStartTime(time?.format('HH:mm:ss')); - setEndTime(time?.format('HH:mm:ss')); - } - }} - disabled={isAllDay} - /> -
-
- { - if (time) { - setEndTime(time?.format('HH:mm:ss')); - } - }} - minTime={timeToDayJs(startTime)} - disabled={isAllDay} - /> -
-
-
-
- - setIsAllDay(!isAllDay)} - /> -
-
- - setIsRecurring(!isRecurring)} - /> -
-
-
-
- - setIsPublic(!isPublic)} - /> -
-
- - setIsRegisterable(!isRegisterable)} - /> -
-
-
-
- - - setCreateChatCheck(!createChatCheck) - } - /> -
-
- - - - -
-
+
+
+ { + if (time) { + setEndTime(time?.format('HH:mm:ss')); + } + }} + minTime={timeToDayJs(startTime)} + disabled={isAllDay} + /> +
+
+
+
+ + setIsAllDay(!isAllDay)} + /> +
+
+ + setIsRecurring(!isRecurring)} + /> +
+
+
+
+ + setIsPublic(!isPublic)} + /> +
+
+ + setIsRegisterable(!isRegisterable)} + /> +
+
+
+
+ + setCreateChatCheck(!createChatCheck)} + /> +
+
+ + + + + + {/*
*/} ); } diff --git a/src/screens/UserPortal/Organizations/Organizations.module.css b/src/screens/UserPortal/Organizations/Organizations.module.css deleted file mode 100644 index 27262932d5..0000000000 --- a/src/screens/UserPortal/Organizations/Organizations.module.css +++ /dev/null @@ -1,145 +0,0 @@ -.borderNone { - border: none; -} - -.colorWhite { - color: white; -} - -.colorLight { - background-color: #f5f5f5; -} - -.mainContainer { - max-height: 100%; - overflow: auto; -} - -.content { - height: fit-content; - min-height: calc(100% - 40px); -} - -.paddingY { - padding: 30px 0px; -} - -.containerHeight { - height: 100vh; - padding: 1rem 1.5rem 0 calc(300px + 1.5rem); -} - -.expand { - padding-left: 4rem; - animation: moveLeft 0.9s ease-in-out; -} - -.contract { - padding-left: calc(300px + 2rem + 1.5rem); - animation: moveRight 0.5s ease-in-out; -} - -.colorPrimary { - background: #31bb6b; -} - -.backgroundWhite { - background-color: white; -} - -.input { - flex: 1; - position: relative; - margin-right: 10px; -} - -.btnsContainer input { - outline: 1px solid var(--bs-gray-400); -} - -.collapseSidebarButton { - position: fixed; - height: 40px; - bottom: 0; - z-index: 9999; - width: calc(300px); - background-color: rgba(245, 245, 245, 0.7); - color: black; - border: none; - border-radius: 0px; -} - -.collapseSidebarButton:hover, -.opendrawer:hover { - opacity: 1; - color: black !important; -} -.opendrawer { - position: fixed; - display: flex; - align-items: center; - justify-content: center; - top: 0; - left: 0; - width: 40px; - height: 100vh; - z-index: 9999; - background-color: rgba(245, 245, 245); - border: none; - border-radius: 0px; - margin-right: 20px; - color: black; -} - -.opendrawer:hover { - transition: background-color 0.5s ease; - background-color: var(--bs-primary); -} -.collapseSidebarButton:hover { - transition: background-color 0.5s ease; - background-color: var(--bs-primary); -} - -@media screen and (max-width: 850px) { - .mainContainer { - width: 100%; - } -} - -@media (max-width: 1120px) { - .collapseSidebarButton { - width: calc(250px + 2rem); - } -} - -@media (max-height: 650px) { - .collapseSidebarButton { - width: 250px; - height: 20px; - } - .opendrawer { - width: 30px; - } -} - -/* For tablets */ -@media (max-width: 820px) { - .containerHeight { - height: 100vh; - padding: 2rem; - } - .opendrawer { - width: 25px; - } - - .contract, - .expand { - animation: none; - } - - .collapseSidebarButton { - width: 100%; - left: 0; - right: 0; - } -} diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx index 4e1033cbc4..2aadd71724 100644 --- a/src/screens/UserPortal/Organizations/Organizations.tsx +++ b/src/screens/UserPortal/Organizations/Organizations.tsx @@ -13,9 +13,33 @@ import React, { useEffect, useState } from 'react'; import { Button, Dropdown, Form, InputGroup } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; import useLocalStorage from 'utils/useLocalstorage'; -import styles from './Organizations.module.css'; +import styles from '../../../style/app.module.css'; import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown'; +/** + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.btnsContainer` + * - `.input` + * - `.inputField` + * - `.searchButton` + * - `.btnsBlock` + * - `.dropdown` + * + * For more details on the reusable classes, refer to the global CSS file. + */ const { getItem } = useLocalStorage(); interface InterfaceOrganizationCardProps { @@ -321,7 +345,7 @@ export default function organizations(): JSX.Element { : styles.contract }`} > -
+

{t('selectOrganization')}

@@ -330,47 +354,51 @@ export default function organizations(): JSX.Element {
- - - - - - - - - {modes[mode]} - - - {modes.map((value, index) => { - return ( - setMode(index)} - > - {value} - - ); - })} - - +
+ + + + + + +
+ + + {modes[mode]} + + + {modes.map((value, index) => { + return ( + setMode(index)} + > + {value} + + ); + })} + + +
+
-
-
- +
+
+ - - - - {tCommon('filter').toUpperCase()} - - - {modes.map((value, index) => { - return ( - setMode(index)} - > - {value} - - ); - })} - - +
+ + + + {tCommon('filter').toUpperCase()} + + + {modes.map((value, index) => { + return ( + setMode(index)} + > + {value} + + ); + })} + + +
{ @@ -348,7 +367,7 @@ const Pledges = (): JSX.Element => {
-
+
{ dataTestIdPrefix="searchByDrpdwn" buttonLabel={t('searchBy')} /> - +
+
-
-
+
+
{t('startPost')}
- + {t('post')} @@ -347,27 +365,28 @@ export default function home(): JSX.Element {
)}

{t(`yourFeed`)}

-
- {loadingPosts ? ( -
- {tCommon('loading')} -
- ) : ( - <> - {posts.length > 0 ? ( - - {posts.map(({ node }: { node: InterfacePostNode }) => { - const cardProps = getCardProps(node); - return ; - })} - - ) : ( -

- {t(`nothingToShowHere`)} -

- )} - - )} +
+ {loadingPosts ? ( +
+ {tCommon('loading')} +
+ ) : ( + <> + {posts.length > 0 ? ( + + {posts.map(({ node }: { node: InterfacePostNode }) => { + const cardProps = getCardProps(node); + return ; + })} + + ) : ( +

+ {t(`nothingToShowHere`)} +

+ )} + + )} +
handleModalClick(params.row, ModalState.VIEW)} > @@ -336,6 +355,7 @@ function actions(): JSX.Element { data-testid={`statusCheckbox`} checked={params.row.isCompleted} onChange={() => handleModalClick(params.row, ModalState.STATUS)} + className={styles.switch} />
); @@ -365,7 +385,7 @@ function actions(): JSX.Element { /> -
-
-
+
+
+ {/* Search input field and button */} +
+ { + setSearchValue(e.target.value); + debouncedSearch(e.target.value); + }} + data-testid="searchBy" + /> + +
+
{ }>
@@ -247,6 +270,7 @@ const UpcomingEvents = (): JSX.Element => { data-testid="volunteerBtn" disabled={isVolunteered || new Date(endDate) < new Date()} onClick={() => handleVolunteer(_id, null, 'requested')} + className={styles.outlineBtn} > {isVolunteered ? ( diff --git a/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx b/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx index fd90584d62..31aa6a558e 100644 --- a/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx +++ b/src/screens/UserPortal/Volunteer/VolunteerManagement.tsx @@ -11,11 +11,31 @@ import UpcomingEvents from './UpcomingEvents/UpcomingEvents'; import Invitations from './Invitations/Invitations'; import Actions from './Actions/Actions'; import Groups from './Groups/Groups'; +import styles from '../../../style/app.module.css'; /** * List of tabs for the volunteer dashboard. * * Each tab is associated with an icon and value. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.activeTab` + * - `.inActiveTab` + * - `.dropdown` + * + * For more details on the reusable classes, refer to the global CSS file. */ const volunteerDashboardTabs: { value: TabOptions; @@ -93,12 +113,11 @@ const VolunteerManagement = (): JSX.Element => { const translatedText = t(value); const className = selected - ? 'px-4 d-flex align-items-center rounded-3 shadow-sm' - : 'text-secondary bg-white px-4 d-flex align-items-center rounded-3 shadow-sm'; + ? `rounded-3 shadow-sm ${styles.activeTab}` + : `rounded-3 shadow-sm ${styles.inActiveTab}`; const props = { variant, className, - style: { height: '2.5rem' }, onClick: () => setTab(value), 'data-testid': `${value}Btn`, }; @@ -144,7 +163,7 @@ const VolunteerManagement = (): JSX.Element => { id="dropdown-basic" data-testid="tabsDropdownToggle" > - {t(tab)} + {t(tab)} {/* Render dropdown items for each settings category */} diff --git a/src/screens/Users/Users.tsx b/src/screens/Users/Users.tsx index ef9f001f4d..a1afd8c77f 100644 --- a/src/screens/Users/Users.tsx +++ b/src/screens/Users/Users.tsx @@ -60,6 +60,26 @@ import SortingButton from 'subComponents/SortingButton'; * - Shows appropriate messages when no users are found or when search yields no results. * * @returns The rendered `Users` component. + * + * ## CSS Strategy Explanation: + * + * To ensure consistency across the application and reduce duplication, common styles + * (such as button styles) have been moved to the global CSS file. Instead of using + * component-specific classes (e.g., `.greenregbtnOrganizationFundCampaign`, `.greenregbtnPledge`), a single reusable + * class (e.g., .addButton) is now applied. + * + * ### Benefits: + * - **Reduces redundant CSS code. + * - **Improves maintainability by centralizing common styles. + * - **Ensures consistent styling across components. + * + * ### Global CSS Classes used: + * - `.btnsContainer` + * - `.input` + * - `.inputField` + * - `.searchButton` + * + * For more details on the reusable classes, refer to the global CSS file. */ const Users = (): JSX.Element => { const { t } = useTranslation('translation', { keyPrefix: 'users' }); @@ -343,33 +363,32 @@ const Users = (): JSX.Element => { <> {/* Buttons Container */}
-
-
+ + -
+ +
+
Date: Tue, 21 Jan 2025 03:27:05 +0530 Subject: [PATCH 11/15] fixed failing test and resolved converstions --- .../PromotedPost/functions/default.md | 4 ++- src/components/EventCalendar/EventHeader.tsx | 1 - .../UpdateSession/UpdateSession.tsx | 4 +-- .../OrganizationCard/OrganizationCard.tsx | 1 - .../UserPortal/PromotedPost/PromotedPost.tsx | 3 ++ .../StartPostModal/StartPostModal.tsx | 2 +- src/screens/OrgList/OrganizationModal.tsx | 2 +- .../UserPortal/Campaigns/PledgeModal.tsx | 34 +++++++------------ .../UpcomingEvents/UpcomingEvents.tsx | 15 ++++---- 9 files changed, 28 insertions(+), 38 deletions(-) diff --git a/docs/docs/auto-docs/components/UserPortal/PromotedPost/PromotedPost/functions/default.md b/docs/docs/auto-docs/components/UserPortal/PromotedPost/PromotedPost/functions/default.md index d00f9e6291..f08ee9f77a 100644 --- a/docs/docs/auto-docs/components/UserPortal/PromotedPost/PromotedPost/functions/default.md +++ b/docs/docs/auto-docs/components/UserPortal/PromotedPost/PromotedPost/functions/default.md @@ -6,7 +6,7 @@ > **default**(`props`): `JSX.Element` -Defined in: [src/components/UserPortal/PromotedPost/PromotedPost.tsx:39](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/PromotedPost/PromotedPost.tsx#L39) +Defined in: [src/components/UserPortal/PromotedPost/PromotedPost.tsx:41](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/PromotedPost/PromotedPost.tsx#L41) PromotedPost component displays a card representing promoted content. @@ -42,5 +42,7 @@ class (e.g., .addButton) is now applied. - **Ensures consistent styling across components. ### Global CSS Classes used: +- `.cardHeaderPromotedPost` +- `.imageContainerPromotedPost` For more details on the reusable classes, refer to the global CSS file. diff --git a/src/components/EventCalendar/EventHeader.tsx b/src/components/EventCalendar/EventHeader.tsx index 0cdf5f7610..423ab3be8a 100644 --- a/src/components/EventCalendar/EventHeader.tsx +++ b/src/components/EventCalendar/EventHeader.tsx @@ -117,7 +117,6 @@ function eventHeader({
- { - /*istanbul ignore next*/ - description && ( -
- Description: - {description} -
- ) - } + {description && ( +
+ Description: + {description} +
+ )} {volunteerGroups && volunteerGroups.length > 0 && ( Date: Tue, 21 Jan 2025 23:40:07 +0530 Subject: [PATCH 12/15] fixed linting --- src/style/app.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/app.module.css b/src/style/app.module.css index c1c2ddd359..43309bd243 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -39,6 +39,7 @@ * --dark-blue (for dark blue contrast) * --dark-grey-font (for dark grey font) * --dark-grey-border (for dark grey border) + * */ :root { From 83eb9666df38d02755a21209f4e194cc2646d796 Mon Sep 17 00:00:00 2001 From: rahulch07 Date: Wed, 22 Jan 2025 01:27:16 +0530 Subject: [PATCH 13/15] resolved conversation --- src/screens/UserPortal/Organizations/Organizations.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx index e8114a758a..9d69794c79 100644 --- a/src/screens/UserPortal/Organizations/Organizations.tsx +++ b/src/screens/UserPortal/Organizations/Organizations.tsx @@ -357,7 +357,7 @@ export default function organizations(): JSX.Element { Date: Sun, 26 Jan 2025 03:05:23 +0530 Subject: [PATCH 14/15] consolidated color variables --- src/assets/css/app.css | 4 +- src/style/app.module.css | 369 ++++++++++++++++++++++++--------------- 2 files changed, 226 insertions(+), 147 deletions(-) diff --git a/src/assets/css/app.css b/src/assets/css/app.css index 7aef4e8914..34beb0969a 100644 --- a/src/assets/css/app.css +++ b/src/assets/css/app.css @@ -2873,7 +2873,7 @@ textarea.form-control-lg { width: 1rem; height: 1rem; margin-top: -0.25rem; - background-color: #1778f2; + background-color: #31bb6b; border: 0; border-radius: 1rem; transition: @@ -2898,7 +2898,7 @@ textarea.form-control-lg { height: 0.5rem; color: transparent; cursor: pointer; - background-color: #1778f2; + background-color: var(--bs-tertiary-bg); border-color: transparent; border-radius: 1rem; } diff --git a/src/style/app.module.css b/src/style/app.module.css index aab19e3a91..0e45dae750 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -33,13 +33,6 @@ * `.activeTab` (for tabs which are active) * `.inActiveTave` (for tabs which are not selected) * - * - * GLobal Varibles: - * --light-blue (for light blue contrast) - * --dark-blue (for dark blue contrast) - * --dark-grey-font (for dark grey font) - * --dark-grey-border (for dark grey border) - * */ :root { @@ -65,8 +58,7 @@ --loader-color: #febc59; /* Miscellaneous */ - --dark-grey-font: #555555; - --dark-grey-border: #555555; + --blue-color: #0000ff; --light-blue-color: #286fe0; --dimp-white: #b5b5b5; @@ -132,7 +124,6 @@ --background-color: #fff; --dropdown-shadow: #0000004c; --dropdown-color: #555555; - --dropdown-button-bg: #555555; --dropdown-button-fill: #555555; @@ -194,6 +185,7 @@ --bs-warning: #ffc107; --bs-white: #fff; --bs-gray-600: #4b5563; + --bs-gray-500: #9e9e9e; --bs-gray-400: #9ca3af; --bs-gray-300: #d1d5db; --toggle-button-bg: #1e4e8c; @@ -218,6 +210,125 @@ --breakpoint-mobile: 576px; --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; + + --dark-grey: #555555; + --dropdown-font: var(--dark-grey); + --addButton-font: var(--dark-grey); + --addButton-bg: #eaebef; + --regularBtn-font: var(--dark-grey); + --searchIcon-color: var(--dark-grey); + --infoButton-font: var(--dark-grey); + --editButton-font: var(--dark-grey); + --pluginStore-color: var(--dark-grey); + + --dropdown-border: var(--dark-grey); + --createButton-border: var(--dark-grey); + --pluginStoreBtn-border: var(--dark-grey); + + --outlineBtn-bg: var(--white); + --outlineBtn-hover-bg: var(--dark-blue); + --outlineBtn-color: var(--light-blue); + --outlineBtn-border: var(--light-blue); + --outlineBtn-disabled: var(--bs-gray-500); + + --slider-bg: var(--dark-blue); + + --regularBtn-hover-bg: #286fe0; + + --activeTab-bg: var(--grey-light); + --activeTab-color: var(--grey-text); + --activeTab-hover-bg: var(--grey-dark); + --activeTab-hover-color: var(--white); + + --inActiveTab-bg: var(--off-white-color); + --inActiveTab-color: var(--grey-text); + --inActiveTab-hover-bg: var(--grey-light); + --inActiveTab-hover-color: var(--grey-text); + --inActiveTab-hover-border: var(--grey-dark); + + --greenregbtn-border: var(--bs-gray-300); + --greenregbtn-box-shadow: var(--bs-gray-300); + --greenregbtn-bg: var(--bs-primary); + --greenregbtn-color: var(--bs-white); + + --manageBtn-border: var(--grey-border-box-color); + --manageBtn-box-shadow: var(--grey-border-box-color); + /* --manageBtn-bg: var(--bs-primary); */ + --manageBtn-color: var(--bs-white); + + --view-color: var(--bs-gray-600); + + --btncon-input: var(--bs-gray-400); + + --noOutline-input-disabled: var(--black-color); + + --noOutline-textarea-disabled: var(--black-color); + + --active-color: var(--light-blue); + --active-border-color: var(--light-blue); + + --pending-color: #ffc21a; + --pending-border-color: #ffc21a; + --active-bg: var(--white); + --pending-bg: var(--white); + + --userImageUserPost: var(--light-blue); + + --startPostBtn-boxshadow: #00000029; + --startPostBtn-bg: #ffffff00; + --startPostBtn-color: #000; + --startPostBtn-hover-bg: #00000010; + --startPostBtn-hover-color: #000; + --checkboxButton-checked-bg: var(--dark-blue); + --checkboxButton-checked-color: var(--dark-blue); + + --titlemodal-color: var(--grey-bg-color-dark); + + --opendrawer-hover: var(--bs-primary); + + --collapseSidebarButton-hover: var(--bs-primary); + + --orgImgContainer-bg: var(--bs-gray-200); + + --address-h6-color: var(--bs-gray-600); + + --colorlight-bg: #f5f5f5; + + --mainContainer50: #f2f7ff; + + --postActionBtn-bg: var(--white); + --postActionBtn-hover-bg: #f8f8ff; + + --postContainer-bg: var(--white); + --postContainer-border: #dddddd; + + --icons-svg: #000; + --icons-dark-svg: #000; + --iconlabel-color: #000; + + --uploadlink-hover: #00000010; + + --cardHeaderPromotedPost-color: var(--light-blue); + + --bluetext: var(--light-blue); + + --box-bg: var(--white); + --box-border: #dddddd; + + --mainContainerDonateCard-bg: var(--white); + --mainContainerDonateCard-border: #dddddd; + + --pluginStoreBtn-bg: var(--bs-white); + + --updateTimeoutValue-color: var(--dark-blue); + + --leftDrawer-profile-bg: var(--white); + + --createButtonEventHeader-bg: var(--grey-bg-color); + --createButtonEventHeader-color: var(--dark-grey); + --createButtonEventHeader-border: var(--dark-grey); + --createButtonEventHeader-hover-color: var(--black-color); + --createButtonEventHeader-boxshadow: rgba(0, 0, 0, 0.3); } .fonts { @@ -387,8 +498,8 @@ .dropdown { background-color: var(--sortBtn-bg) !important; min-width: 150px; - border: 1px solid var(--dark-grey-border); - color: var(--dark-grey-font) !important; + border: 1px solid var(--dropdown-border); + color: var(--dropdown-font) !important; position: relative; display: inline-block; /* margin-top: 10px; @@ -405,13 +516,13 @@ :checked ) { box-shadow: 2.5px 2.5px 2.5px var(--dropdown-shadow); - border: 1px solid var(--dark-grey-border) !important; - color: var(--dark-grey-font) !important; + border: 1px solid var(--dropdown-border) !important; + color: var(--dropdown-font) !important; } .dropdown:is(:focus, :focus-visible) { outline: 2px solid var(--highlight-color, var(--search-button-bg)); - border: 1px solid var(--dark-grey-border); + border: 1px solid var(--dropdown-border); } .dropdown:not(:focus) { @@ -428,7 +539,7 @@ .dropdownItem { background-color: var(--bs-white) !important; - color: var(--dark-grey-font) !important; + color: var(--dropdown-font) !important; border: none !important; } @@ -444,7 +555,7 @@ --dropdown-hover-color, var(--grey-border-box-color) ) !important; - color: var(--dark-grey-font) !important; + color: var(--dropdown-font) !important; outline: none !important; box-shadow: 0 0 4px var(--highlight-color, var(--search-button-bg)); } @@ -537,13 +648,13 @@ color: var(--black-color) !important; /* margin-top: 10px; */ /* margin-left: 5px; */ - border: 1px solid var(--dark-grey-border); + border: 1px solid var(--createButton-border); } .createButton:hover { background-color: var(--grey-bg-color) !important; color: var(--black-color) !important; - border: 1px solid var(--dark-grey-border) !important; + border: 1px solid var(--createButton-border) !important; } .visuallyHidden { @@ -615,9 +726,9 @@ .addButton { margin-bottom: 10px; - color: var(--dark-grey-font); + color: var(--addButton-font); background-color: var(--light-blue); - border-color: var(--grey-bg-color); + border-color: var(--addButton-bg); --bs-btn-focus-box-shadow: none; } @@ -629,32 +740,32 @@ .addButton:disabled { margin-bottom: 10px; background-color: var(--disabled-btn); - border-color: var(--grey-bg-color); + border-color: var(--addButton-bg); } .outlineBtn { margin-bottom: 10px; - background-color: var(--white); - color: var(--light-blue); - border-color: var(--light-blue); + background-color: var(--outlineBtn-bg); + color: var(--outlineBtn-color); + border-color: var(--outlineBtn-border); } .outlineBtn:is(:hover, :active) { margin-bottom: 10px; - background-color: var(--dark-blue) !important; - color: var(--white) !important; - border-color: var(--dark-blue); + background-color: var(--outlineBtn-hover-bg) !important; + color: var(--outlineBtn-bg) !important; + border-color: var(--outlineBtn-hover-bg); } .outlineBtn:disabled { margin-bottom: 10px; - background-color: var(--white); - color: var(--bs-gray-500); - border-color: var(--bs-gray-500); + background-color: var(--outlineBtn-bg); + color: var(--outlineBtn-disabled); + border-color: var(--outlineBtn-disabled); } .slider .MuiSlider-track { - background-color: var(--dark-blue) !important; + background-color: var(--slider-bg) !important; } .removeButton { @@ -682,53 +793,47 @@ } .regularBtn:is(:hover, :active) { - background-color: #286fe0 !important; - color: var(--dark-grey-font); - border-color: var(--search-button-border) !important; -} - -.regularBtn:is(:hover, :active) { - background-color: #286fe0 !important; - color: var(--dark-grey-font); + background-color: var(--regularBtn-hover-bg) !important; + color: var(--regularBtn-font); border-color: var(--search-button-border) !important; } .activeTab { - background-color: var(--grey-light); - color: var(--grey-text); - border-color: var(--grey-text); + background-color: var(--activeTab-bg); + color: var(--activeTab-color); + border-color: var(--activeTab-color); align-items: center; } .activeTab:is(:hover, :focus, :active) { - background-color: var(--grey-dark) !important; - color: var(--white); - border-color: var(--grey-dark) !important; + background-color: var(--activeTab-hover-bg) !important; + color: var(--activeTab-hover-color); + border-color: var(--activeTab-hover-bg) !important; align-items: center; } .inActiveTab { - background-color: var(--off-white-color); - color: var(--grey-text); - border-color: var(--grey-text); + background-color: var(--inActiveTab-bg); + color: var(--inActiveTab-color); + border-color: var(--inActiveTab-color); align-items: center; } .inActiveTab:is(:hover, :focus, :active) { - background-color: var(--grey-light) !important; - color: var(--grey-text); - border-color: var(--grey-dark) !important; + background-color: var(--inActiveTab-hover-bg) !important; + color: var(--inActiveTab-hover-color); + border-color: var(--inActiveTab-hover-border) !important; align-items: center; } .searchIcon { - color: var(--dark-grey-font); + color: var(--searchIcon-color); } .infoButton { background-color: var(--search-button-bg); border-color: var(--search-button-border); - color: var(--dark-grey-font); + color: var(--infoButton-font); margin-right: 0.5rem; border-radius: 0.25rem; } @@ -755,7 +860,7 @@ } .rowBackground { - background-color: var(--row-background); + background-color: var(--row-background) !important; max-height: 120px; overflow-y: auto; } @@ -799,7 +904,7 @@ .editButton { background-color: var(--light-blue); - color: var(--dark-grey-font); + color: var(--editButton-font); border-color: var(--grey-bg-color); --bs-btn-active-bg: var(--dark-blue); --bs-btn-active-border-color: var(--grey-bg-color); @@ -2069,14 +2174,14 @@ input[type='radio']:checked + label:hover { .greenregbtn { margin-top: 1rem; - border: 1px solid var(--bs-gray-300); - box-shadow: 0 2px 2px var(--bs-gray-300); + border: 1px solid var(--greenregbtn-border); + box-shadow: 0 2px 2px var(--greenregbtn-box-shadow); padding: 10px 10px; border-radius: 5px; - background-color: var(--bs-primary); + background-color: var(--greenregbtn-bg); width: 100%; font-size: 16px; - color: var(--bs-white); + color: var(--greenregbtn-color); outline: none; font-weight: 600; cursor: pointer; @@ -2089,12 +2194,12 @@ input[type='radio']:checked + label:hover { .manageBtn { margin: 1rem 0 0; margin-top: 15px; - border: 1px solid var(--grey-border-box-color); - box-shadow: 0 2px 2px var(--grey-border-box-color); + border: 1px solid var(--manageBtn-border); + box-shadow: 0 2px 2px var(--manageBtn-box-shadow); padding: 10px 10px; border-radius: 5px; font-size: 16px; - color: var(--bs-white); + color: var(--manageBtn-color); outline: none; font-weight: 600; cursor: pointer; @@ -2116,7 +2221,7 @@ input[type='radio']:checked + label:hover { margin-left: 2%; font-weight: 600; font-size: 16px; - color: var(--bs-gray-600); + color: var(--view-color); } /* header (search, filter, dropdown) */ @@ -2132,7 +2237,7 @@ input[type='radio']:checked + label:hover { } .btncon .btnsContainer input { - outline: 1px solid var(--bs-gray-400); + outline: 1px solid var(--btncon-input); } .btncon .btnsContainer .input button { @@ -2144,11 +2249,11 @@ input[type='radio']:checked + label:hover { } .noOutline input:disabled { - -webkit-text-fill-color: var(--black-color) !important; + -webkit-text-fill-color: var(--noOutline-input-disables) !important; } .noOutline textarea:disabled { - color: var(--black-color) !important; + color: var(--noOutline-textarea-disables) !important; opacity: 1; } @@ -2156,14 +2261,6 @@ input[type='radio']:checked + label:hover { box-shadow: 0 1px 1px var(--brand-primary); } -.dropdowns { - background-color: var(--bs-white); - border: 1px solid var(--dropdown-border-color); - position: relative; - display: inline-block; - color: black; -} - .chipIcon { height: 0.9rem !important; } @@ -2174,20 +2271,20 @@ input[type='radio']:checked + label:hover { } .active { - background-color: var(--status-active-bg); - color: var(--light-blue) !important; - border-color: var(--light-blue) !important; + background-color: var(--status-active-bg) !important; + color: var(--active-color) !important; + border-color: var(--active-border-color) !important; } .pending { - background-color: var(--status-pending-bg); - color: var(--light-blue) !important; - border-color: var(--light-blue) !important; + background-color: var(--status-pending-bg) !important; + color: var(--pending-color) !important; + border-color: var(--pending-border-color) !important; } .checkboxButton input:checked { - background-color: var(--dark-blue); - border-color: var(--dark-blue); + background-color: var(--checkboxButton-checked-bg); + border-color: var(--checkboxButton-checked-color); } /* Modals */ @@ -2198,7 +2295,7 @@ input[type='radio']:checked + label:hover { } .titlemodal { - color: var(--grey-bg-color-dark); + color: var(--titlemodal-color); font-weight: 600; font-size: 32px; width: 65%; @@ -2325,11 +2422,11 @@ input[type='radio']:checked + label:hover { .opendrawer:hover { transition: background-color 0.5s ease; - background-color: var(--bs-primary); + background-color: var(--opendrawer-hover); } .collapseSidebarButton:hover { transition: background-color 0.5s ease; - background-color: var(--bs-primary); + background-color: var(--collapseSidebarButton-hover); } @media screen and (max-width: 850px) { @@ -2349,12 +2446,12 @@ input[type='radio']:checked + label:hover { } .orgCard { - background-color: var(--bs-white); + background-color: var(--orgCard-bg); margin: 0.5rem; height: calc(120px + 2rem); padding: 1rem; border-radius: 8px; - outline: 1px solid var(--bs-gray-200); + outline: 1px solid var(--orgCard-outline); position: relative; } @@ -2372,7 +2469,7 @@ input[type='radio']:checked + label:hover { width: 125px; height: 120px; object-fit: contain; - background-color: var(--bs-gray-200); + background-color: var(--orgImgContainer-bg); } .orgCard .innerContainer .content { @@ -2445,7 +2542,7 @@ input[type='radio']:checked + label:hover { .address h6 { font-size: 0.9rem; - color: var(--bs-gray-600); + color: var(--address-h6-color); } @media (max-width: 1420px) { @@ -2499,7 +2596,7 @@ input[type='radio']:checked + label:hover { } .colorLight { - background-color: #f5f5f5; + background-color: var(--colorlight-bg); } .mainContainer50 { @@ -2509,7 +2606,7 @@ input[type='radio']:checked + label:hover { max-height: 100%; overflow-y: auto; overflow-x: hidden; - background-color: #f2f7ff; + background-color: var(--mainContainer50); } .link { @@ -2534,13 +2631,13 @@ input[type='radio']:checked + label:hover { } .postActionBtn { - background-color: white; + background-color: var(--postActionBtn-bg); border: none; color: black; } .postActionBtn:hover { - background-color: ghostwhite; + background-color: var(--postActionBtn-hover-bg); border: none; color: black; } @@ -2560,10 +2657,10 @@ input[type='radio']:checked + label:hover { .postContainer { width: auto; - background-color: white; + background-color: var(--postContainer-bg); margin-top: 1rem; padding: 1rem; - border: 1px solid #dddddd; + border: 1px solid var(--postContainer-border); border-radius: 10px; } @@ -2595,7 +2692,7 @@ input[type='radio']:checked + label:hover { overflow: hidden; border-radius: 50%; position: relative; - border: 2px solid #31bb6b; + border: 2px solid var(--userImageUserPost); } .userImageUserPost img { @@ -2609,26 +2706,26 @@ input[type='radio']:checked + label:hover { .startPostBtn { width: 100%; border-radius: 25px; - background-color: transparent; + background-color: var(--startPostBtn-bg); /* border: 1px solid #acacac; */ - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; + box-shadow: var(--startPostBtn-boxshadow) 0px 1px 4px; outline: none; border: none; - color: #000; + color: var(--startPostBtn-color); font-weight: 900; } .startPostBtn:hover { - background-color: #00000010; + background-color: var(--startPostBtn-hover-bg); border: 0; - color: #000 !important; + color: var(--startPostBtn-hover-color) !important; } .icons { width: 25px; } .icons svg { - stroke: #000; + stroke: var(--icons-svg); } .icons.dark { @@ -2639,12 +2736,12 @@ input[type='radio']:checked + label:hover { } .icons.dark svg { - stroke: #000; + stroke: var(--icons-dark-svg); } .iconLabel { margin: 0; - color: #000; + color: var(--iconlabel-color); font-weight: 900; } @@ -2657,7 +2754,7 @@ input[type='radio']:checked + label:hover { } .uploadLink:hover { - background-color: #00000010; + background-color: var(--uploadlink-hover); } .modal { @@ -2690,13 +2787,7 @@ input[type='radio']:checked + label:hover { flex-direction: row; gap: 10px; align-items: center; - color: var(--light-blue); -} - -.borderBox { - border: 1px solid #dddddd; - box-shadow: 5px 5px 4px 0px #31bb6b1f; - border-radius: 4px; + color: var(--cardHeaderPromotedPost-color); } .borderRounded5 { @@ -2717,10 +2808,6 @@ input[type='radio']:checked + label:hover { border-bottom-right-radius: 24px; } -.shadow { - box-shadow: 5px 5px 4px 0px #31bb6b1f; -} - .mainContainerUserPeople { width: 50%; flex-grow: 3; @@ -2730,10 +2817,6 @@ input[type='radio']:checked + label:hover { font-weight: 500; } -.placeholderColor::placeholder { - color: #737373; -} - .personDetails { display: flex; flex-direction: column; @@ -2747,7 +2830,7 @@ input[type='radio']:checked + label:hover { } .blueText { - color: var(--light-blue); + color: var(--bluetext); } .accordionSummary { @@ -2778,10 +2861,10 @@ input[type='radio']:checked + label:hover { .box { width: auto; /* height: 200px; */ - background-color: white; + background-color: var(--box-bg); margin-top: 1rem; padding: 20px; - border: 1px solid #dddddd; + border: 1px solid var(--box-border); border-radius: 10px; } @@ -2826,8 +2909,8 @@ input[type='radio']:checked + label:hover { justify-content: space-between; gap: 1rem; padding: 1rem; - background-color: white; - border: 1px solid #dddddd; + background-color: var(--mainContainerDonateCard-bg); + border: 1px solid var(--mainContainerDonateCard-border); border-radius: 10px; overflow: hidden; } @@ -2873,9 +2956,9 @@ input[type='radio']:checked + label:hover { .pluginStoreBtn { width: 100%; - background-color: var(--bs-white); - color: var(--dark-grey-font); - border: 0.5px solid var(--dark-grey-border); + background-color: var(--pluginStoreBtn-bg); + color: var(--pluginStore-color); + border: 0.5px solid var(--pluginStoreBtn-border); } .searchButtonOrgList { background-color: var(--light-blue); @@ -2892,8 +2975,8 @@ input[type='radio']:checked + label:hover { .pluginStoreBtn:hover, .pluginStoreBtn:focus { background-color: var(--dropdown-hover-color) !important; - color: var(--dark-grey-font) !important; - border-color: var(--dark-grey-border) !important; + color: var(--pluginStore-color) !important; + border-color: var(--pluginStoreBtn-border) !important; } .flexContainer { @@ -4917,7 +5000,7 @@ button[data-testid='createPostBtn'] { } .leftDrawer .organizationContainer .profileContainer { - background-color: #31bb6b33; + background-color: var(--leftDrawer-profile-bg); padding-right: 10px; } @@ -5723,7 +5806,7 @@ button[data-testid='createPostBtn'] { } .updateTimeoutValue { - color: var(--dark-blue); + color: var(--updateTimeoutValue-color); font-weight: bold; } @@ -6784,19 +6867,19 @@ button[data-testid='createPostBtn'] { } .createButtonEventHeader { - background-color: var(--grey-bg-color); - color: var(--dark-grey-font); + background-color: var(--createButtonEventHeader-bg); + color: var(--createButtonEventHeader-color); width: 110px; /* margin-left: 5px; */ - border: 1px solid var(--dark-grey-border); - box-shadow: 2.5px 2.5px 2.5px rgba(0, 0, 0, 0.3); + border: 1px solid var(--createButtonEventHeader-border); + box-shadow: 2.5px 2.5px 2.5px var(--createButtonEventHeader-boxshadow); } .createButtonEventHeader:hover { - background-color: var(--grey-bg-color); - color: var(--black-color); - border: 1px solid var(--dark-grey-border); - box-shadow: 2.5px 2.5px 2.5px rgba(0, 0, 0, 0.3); + background-color: var(--createButtonEventHeader-bg); + color: var(--createButtonEventHeader-hover-color); + border: 1px solid var(--createButtonEventHeader-border); + box-shadow: 2.5px 2.5px 2.5px var(--createButtonEventHeader-boxshadow); } .selectTypeEventHeader { @@ -8020,10 +8103,6 @@ button[data-testid='createPostBtn'] { border-bottom-right-radius: 24px; } -.shadow { - box-shadow: 5px 5px 4px 0px var(--shadow); -} - .backgroundWhite { background-color: var(--background-color); } From 50fed405a2a6f842efca160f52875f72ab674d8a Mon Sep 17 00:00:00 2001 From: Rahul Chougule <87270395+rahulch07@users.noreply.github.com> Date: Sun, 26 Jan 2025 03:41:59 +0530 Subject: [PATCH 15/15] coderabbitai suggested changes Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- src/style/app.module.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/style/app.module.css b/src/style/app.module.css index 535a4c5fc3..bcf8a5ee71 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -919,6 +919,13 @@ color: var(--activeTab-color); border-color: var(--activeTab-color); align-items: center; + position: relative; + outline: none; +} + +.activeTab:focus-visible { + outline: 2px solid var(--activeTab-color); + outline-offset: 2px; } .activeTab:is(:hover, :focus, :active) { @@ -933,6 +940,13 @@ color: var(--inActiveTab-color); border-color: var(--inActiveTab-color); align-items: center; + position: relative; + outline: none; +} + +.inActiveTab:focus-visible { + outline: 2px solid var(--inActiveTab-color); + outline-offset: 2px; } .inActiveTab:is(:hover, :focus, :active) {