From 4386ee0145bb91e3800574b816ff97e2ac903577 Mon Sep 17 00:00:00 2001 From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com> Date: Thu, 26 Dec 2024 23:57:30 +0530 Subject: [PATCH 1/5] Refactor CSS files in src/screens/OrganizationFundCampaign (#2934) * Update organization-fund-campaign css * Fix linting * Fix some issues * Fix import issue * Fix color change * Update src/style/app.module.css Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- .../CampaignModal.tsx | 4 +- .../OrganizationFundCampagins.tsx | 16 +- .../OrganizationFundCampaign.module.css | 202 ------------------ src/style/app.module.css | 174 +++++++++++++++ 4 files changed, 185 insertions(+), 211 deletions(-) delete mode 100644 src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css diff --git a/src/screens/OrganizationFundCampaign/CampaignModal.tsx b/src/screens/OrganizationFundCampaign/CampaignModal.tsx index 63d1e8de3a..6706b80ee5 100644 --- a/src/screens/OrganizationFundCampaign/CampaignModal.tsx +++ b/src/screens/OrganizationFundCampaign/CampaignModal.tsx @@ -5,7 +5,7 @@ import type { ChangeEvent } from 'react'; import React, { useEffect, useState } from 'react'; import { Button, Form, Modal } from 'react-bootstrap'; import { currencyOptions, currencySymbols } from 'utils/currency'; -import styles from './OrganizationFundCampaign.module.css'; +import styles from '../../style/app.module.css'; import { useTranslation } from 'react-i18next'; import { useMutation } from '@apollo/client'; import { @@ -301,7 +301,7 @@ const CampaignModal: React.FC = ({ {/* Button to create the campaign */} -
+
@@ -426,7 +426,9 @@ const orgFundCampaign = (): JSX.Element => { ), }} sx={dataGridStyle} - getRowClassName={() => `${styles.rowBackground}`} + getRowClassName={() => + `${styles.rowBackgroundOrganizationFundCampaign}` + } autoHeight rowHeight={65} rows={campaigns.map((campaign, index) => ({ diff --git a/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css b/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css deleted file mode 100644 index 55202baef9..0000000000 --- a/src/screens/OrganizationFundCampaign/OrganizationFundCampaign.module.css +++ /dev/null @@ -1,202 +0,0 @@ -.organizationFundCampaignContainer { - margin: 0.5rem 0; -} -.goalButton { - border: 1px solid rgba(49, 187, 107, 1) !important; - color: rgba(49, 187, 107, 1) !important; - width: 75%; - padding: 10px; - border-radius: 8px; - display: block; - margin: auto; - box-shadow: 5px 5px 4px 0px rgba(49, 187, 107, 0.12); -} -.rowBackground { - background-color: var(--bs-white); - max-height: 120px; -} -.container { - min-height: 100vh; -} -.campaignModal { - max-width: 80vw; - margin-top: 2vh; - margin-left: 13vw; -} -.titlemodal { - color: #707070; - font-weight: 600; - font-size: 32px; - width: 65%; - margin-bottom: 0px; -} -.noOutline input { - outline: none; -} -.modalCloseBtn { - width: 40px; - height: 40px; - padding: 1rem; - display: flex; - justify-content: center; - align-items: center; -} -.greenregbtn { - margin: 1rem 0 0; - margin-top: 15px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - padding: 10px 10px; - border-radius: 5px; - background-color: #31bb6b; - width: 100%; - font-size: 16px; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; - width: 100%; - flex: 1; -} - -.redregbtn { - margin: 1rem 0 0; - margin-top: 15px; - border: 1px solid #e8e5e5; - box-shadow: 0 2px 2px #e8e5e5; - padding: 10px 10px; - border-radius: 5px; - width: 100%; - font-size: 16px; - color: white; - outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; - width: 100%; - flex: 1; -} -.campaignNameInfo { - font-size: medium; - cursor: pointer; -} -.campaignNameInfo:hover { - color: blue; - transform: translateY(-2px); -} -.message { - margin-top: 25%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.inputField { - background-color: white; - box-shadow: 0 1px 1px #31bb6b; -} - -.dropdown { - background-color: white; - border: 1px solid #31bb6b; - position: relative; - display: inline-block; - color: #31bb6b; -} - -.btnsContainer { - display: flex; - margin: 2rem 0 2rem 0; - gap: 0.8rem; -} - -.btnsContainer .btnsBlock { - display: flex; - gap: 0.8rem; -} - -.btnsContainer .btnsBlock div button { - display: flex; - margin-left: 1rem; - justify-content: center; - align-items: center; -} - -.btnsContainer .input { - flex: 1; - position: relative; -} - -.btnsContainer input { - outline: 1px solid var(--bs-gray-400); -} - -.btnsContainer .input button { - width: 52px; -} - -.mainpageright > hr { - margin-top: 20px; - width: 100%; - margin-left: -15px; - margin-right: -15px; - margin-bottom: 20px; -} - -.tableHeader { - background-color: var(--bs-primary); - color: var(--bs-white); - font-size: 1rem; -} - -@media (max-width: 1020px) { - .btnsContainer { - flex-direction: column; - margin: 1.5rem 0; - } - - .btnsContainer .btnsBlock { - margin: 1.5rem 0 0 0; - justify-content: space-between; - } - - .btnsContainer .btnsBlock div button { - margin: 0; - } - - .createFundBtn { - margin-top: 0; - } -} - -@media screen and (max-width: 575.5px) { - .mainpageright { - width: 98%; - } -} - -/* For mobile devices */ - -@media (max-width: 520px) { - .btnsContainer { - margin-bottom: 0; - } - - .btnsContainer .btnsBlock { - display: block; - margin-top: 1rem; - margin-right: 0; - } - - .btnsContainer .btnsBlock div button { - margin-bottom: 1rem; - margin-right: 0; - width: 100%; - } -} diff --git a/src/style/app.module.css b/src/style/app.module.css index 6329ead1a4..73e3df338c 100644 --- a/src/style/app.module.css +++ b/src/style/app.module.css @@ -992,6 +992,180 @@ hr { background: #afffe8 !important; } +.organizationFundCampaignContainer { + margin: 0.5rem 0; +} + +.rowBackgroundOrganizationFundCampaign { + background-color: var(--bs-white); + max-height: 120px; +} + +.campaignModal { + max-width: 80vw; + margin-top: 2vh; + margin-left: 13vw; +} + +.greenregbtnOrganizationFundCampaign { + margin: 1rem 0 0; + margin-top: 15px; + border: 1px solid var(--bs-gray-300); + box-shadow: 0 2px 2px #e8e5e5; + padding: 10px 10px; + border-radius: 5px; + background-color: var(--bs-primary); + width: 100%; + font-size: 16px; + color: white; + outline: none; + font-weight: 600; + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; + flex: 1; +} + +.goalButtonOrganizationFundCampaign { + border: 1px solid #e8e5e5 !important; + color: #707070 !important; + width: 75%; + padding: 10px; + border-radius: 8px; + display: block; + margin: auto; + box-shadow: 5px 5px 4px 0px rgba(49, 187, 107, 0.12); +} + +.redregbtn { + margin: 1rem 0 0; + margin-top: 15px; + border: 1px solid #e8e5e5; + box-shadow: 0 2px 2px #e8e5e5; + padding: 10px 10px; + border-radius: 5px; + width: 100%; + font-size: 16px; + color: white; + outline: none; + font-weight: 600; + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; + width: 100%; + flex: 1; +} + +.campaignNameInfo { + font-size: medium; + cursor: pointer; +} +.campaignNameInfo:hover { + color: blue; + transform: translateY(-2px); +} + +.inputFieldOrganizationFundCampaign { + background-color: white; + box-shadow: 0 1px 1px var(--search-button-bg); +} + +.dropdownOrganizationFundCampaign { + background-color: white; + border: 1px solid #e8e5e5; + position: relative; + display: inline-block; + color: #707070; +} + +.btnsContainerOrganizationFundCampaign { + display: flex; + margin: 2rem 0 2rem 0; + gap: 0.8rem; +} + +.btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign { + display: flex; + gap: 0.8rem; +} + +.btnsContainerOrganizationFundCampaign + .btnsBlockOrganizationFundCampaign + div + button { + display: flex; + margin-left: 1rem; + justify-content: center; + align-items: center; +} + +.btnsContainerOrganizationFundCampaign .inputOrganizationFundCampaign { + flex: 1; + position: relative; +} + +.btnsContainerOrganizationFundCampaign input { + outline: 1px solid var(--bs-gray-400); +} + +.btnsContainerOrganizationFundCampaign .inputOrganizationFundCampaign button { + width: 52px; +} + +@media (max-width: 1020px) { + .btnsContainerOrganizationFundCampaign { + flex-direction: column; + margin: 1.5rem 0; + } + + .btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign { + margin: 1.5rem 0 0 0; + justify-content: space-between; + } + + .btnsContainerOrganizationFundCampaign + .btnsBlockOrganizationFundCampaign + div + button { + margin: 0; + } + + .createFundBtn { + margin-top: 0; + } +} + +@media screen and (max-width: 575.5px) { + .mainpageright { + width: 98%; + } +} + +/* For mobile devices */ + +@media (max-width: 520px) { + .btnsContainerOrganizationFundCampaign { + margin-bottom: 0; + } + + .btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign { + display: block; + margin-top: 1rem; + margin-right: 0; + } + + .btnsContainerOrganizationFundCampaign + .btnsBlockOrganizationFundCampaign + div + button { + margin-bottom: 1rem; + margin-right: 0; + width: 100%; + } +} + @media (max-width: 1024px) { .pageNotFound h1.head { font-size: 200px; From 178a9edf1a7c4d1c9124e07743d86cae8ed2c895 Mon Sep 17 00:00:00 2001 From: Mehul Aggarwal <88583647+AceHunterr@users.noreply.github.com> Date: Thu, 26 Dec 2024 23:58:58 +0530 Subject: [PATCH 2/5] Refactored src/components/AgendaCategory/AgendaCategoryContainer.test.tsx from jest to vitest (#2938) * Refactored src/components/AgendaCategory/AgendaCategoryContainer.test.tsx from jest to vitest * Refactored src/components/AgendaCategory/AgendaCategoryContainer.test.tsx from jest to vitest --- ...ntainer.test.tsx => AgendaCategoryContainer.spec.tsx} | 9 ++++----- .../AgendaCategory/AgendaCategoryContainerProps.ts | 5 +++-- 2 files changed, 7 insertions(+), 7 deletions(-) rename src/components/AgendaCategory/{AgendaCategoryContainer.test.tsx => AgendaCategoryContainer.spec.tsx} (98%) diff --git a/src/components/AgendaCategory/AgendaCategoryContainer.test.tsx b/src/components/AgendaCategory/AgendaCategoryContainer.spec.tsx similarity index 98% rename from src/components/AgendaCategory/AgendaCategoryContainer.test.tsx rename to src/components/AgendaCategory/AgendaCategoryContainer.spec.tsx index d8e27c3cb2..74880558b4 100644 --- a/src/components/AgendaCategory/AgendaCategoryContainer.test.tsx +++ b/src/components/AgendaCategory/AgendaCategoryContainer.spec.tsx @@ -8,9 +8,7 @@ import { fireEvent, } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import 'jest-localstorage-mock'; import { MockedProvider } from '@apollo/client/testing'; -import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router-dom'; @@ -25,14 +23,15 @@ import { StaticMockLink } from 'utils/StaticMockLink'; import AgendaCategoryContainer from './AgendaCategoryContainer'; import { props, props2 } from './AgendaCategoryContainerProps'; import { MOCKS, MOCKS_ERROR_MUTATIONS } from './AgendaCategoryContainerMocks'; +import { vi, describe, test, expect } from 'vitest'; const link = new StaticMockLink(MOCKS, true); const link2 = new StaticMockLink(MOCKS_ERROR_MUTATIONS, true); -jest.mock('react-toastify', () => ({ +vi.mock('react-toastify', () => ({ toast: { - success: jest.fn(), - error: jest.fn(), + success: vi.fn(), + error: vi.fn(), }, })); diff --git a/src/components/AgendaCategory/AgendaCategoryContainerProps.ts b/src/components/AgendaCategory/AgendaCategoryContainerProps.ts index 5181eec153..3d8128128c 100644 --- a/src/components/AgendaCategory/AgendaCategoryContainerProps.ts +++ b/src/components/AgendaCategory/AgendaCategoryContainerProps.ts @@ -1,4 +1,5 @@ type AgendaCategoryConnectionType = 'Organization'; +import { vi } from 'vitest'; export const props = { agendaCategoryConnection: 'Organization' as AgendaCategoryConnectionType, @@ -24,11 +25,11 @@ export const props = { }, }, ], - agendaCategoryRefetch: jest.fn(), + agendaCategoryRefetch: vi.fn(), }; export const props2 = { agendaCategoryConnection: 'Organization' as AgendaCategoryConnectionType, agendaCategoryData: [], - agendaCategoryRefetch: jest.fn(), + agendaCategoryRefetch: vi.fn(), }; From a12833bfe55ddda02210ea1c9532ebe55481e2ce Mon Sep 17 00:00:00 2001 From: Shiva <148421597+shivasankaran18@users.noreply.github.com> Date: Fri, 27 Dec 2024 00:07:11 +0530 Subject: [PATCH 3/5] refactor:vitest to componenets/EventCalendar/* (#2944) --- ...ventCalendar.test.tsx => EventCalendar.spec.tsx} | 3 ++- .../{EventHeader.test.tsx => EventHeader.spec.tsx} | 13 +++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) rename src/components/EventCalendar/{EventCalendar.test.tsx => EventCalendar.spec.tsx} (99%) rename src/components/EventCalendar/{EventHeader.test.tsx => EventHeader.spec.tsx} (92%) diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.spec.tsx similarity index 99% rename from src/components/EventCalendar/EventCalendar.test.tsx rename to src/components/EventCalendar/EventCalendar.spec.tsx index 8e2395968a..4dfd0548d6 100644 --- a/src/components/EventCalendar/EventCalendar.test.tsx +++ b/src/components/EventCalendar/EventCalendar.spec.tsx @@ -13,6 +13,7 @@ import i18nForTest from 'utils/i18nForTest'; import { StaticMockLink } from 'utils/StaticMockLink'; import { weekdays, months } from './constants'; import { BrowserRouter as Router } from 'react-router-dom'; +import { vi } from 'vitest'; const eventData = [ { @@ -122,7 +123,7 @@ describe('Calendar', () => { }); afterEach(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); it('should render the current month and year', () => { diff --git a/src/components/EventCalendar/EventHeader.test.tsx b/src/components/EventCalendar/EventHeader.spec.tsx similarity index 92% rename from src/components/EventCalendar/EventHeader.test.tsx rename to src/components/EventCalendar/EventHeader.spec.tsx index e18d066306..be1ba4bd78 100644 --- a/src/components/EventCalendar/EventHeader.test.tsx +++ b/src/components/EventCalendar/EventHeader.spec.tsx @@ -4,11 +4,20 @@ import EventHeader from './EventHeader'; import { ViewType } from '../../screens/OrganizationEvents/OrganizationEvents'; import { I18nextProvider } from 'react-i18next'; import i18nForTest from 'utils/i18nForTest'; +import { vi } from 'vitest'; describe('EventHeader Component', () => { const viewType = ViewType.MONTH; - const handleChangeView = jest.fn(); - const showInviteModal = jest.fn(); + + /** + * Mock function to handle view type changes. + */ + const handleChangeView = vi.fn(); + + /** + * Mock function to handle the display of the invite modal. + */ + const showInviteModal = vi.fn(); it('renders correctly', () => { const { getByTestId } = render( From 9fdba79430e2214fe65526a1a8e020bcf5ef688e Mon Sep 17 00:00:00 2001 From: Shiva <148421597+shivasankaran18@users.noreply.github.com> Date: Fri, 27 Dec 2024 00:08:15 +0530 Subject: [PATCH 4/5] refactor:vitest to src/components/MemberDetail/* (#2945) --- ...st.tsx => EventsAttendedByMember.spec.tsx} | 0 ...st.tsx => EventsAttendedCardItem.spec.tsx} | 3 ++- ...tsx => EventsAttendedMemberModal.spec.tsx} | 19 ++++++++++++++----- 3 files changed, 16 insertions(+), 6 deletions(-) rename src/components/MemberDetail/{EventsAttendedByMember.test.tsx => EventsAttendedByMember.spec.tsx} (100%) rename src/components/MemberDetail/{EventsAttendedCardItem.test.tsx => EventsAttendedCardItem.spec.tsx} (96%) rename src/components/MemberDetail/{EventsAttendedMemberModal.test.tsx => EventsAttendedMemberModal.spec.tsx} (91%) diff --git a/src/components/MemberDetail/EventsAttendedByMember.test.tsx b/src/components/MemberDetail/EventsAttendedByMember.spec.tsx similarity index 100% rename from src/components/MemberDetail/EventsAttendedByMember.test.tsx rename to src/components/MemberDetail/EventsAttendedByMember.spec.tsx diff --git a/src/components/MemberDetail/EventsAttendedCardItem.test.tsx b/src/components/MemberDetail/EventsAttendedCardItem.spec.tsx similarity index 96% rename from src/components/MemberDetail/EventsAttendedCardItem.test.tsx rename to src/components/MemberDetail/EventsAttendedCardItem.spec.tsx index afbb19eeea..8694426d58 100644 --- a/src/components/MemberDetail/EventsAttendedCardItem.test.tsx +++ b/src/components/MemberDetail/EventsAttendedCardItem.spec.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { BrowserRouter } from 'react-router-dom'; import EventAttendedCard from './EventsAttendedCardItem'; +import { vi } from 'vitest'; interface InterfaceEventAttendedCardProps { type: 'Event'; @@ -33,7 +34,7 @@ describe('EventAttendedCard', () => { }; beforeEach(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); it('renders event details correctly', () => { diff --git a/src/components/MemberDetail/EventsAttendedMemberModal.test.tsx b/src/components/MemberDetail/EventsAttendedMemberModal.spec.tsx similarity index 91% rename from src/components/MemberDetail/EventsAttendedMemberModal.test.tsx rename to src/components/MemberDetail/EventsAttendedMemberModal.spec.tsx index ebdc3fff4c..fdec64e5f0 100644 --- a/src/components/MemberDetail/EventsAttendedMemberModal.test.tsx +++ b/src/components/MemberDetail/EventsAttendedMemberModal.spec.tsx @@ -3,15 +3,24 @@ import { render, screen, fireEvent } from '@testing-library/react'; import { MockedProvider } from '@apollo/client/testing'; import { BrowserRouter } from 'react-router-dom'; import EventsAttendedMemberModal from './EventsAttendedMemberModal'; +import { vi } from 'vitest'; -jest.mock('react-i18next', () => ({ +/** + * Mock the `react-i18next` module to provide translation functionality. + */ + +vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key: string) => key, i18n: { changeLanguage: () => Promise.resolve() }, }), })); -jest.mock('./customTableCell', () => ({ +/** + * Mock the `CustomTableCell` component for testing. + */ + +vi.mock('./customTableCell', () => ({ CustomTableCell: ({ eventId }: { eventId: string }) => ( {`Event ${eventId}`} @@ -33,12 +42,12 @@ const mockEvents = Array.from({ length: 6 }, (_, index) => ({ describe('EventsAttendedMemberModal', () => { const defaultProps = { eventsAttended: mockEvents, - setShow: jest.fn(), + setShow: vi.fn(), show: true, }; beforeEach(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); test('renders modal with correct title when show is true', () => { @@ -95,7 +104,7 @@ describe('EventsAttendedMemberModal', () => { }); test('closes modal when close button is clicked', () => { - const mockSetShow = jest.fn(); + const mockSetShow = vi.fn(); render( From 6997a04eea4fe74d3a8e5ee232f6808f2612468a Mon Sep 17 00:00:00 2001 From: MANDEEP N H <146331633+mandeepnh5@users.noreply.github.com> Date: Fri, 27 Dec 2024 00:31:01 +0530 Subject: [PATCH 5/5] Refactor CSS files in src/screens/MemberDetail (#2941) * Update Member Detail css * Fix colour change * Fix linting issue * Update app.module.css --- src/screens/MemberDetail/MemberDetail.tsx | 4 +- src/style/app.module.css | 541 +++++++++++++++++++++- 2 files changed, 542 insertions(+), 3 deletions(-) diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx index cd552c80a0..cc528a8de3 100644 --- a/src/screens/MemberDetail/MemberDetail.tsx +++ b/src/screens/MemberDetail/MemberDetail.tsx @@ -3,7 +3,7 @@ import { useMutation, useQuery } from '@apollo/client'; import Button from 'react-bootstrap/Button'; import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; -import styles from './MemberDetail.module.css'; +import styles from '../../style/app.module.css'; import { languages } from 'utils/languages'; import { UPDATE_USER_MUTATION } from 'GraphQl/Mutations/mutations'; import { USER_DETAILS } from 'GraphQl/Queries/Queries'; @@ -433,7 +433,7 @@ const MemberDetail: React.FC = ({ id }): JSX.Element => { {t('birthDate')} p { + margin-top: -10px; +} + +.navitem { + padding-left: 27%; + padding-top: 12px; + padding-bottom: 12px; + cursor: pointer; +} + +.searchtitleMemberDetail { + color: #707070; + font-weight: 600; + font-size: 18px; + margin-top: 60px; + margin-bottom: 20px; + padding-bottom: 5px; + border-bottom: 3px solid #eaebef; + width: 60%; +} + +.contact { + width: 100%; +} + +.sidebarstickyMemberDetail > input { + text-decoration: none; + margin-bottom: 50px; + border-color: #e8e5e5; + width: 80%; + border-radius: 7px; + padding-top: 5px; + padding-bottom: 5px; + padding-right: 10px; + padding-left: 10px; + box-shadow: none; +} + +.logintitleMemberDetail { + color: #707070; + font-weight: 600; + font-size: 20px; + margin-bottom: 30px; + padding-bottom: 5px; + border-bottom: 3px solid #eaebef; + width: 30%; +} + +.logintitleadmin { + color: #707070; + font-weight: 600; + font-size: 20px; + margin-top: 50px; + margin-bottom: 40px; + padding-bottom: 5px; + border-bottom: 3px solid #eaebef; + width: 60%; +} + +.cardBodyMemberDetail { + height: 35vh; + overflow-y: scroll; +} + +.justifyspMemberDetail { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + /* gap : 2px; */ +} + +.flexclm { + display: flex; + flex-direction: column; +} + +.btngroup { + display: flex; + gap: 2rem; + margin-bottom: 2rem; +} + +@media screen and (max-width: 1200px) { + .justifyspMemberDetail { + padding-left: 55px; + display: flex; + justify-content: space-evenly; + } + + .mainpageright { + width: 100%; + } + + .invitebtn { + position: relative; + right: 15px; + } +} + +.invitebtn { + border: 1px solid #e8e5e5; + box-shadow: 0 2px 2px #e8e5e5; + border-radius: 5px; + font-size: 16px; + height: 60%; + color: white; + outline: none; + font-weight: 600; + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; + background-color: #eaebef; + margin-right: 13px; +} + +.flexdir { + display: flex; + flex-direction: row; + justify-content: space-between; + border: none; +} + +.form_wrapper { + margin-top: 27px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + position: absolute; + display: flex; + flex-direction: column; + width: 30%; + padding: 40px 30px; + background: #ffffff; + border-color: #e8e5e5; + border-width: 5px; + border-radius: 10px; + max-height: 86vh; + overflow: auto; +} + +.form_wrapper form { + display: flex; + align-items: left; + justify-content: left; + flex-direction: column; +} + +.titlemodalMemberDetail { + color: #707070; + font-weight: 600; + font-size: 20px; + margin-bottom: 20px; + padding-bottom: 5px; + border-bottom: 3px solid #eaebef; + width: 65%; +} + +.checkboxdiv > label { + margin-right: 50px; +} + +.checkboxdiv > label > input { + margin-left: 10px; +} + +.orgphoto { + margin-top: 5px; +} + +.orgphoto > input { + margin-top: 10px; + cursor: pointer; + margin-bottom: 5px; +} + +.cancel > i { + margin-top: 5px; + transform: scale(1.2); + cursor: pointer; + color: #707070; +} + +.greenregbtnMemberDetail { + margin: 1rem 0 0; + margin-top: 10px; + border: 1px solid #e8e5e5; + box-shadow: 0 2px 2px #e8e5e5; + padding: 10px 10px; + border-radius: 5px; + background-color: #eaebef; + font-size: 16px; + color: white; + outline: none; + font-weight: 600; + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; +} + +.whiteregbtn { + margin: 1rem 0 0; + margin-right: 2px; + margin-top: 10px; + border: 1px solid #eaebef; + padding: 10px 10px; + border-radius: 5px; + background-color: white; + font-size: 16px; + color: #707070; + outline: none; + font-weight: 600; + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; +} + +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.list_boxMemberDetail { + height: 70vh; + overflow-y: auto; + width: auto; + padding-right: 50px; +} + +.dispflex { + display: flex; +} + +.dispflex > input { + width: 20%; + border: none; + box-shadow: none; + margin-top: 5px; +} + +.checkboxdivMemberDetail { + display: flex; +} + +.checkboxdivMemberDetail > div { + width: 50%; +} + +@media only screen and (max-width: 600px) { + .sidebar { + position: relative; + bottom: 18px; + } + + .invitebtn { + width: 135px; + position: relative; + right: 10px; + } + + .form_wrapper { + width: 90%; + } + + .searchtitleMemberDetail { + margin-top: 30px; + } +} + +/* User page */ + +.memberfontcreatedbtn { + border-radius: 7px; + border-color: #e8e5e5; + background-color: #eaebef; + color: white; + box-shadow: none; + height: 2.5rem; + width: max-content; + display: flex; + justify-content: center; + align-items: center; +} + +.userImage { + width: 180px; + height: 180px; + object-fit: cover; + border-radius: 8px; +} + +@media only screen and (max-width: 1200px) { + .userImage { + width: 100px; + height: 100px; + } +} + +.activeBtn { + width: 100%; + display: flex; + color: #fff; + border: 1px solid #000; + background-color: #eaebef; + transition: 0.5s; +} + +.activeBtn:hover { + color: #fff; + background: #23864c; + transition: 0.5s; +} + +.inactiveBtn { + width: 100%; + display: flex; + color: #707070; + border: 1px solid #31bb6a60; + background-color: #fff; + transition: 0.5s; +} + +.inactiveBtn:hover { + color: #fff; + background: #eaebef; + transition: 0.5s; +} + +.sidebarstickyMemberDetail > button { + display: flex; + align-items: center; + text-align: start; + padding: 0 1.5rem; + height: 3.25rem; + margin: 0 0 1.5rem 0; + font-weight: bold; + border-radius: 50px; +} + +.bgFill { + height: 2rem; + width: 2rem; + border-radius: 50%; + margin-right: 1rem; + display: flex; + justify-content: center; + align-items: center; +} + +.activeBtn .bgFill { + background-color: #fff; +} + +.activeBtn i { + color: #707070; +} + +.inactiveBtn .bgFill { + background-color: #eaebef; +} + +.inactiveBtn:hover .bgFill { + background-color: #fff; +} + +.inactiveBtn i { + color: #fff; +} + +.inactiveBtn:hover i { + color: #707070; +} + +.topRadius { + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} + +.titlenameMemberDetail { + font-weight: 600; + font-size: 25px; + padding: 15px; + padding-bottom: 0px; + width: 50%; +} + +.toporglocMemberDetail { + font-size: 16px; + padding: 15px; + padding-bottom: 0px; +} + +.toporglocMemberDetail span { + color: #737373; +} + +.inputColor { + background: #f1f3f6; +} + +.cardHeaderMemberDetail { + display: flex; + justify-content: space-between; + align-items: center; +} + +.width60 { + width: 60%; +} + +.maxWidth40 { + max-width: 40%; +} +.maxWidth50 { + max-width: 50%; +} + +.allRound { + border-radius: 16px; +} + +.WidthFit { + width: fit-content; +} + +.dateboxMemberDetail { + border-radius: 7px; + border-color: #e8e5e5; + outline: none; + box-shadow: none; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 5px; + padding-left: 5px; + margin-right: 5px; + margin-left: 5px; +} + +.dateboxMemberDetail > div > input { + padding: 0.5rem 0 0.5rem 0.5rem !important; /* top, right, bottom, left */ + background-color: #f1f3f6; + border-radius: var(--bs-border-radius) !important; + border: none !important; +} + +.dateboxMemberDetail > div > div { + margin-left: 0px !important; +} + +.dateboxMemberDetail > div > fieldset { + border: none !important; + /* background-color: #f1f3f6; */ + border-radius: var(--bs-border-radius) !important; +} + +.dateboxMemberDetail > div { + margin: 0.5rem !important; + background-color: #f1f3f6; +} + +input::file-selector-button { + background-color: black; + color: white; +} + +.Outline { + outline: 1px solid var(--bs-gray-400); +} + +.tagLink { + font-weight: 600; + color: var(--bs-gray-700); + cursor: pointer; +} + +.tagLink:hover { + font-weight: 800; + color: var(--bs-blue); + text-decoration: underline; +} + @media (max-width: 1440px) { .contractOrgList { padding-left: calc(250px + 2rem + 1.5rem);