{userImage && userImage !== 'null' ? (
- /*istanbul ignore next*/
{
-
{t('title')}
- {tCommon('admins')}: {props.admins?.length}
- {tCommon('members')}:{' '}
- {props.members?.length}
+
+ {tCommon('admins')}: {props.admins?.length}
+
+
+ {tCommon('members')}: {props.members?.length}
+
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.module.css b/src/components/UserPortal/UserSidebar/UserSidebar.module.css
deleted file mode 100644
index aafeaeff97..0000000000
--- a/src/components/UserPortal/UserSidebar/UserSidebar.module.css
+++ /dev/null
@@ -1,239 +0,0 @@
-.leftDrawer {
- width: calc(300px);
- position: fixed;
- top: 0;
- bottom: 0;
- z-index: 100;
- display: flex;
- flex-direction: column;
- padding: 1rem 1rem 0 1rem;
- background-color: var(--bs-white);
- transition: 0.5s;
- font-family: var(--bs-leftDrawer-font-family);
-}
-
-.activeDrawer {
- width: calc(300px);
- 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);
-}
-
-.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;
-}
-
-@media (max-width: 1120px) {
- .leftDrawer {
- width: calc(250px + 2rem);
- padding: 1rem 1rem 0 1rem;
- }
-}
-
-/* For tablets */
-@media (max-width: 820px) {
- .hideElemByDefault {
- display: none;
- }
-
- .leftDrawer {
- width: 100%;
- left: 0;
- right: 0;
- }
-
- .inactiveDrawer {
- opacity: 0;
- left: 0;
- z-index: -1;
- animation: closeDrawer 0.4s ease-in-out;
- }
-
- .activeDrawer {
- display: flex;
- z-index: 100;
- animation: openDrawer 0.6s ease-in-out;
- }
-
- .logout {
- margin-bottom: 2.5rem !important;
- }
-}
-
-@keyframes goToLeftBigScreen {
- from {
- left: 0;
- }
-
- to {
- opacity: 0.1;
- left: calc(-300px - 2rem);
- }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes goToLeftBigScreen {
- from {
- left: 0;
- }
-
- to {
- opacity: 0.1;
- left: calc(-300px - 2rem);
- }
-}
-
-@keyframes comeToRightBigScreen {
- from {
- opacity: 0.4;
- left: calc(-300px - 2rem);
- }
-
- to {
- opacity: 1;
- left: 0;
- }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes comeToRightBigScreen {
- from {
- opacity: 0.4;
- left: calc(-300px - 2rem);
- }
-
- to {
- opacity: 1;
- left: 0;
- }
-}
-
-@keyframes closeDrawer {
- from {
- left: 0;
- opacity: 1;
- }
-
- to {
- left: -1000px;
- opacity: 0;
- }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes closeDrawer {
- from {
- left: 0;
- opacity: 1;
- }
-
- to {
- left: -1000px;
- opacity: 0;
- }
-}
-
-@keyframes openDrawer {
- from {
- opacity: 0;
- left: -1000px;
- }
-
- to {
- left: 0;
- opacity: 1;
- }
-}
-
-/* Webkit prefix for older browser compatibility */
-@-webkit-keyframes openDrawer {
- from {
- opacity: 0;
- left: -1000px;
- }
-
- to {
- left: 0;
- opacity: 1;
- }
-}
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx
index 6435353f89..7476bd8061 100644
--- a/src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.spec.tsx
@@ -3,7 +3,7 @@ import type { RenderResult } from '@testing-library/react';
import { fireEvent, render, screen } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
-import styles from './UserSidebar.module.css';
+import styles from '../../../style/app.module.css';
import {
USER_DETAILS,
USER_JOINED_ORGANIZATIONS,
@@ -462,9 +462,9 @@ describe('UserSidebar Component Tests in User Portal', () => {
const settingsBtn = screen.getByTestId('settingsBtn');
fireEvent.click(orgsBtn);
- expect(orgsBtn).toHaveClass('text-white btn btn-success');
+ expect(orgsBtn).toHaveClass('btn btn-success');
fireEvent.click(settingsBtn);
- expect(settingsBtn).toHaveClass('text-white btn btn-success');
+ expect(settingsBtn).toHaveClass('btn btn-success');
});
it('Translation hook displays expected text in UserSidebar', async () => {
diff --git a/src/components/UserPortal/UserSidebar/UserSidebar.tsx b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
index 010d8d0e52..c350a27cc1 100644
--- a/src/components/UserPortal/UserSidebar/UserSidebar.tsx
+++ b/src/components/UserPortal/UserSidebar/UserSidebar.tsx
@@ -5,7 +5,8 @@ import { NavLink } from 'react-router-dom';
import OrganizationsIcon from 'assets/svgs/organizations.svg?react';
import SettingsIcon from 'assets/svgs/settings.svg?react';
import TalawaLogo from 'assets/svgs/talawa.svg?react';
-import styles from './UserSidebar.module.css';
+import styles from '../../../style/app.module.css';
+import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
export interface InterfaceUserSidebarProps {
hideDrawer: boolean | null;
@@ -61,53 +62,70 @@ const userSidebar = ({
{tCommon('menu')}
-
- {/* Link to "My Organizations" page */}
-
- {({ isActive }) => (
-
- )}
-
- {/* Link to "Settings" page */}
-
- {({ isActive }) => (
-
- )}
-
+
diff --git a/src/screens/ForgotPassword/ForgotPassword.tsx b/src/screens/ForgotPassword/ForgotPassword.tsx
index 49c0a2af6e..2986ee1afb 100644
--- a/src/screens/ForgotPassword/ForgotPassword.tsx
+++ b/src/screens/ForgotPassword/ForgotPassword.tsx
@@ -105,7 +105,7 @@ const ForgotPassword = (): JSX.Element => {
};
/**
- * Handles the form submission for resetting the password.
+ * manages the form submission for resetting the password.
*
* @param e - The form submit event
*/
@@ -135,7 +135,6 @@ const ForgotPassword = (): JSX.Element => {
},
});
- /* istanbul ignore else -- @preserve */
if (data) {
toast.success(t('passwordChanges') as string);
setShowEnterEmail(true);
@@ -164,7 +163,10 @@ const ForgotPassword = (): JSX.Element => {
+
+ {/* Link to "My Organizations" page */}
+
+
+ {({ isActive }) => (
+
+ )}
+
+ {/* Link to "Settings" page */}
+
+ {({ isActive }) => (
+
+ )}
+
+
+
+
-