From 82214d97ed5125a87c7fcede24642861b41de345 Mon Sep 17 00:00:00 2001 From: Rahul Chougule <87270395+rahulch07@users.noreply.github.com> Date: Thu, 16 Jan 2025 21:24:28 +0530 Subject: [PATCH] Updating to NEW COLOR SCHEME 2 (#3293) * changed green to blue * updated funds section * people section css updated * updated Tags section * venues, action items, advertisments, plugins sections updated * fixed code coverage test * fixed code coverage test * CSS methodology added * fixed linting --------- Co-authored-by: Rahul Chougule --- 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..4b0b1f90b6 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) {