diff --git a/src/screens/UserPortal/Campaigns/Campaigns.module.css b/src/screens/UserPortal/Campaigns/Campaigns.module.css deleted file mode 100644 index b535b9981c..0000000000 --- a/src/screens/UserPortal/Campaigns/Campaigns.module.css +++ /dev/null @@ -1,137 +0,0 @@ -.btnsContainer { - display: flex; - margin: 1.5rem 0; -} - -.btnsContainer .input { - flex: 1; - min-width: 18rem; - position: relative; -} - -.btnsContainer input { - outline: 1px solid var(--bs-gray-400); - background-color: white; -} - -.btnsContainer .input button { - width: 52px; -} - -.accordionSummary { - width: 100% !important; - padding-right: 0.75rem; - display: flex; - justify-content: space-between !important; - align-items: center; -} - -.accordionSummary button { - height: 2.25rem; - padding-top: 0.35rem; -} - -.accordionSummary button:hover { - background-color: #31bb6a50 !important; - color: #31bb6b !important; -} - -.titleContainer { - display: flex; - flex-direction: column; - gap: 0.1rem; -} - -.titleContainer h3 { - font-size: 1.25rem; - font-weight: 750; - color: #5e5e5e; - margin-top: 0.2rem; -} - -.subContainer span { - font-size: 0.9rem; - margin-left: 0.5rem; - font-weight: lighter; - color: #707070; -} - -.chipIcon { - height: 0.9rem !important; -} - -.chip { - height: 1.5rem !important; - margin: 0.15rem 0 0 1.25rem; -} - -.active { - background-color: #31bb6a50 !important; -} - -.pending { - background-color: #ffd76950 !important; - color: #bb952bd0 !important; - border-color: #bb952bd0 !important; -} - -.progress { - display: flex; - width: 45rem; -} - -.progressBar { - margin: 0rem 0.75rem; - width: 100%; - font-size: 0.9rem; - height: 1.25rem; -} - -/* Pledge Modal */ - -.pledgeModal { - max-width: 80vw; - margin-top: 2vh; - margin-left: 13vw; -} - -.titlemodal { - color: #707070; - font-weight: 600; - font-size: 32px; - width: 65%; - margin-bottom: 0px; -} - -.modalCloseBtn { - width: 40px; - height: 40px; - padding: 1rem; - display: flex; - justify-content: center; - align-items: center; -} - -.noOutline input { - outline: none; -} - -.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%; -} diff --git a/src/screens/UserPortal/Campaigns/Campaigns.tsx b/src/screens/UserPortal/Campaigns/Campaigns.tsx index e4483f87fe..43314f9352 100644 --- a/src/screens/UserPortal/Campaigns/Campaigns.tsx +++ b/src/screens/UserPortal/Campaigns/Campaigns.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { Dropdown, Form, Button, ProgressBar } from 'react-bootstrap'; -import styles from './Campaigns.module.css'; +import styles from '../../../style/app.module.css'; import { useTranslation } from 'react-i18next'; import { Navigate, useNavigate, useParams } from 'react-router-dom'; import { Circle, Search, Sort, WarningAmberRounded } from '@mui/icons-material'; diff --git a/src/screens/UserPortal/Campaigns/PledgeModal.tsx b/src/screens/UserPortal/Campaigns/PledgeModal.tsx index 44cc82401b..0cdc5b4ccb 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'; @@ -133,7 +133,6 @@ const PledgeModal: React.FC = ({ * @param e - The form submission event. * @returns A promise that resolves when the pledge is successfully updated. */ - /*istanbul ignore next*/ const updatePledgeHandler = useCallback( async (e: ChangeEvent): Promise => { e.preventDefault(); @@ -209,7 +208,6 @@ const PledgeModal: React.FC = ({ }); hide(); } catch (error: unknown) { - /*istanbul ignore next*/ toast.error((error as Error).message); } }, @@ -255,15 +253,12 @@ const PledgeModal: React.FC = ({ getOptionLabel={(member: InterfaceUserInfo): string => `${member.firstName} ${member.lastName}` } - onChange={ - /*istanbul ignore next*/ - (_, newPledgers): void => { - setFormState({ - ...formState, - pledgeUsers: newPledgers, - }); - } - } + onChange={(_, newPledgers): void => { + setFormState({ + ...formState, + pledgeUsers: newPledgers, + }); + }} renderInput={(params) => ( )} @@ -283,7 +278,6 @@ const PledgeModal: React.FC = ({ pledgeStartDate: date.toDate(), pledgeEndDate: pledgeEndDate && - /*istanbul ignore next*/ (pledgeEndDate < date?.toDate() ? date.toDate() : pledgeEndDate), @@ -322,15 +316,12 @@ const PledgeModal: React.FC = ({ value={pledgeCurrency} label={t('currency')} data-testid="currencySelect" - onChange={ - /*istanbul ignore next*/ - (e) => { - setFormState({ - ...formState, - pledgeCurrency: e.target.value, - }); - } - } + onChange={(e) => { + setFormState({ + ...formState, + pledgeCurrency: e.target.value, + }); + }} > {currencyOptions.map((currency) => ( diff --git a/src/screens/UserPortal/Chat/Chat.module.css b/src/screens/UserPortal/Chat/Chat.module.css deleted file mode 100644 index aeab28f66c..0000000000 --- a/src/screens/UserPortal/Chat/Chat.module.css +++ /dev/null @@ -1,240 +0,0 @@ -.containerHeight { - /* padding: 1rem 1.5rem 0 calc(300px); */ - /* height: 100vh; */ -} - -.expand { - padding-left: 4rem; - animation: moveLeft 0.9s ease-in-out; -} - -.contract { - padding-left: calc(300px); - animation: moveRight 0.5s ease-in-out; -} - -.collapseSidebarButton { - position: fixed; - height: 40px; - bottom: 0; - z-index: 9999; - width: 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; -} - -.containerHeight { - height: 88vh; -} - -.mainContainer { - width: 50%; - margin-left: 20px; - flex-grow: 3; - max-height: 100%; - overflow: auto; - display: flex; - flex-direction: row; - border: 1px solid rgb(220, 220, 220); - margin-top: 15px; - border-radius: 24px; - background-color: white; -} - -.chatContainer { - flex-grow: 6; - display: flex; - flex-direction: column; - margin: 20px; - border: 1px solid rgb(220, 220, 220); - border-radius: 24px; - overflow-y: scroll; - margin-left: 0px; -} - -.chatContainer::-webkit-scrollbar { - display: none; -} - -.contactContainer { - flex-grow: 1; - display: flex; - flex-direction: column; - width: 25%; - overflow-y: scroll; -} - -.addChatContainer { - margin: 0 20px; - padding: 20px 0px 10px 0px; - border-bottom: 2px solid black; -} - -.contactCardContainer { - padding: 10px 15px; - display: flex; - flex-direction: column; - gap: 5px; -} - -.chatHeadingContainer { - padding: 10px; -} - -.borderNone { - border: none; -} - -.accordion-button:focus { - box-shadow: none; -} - -.accordion-button:not(.collapsed) { - color: #212529; - background-color: white; -} - -.chatType { - --bs-accordion-btn-bg: white; - --bs-accordion-active-bg: white; - --bs-accordion-active-color: black; - --bs-accordion-btn-focus-box-shadow: none; - --bs-accordion-border-width: 0px; -} - -.chatType > button { - padding-bottom: 0; -} - -.createChat { - background-color: white; - border: none; -} - -.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); -} - -.customToggle { - padding: 0; - background: none; - border: none; - margin-right: 1rem; - --bs-btn-active-bg: none; -} -.customToggle svg { - color: black; -} - -.customToggle::after { - content: none; -} -.customToggle:hover, -.customToggle:focus, -.customToggle:active { - background: none; - border: none; -} -.customToggle svg { - color: black; -} - -@media (max-width: 1120px) { - .collapseSidebarButton { - width: calc(250px); - } -} - -@media (max-height: 650px) { - .collapseSidebarButton { - width: 250px; - height: 20px; - } - .opendrawer { - width: 30px; - } -} - -/* For tablets */ -@media (max-width: 820px) { - .containerHeight { - /* height: 100vh; */ - /* padding: 2rem; */ - } - - .contract, - .expand { - animation: none; - } - - .opendrawer { - width: 25px; - } - - .collapseSidebarButton { - width: 100%; - left: 0; - right: 0; - } -} - -.accordionBody { - height: calc(100vh / 2 - 2rem - 60px) !important; - overflow-y: scroll; -} - -.accordionBody::-webkit-scrollbar { - display: none; -} - -.filters { - padding: 20px 0px 0px 20px; - display: flex; - gap: 8px; -} - -.filterButton { - border-radius: 14px; - padding: 5px 10px; - background-color: white; - color: #a5a5a5; - border: none; - border: 1px solid #a5a5a5; -} - -.selectedBtn, -.filterButton:hover { - border: 1px solid #98e0b6; - background-color: #98e0b6; - color: rgb(255, 255, 255); -} diff --git a/src/screens/UserPortal/Chat/Chat.tsx b/src/screens/UserPortal/Chat/Chat.tsx index 0155f3ee0a..215d57ab49 100644 --- a/src/screens/UserPortal/Chat/Chat.tsx +++ b/src/screens/UserPortal/Chat/Chat.tsx @@ -7,7 +7,7 @@ import ContactCard from 'components/UserPortal/ContactCard/ContactCard'; import ChatRoom from 'components/UserPortal/ChatRoom/ChatRoom'; import useLocalStorage from 'utils/useLocalstorage'; import NewChat from 'assets/svgs/newChat.svg?react'; -import styles from './Chat.module.css'; +import styles from '../../../style/app.module.css'; import { CHATS_LIST, GROUP_CHAT_LIST, @@ -204,7 +204,7 @@ export default function chat(): JSX.Element { return ( <>
-
+
-
+
- +
-
+
- +
-
+
S.No diff --git a/src/screens/UserPortal/Pledges/Pledges.module.css b/src/screens/UserPortal/Pledges/Pledges.module.css deleted file mode 100644 index 99b1b5f78f..0000000000 --- a/src/screens/UserPortal/Pledges/Pledges.module.css +++ /dev/null @@ -1,202 +0,0 @@ -.btnsContainer { - display: flex; - margin: 1.5rem 0; -} - -.btnsContainer .input { - flex: 1; - min-width: 18rem; - position: relative; -} - -.btnsContainer input { - outline: 1px solid var(--bs-gray-400); - background-color: white; -} - -.btnsContainer .input button { - width: 52px; -} - -.titleContainer { - display: flex; - flex-direction: column; - gap: 0.1rem; -} - -.titleContainer h3 { - font-size: 1.25rem; - font-weight: 750; - color: #5e5e5e; - margin-top: 0.2rem; -} - -.subContainer span { - font-size: 0.9rem; - margin-left: 0.5rem; - font-weight: lighter; - color: #707070; -} - -.progress { - display: flex; - width: 45rem; -} - -.progressBar { - margin: 0rem 0.75rem; - width: 100%; - font-size: 0.9rem; - height: 1.25rem; -} - -/* Pledge Modal */ - -.pledgeModal { - max-width: 80vw; - margin-top: 2vh; - margin-left: 13vw; -} - -.titlemodal { - color: #707070; - font-weight: 600; - font-size: 32px; - width: 65%; - margin-bottom: 0px; -} - -.modalCloseBtn { - width: 40px; - height: 40px; - padding: 1rem; - display: flex; - justify-content: center; - align-items: center; -} - -.noOutline input { - outline: none; -} - -.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%; -} - -/* Error Loading Styles */ -.message { - margin-top: 25%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -.container { - min-height: 100vh; -} - -.errorIcon { - transform: scale(1.5); - color: var(--bs-danger); - margin-bottom: 1rem; -} - -/* Data Grid Styles */ -.tableHeader { - background-color: var(--bs-primary); - color: var(--bs-white); - font-size: 1rem; -} - -.rowBackground { - background-color: var(--bs-white); - max-height: 120px; -} - -.TableImage { - object-fit: cover; - width: 25px !important; - height: 25px !important; - border-radius: 100% !important; -} - -.avatarContainer { - width: 28px; - height: 26px; -} - -.imageContainer { - display: flex; - align-items: center; - justify-content: center; -} - -.pledgerContainer { - display: flex; - align-items: center; - justify-content: center; - margin: 0.1rem 0.25rem; - gap: 0.25rem; - padding: 0.25rem 0.45rem; - border-radius: 0.35rem; - background-color: #31bb6b33; - height: 2.2rem; - margin-top: 0.75rem; -} - -.progressBar { - margin: 0rem 0.75rem; - width: 100%; - font-size: 0.7rem; - height: 1.55rem; -} - -/* ExtraPledgers Popup */ -.popup { - z-index: 50; - border-radius: 0.5rem; - font-family: sans-serif; - font-weight: 500; - font-size: 0.875rem; - margin-top: 0.5rem; - padding: 0.75rem; - border: 1px solid #e2e8f0; - background-color: white; - color: #1e293b; - box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 0.15); - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.popupExtra { - max-height: 15rem; - overflow-y: auto; -} - -.moreContainer { - display: flex; - align-items: center; -} - -.moreContainer:hover { - text-decoration: underline; - cursor: pointer; -} diff --git a/src/screens/UserPortal/Pledges/Pledges.tsx b/src/screens/UserPortal/Pledges/Pledges.tsx index 33e8bf63c2..2fc468d160 100644 --- a/src/screens/UserPortal/Pledges/Pledges.tsx +++ b/src/screens/UserPortal/Pledges/Pledges.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useState } from 'react'; import { Dropdown, Form, Button, ProgressBar } from 'react-bootstrap'; -import styles from './Pledges.module.css'; +import styles from '../../../style/app.module.css'; import { useTranslation } from 'react-i18next'; import { Search, Sort, WarningAmberRounded } from '@mui/icons-material'; import useLocalStorage from 'utils/useLocalstorage'; @@ -190,7 +190,7 @@ const Pledges = (): JSX.Element => { minWidth: 50, align: 'left', headerAlign: 'center', - headerClassName: `${styles.tableHeader}`, + headerClassName: `${styles.tableHeaderPledges}`, sortable: false, renderCell: (params: GridCellParams) => { return ( diff --git a/src/screens/UserPortal/Posts/Posts.module.css b/src/screens/UserPortal/Posts/Posts.module.css deleted file mode 100644 index fc0263833e..0000000000 --- a/src/screens/UserPortal/Posts/Posts.module.css +++ /dev/null @@ -1,191 +0,0 @@ -.borderNone { - border: none; -} - -.colorWhite { - color: white; -} - -.colorLight { - background-color: #f5f5f5; -} - -.mainContainer { - width: 50%; - flex-grow: 3; - padding: 1rem; - max-height: 100%; - overflow-y: auto; - overflow-x: hidden; - background-color: #f2f7ff; -} - -.containerHeight { - height: 100vh; -} - -.link { - text-decoration: none !important; - color: black; -} - -.postInputContainer { - margin-top: 0.5rem; - margin-bottom: 1rem; -} - -.maxWidth { - width: 100%; - /* min-width: 3rem; */ - /* padding: 0; */ -} - -.inputArea { - border: none; - outline: none; - background-color: #f1f3f6; -} - -.postActionContainer { - display: flex; - flex-direction: row; - justify-content: space-between; - gap: 10px; -} - -.postActionBtn { - background-color: white; - border: none; - color: black; -} - -.postActionBtn:hover { - background-color: ghostwhite; - border: none; - color: black; -} - -.postInput { - resize: none; - border: none; - outline: none; - box-shadow: none; - background-color: white; - margin-bottom: 10px; -} - -.postInput:focus { - box-shadow: none; -} - -.postContainer { - width: auto; - background-color: white; - margin-top: 1rem; - padding: 1rem; - border: 1px solid #dddddd; - border-radius: 10px; -} - -.heading { - font-size: 1.1rem; -} - -.pinnedPostsCardsContainer { - overflow-x: scroll; - display: flex; - gap: 1rem; - --bs-gutter-x: 0; -} - -.postsCardsContainer { - /* display: flex; - flex-wrap: wrap; - gap: 1rem; - --bs-gutter-x: 0; */ -} - -.userImage { - display: flex; - width: 50px; - height: 50px; - margin-left: 1rem; - align-items: center; - justify-content: center; - overflow: hidden; - border-radius: 50%; - position: relative; - border: 2px solid #31bb6b; -} - -.userImage img { - position: absolute; - top: 0; - left: 0; - width: 100%; - scale: 1.5; -} - -.startPostBtn { - width: 100%; - border-radius: 25px; - background-color: transparent; - /* border: 1px solid #acacac; */ - box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; - outline: none; - border: none; - color: #000; - font-weight: 900; -} - -.startPostBtn:hover { - background-color: #00000010; - border: 0; - color: #000 !important; -} - -.icons { - width: 25px; -} - -.icons svg { - stroke: #000; -} - -.icons.dark { - cursor: pointer; - border: none; - outline: none; - background-color: transparent; -} - -.icons.dark svg { - stroke: #000; -} - -.iconLabel { - margin: 0; - color: #000; - font-weight: 900; -} - -.uploadLink { - text-align: center; - width: min-content; - padding: 8px 4px; - border-radius: 4px; - cursor: pointer; -} - -.uploadLink:hover { - background-color: #00000010; -} - -.modal { - width: 100dvw; - margin: 0 auto; -} - -.imageInput { - display: none; -} diff --git a/src/screens/UserPortal/Posts/Posts.tsx b/src/screens/UserPortal/Posts/Posts.tsx index ceb10c9b49..87efea3a7b 100644 --- a/src/screens/UserPortal/Posts/Posts.tsx +++ b/src/screens/UserPortal/Posts/Posts.tsx @@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next'; import { Navigate, useParams } from 'react-router-dom'; import useLocalStorage from 'utils/useLocalstorage'; -import styles from './Posts.module.css'; +import styles from '../../../style/app.module.css'; import convertToBase64 from 'utils/convertToBase64'; import Carousel from 'react-multi-carousel'; import 'react-multi-carousel/lib/styles.css'; @@ -273,13 +273,13 @@ export default function home(): JSX.Element { return ( <> -
-
+
+
{t('startPost')}
- +
input { text-decoration: none; margin-bottom: 50px; @@ -680,7 +688,7 @@ hr { .pageNotFound h1.head { font-size: 250px; font-weight: 900; - color: var(--light-green); + color: var(--grey-light); letter-spacing: 25px; margin: 10px 0 0 0; } @@ -760,7 +768,7 @@ hr { .inputFieldPledge { background-color: var(--bs-white); - box-shadow: 0 1px 1px var(--light-green); + box-shadow: 0 1px 1px var(--grey-light); } .dropdownPledge { @@ -926,7 +934,7 @@ hr { } .toggleBtnPledge:hover { - color: var(--light-green) !important; + color: var(--grey-light) !important; } .card { @@ -1152,22 +1160,14 @@ hr { margin: 0.6rem 0; } -@media (max-width: 768px) { - .btnsContainer { - margin-bottom: 0; - display: flex; - flex-direction: column; - } - - .createAgendaItemButton { - position: absolute; - top: 1rem; - right: 2rem; - } +.createAgendaItemButton { + position: absolute; + top: 1rem; + right: 2rem; } .customcell { - background-color: var(--light-green) !important; + background-color: var(--grey-light) !important; color: var(--bs-white) !important; font-size: medium !important; font-weight: 500 !important; @@ -1318,202 +1318,37 @@ hr { 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; - letter-spacing: 25px; - } -} - -@media (max-width: 768px) { - .pageNotFound h1.head { - font-size: 150px; - letter-spacing: 25px; - } -} - -@media (max-width: 640px) { - .pageNotFound h1.head { - font-size: 150px; - letter-spacing: 0; - } -} - -@media (max-width: 480px) { - .pageNotFound .brand h3 { - font-size: 20px; - } - .pageNotFound h1.head { - font-size: 130px; - letter-spacing: 0; - } - .pageNotFound h1.head span:before, - .pageNotFound h1.head span:after { - width: 40%; - } - .pageNotFound h1.head span:before { - left: -45%; - } - .pageNotFound h1.head span:after { - right: -45%; - } - .pageNotFound p { - font-size: 18px; - } -} - -@media (max-width: 320px) { - .pageNotFound .brand h3 { - font-size: 16px; - } - .pageNotFound h1.head { - font-size: 100px; - letter-spacing: 0; - } - .pageNotFound h1.head span:before, - .pageNotFound h1.head span:after { - width: 25%; - } - .pageNotFound h1.head span:before { - left: -30%; - } - .pageNotFound h1.head span:after { - right: -30%; - } +.btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign { + margin: 1.5rem 0 0 0; + justify-content: space-between; } -@media (max-width: 520px) { - .btnsContainer { - margin-bottom: 0; - } - - .btn { - flex-direction: column; - justify-content: center; - } - .btnsContainer .btnsBlock { - display: block; - margin-top: 1rem; - margin-right: 0; - } - - .btnsContainer .btnsBlock div { - flex: 1; - } - - .btnsContainer .btnsBlock div[title='Sort organizations'] { - margin-right: 0.5rem; - } - .btnsContainer .btnsBlock button { - margin-bottom: 1rem; - margin-right: 0; - width: 100%; - } +.btnsContainerOrganizationFundCampaign + .btnsBlockOrganizationFundCampaign + div + button { + margin: 0; } -@media (max-width: 1120px) { - .contract { - padding-left: calc(250px + 2rem + 1.5rem); - } - - .listBox .itemCard { - width: 100%; - } +.createFundBtn { + margin-top: 0; } -@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 button { - margin: 0; - } - - .btnsContainer .btnsBlock div button { - margin-right: 1.5rem; - } +.btnsContainerOrganizationFundCampaign .btnsBlockOrganizationFundCampaign { + display: block; + margin-top: 1rem; + margin-right: 0; } -@-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } +.btnsContainerOrganizationFundCampaign + .btnsBlockOrganizationFundCampaign + div + button { + margin-bottom: 1rem; + margin-right: 0; + width: 100%; } -@keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} .btnsContainer .input { flex: 1; position: relative; @@ -1629,7 +1464,7 @@ hr { } .toggleBtn:hover { - color: var(--light-green) !important; + color: var(--grey-light) !important; } input[type='radio']:checked + label { @@ -1740,10 +1575,10 @@ input[type='radio']:checked + label:hover { .dropdowns { background-color: var(--bs-white); - border: 1px solid var(--light-green); + border: 1px solid var(--grey-light); position: relative; display: inline-block; - color: var(--light-green); + color: var(--grey-light); } .chipIcon { @@ -2061,23 +1896,6 @@ input[type='radio']:checked + label:hover { 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 var(--grey-border-box-color); box-shadow: 0 2px 2px var(--grey-border-box-color); @@ -2198,30 +2016,6 @@ input[type='radio']:checked + label:hover { 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; @@ -2248,27 +2042,6 @@ input[type='radio']:checked + label:hover { 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 { @@ -2291,13 +2064,6 @@ input[type='radio']:checked + label:hover { border-radius: 8px; } -@media only screen and (max-width: 1200px) { - .userImage { - width: 100px; - height: 100px; - } -} - .activeBtn { width: 100%; display: flex; @@ -2481,88 +2247,8 @@ input::file-selector-button { text-decoration: underline; } -@media (max-width: 1440px) { - .contractOrgList { - padding-left: calc(250px + 2rem + 1.5rem); - } - - .listBoxOrgList .itemCardOrgList { - width: 100%; - } -} - -@media (max-width: 1020px) { - .btnsContainerOrgList { - flex-direction: column; - margin: 1.5rem 0; - } - - .btnsContainerOrgList .btnsBlockOrgList { - margin: 1.5rem 0 0 0; - justify-content: space-between; - } - - .btnsContainerOrgList .btnsBlockOrgList button { - margin: 0; - } - - .btnsContainerOrgList .btnsBlockOrgList div button { - margin-right: 1.5rem; - } -} - /* For mobile devices */ -@media (max-width: 520px) { - .btnsContainerOrgList { - margin-bottom: 0; - } - - .btnsContainerOrgList .btnsBlockOrgList { - display: block; - margin-top: 1rem; - margin-right: 0; - } - - .btnsContainerOrgList .btnsBlockOrgList div { - flex: 1; - } - - .btnsContainerOrgList .btnsBlockOrgList div[title='Sort organizations'] { - margin-right: 0.5rem; - } - - .btnsContainerOrgList .btnsBlockOrgList button { - margin-bottom: 1rem; - margin-right: 0; - width: 100%; - } -} -@media (max-width: 600px) { - .cardBody { - min-height: 120px; - } - - .cardBody .iconWrapper { - position: absolute; - top: 1rem; - left: 1rem; - } - - .cardBody .textWrapper { - margin-top: calc(0.5rem + 36px); - text-align: right; - } - - .cardBody .textWrapper .primaryText { - font-size: 1.5rem; - } - - .cardBody .textWrapper .secondaryText { - font-size: 1rem; - } -} - .cardBody { padding: 1.25rem 1.5rem; } @@ -2846,37 +2532,6 @@ form > input { margin-bottom: var(--spacing-lg, 1.25rem); } -@media (max-width: 450px) { - .itemCardOrgList .loadingWrapper { - height: unset; - margin: 0.5rem 0; - padding: 1.25rem 1.5rem; - } - - .itemCardOrgList .loadingWrapper .innerContainer { - flex-direction: column; - } - - .itemCardOrgList .loadingWrapper .innerContainer .orgImgContainer { - height: 200px; - width: 100%; - margin-bottom: 0.8rem; - } - - .itemCardOrgList .loadingWrapper .innerContainer .content { - margin-left: 0; - } - - .itemCardOrgList .loadingWrapper .button { - bottom: 0; - right: 0; - border-radius: 0.5rem; - position: relative; - margin-left: auto; - display: block; - } -} - /* * Refortoring css for Leaderboard */ .TableImageSmall { @@ -2995,636 +2650,1975 @@ form > input { animation: zoomIn 0.3s ease-in-out; } -@media (max-width: 1020px) { - .btnsContainerOrgPost { - flex-direction: column; - margin: 1.5rem 0; +.addbtnOrgPost { + border: 1px solid var(--grey-border-box-color); + box-shadow: 0 2px 2px var(--grey-border-box-color); + border-radius: 5px; + font-size: 16px; + height: 60%; + width: 60%; + color: var(--bs-white); + outline: none; + font-weight: 600; + cursor: pointer; + transition: + transform 0.2s, + box-shadow 0.2s; +} +.postinfo { + height: 80px; + margin-bottom: 20px; +} +.closeButtonOrgPost { + position: absolute; + top: 0px; + right: 0px; + background: transparent; + cursor: pointer; + border: none; + color: var(--grey-bg-color-dark); + font-weight: 600; + font-size: 16px; + padding: 0.5rem; + border-radius: 4px; + transition: all 0.2s ease; + &:hover { + background-color: var(--bs-gray-100); + color: var(--bs-danger); } - - .btnsContainerOrgPost .btnsBlockOrgPost { - margin: 1.5rem 0 0 0; - justify-content: space-between; + &:focus-visible { + outline: 2px solid var(--bs-primary); + outline-offset: 2px; } - - .btnsContainerOrgPost .btnsBlockOrgPost button { - margin: 0; + &:active { + transform: scale(0.95); } +} +button[data-testid='createPostBtn'] { + display: block; +} +.loader, +.loader:after { + border-radius: 50%; + width: var(--loader-size); + height: var(--loader-size); +} +.loader { + margin: 60px auto; + margin-top: 35vh !important; + font-size: 10px; + position: relative; + text-indent: -9999em; + border-top: 1.1em solid var(--white-shadow-color); + border-right: 1.1em solid var(--white-shadow-color); + border-bottom: 1.1em solid var(--white-shadow-color); + border-left: 1.1em solid var(--light-orange); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.1s infinite linear; + animation: load8 1.1s infinite linear; +} - .btnsContainerOrgPost .btnsBlockOrgPost div button { - margin-right: 1.5rem; - } +.cardItem { + position: relative; + display: flex; + align-items: center; + border: 1px solid var(--bs-gray-200); + border-radius: 8px; + margin-top: 20px; } -@media (max-width: 992px) { - .row .left_portion { - padding: 0 2rem; - } - .row .left_portion .inner .palisadoes_logo { - width: 100%; - } +.cardItem .iconWrapper { + position: relative; + height: 40px; + width: 40px; + display: flex; + justify-content: center; + align-items: center; } -@media (max-width: 769px) { - .row { - flex-direction: column-reverse; - } - .row .right_portion, - .row .left_portion { - height: unset; - } - .row .right_portion { - min-height: 100vh; - overflow-y: unset; - } - .row .left_portion .inner { - display: flex; - justify-content: center; - } - .row .left_portion .inner .palisadoes_logo { - height: 70px; - width: unset; - position: absolute; - margin: 0.5rem; - top: 0; - right: 0; - z-index: 100; +.cardItem .iconWrapper .themeOverlay { + background: var(--bs-primary); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0.12; + border-radius: 50%; +} + +.cardItem .title { + font-size: 1rem; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; /* Fallback for browsers that don't support line-clamp */ + margin-left: 3px; +} +/* Modern browsers - enable line clamping */ + +.cardItem .location { + font-size: 0.9rem; + color: var(--bs-primary); + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 1; + line-clamp: 1; + -webkit-box-orient: vertical; +} + +.cardItem .time { + font-size: 0.9rem; + color: var(--bs-secondary); +} + +.cardItem .creator { + font-size: 1rem; + color: var(--bs-success, var(--green-color)); +} +.rightCard { + display: flex; + gap: 7px; + min-width: 170px; + justify-content: center; + flex-direction: column; + margin-left: 10px; + overflow-x: hidden; + width: 210px; + + @keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } } - .row .left_portion .inner p { - margin-bottom: 0; - padding: 1rem; + + /* AddOnEntry.tsx */ + + .entrytoggle { + margin: 24px 24px 0 auto; + width: fit-content; } - .socialIcons { - margin-bottom: 1rem; + + .entryaction { + margin-left: auto; + display: flex !important; + align-items: center; + background-color: transparent; + color: var(--grey-light); } + + .entryaction .spinner-grow { + height: 1rem; + width: 1rem; + margin-right: 8px; + } +} + +.leftDrawer { + width: calc(300px + 2rem); + position: fixed; + top: 0; + bottom: 0; + z-index: 100; + display: flex; + flex-direction: column; + padding: 1rem 1rem 0 1rem; + background-color: var(--input-area-color); + transition: 0.5s; + font-family: var(--bs-leftDrawer-font-family); +} + +.activeDrawer { + width: calc(300px + 2rem); + position: fixed; + top: 0; + left: 0; + bottom: 0; + animation: comeToRightBigScreen 0.5s ease-in-out; +} + +.inactiveDrawer { + position: fixed; + top: 0; + left: calc(-300px - 2rem); + bottom: 0; + animation: goToLeftBigScreen 0.5s ease-in-out; +} + +.leftDrawer .talawaLogo { + width: 100%; + height: 65px; +} + +.leftDrawer .talawaText { + font-size: 20px; + text-align: center; + font-weight: 500; +} + +.leftDrawer .titleHeader { + margin: 2rem 0 1rem 0; + font-weight: 600; +} + +.leftDrawer .optionList button { + display: flex; + align-items: center; + width: 100%; + text-align: start; + margin-bottom: 0.8rem; + border-radius: 16px; + outline: none; + border: none; +} + +.leftDrawer .optionList button .iconWrapper { + width: 36px; +} + +.leftDrawer .profileContainer { + border: none; + width: 100%; + padding: 2.1rem 0.5rem; + height: 52px; + display: flex; + align-items: center; + background-color: var(--bs-white); +} + +.leftDrawer .profileContainer:focus { + outline: none; + background-color: var(--bs-gray-100, var(--white-color)); +} + +.leftDrawer .imageContainer { + width: 68px; +} + +.leftDrawer .profileContainer img { + height: 52px; + width: 52px; + border-radius: 50%; +} + +.leftDrawer .profileContainer .profileText { + flex: 1; + text-align: start; +} + +.leftDrawer .profileContainer .profileText .primaryText { + font-size: 1.1rem; + font-weight: 600; +} + +.leftDrawer .profileContainer .profileText .secondaryText { + font-size: 0.8rem; + font-weight: 400; + color: var(--bs-secondary); + display: block; + text-transform: capitalize; +} + +/* CustomRecurrenceModal.tsx */ + +.titlemodalCustomRecurrenceModal { + color: var(--grey-bg-color-dark); + font-weight: 600; + font-size: 20px; + margin-bottom: 20px; + padding-bottom: 5px; + border-bottom: 3px solid var(--subtle-blue-grey); + width: 65%; +} + +.recurrenceRuleNumberInput { + width: 70px; +} + +.recurrenceRuleDateBox { + width: 70%; +} + +.recurrenceDayButton { + width: 33px; + height: 33px; + border: 1px solid var(--bs-gray); + cursor: pointer; + transition: background-color 0.3s; + display: inline-flex; + justify-content: center; + align-items: center; + margin-right: 0.5rem; + border-radius: 50%; + position: relative; + outline: none; +} + +.recurrenceDayButton:focus-visible { + outline: 2px solid var(--bs-primary); + outline-offset: 2px; +} + +.recurrenceDayButton:hover { + background-color: var(--bs-gray); +} + +.recurrenceDayButton.selected { + background-color: var(--bs-primary); + border-color: var(--bs-primary); + color: var(--bs-white); +} + +.recurrenceDayButton span { + color: var(--bs-gray); + padding: 0.25rem; + text-align: center; +} + +.recurrenceDayButton:hover span { + color: var(--bs-white); +} + +.recurrenceDayButton.selected span { + color: var(--bs-white); +} + +.recurrenceRuleSubmitBtn { + display: block; + margin-left: auto; + padding: 7px 15px; + transition: all 0.2s ease; + border-radius: 4px; +} + +.recurrenceRuleSubmitBtn:hover { + transform: translateY(-1px); + box-shadow: 0 2px 4px var(--black-shadow-color); +} + +.recurrenceRuleSubmitBtn:focus-visible { + outline: 2px solid var(--bs-primary); + outline-offset: 2px; +} + +.attendance-modal .borderRightGreen { + border-right: 1px solid var(--light-dark-green); +} +.attendance-modal .positionedTopRight { + top: 10px; + right: 15px; + z-index: 1; +} +.attendance-modal .topRightCorner { + position: absolute; + right: 0; + top: 0; + border-bottom-left-radius: 8px; +} +.attendance-modal .bottomRightCorner { + position: absolute; + right: 0; + bottom: 0; + border-top-left-radius: 12px; +} +.attendance-modal .topLeftCorner { + position: absolute; + left: 0; + top: 0; + border-bottom-right-radius: 8px; +} +.attendance-modal .largeBoldText { + font-size: 80px; + font-weight: 400; +} +.attendance-modal .paddingBottom30 { + padding-bottom: 30px; +} +.attendance-modal .paddingBottom2Rem { + padding-bottom: 2rem; +} + +/* PostCard.tsx */ + +.cardStyles { + width: 100%; + max-width: 20rem; + background-color: var(--bs-white); + padding: 0; + border: none !important; + outline: none !important; +} + +.cardHeaderPostCard { + display: flex; + width: 100%; + padding-inline: 0; + padding-block: 0; + flex-direction: row; + gap: 0.5rem; + align-items: center; + background-color: var(--bs-white); + border-bottom: 1px solid var(--input-shadow-color); +} + +.creator { + display: flex; + width: 100%; + padding-inline: 1rem; + padding-block: 0; + flex-direction: row; + gap: 0.5rem; + align-items: center; +} +.creator p { + margin-bottom: 0; + font-weight: 500; +} +.creator svg { + width: 1.5rem; + height: 1.5rem; +} + +.customToggle { + padding: 0; + background: none; + border: none; + margin-right: 1rem; +} +.customToggle svg { + color: var(--bs-black); +} + +.customToggle::after { + content: none; +} +.customToggle:hover, +.customToggle:focus, +.customToggle:active { + background: none; + border: none; +} +.cardBodyPostCard div { + padding: 0.5rem; +} + +.imageContainerPostCard { + max-width: 100%; +} + +.cardTitlePostCard { + --max-lines: 1; + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--max-lines); + + font-size: 1.3rem !important; + font-weight: 600; +} + +.date { + font-weight: 600; +} + +.cardText { + --max-lines: 2; + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--max-lines); + padding-top: 0; + font-weight: 300; + margin-top: 0.7rem !important; + text-align: left; +} +.viewBtn { + display: flex; + justify-content: flex-end; + margin: 0.5rem; +} +.viewBtn Button { + padding-inline: 1rem; +} +.cardActions { + display: flex; + flex-direction: row; + align-items: center; + gap: 1px; + justify-content: flex-end; +} + +.cardActionBtn { + background-color: rgba(0, 0, 0, 0); + padding: 0; + border: none; + color: var(--black-color); + transition: all 0.2s ease-in-out; + border-radius: 4px; +} + +.cardActionBtn:hover, +.cardActionBtn:focus-visible { + background-color: var(--dropdown-hover-color); + border: none; + color: var(--black-color) !important; + outline: 2px solid var(--subtle-blue-grey); + outline-offset: 2px; +} + +.cardActionBtn:active { + transform: scale(0.95); + background-color: var(--grey-bg-color); +} + +.creatorNameModal { + display: flex; + flex-direction: row; + gap: 5px; + align-items: center; + margin-bottom: 10px; +} + +.modalActions { + display: flex; + flex-direction: row; + align-items: center; + gap: 1rem; + margin: 5px 0px; +} + +.textModal { + margin-top: 10px; +} + +.colorPrimary { + background: var(--blue-light); + color: var(--bs-white); + cursor: pointer; +} + +.commentContainer { + overflow: auto; + max-height: 18rem; + padding-bottom: 1rem; +} + +.modalFooter { + background-color: var(--bs-white); + width: 100%; + padding-block: 0.5rem; + display: flex; + flex-direction: column; + border-top: 1px solid var(--input-shadow-color); +} + +.inputArea { + border: none; + outline: none; + background-color: var(--input-area-color); +} + +.postImage { + width: 100%; + aspect-ratio: 16/9; + object-fit: cover; +} + +/* Events.tsx */ + +.borderNone { + border: none; +} + +.colorWhite { + color: var(--bs-white); +} + +.backgroundWhite { + background-color: var(--bs-white); +} + +.maxWidth { + max-width: 800px; +} + +.mainContainer { + margin-top: 2rem; + width: 100%; + max-width: 800px; + flex-grow: 3; + max-height: 90vh; + overflow: auto; + padding: 0 1rem; +} + +.selectType { + border-radius: 10px; +} +.dropdown__item { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.gap { + gap: var(--spacing-lg, 1.25rem); +} + +.paddingY { + padding: var(--spacing-xl, 1.875rem) 0; +} + +.eventActionsContainer { + display: flex; + flex-direction: row; + gap: 15px; + flex-wrap: wrap; +} +.datePicker { + border-radius: 10px; + height: 2.5rem; + text-align: center; + background-color: var(--date-picker-background); + border: none; + width: 100%; +} + +.modalBodyEvents { + display: flex; + flex-direction: column; + gap: 10px; +} + +.switchContainer { + display: flex; + align-items: center; +} + +.switches { + display: flex; + flex-direction: row; + gap: 20px; + flex-wrap: wrap; + margin-top: 20px; +} +.titlemodalEvents { + color: var(--grey-bg-color-dark); + font-weight: 600; + font-size: 20px; + margin-bottom: 20px; + padding-bottom: 5px; + border-bottom: 3px solid var(--subtle-blue-grey); + width: 65%; +} + +.datedivEvents { + display: flex; + flex-direction: row; + margin-bottom: 15px; +} + +.dateboxEvents { + width: 90%; + border-radius: 7px; + border-color: var(--grey-border-box-color); + outline: none; + box-shadow: none; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 5px; + padding-left: 5px; + margin-right: 5px; + margin-left: 5px; +} + +.checkboxdivEvents > label { + margin-right: 50px; +} +.checkboxdivEvents > label > input { + margin-left: 10px; +} + +.checkboxdivEvents { + display: flex; +} +.checkboxdivEvents > div { + width: 50%; +} + +.dispflexEvents { + display: flex; + align-items: center; +} +.dispflexEvents > input { + border: none; + box-shadow: none; + margin-top: 5px; +} + +.blueregbtnEvents { + margin-top: var(--spacing-lg, 1.25rem); + border: 1px solid var(--grey-border-box-color); + box-shadow: 0 2px 2px var(--grey-border-box-color); + padding: var(--spacing-md, 0.625rem); + border-radius: 5px; + background-color: var(--subtle-blue-grey); + width: 100%; + font-size: 16px; + color: var(--bs-white); + outline: none; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease-in-out; + width: 100%; + &:hover { + transform: translateY(-1px); + box-shadow: 0 4px 6px var(--grey-border-box-color); + } +} + +.btnsContainer input { + outline: 1px solid var(--bs-gray-400); + background-color: white; +} + +.accordionSummary { + width: 100% !important; + padding-right: 0.75rem; + display: flex; + justify-content: space-between !important; + align-items: center; +} + +.accordionSummary button { + height: 2.25rem; + padding-top: 0.35rem; +} + +.accordionSummary button:hover { + background-color: var( + --accordion-hover-bg, + rgba(49, 187, 106, 0.3) + ) !important; + color: var(--accordion-hover-color, var(--grey-light)) !important; +} + +.subContainer span { + font-size: 0.9rem; + margin-left: 0.5rem; + font-weight: lighter; + color: var(--grey-dark); +} + +.chip { + margin: 0.15rem 0 0 1.25rem; +} + +.expand { + padding-left: 4rem; + animation: moveLeft 0.9s ease-in-out; +} + +.contract { + padding-left: calc(300px); + animation: moveRight 0.5s ease-in-out; +} + +.collapseSidebarButton { + position: fixed; + height: 40px; + bottom: 0; + z-index: 9999; + width: 300px; + background-color: var(--bs-white); + color: black; + border: none; + border-radius: 0px; + transition: opacity 0.3s ease; + /* Add focus styles for keyboard navigation */ + &:focus-visible { + outline: 2px solid var(--bs-primary); + outline-offset: 2px; + } +} + +.collapseSidebarButton:hover, +.opendrawer:hover { + background-color: var(--bs-gray-100); + color: var(--bs-primary) !important; +} + +.containerHeight { + height: 88vh; +} + +.mainContainerChat { + width: 100%; + max-width: 800px; + margin-left: 20px; + flex-grow: 3; + max-height: 100%; + overflow: auto; + display: flex; + flex-direction: row; + border: 1px solid rgb(220, 220, 220); + margin-top: 15px; + border-radius: 24px; + background-color: white; +} + +.chatContainer { + flex-grow: 6; + display: flex; + flex-direction: column; + margin: 20px; + border: 1px solid rgb(220, 220, 220); + border-radius: 24px; + overflow-y: scroll; + margin-left: 0px; + scrollbar-width: none; + -ms-overflow-style: none; + &::-webkit-scrollbar { + display: none; + } +} + +.contactContainer { + flex-grow: 1; + display: flex; + flex-direction: column; + width: 25%; + overflow-y: scroll; +} + +.addChatContainer { + margin: 0 20px; + padding: 20px 0px 10px 0px; + border-bottom: 2px solid black; +} + +.contactCardContainer { + padding: 10px 15px; + display: flex; + flex-direction: column; + gap: 5px; +} + +.chatHeadingContainer { + padding: 10px; +} + +.accordion-button:focus { + box-shadow: none; +} + +.accordion-button:not(.collapsed) { + color: var(--bs-btn-bg); + background-color: white; +} + +.chatType > button { + padding-bottom: 0; +} + +.createChat { + background-color: white; + border: none; +} + +.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); +} + +.customToggle { + padding: 0; + background: none; + border: none; + margin-right: 1rem; + --bs-btn-active-bg: none; +} +.customToggle svg { + color: black; +} + +.customToggle::after { + content: none; +} +.customToggle:hover, +.customToggle:focus, +.customToggle:active { + background: none; + border: none; +} +.customToggle svg { + color: black; +} + +.accordionBody { + height: calc(100vh / 2 - 2rem - 60px) !important; + overflow-y: scroll; +} + +.accordionBody::-webkit-scrollbar { + display: none; +} + +.filters { + padding: 20px 0px 0px 20px; + display: flex; + gap: 8px; +} + +.filterButton { + border-radius: 14px; + padding: 5px 10px; + background-color: white; + color: var(--grey-color); + border: none; + border: 1px solid var(--grey-color); +} + +.selectedBtn, +.filterButton:hover { + border: 1px solid var(--grey-light); + background-color: var(--grey-light); + color: rgb(255, 255, 255); +} + +.mainContainerDonate { + width: 50%; + flex-grow: 3; + display: flex; + flex-direction: column; + background-color: var(--bg-white); +} + +.inputContainer { + flex: 1; + position: relative; +} + +.input { + box-shadow: 5px 5px 4px 0px var(--bg-white); +} + +.box { + width: auto; + background-color: white; + margin-top: 1rem; + padding: 20px; + border: 1px solid var(--input-shadow-color); + border-radius: 10px; +} + +.heading { + font-size: 1.1rem; +} + +.donationInputContainer { + display: flex; + flex-direction: row; + margin-top: 20px; +} + +.donateBtn { + padding-inline: 1rem !important; +} + +.dropdow { + min-width: 6rem; +} + +.inputArea { + border: none; + outline: none; + background-color: var(--input-area-color); +} + +.maxWidthDonate { + width: 100%; +} + +.donateActions { + margin-top: 1rem; + width: 100%; + display: flex; + flex-direction: row-reverse; +} + +.donationsContainer { + padding-top: 4rem; + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.donationCardsContainer { + display: flex; + flex-wrap: wrap; + gap: 1rem; + --bs-gutter-x: 0; +} + +.colorLight { + background-color: var(--bs-white); +} + +.content { + padding-top: 10px; + flex-grow: 1; +} + +.modal-dialog { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; +} + +.modal-content { + width: 100%; + max-width: 500px; +} + +.modal-body { + text-align: center; +} + +.modal-header, +.modal-footer { + justify-content: center; + text-align: center; +} + +.confirmation { + text-align: center; + margin-top: 30px; +} + +.contentOrg { + height: fit-content; + min-height: calc(100% - 40px); +} + +.containerHeightOrg { + height: 100vh; + padding: 1rem 1.5rem 0 calc(300px + 1.5rem); +} + +.colorPrimary { + background: var(--bs-form-valid-border-color); +} + +.input { + margin-right: 10px; +} + +.borderBox { + border: 1px solid var(--input-shadow-color); +} + +.borderRounded5 { + border-radius: 5px; +} + +.borderRounded8 { + border-radius: 8px; +} + +.borderRounded24 { + border-radius: 24px; +} + +.topRadiusPeople { + border-top-left-radius: 24px; + border-top-right-radius: 24px; +} + +.bottomRadius { + border-bottom-left-radius: 24px; + border-bottom-right-radius: 24px; +} + +.shadow { + box-shadow: 5px 5px 4px 0px var(--grey-light); +} + +.colorGreen { + color: var(--blue-light); +} + +.maxWidthPeople { + max-width: 600px; +} + +.mainContainerPeople { + width: 50%; + flex-grow: 3; +} + +.contentPeople { + height: fit-content; + min-height: calc(100% - 40px); +} + +.gap { + gap: 20px; +} + +.greenBorder { + border: 1px solid var(--blue-light); +} + +.semiBold { + font-weight: 500; +} + +.placeholderColor::placeholder { + color: var(--bs--grey); +} + +.btnsContainer { + display: flex; + margin: 1.5rem 0; +} + +.btnsContainer .input { + flex: 1; + min-width: 18rem; + position: relative; +} + +.btnsContainer input { + outline: 1px solid var(--bs-gray-400); + background-color: white; +} + +.btnsContainer .input button { + width: 52px; +} + +.titleContainer { + display: flex; + flex-direction: column; + gap: 0.1rem; +} + +.titleContainer h3 { + font-size: 1.25rem; + font-weight: 750; + color: var(--grey-color); + margin-top: 0.2rem; +} + +.subContainer span { + font-size: 0.9rem; + margin-left: 0.5rem; + font-weight: lighter; + color: var(--grey-dark); +} + +.progress { + display: flex; + width: 100%; + max-width: 45rem; + display: flex; + width: 100%; + max-width: 45rem; +} + +/* Consolidated styles */ +.progressBar { + margin: 0 0.75rem; + width: 100%; + font-size: 0.9rem; + height: 1.25rem; + transition: width 0.3s ease-in-out; + border-radius: 0.625rem; +} + +/* Data Grid Styles */ +.tableHeaderPledges { + background-color: var(--bs-primary); + color: var(--bs-white); + font-size: 1rem; +} + +.mainContainerPosts { + width: 50%; + flex-grow: 3; + padding: 1rem; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; + background-color: var(--bg-white); +} + +.containerHeightPosts { + height: 100vh; +} + +.link { + text-decoration: none !important; + color: black; +} + +.postInputContainer { + margin-top: 0.5rem; + margin-bottom: 1rem; +} + +.maxWidthPosts { + width: 100%; +} + +.postActionContainer { + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 10px; +} + +.postActionBtn { + background-color: white; + border: none; + color: black; +} + +.postActionBtn:hover { + background-color: ghostwhite; + border: none; + color: black; +} + +.postInput { + resize: none; + border: none; + outline: none; + box-shadow: none; + background-color: white; + margin-bottom: 10px; +} + +.postInput:focus { + box-shadow: none; +} + +.postContainer { + width: auto; + background-color: white; + margin-top: 1rem; + padding: 1rem; + border: 1px solid var(--input-shadow-color); + border-radius: 10px; +} + +.pinnedPostsCardsContainer { + overflow-x: scroll; + display: flex; + gap: 1rem; + --bs-gutter-x: 0; +} + +.userImage { + display: flex; + width: 50px; + height: 50px; + margin-left: 1rem; + align-items: center; + justify-content: center; + overflow: hidden; + border-radius: 50%; + position: relative; + border: 2px solid var(--blue-light); +} + +.userImage img { + position: absolute; + top: 0; + left: 0; + width: 100%; + scale: 1.5; +} + +.startPostBtn { + width: 100%; + border-radius: 25px; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; + outline: none; + border: none; + color: var(--black-color); + font-weight: 900; +} + +.startPostBtn:hover { + background-color: var(--bs-dark); + border: 0; + color: var(--black-color) !important; +} + +.icons { + width: 25px; +} + +.icons svg { + stroke: var(--black-color); +} + +.icons.dark { + cursor: pointer; + border: none; + outline: none; + background-color: transparent; +} + +.icons.dark svg { + stroke: var(--black-color); +} + +.iconLabel { + margin: 0; + color: var(--black-color); + font-weight: 900; +} + +.uploadLink { + text-align: center; + width: min-content; + padding: 8px 4px; + border-radius: 4px; + cursor: pointer; +} + +.uploadLink:hover { + background-color: var(--bs-dark); } -@media (max-width: 577px) { - .row .right_portion { - padding: 1rem 1rem 0 1rem; - } - .row .right_portion .langChangeBtn { - position: absolute; - margin: 1rem; - left: 0; - top: 0; - } - .marginTopForReg { - margin-top: 4rem !important; - } - .row .right_portion .talawa_logo { - height: 120px; - margin: 0 auto 2rem auto; - } - .socialIcons { - margin-bottom: 1rem; - } +.modal { + width: 100dvw; + margin: 0 auto; } -@media (prefers-reduced-motion: reduce) { - .talawa_logo { - animation: none; - } +.imageInput { + display: none; +} - .active_tab { - animation: none; - } +.containerHeightSettings { + padding: 1rem 1.5rem 0 calc(300px + 1.5rem); + height: 100vh; } -@-webkit-keyframes zoomIn { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } +.cardHeader .cardTitle { + font-size: 1.2rem; + font-weight: 600; } -@keyframes zoomIn { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } +.scrollableCardBody { + max-height: min(220px, 50vh); + overflow-y: auto; + scroll-behavior: smooth; } -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - -webkit-transform: translateY(2rem); - transform: translateY(2rem); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } +.cardBody { + padding: 1.25rem 1rem 1.5rem 1rem; + display: flex; + flex-direction: column; + overflow-y: scroll; } -@keyframes fadeIn { - 0% { - opacity: 0; - -webkit-transform: translateY(2rem); - transform: translateY(2rem); - } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); - } +.cardLabel { + font-weight: bold; + padding-bottom: 1px; + font-size: 14px; + color: var(--grey-dark); + margin-bottom: 10px; } -/* For mobile devices */ +.cardControl { + margin-bottom: 20px; +} -@media (max-width: 520px) { - .btnsContainerOrgPost { - margin-bottom: 0; - } +.cardButton { + width: fit-content; +} - .btnsContainerOrgPost .btnsBlockOrgPost { - display: block; - margin-top: 1rem; - margin-right: 0; - } +.imgContianer { + margin: 0 2rem 0 0; +} - .btnsContainerOrgPost .btnsBlockOrgPost div { - flex: 1; - } +.imgContianer img { + height: 120px; + width: 120px; + border-radius: 50%; +} - .btnsContainerOrgPost .btnsBlockOrgPost div[title='Sort organizations'] { - margin-right: 0.5rem; - } +.profileDetails { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; +} - .btnsContainerOrgPost .btnsBlockOrgPost button { - margin-bottom: 1rem; - margin-right: 0; - width: 100%; - } +.pageContainer { + display: flex; + flex-direction: column; + min-height: 100vh; + padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem); } -@media screen and (max-width: 575.5px) { - .mainpagerightOrgPost { - width: 98%; - } + +.avatarStyle { + border-radius: 100%; } -.addbtnOrgPost { - border: 1px solid var(--grey-border-box-color); - box-shadow: 0 2px 2px var(--grey-border-box-color); - border-radius: 5px; - font-size: 16px; - height: 60%; - width: 60%; - color: var(--bs-white); +.profileContainer { + border: none; + padding: 2.1rem 0.5rem; + height: 52px; + border-radius: 8px 0px 0px 8px; + display: flex; + align-items: center; + background-color: white !important; + box-shadow: + 0 4px 4px 0 rgba(177, 177, 177, 0.2), + 0 6px 20px 0 rgba(151, 151, 151, 0.19); +} +.profileContainer:focus { outline: none; - font-weight: 600; - cursor: pointer; - transition: - transform 0.2s, - box-shadow 0.2s; + background-color: var(--bs-gray-100); } -.postinfo { - height: 80px; - margin-bottom: 20px; +.imageContainer { + width: 56px; } -.closeButtonOrgPost { - position: absolute; - top: 0px; - right: 0px; - background: transparent; - transform: scale(1.2); - cursor: pointer; - border: none; - color: var(--grey-bg-color-dark); +.profileContainer .profileText { + flex: 1; + text-align: start; + overflow: hidden; + margin-right: 4px; +} +.angleDown { + margin-left: 4px; +} +.profileContainer .profileText .primaryText { + font-size: 1rem; font-weight: 600; - font-size: 16px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; /* number of lines to show */ + -webkit-box-orient: vertical; + word-wrap: break-word; + white-space: normal; } -button[data-testid='createPostBtn'] { +.profileContainer .profileText .secondaryText { + font-size: 0.8rem; + font-weight: 400; + color: var(--bs-secondary); display: block; + text-transform: capitalize; } -.loader, -.loader:after { - border-radius: 50%; - width: var(--loader-size); - height: var(--loader-size); + +.profileDropdown { + background-color: transparent !important; } -.loader { - margin: 60px auto; - margin-top: 35vh !important; - font-size: 10px; - position: relative; - text-indent: -9999em; - border-top: 1.1em solid var(--white-shadow-color); - border-right: 1.1em solid var(--white-shadow-color); - border-bottom: 1.1em solid var(--white-shadow-color); - border-left: 1.1em solid var(--light-orange); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - -webkit-animation: load8 1.1s infinite linear; - animation: load8 1.1s infinite linear; +.profileDropdown .dropdown-toggle .btn .btn-normal { + display: none !important; + background-color: transparent !important; } -@keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } +.dropdownToggle { + background-image: url(/public/images/svg/angleDown.svg); + background-repeat: no-repeat; + background-position: center; + background-color: azure; } -.list_box { - height: 70vh; - overflow-y: auto; - width: auto; + +.dropdownToggle::after { + border-top: none !important; + border-bottom: none !important; } -@media only screen and (max-width: 600px) { - .form_wrapper { - width: 90%; - top: 45%; - } + +.opendrawer:hover { + transition: background-color 0.5s ease; + background-color: var(--bs-primary); } -.cardItem { - position: relative; + +.chip { + height: 1.5rem !important; + margin: 0.15rem 0 0 1.25rem; +} + +.progress { display: flex; - align-items: center; - border: 1px solid var(--bs-gray-200); - border-radius: 8px; - margin-top: 20px; } -@-webkit-keyframes zoomIn { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } +/* CreateDirectChat.tsx */ + +.modalContent { + width: 530px; +} + +.inputContainer { + position: relative; + margin-bottom: 16px; } -@keyframes zoomIn { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } +.inputFieldModal { + padding-right: 40px; + width: 100%; + border-radius: 4px; + border: 1px solid var(--bs-gray-300); } -.cardItem .iconWrapper { - position: relative; - height: 40px; - width: 40px; +.submitBtn { + position: absolute; + z-index: 10; + bottom: 10px; + right: 0px; display: flex; justify-content: center; align-items: center; } +.tableContainer { + height: 400px; + overflow-y: scroll; + overflow-x: hidden; +} +@media screen and (max-width: 575.5px) { + .justifysp { + padding-left: 55px; + display: flex; + justify-content: space-between; + width: 100%; + } +} -.cardItem .iconWrapper .themeOverlay { - background: var(--bs-primary); - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0.12; - border-radius: 50%; +@media (max-width: 768px) { + .btnsContainer { + margin-bottom: 0; + display: flex; + flex-direction: column; + } } +@media (max-width: 1020px) { + .btnsContainerOrganizationFundCampaign { + flex-direction: column; + margin: 1.5rem 0; + } -.cardItem .title { - font-size: 1rem; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; /* Fallback for browsers that don't support line-clamp */ - margin-left: 3px; + @media screen and (max-width: 575.5px) { + .mainpageright { + width: 98%; + } + } } -/* Modern browsers - enable line clamping */ -@supports (-webkit-line-clamp: 1) { - .cardItem .title, - .cardItem .location, - .cardItem .time { - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - white-space: initial; + +/* For mobile devices */ + +@media (max-width: 520px) { + .btnsContainerOrganizationFundCampaign { + margin-bottom: 0; } } -.cardItem .location { - font-size: 0.9rem; - color: var(--bs-primary); - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 1; - line-clamp: 1; - -webkit-box-orient: vertical; +@media (max-width: 1024px) { + .pageNotFound h1.head { + font-size: 200px; + letter-spacing: 25px; + } } -.cardItem .time { - font-size: 0.9rem; - color: var(--bs-secondary); +@media (max-width: 768px) { + .pageNotFound h1.head { + font-size: 150px; + letter-spacing: 25px; + } } -.cardItem .creator { - font-size: 1rem; - color: var(--bs-success, var(--green-color)); +@media (max-width: 640px) { + .pageNotFound h1.head { + font-size: 150px; + letter-spacing: 0; + } } -.rightCard { - display: flex; - gap: 7px; - min-width: 170px; - justify-content: center; - flex-direction: column; - margin-left: 10px; - overflow-x: hidden; - width: 210px; - @keyframes zoomIn { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5); - } +@media (max-width: 480px) { + .pageNotFound .brand h3 { + font-size: 20px; + } + .pageNotFound h1.head { + font-size: 130px; + letter-spacing: 0; + } + .pageNotFound h1.head span:before, + .pageNotFound h1.head span:after { + width: 40%; + } + .pageNotFound h1.head span:before { + left: -45%; + } + .pageNotFound h1.head span:after { + right: -45%; + } + .pageNotFound p { + font-size: 18px; + } +} - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1); - } +@media (max-width: 320px) { + .pageNotFound .brand h3 { + font-size: 16px; + } + .pageNotFound h1.head { + font-size: 100px; + letter-spacing: 0; + } + .pageNotFound h1.head span:before, + .pageNotFound h1.head span:after { + width: 25%; + } + .pageNotFound h1.head span:before { + left: -30%; + } + .pageNotFound h1.head span:after { + right: -30%; + } +} +@media (max-width: 520px) { + .btnsContainer { + margin-bottom: 0; } - /* AddOnEntry.tsx */ + .btn { + flex-direction: column; + justify-content: center; + } + .btnsContainer .btnsBlock { + display: block; + margin-top: 1rem; + margin-right: 0; + } - .entrytoggle { - margin: 24px 24px 0 auto; - width: fit-content; + .btnsContainer .btnsBlock div { + flex: 1; } - .entryaction { - margin-left: auto; - display: flex !important; - align-items: center; - background-color: transparent; - color: var(--light-green); + .btnsContainer .btnsBlock div[title='Sort organizations'] { + margin-right: 0.5rem; } - .entryaction .spinner-grow { - height: 1rem; - width: 1rem; - margin-right: 8px; + .btnsContainer .btnsBlock button { + margin-bottom: 1rem; + margin-right: 0; + width: 100%; } } -.leftDrawer { - width: calc(300px + 2rem); - position: fixed; - top: 0; - bottom: 0; - z-index: 100; - display: flex; - flex-direction: column; - padding: 1rem 1rem 0 1rem; - background-color: var(--input-area-color); - transition: 0.5s; - font-family: var(--bs-leftDrawer-font-family); -} +@media (max-width: 1120px) { + .contract { + padding-left: calc(250px + 2rem + 1.5rem); + } -.activeDrawer { - width: calc(300px + 2rem); - position: fixed; - top: 0; - left: 0; - bottom: 0; - animation: comeToRightBigScreen 0.5s ease-in-out; + .listBox .itemCard { + width: 100%; + } } -.inactiveDrawer { - position: fixed; - top: 0; - left: calc(-300px - 2rem); - bottom: 0; - animation: goToLeftBigScreen 0.5s ease-in-out; +@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 button { + margin: 0; + } + + .btnsContainer .btnsBlock div button { + margin-right: 1.5rem; + } } -.leftDrawer .talawaLogo { - width: 100%; - height: 65px; +@keyframes load8 { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } -.leftDrawer .talawaText { - font-size: 20px; - text-align: center; - font-weight: 500; +/* Add vendor prefix only if needed for older browser support */ +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + } } -.leftDrawer .titleHeader { - margin: 2rem 0 1rem 0; - font-weight: 600; -} +@media screen and (max-width: 1200px) { + .justifyspMemberDetail { + padding-left: 55px; + display: flex; + justify-content: space-evenly; + } -.leftDrawer .optionList button { - display: flex; - align-items: center; - width: 100%; - text-align: start; - margin-bottom: 0.8rem; - border-radius: 16px; - outline: none; - border: none; -} + .mainpageright { + width: 100%; + } -.leftDrawer .optionList button .iconWrapper { - width: 36px; + .invitebtn { + position: relative; + right: 15px; + } } -.leftDrawer .profileContainer { - border: none; - width: 100%; - padding: 2.1rem 0.5rem; - height: 52px; - display: flex; - align-items: center; - background-color: var(--bs-white); -} +@-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } -.leftDrawer .profileContainer:focus { - outline: none; - background-color: var(--bs-gray-100, var(--white-color)); + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } -.leftDrawer .imageContainer { - width: 68px; -} +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } -.leftDrawer .profileContainer img { - height: 52px; - width: 52px; - border-radius: 50%; + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } -.leftDrawer .profileContainer .profileText { - flex: 1; - text-align: start; -} +@media only screen and (max-width: 600px) { + .sidebar { + position: relative; + bottom: 18px; + } -.leftDrawer .profileContainer .profileText .primaryText { - font-size: 1.1rem; - font-weight: 600; -} + .invitebtn { + width: 135px; + position: relative; + right: 10px; + } -.leftDrawer .profileContainer .profileText .secondaryText { - font-size: 0.8rem; - font-weight: 400; - color: var(--bs-secondary); - display: block; - text-transform: capitalize; -} + .form_wrapper { + width: 90%; + } -@media (max-width: 1120px) { - .leftDrawer { - width: calc(250px + 2rem); - padding: 1rem 1rem 0 1rem; + .searchtitleMemberDetail { + margin-top: 30px; } } -/* For tablets */ -@media (max-width: 820px) { - .hideElemByDefault { - display: none; +@media only screen and (max-width: 1200px) { + .userImage { + width: 100px; + height: 100px; + } +} +@media (max-width: 1440px) { + .contractOrgList { + padding-left: calc(250px + 2rem + 1.5rem); } - .leftDrawer { + .listBoxOrgList .itemCardOrgList { width: 100%; - left: 0; - right: 0; } +} - .inactiveDrawer { - opacity: 0; - left: 0; - z-index: -1; - animation: closeDrawer 0.4s ease-in-out; +@media (max-width: 1020px) { + .btnsContainerOrgList { + flex-direction: column; + margin: 1.5rem 0; } - .activeDrawer { - display: flex; - z-index: 100; - animation: openDrawer 0.6s ease-in-out; + .btnsContainerOrgList .btnsBlockOrgList { + margin: 1.5rem 0 0 0; + justify-content: space-between; } - .logout { - margin-bottom: 2.5rem !important; + .btnsContainerOrgList .btnsBlockOrgList button { + margin: 0; + } + + .btnsContainerOrgList .btnsBlockOrgList div button { + margin-right: 1.5rem; } } -@keyframes goToLeftBigScreen { - from { - left: 0; +@media (max-width: 520px) { + .btnsContainerOrgList { + margin-bottom: 0; } - to { - opacity: 0.1; - left: calc(-300px - 2rem); + .btnsContainerOrgList .btnsBlockOrgList { + display: block; + margin-top: 1rem; + margin-right: 0; } -} -/* Webkit prefix for older browser compatibility */ -@-webkit-keyframes goToLeftBigScreen { - from { - left: 0; + .btnsContainerOrgList .btnsBlockOrgList div { + flex: 1; } - to { - opacity: 0.1; - left: calc(-300px - 2rem); + .btnsContainerOrgList .btnsBlockOrgList div[title='Sort organizations'] { + margin-right: 0.5rem; + } + + .btnsContainerOrgList .btnsBlockOrgList button { + margin-bottom: 1rem; + margin-right: 0; + width: 100%; } } +@media (max-width: 600px) { + .cardBody { + min-height: 120px; + } -@keyframes comeToRightBigScreen { - from { - opacity: 0.4; - left: calc(-300px - 2rem); + .cardBody .iconWrapper { + position: absolute; + top: 1rem; + left: 1rem; } - to { - opacity: 1; - left: 0; + .cardBody .textWrapper { + margin-top: calc(0.5rem + 36px); + text-align: right; } -} -/* Webkit prefix for older browser compatibility */ -@-webkit-keyframes comeToRightBigScreen { - from { - opacity: 0.4; - left: calc(-300px - 2rem); + .cardBody .textWrapper .primaryText { + font-size: 1.5rem; } - to { - opacity: 1; + .cardBody .textWrapper .secondaryText { + font-size: 1rem; + } +} +@media (max-width: 577px) { + .row .right_portion { + padding: 1rem 1rem 0 1rem; + } + .row .right_portion .langChangeBtn { + position: absolute; + margin: 1rem; left: 0; + top: 0; + } + .marginTopForReg { + margin-top: 4rem !important; + } + .row .right_portion .talawa_logo { + height: 120px; + margin: 0 auto 2rem auto; + } + .socialIcons { + margin-bottom: 1rem; } } -@keyframes closeDrawer { - from { - left: 0; - opacity: 1; +@media (prefers-reduced-motion: reduce) { + .talawa_logo { + animation: none; + } + + .active_tab { + animation: none; } +} - to { - left: -1000px; +@-webkit-keyframes zoomIn { + 0% { opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); } -} - -/* Webkit prefix for older browser compatibility */ -@-webkit-keyframes closeDrawer { - from { - left: 0; + 100% { opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); } +} - to { - left: -1000px; +@keyframes zoomIn { + 0% { opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); } } -@keyframes openDrawer { - from { +@-webkit-keyframes fadeIn { + 0% { opacity: 0; - left: -1000px; + -webkit-transform: translateY(2rem); + transform: translateY(2rem); } - - to { - left: 0; + 100% { opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } -/* Webkit prefix for older browser compatibility */ -@-webkit-keyframes openDrawer { - from { +@keyframes fadeIn { + 0% { opacity: 0; - left: -1000px; + -webkit-transform: translateY(2rem); + transform: translateY(2rem); } - to { - left: 0; + 100% { opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } @@ -3825,475 +4819,482 @@ button[data-testid='createPostBtn'] { width: 70%; } -.recurrenceDayButton { - width: 33px; - height: 33px; - border: 1px solid var(--bs-gray); - cursor: pointer; - transition: background-color 0.3s; - display: inline-flex; - justify-content: center; - align-items: center; - margin-right: 0.5rem; - border-radius: 50%; - position: relative; - outline: none; -} +@media (max-width: 520px) { + .btnsContainerOrgPost { + margin-bottom: 0; + } -.recurrenceDayButton:focus-visible { - outline: 2px solid var(--bs-primary); - outline-offset: 2px; -} + .btnsContainerOrgPost .btnsBlockOrgPost { + display: block; + margin-top: 1rem; + margin-right: 0; + } -.recurrenceDayButton:hover { - background-color: var(--bs-gray); -} + .btnsContainerOrgPost .btnsBlockOrgPost div { + flex: 1; + } -.recurrenceDayButton.selected { - background-color: var(--bs-primary); - border-color: var(--bs-primary); - color: var(--bs-white); -} + .btnsContainerOrgPost .btnsBlockOrgPost div[title='Sort organizations'] { + margin-right: 0.5rem; + } -.recurrenceDayButton span { - color: var(--bs-gray); - padding: 0.25rem; - text-align: center; + .btnsContainerOrgPost .btnsBlockOrgPost button { + margin-bottom: 1rem; + margin-right: 0; + width: 100%; + } } - -.recurrenceDayButton:hover span { - color: var(--bs-white); +@media screen and (max-width: 575.5px) { + .mainpagerightOrgPost { + width: 98%; + } } +@media (max-width: 450px) { + .itemCardOrgList .loadingWrapper { + height: unset; + margin: 0.5rem 0; + padding: 1.25rem 1.5rem; + } -.recurrenceDayButton.selected span { - color: var(--bs-white); -} + .itemCardOrgList .loadingWrapper .innerContainer { + flex-direction: column; + } -.recurrenceRuleSubmitBtn { - display: block; - margin-left: auto; - padding: 7px 15px; - transition: all 0.2s ease; - border-radius: 4px; -} + .itemCardOrgList .loadingWrapper .innerContainer .orgImgContainer { + height: 200px; + width: 100%; + margin-bottom: 0.8rem; + } -.recurrenceRuleSubmitBtn:hover { - transform: translateY(-1px); - box-shadow: 0 2px 4px var(--black-shadow-color); -} + .itemCardOrgList .loadingWrapper .innerContainer .content { + margin-left: 0; + } -.recurrenceRuleSubmitBtn:focus-visible { - outline: 2px solid var(--bs-primary); - outline-offset: 2px; + .itemCardOrgList .loadingWrapper .button { + bottom: 0; + right: 0; + border-radius: 0.5rem; + position: relative; + margin-left: auto; + display: block; + } } +@media (max-width: 1020px) { + .btnsContainerOrgPost { + flex-direction: column; + margin: 1.5rem 0; + } -.attendance-modal .borderRightGreen { - border-right: 1px solid var(--light-dark-green); -} -.attendance-modal .positionedTopRight { - top: 10px; - right: 15px; - z-index: 1; -} -.attendance-modal .topRightCorner { - position: absolute; - right: 0; - top: 0; - border-bottom-left-radius: 8px; -} -.attendance-modal .bottomRightCorner { - position: absolute; - right: 0; - bottom: 0; - border-top-left-radius: 12px; -} -.attendance-modal .topLeftCorner { - position: absolute; - left: 0; - top: 0; - border-bottom-right-radius: 8px; -} -.attendance-modal .largeBoldText { - font-size: 80px; - font-weight: 400; -} -.attendance-modal .paddingBottom30 { - padding-bottom: 30px; -} -.attendance-modal .paddingBottom2Rem { - padding-bottom: 2rem; -} + .btnsContainerOrgPost .btnsBlockOrgPost { + margin: 1.5rem 0 0 0; + justify-content: space-between; + } -/* PostCard.tsx */ + .btnsContainerOrgPost .btnsBlockOrgPost button { + margin: 0; + } -.cardStyles { - width: 100%; - max-width: 20rem; - background-color: var(--bs-white); - padding: 0; - border: none !important; - outline: none !important; + .btnsContainerOrgPost .btnsBlockOrgPost div button { + margin-right: 1.5rem; + } } -.cardHeaderPostCard { - display: flex; - width: 100%; - padding-inline: 0; - padding-block: 0; - flex-direction: row; - gap: 0.5rem; - align-items: center; - background-color: var(--bs-white); - border-bottom: 1px solid var(--input-shadow-color); +@media (max-width: 992px) { + .row .left_portion { + padding: 0 2rem; + } + .row .left_portion .inner .palisadoes_logo { + width: 100%; + } } -.creator { - display: flex; - width: 100%; - padding-inline: 1rem; - padding-block: 0; - flex-direction: row; - gap: 0.5rem; - align-items: center; +@media (max-width: 769px) { + .row { + flex-direction: column-reverse; + } + .row .right_portion, + .row .left_portion { + height: unset; + } + .row .right_portion { + min-height: 100vh; + overflow-y: unset; + } + .row .left_portion .inner { + display: flex; + justify-content: center; + } + .row .left_portion .inner .palisadoes_logo { + height: 70px; + width: unset; + position: absolute; + margin: 0.5rem; + top: 0; + right: 0; + z-index: 100; + } + .row .left_portion .inner p { + margin-bottom: 0; + padding: 1rem; + } + .socialIcons { + margin-bottom: 1rem; + } } -.creator p { - margin-bottom: 0; - font-weight: 500; +@keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } -.creator svg { - width: 1.5rem; - height: 1.5rem; +.list_box { + height: 70vh; + overflow-y: auto; + width: auto; } - -.customToggle { - padding: 0; - background: none; - border: none; - margin-right: 1rem; +@media only screen and (max-width: 600px) { + .form_wrapper { + width: 90%; + top: 45%; + } } -.customToggle svg { - color: var(--bs-black); +@-webkit-keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } } -.customToggle::after { - content: none; -} -.customToggle:hover, -.customToggle:focus, -.customToggle:active { - background: none; - border: none; -} -.cardBodyPostCard div { - padding: 0.5rem; +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } + 100% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } } -.imageContainerPostCard { - max-width: 100%; +@media (max-width: 1120px) { + .leftDrawer { + width: calc(250px + 2rem); + padding: 1rem 1rem 0 1rem; + } } -.cardTitlePostCard { - --max-lines: 1; - display: -webkit-box; - overflow: hidden; - -webkit-box-orient: vertical; - -webkit-line-clamp: var(--max-lines); +/* For tablets */ +@media (max-width: 820px) { + .hideElemByDefault { + display: none; + } - font-size: 1.3rem !important; - font-weight: 600; -} + .leftDrawer { + width: 100%; + left: 0; + right: 0; + } -.date { - font-weight: 600; -} + .inactiveDrawer { + opacity: 0; + left: 0; + z-index: -1; + animation: closeDrawer 0.4s ease-in-out; + } -.cardText { - --max-lines: 2; - display: -webkit-box; - overflow: hidden; - -webkit-box-orient: vertical; - -webkit-line-clamp: var(--max-lines); - padding-top: 0; - font-weight: 300; - margin-top: 0.7rem !important; - text-align: left; -} -.viewBtn { - display: flex; - justify-content: flex-end; - margin: 0.5rem; -} -.viewBtn Button { - padding-inline: 1rem; -} -.cardActions { - display: flex; - flex-direction: row; - align-items: center; - gap: 1px; - justify-content: flex-end; -} + .activeDrawer { + display: flex; + z-index: 100; + animation: openDrawer 0.6s ease-in-out; + } -.cardActionBtn { - background-color: rgba(0, 0, 0, 0); - padding: 0; - border: none; - color: var(--black-color); - transition: all 0.2s ease-in-out; - border-radius: 4px; + .logout { + margin-bottom: 2.5rem !important; + } } -.cardActionBtn:hover, -.cardActionBtn:focus-visible { - background-color: var(--dropdown-hover-color); - border: none; - color: var(--black-color) !important; - outline: 2px solid var(--subtle-blue-grey); - outline-offset: 2px; -} +@keyframes goToLeftBigScreen { + from { + left: 0; + } -.cardActionBtn:active { - transform: scale(0.95); - background-color: var(--grey-bg-color); + to { + opacity: 0.1; + left: calc(-300px - 2rem); + } } -.creatorNameModal { - display: flex; - flex-direction: row; - gap: 5px; - align-items: center; - margin-bottom: 10px; -} +/* Webkit prefix for older browser compatibility */ +@-webkit-keyframes goToLeftBigScreen { + from { + left: 0; + } -.modalActions { - display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; - margin: 5px 0px; + to { + opacity: 0.1; + left: calc(-300px - 2rem); + } } -.textModal { - margin-top: 10px; -} +@keyframes comeToRightBigScreen { + from { + opacity: 0.4; + left: calc(-300px - 2rem); + } -.colorPrimary { - background: var(--subtle-blue-grey); - color: var(--bs-white); - cursor: pointer; + to { + opacity: 1; + left: 0; + } } -.commentContainer { - overflow: auto; - max-height: 18rem; - padding-bottom: 1rem; -} +/* Webkit prefix for older browser compatibility */ +@-webkit-keyframes comeToRightBigScreen { + from { + opacity: 0.4; + left: calc(-300px - 2rem); + } -.modalFooter { - background-color: var(--bs-white); - width: 100%; - padding-block: 0.5rem; - display: flex; - flex-direction: column; - border-top: 1px solid var(--input-shadow-color); + to { + opacity: 1; + left: 0; + } } -.inputArea { - border: none; - outline: none; - background-color: var(--input-area-color); +@keyframes closeDrawer { + from { + left: 0; + opacity: 1; + } + + to { + left: -1000px; + opacity: 0; + } } -.postImage { - width: 100%; - aspect-ratio: 16/9; - object-fit: cover; +/* Webkit prefix for older browser compatibility */ +@-webkit-keyframes closeDrawer { + from { + left: 0; + opacity: 1; + } + + to { + left: -1000px; + opacity: 0; + } } -/* Events.tsx */ +@keyframes openDrawer { + from { + opacity: 0; + left: -1000px; + } -.borderNone { - border: none; + to { + left: 0; + opacity: 1; + } } -.colorWhite { - color: var(--bs-white); +/* Webkit prefix for older browser compatibility */ +@-webkit-keyframes openDrawer { + from { + opacity: 0; + left: -1000px; + } + to { + left: 0; + opacity: 1; + } } - -.backgroundWhite { - background-color: var(--bs-white); +@supports (-webkit-line-clamp: 1) { + .cardItem .title, + .cardItem .location, + .cardItem .time { + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + white-space: initial; + } } - -.maxWidth { - max-width: 800px; +@media (max-width: 1120px) { + .collapseSidebarButton { + width: calc(250px); + } } -.mainContainer { - margin-top: 2rem; - width: 100%; - max-width: 800px; - flex-grow: 3; - max-height: 90vh; - overflow: auto; - padding: 0 1rem; +@media (max-height: 650px) { + .collapseSidebarButton { + width: 250px; + height: 20px; + } + .opendrawer { + width: 30px; + } } -.selectType { - border-radius: 10px; +/* For tablets */ +@media (max-width: 820px) { + .contract, + .expand { + animation: none; + } + + .opendrawer { + width: 25px; + } + + .collapseSidebarButton { + width: 100%; + left: 0; + right: 0; + } } -.dropdown__item { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; +@media screen and (max-width: 850px) { + .mainContainer { + width: 100%; + } } -.gap { - gap: var(--spacing-lg, 1.25rem); +@media (max-width: 1120px) { + .collapseSidebarButton { + width: calc(250px + 2rem); + } } -.paddingY { - padding: var(--spacing-xl, 1.875rem) 0; +@media (max-height: 650px) { + .collapseSidebarButton { + width: 250px; + height: 20px; + } + .opendrawer { + width: 30px; + } } -.eventActionsContainer { - display: flex; - flex-direction: row; - gap: 15px; - flex-wrap: wrap; -} -.datePicker { - border-radius: 10px; - height: 2.5rem; - text-align: center; - background-color: var(--date-picker-background); - border: none; - width: 100%; +@media screen and (max-width: 1280px) { + .imgContianer { + margin: 1rem auto; + } + .profileContainer { + flex-direction: column; + } } -.modalBodyEvents { - display: flex; - flex-direction: column; - gap: 10px; +@media screen and (min-width: 992px) and (max-width: 1280px) { + .profileContainer { + align-items: center; + justify-content: center; + } } - -.switchContainer { - display: flex; - align-items: center; +@media (max-width: 1120px) { + .contract { + padding-left: calc(276px + 2rem + 1.5rem); + } + .collapseSidebarButton { + width: calc(250px + 2rem); + } } -.switches { - display: flex; - flex-direction: row; - gap: 20px; - flex-wrap: wrap; - margin-top: 20px; +@media (max-height: 900px) { + .collapseSidebarButton { + width: calc(300px + 1rem); + } } -.titlemodalEvents { - color: var(--grey-bg-color-dark); - font-weight: 600; - font-size: 20px; - margin-bottom: 20px; - padding-bottom: 5px; - border-bottom: 3px solid var(--subtle-blue-grey); - width: 65%; +@media (max-height: 650px) { + .pageContainer { + padding: 1rem 1.5rem 0 calc(270px); + } + .collapseSidebarButton { + width: 250px; + } + .opendrawer { + width: 30px; + } } -.datedivEvents { - display: flex; - flex-direction: row; - margin-bottom: 15px; -} +/* VolunteerViewModal.tsx */ -.dateboxEvents { - width: 90%; - border-radius: 7px; - border-color: var(--grey-border-box-color); - outline: none; - box-shadow: none; - padding-top: 2px; - padding-bottom: 2px; - padding-right: 5px; - padding-left: 5px; - margin-right: 5px; - margin-left: 5px; +.modalTitle { + margin: 0; } -.checkboxdivEvents > label { - margin-right: 50px; -} -.checkboxdivEvents > label > input { - margin-left: 10px; +.modalForm { + padding: 1rem; } -.checkboxdivEvents { - display: flex; +.formGroup { + margin-bottom: 1rem; } -.checkboxdivEvents > div { - width: 50%; + +.tableImage { + width: 40px; + height: 40px; + border-radius: 50%; + margin-right: 8px; } -.dispflexEvents { +.statusGroup { display: flex; - align-items: center; -} -.dispflexEvents > input { - border: none; - box-shadow: none; - margin-top: 5px; + gap: 1rem; + margin: 0 auto; + margin-bottom: 0.5rem; + role: 'status'; } -.blueregbtnEvents { - margin-top: var(--spacing-lg, 1.25rem); - border: 1px solid var(--grey-border-box-color); - box-shadow: 0 2px 2px var(--grey-border-box-color); - padding: var(--spacing-md, 0.625rem); - border-radius: 5px; - background-color: var(--subtle-blue-grey); - width: 100%; - font-size: 16px; - color: var(--bs-white); - outline: none; - font-weight: 600; - cursor: pointer; - transition: all 0.2s ease-in-out; - width: 100%; - &:hover { - transform: translateY(-1px); - box-shadow: 0 4px 6px var(--grey-border-box-color); - } +.statusIcon { + margin-right: 0.5rem; } -/* CreateDirectChat.tsx */ - -.modalContent { - width: 530px; +.acceptedStatus { + color: var(--bs-primary); + -webkit-text-fill-color: var(--bs-primary); + outline: 1px solid currentColor; + border-radius: 4px; + padding: 2px 4px; } -.inputContainer { - position: relative; - margin-bottom: 16px; +.pendingStatus { + color: var(--bs-warning); + -webkit-text-fill-color: var(--bs-warning); + outline: 1px solid currentColor; + border-radius: 4px; + padding: 2px 4px; } -.inputFieldModal { - padding-right: 40px; +.hoursField { width: 100%; - border-radius: 4px; - border: 1px solid var(--bs-gray-300); } -.submitBtn { - position: absolute; - z-index: 10; - bottom: 10px; - right: 0px; - display: flex; - justify-content: center; - align-items: center; +.groupsLabel { + font-weight: lighter; + margin-left: 0.5rem; + margin-bottom: 0; + font-size: 0.8rem; + color: var(--bs-secondary); } -.tableContainer { - height: 400px; - overflow-y: scroll; - overflow-x: hidden; + +.tableHeader { + font-weight: bold; +} + +.tableRow:last-child td, +.tableRow:last-child th { + border: 0; } /* VolunteerViewModal.tsx */