From bdee2c7953b70863b5491280e50c5c42c793a5cc Mon Sep 17 00:00:00 2001
From: prathmesh703 <146568950+prathmesh703@users.noreply.github.com>
Date: Tue, 21 Jan 2025 22:40:06 +0530
Subject: [PATCH] Fixes: The Login and Organization Screens (#3309)
* login and landing ui
* ui
* ui2
* fixed failing test
* re review
* global css
* testcases fix
* color variables
* failing test
---
.../LeftDrawer/functions/default.md | 2 +-
.../interfaces/InterfaceLeftDrawerProps.md | 6 +-
.../SuperAdminScreen/functions/default.md | 2 +-
.../UserSidebar/functions/default.md | 2 +-
.../interfaces/InterfaceUserSidebarProps.md | 6 +-
.../Organizations/functions/default.md | 2 +-
public/images/svg/angleRight.svg | 7 +
src/assets/css/app.css | 8 +-
src/components/LeftDrawer/LeftDrawer.spec.tsx | 22 +-
src/components/LeftDrawer/LeftDrawer.tsx | 167 ++--
.../LoginPortalToggle.module.css | 34 -
.../LoginPortalToggle/LoginPortalToggle.tsx | 2 +-
.../OrgListCard/OrgListCard.module.css | 148 ---
src/components/OrgListCard/OrgListCard.tsx | 10 +-
.../ProfileDropdown.module.css | 75 --
.../ProfileDropdown/ProfileDropdown.tsx | 13 +-
.../SuperAdminScreen.module.css | 101 ---
.../SuperAdminScreen/SuperAdminScreen.tsx | 4 +-
.../OrganizationCard.module.css | 149 ---
.../OrganizationCard/OrganizationCard.tsx | 11 +-
.../UserSidebar/UserSidebar.module.css | 239 -----
.../UserSidebar/UserSidebar.spec.tsx | 6 +-
.../UserPortal/UserSidebar/UserSidebar.tsx | 114 ++-
src/screens/ForgotPassword/ForgotPassword.tsx | 10 +-
src/screens/LoginPage/LoginPage.tsx | 10 +-
src/screens/OrgList/OrgList.tsx | 1 +
.../Organizations/Organizations.module.css | 145 ---
.../Organizations/Organizations.tsx | 69 +-
src/style/app.module.css | 853 ++++++++++++++++--
29 files changed, 1053 insertions(+), 1165 deletions(-)
create mode 100644 public/images/svg/angleRight.svg
delete mode 100644 src/components/LoginPortalToggle/LoginPortalToggle.module.css
delete mode 100644 src/components/OrgListCard/OrgListCard.module.css
delete mode 100644 src/components/ProfileDropdown/ProfileDropdown.module.css
delete mode 100644 src/components/SuperAdminScreen/SuperAdminScreen.module.css
delete mode 100644 src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
delete mode 100644 src/components/UserPortal/UserSidebar/UserSidebar.module.css
delete mode 100644 src/screens/UserPortal/Organizations/Organizations.module.css
diff --git a/docs/docs/auto-docs/components/LeftDrawer/LeftDrawer/functions/default.md b/docs/docs/auto-docs/components/LeftDrawer/LeftDrawer/functions/default.md
index 5a74576457..b6052d20d0 100644
--- a/docs/docs/auto-docs/components/LeftDrawer/LeftDrawer/functions/default.md
+++ b/docs/docs/auto-docs/components/LeftDrawer/LeftDrawer/functions/default.md
@@ -6,7 +6,7 @@
> **default**(`__namedParameters`): `Element`
-Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:24](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/LeftDrawer/LeftDrawer.tsx#L24)
+Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:25](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/LeftDrawer/LeftDrawer.tsx#L25)
LeftDrawer component for displaying navigation options.
diff --git a/docs/docs/auto-docs/components/LeftDrawer/LeftDrawer/interfaces/InterfaceLeftDrawerProps.md b/docs/docs/auto-docs/components/LeftDrawer/LeftDrawer/interfaces/InterfaceLeftDrawerProps.md
index a1be16ca7c..270d7a5c1c 100644
--- a/docs/docs/auto-docs/components/LeftDrawer/LeftDrawer/interfaces/InterfaceLeftDrawerProps.md
+++ b/docs/docs/auto-docs/components/LeftDrawer/LeftDrawer/interfaces/InterfaceLeftDrawerProps.md
@@ -4,7 +4,7 @@
# Interface: InterfaceLeftDrawerProps
-Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/LeftDrawer/LeftDrawer.tsx#L12)
+Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/LeftDrawer/LeftDrawer.tsx#L13)
## Properties
@@ -12,7 +12,7 @@ Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:12](https://github.com/Pal
> **hideDrawer**: `boolean`
-Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/LeftDrawer/LeftDrawer.tsx#L13)
+Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/LeftDrawer/LeftDrawer.tsx#L14)
***
@@ -20,4 +20,4 @@ Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:13](https://github.com/Pal
> **setHideDrawer**: `Dispatch`\<`SetStateAction`\<`boolean`\>\>
-Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/LeftDrawer/LeftDrawer.tsx#L14)
+Defined in: [src/components/LeftDrawer/LeftDrawer.tsx:15](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/LeftDrawer/LeftDrawer.tsx#L15)
diff --git a/docs/docs/auto-docs/components/SuperAdminScreen/SuperAdminScreen/functions/default.md b/docs/docs/auto-docs/components/SuperAdminScreen/SuperAdminScreen/functions/default.md
index 31b98bab95..b1df3638d2 100644
--- a/docs/docs/auto-docs/components/SuperAdminScreen/SuperAdminScreen/functions/default.md
+++ b/docs/docs/auto-docs/components/SuperAdminScreen/SuperAdminScreen/functions/default.md
@@ -6,7 +6,7 @@
> **default**(): `Element`
-Defined in: [src/components/SuperAdminScreen/SuperAdminScreen.tsx:15](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/SuperAdminScreen/SuperAdminScreen.tsx#L15)
+Defined in: [src/components/SuperAdminScreen/SuperAdminScreen.tsx:14](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/SuperAdminScreen/SuperAdminScreen.tsx#L14)
The SuperAdminScreen component manages the layout for the Super Admin screen,
including handling the sidebar visibility and page title based on the current route.
diff --git a/docs/docs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/functions/default.md b/docs/docs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/functions/default.md
index eb891bb0c9..6fc6ef8069 100644
--- a/docs/docs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/functions/default.md
+++ b/docs/docs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/functions/default.md
@@ -6,7 +6,7 @@
> **default**(`__namedParameters`): `Element`
-Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:28](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L28)
+Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:29](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L29)
Sidebar component for user navigation, including links to organizations and settings.
diff --git a/docs/docs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/interfaces/InterfaceUserSidebarProps.md b/docs/docs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/interfaces/InterfaceUserSidebarProps.md
index e8b93fe25a..f9a8d7cab3 100644
--- a/docs/docs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/interfaces/InterfaceUserSidebarProps.md
+++ b/docs/docs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/interfaces/InterfaceUserSidebarProps.md
@@ -4,7 +4,7 @@
# Interface: InterfaceUserSidebarProps
-Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:10](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L10)
+Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L11)
## Properties
@@ -12,7 +12,7 @@ Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:10](https://g
> **hideDrawer**: `boolean`
-Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:11](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L11)
+Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L12)
***
@@ -20,4 +20,4 @@ Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:11](https://g
> **setHideDrawer**: `Dispatch`\<`SetStateAction`\<`boolean`\>\>
-Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:12](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L12)
+Defined in: [src/components/UserPortal/UserSidebar/UserSidebar.tsx:13](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/components/UserPortal/UserSidebar/UserSidebar.tsx#L13)
diff --git a/docs/docs/auto-docs/screens/UserPortal/Organizations/Organizations/functions/default.md b/docs/docs/auto-docs/screens/UserPortal/Organizations/Organizations/functions/default.md
index cf462d91f1..bf89ac62e0 100644
--- a/docs/docs/auto-docs/screens/UserPortal/Organizations/Organizations/functions/default.md
+++ b/docs/docs/auto-docs/screens/UserPortal/Organizations/Organizations/functions/default.md
@@ -6,7 +6,7 @@
> **default**(): `JSX.Element`
-Defined in: [src/screens/UserPortal/Organizations/Organizations.tsx:78](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Organizations/Organizations.tsx#L78)
+Defined in: [src/screens/UserPortal/Organizations/Organizations.tsx:77](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/Organizations/Organizations.tsx#L77)
Component for displaying and managing user organizations.
diff --git a/public/images/svg/angleRight.svg b/public/images/svg/angleRight.svg
new file mode 100644
index 0000000000..d26d1e3212
--- /dev/null
+++ b/public/images/svg/angleRight.svg
@@ -0,0 +1,7 @@
+<svg width="48px" height="48px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="icomoon-ignore">
+</g>
+<path d="M19.159 16.767l0.754-0.754-6.035-6.035-0.754 0.754 5.281 5.281-5.256 5.256 0.754 0.754 3.013-3.013z" fill="#000000">
+
+</path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/css/app.css b/src/assets/css/app.css
index 16af7c92fb..34beb0969a 100644
--- a/src/assets/css/app.css
+++ b/src/assets/css/app.css
@@ -2478,9 +2478,7 @@ progress {
.form-control:focus {
color: var(--bs-body-color);
background-color: #f2f2f2;
- border-color: #98ddb5;
outline: 0;
- box-shadow: 0 0 0 0.25rem rgba(49, 187, 107, 0.25);
}
.form-control::-webkit-date-and-time-value {
@@ -3255,6 +3253,12 @@ textarea.form-control.is-valid {
border-color: var(--bs-form-valid-border-color);
}
+input:-webkit-autofill {
+ background-color: white !important;
+ -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+ -webkit-text-fill-color: initial !important;
+}
+
.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
background-color: var(--bs-form-valid-color);
diff --git a/src/components/LeftDrawer/LeftDrawer.spec.tsx b/src/components/LeftDrawer/LeftDrawer.spec.tsx
index a0aaf9336c..b73cab654b 100644
--- a/src/components/LeftDrawer/LeftDrawer.spec.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.spec.tsx
@@ -93,13 +93,9 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
orgsBtn.click();
});
- expect(
- orgsBtn.className.includes('text-black btn btn-success'),
- ).toBeTruthy();
- expect(rolesBtn.className.includes('text-secondary btn')).toBeTruthy();
- expect(
- communityProfileBtn.className.includes('text-secondary btn'),
- ).toBeTruthy();
+ expect(orgsBtn.className.includes('btn btn-success')).toBeTruthy();
+ expect(rolesBtn.className.includes('btn')).toBeTruthy();
+ expect(communityProfileBtn.className.includes('btn')).toBeTruthy();
await act(async () => {
userEvent.click(rolesBtn);
@@ -171,14 +167,6 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
expect(screen.getByText('My Organizations')).toBeInTheDocument();
expect(screen.getByText('Talawa Admin Portal')).toBeInTheDocument();
-
- const orgsBtn = screen.getByTestId(/orgsBtn/i);
-
- await act(async () => {
- orgsBtn.click();
- });
-
- expect(orgsBtn.className.includes('text-black')).toBeTruthy();
});
});
@@ -207,9 +195,7 @@ describe('Testing Left Drawer component for ADMIN', () => {
orgsBtn.click();
});
- expect(
- orgsBtn.className.includes('text-black btn btn-success'),
- ).toBeTruthy();
+ expect(orgsBtn.className.includes('btn btn-success')).toBeTruthy();
// These screens aren't meant for admins, so they should not be present
expect(screen.queryByTestId(/rolesBtn/i)).toBeNull();
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index 1ef8192ae1..4e824c96c6 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -8,6 +8,7 @@ import SettingsIcon from 'assets/svgs/settings.svg?react';
import TalawaLogo from 'assets/svgs/talawa.svg?react';
import styles from 'style/app.module.css';
import useLocalStorage from 'utils/useLocalstorage';
+import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
export interface InterfaceLeftDrawerProps {
hideDrawer: boolean | null; // Controls the visibility of the drawer
@@ -63,80 +64,100 @@ const leftDrawer = ({
<h5 className={`${styles.titleHeader} text-secondary`}>
{tCommon('menu')}
</h5>
- <div className={styles.optionList}>
- <NavLink to={'/orglist'} onClick={handleLinkClick}>
- {({ isActive }) => (
- <Button
- variant={isActive === true ? 'success' : ''}
- className={`${
- isActive === true ? 'text-black' : 'text-secondary'
- }`}
- style={{
- backgroundColor: isActive === true ? '#EAEBEF' : '',
- }}
- data-testid="orgsBtn"
- >
- <div className={styles.iconWrapper}>
- <OrganizationsIcon
- fill={
- isActive === true
- ? 'var(--bs-black)'
- : 'var(--bs-secondary)'
- }
- />
- </div>
- {t('my organizations')}
- </Button>
+ <div className={`d-flex flex-column ${styles.sidebarcompheight} `}>
+ <div className={styles.optionList}>
+ <NavLink to={'/orglist'} onClick={handleLinkClick}>
+ {({ isActive }) => (
+ <Button
+ variant={isActive === true ? 'success' : ''}
+ style={{
+ backgroundColor:
+ isActive === true ? 'var(--sidebar-option-bg)' : '',
+ fontWeight: isActive ? 'bold' : 'normal',
+ color: isActive
+ ? 'var(--sidebar-option-text-active)'
+ : 'var(--sidebar-option-text-inactive)',
+ }}
+ data-testid="orgsBtn"
+ >
+ <div className={styles.iconWrapper}>
+ <OrganizationsIcon
+ fill="none"
+ stroke={`${
+ isActive === true
+ ? 'var(--sidebar-icon-stroke-active)'
+ : 'var(--sidebar-icon-stroke-inactive)'
+ }`}
+ />
+ </div>
+ {t('my organizations')}
+ </Button>
+ )}
+ </NavLink>
+ {superAdmin && (
+ <>
+ <NavLink to={'/users'} onClick={handleLinkClick}>
+ {({ isActive }) => (
+ <Button
+ variant={isActive === true ? 'success' : ''}
+ style={{
+ backgroundColor:
+ isActive === true ? 'var(--sidebar-option-bg)' : '',
+ fontWeight: isActive ? 'bold' : 'normal',
+ color: isActive
+ ? 'var(--sidebar-option-text-active)'
+ : 'var(--sidebar-option-text-inactive)',
+ }}
+ data-testid="rolesBtn"
+ >
+ <div className={styles.iconWrapper}>
+ <RolesIcon
+ fill="none"
+ stroke={`${
+ isActive === true
+ ? 'var(--sidebar-icon-stroke-active)'
+ : 'var(--sidebar-icon-stroke-inactive)'
+ }`}
+ />
+ </div>
+ {tCommon('users')}
+ </Button>
+ )}
+ </NavLink>
+ <NavLink to={'/communityProfile'} onClick={handleLinkClick}>
+ {({ isActive }) => (
+ <Button
+ variant={isActive === true ? 'success' : ''}
+ style={{
+ backgroundColor:
+ isActive === true ? 'var(--sidebar-option-bg)' : '',
+ fontWeight: isActive ? 'bold' : 'normal',
+ color: isActive
+ ? 'var(--sidebar-option-text-active)'
+ : 'var(--sidebar-option-text-inactive)',
+ }}
+ data-testid="communityProfileBtn"
+ >
+ <div className={styles.iconWrapper}>
+ <SettingsIcon
+ fill="none"
+ stroke={`${
+ isActive === true
+ ? 'var(--sidebar-icon-stroke-active)'
+ : 'var(--sidebar-icon-stroke-inactive)'
+ }`}
+ />
+ </div>
+ {t('communityProfile')}
+ </Button>
+ )}
+ </NavLink>
+ </>
)}
- </NavLink>
- {superAdmin && (
- <>
- <NavLink to={'/users'} onClick={handleLinkClick}>
- {({ isActive }) => (
- <Button
- variant={isActive === true ? 'success' : ''}
- className={`${
- isActive === true ? 'text-white' : 'text-secondary'
- }`}
- data-testid="rolesBtn"
- >
- <div className={styles.iconWrapper}>
- <RolesIcon
- fill={`${
- isActive === true
- ? 'var(--bs-white)'
- : 'var(--bs-secondary)'
- }`}
- />
- </div>
- {tCommon('users')}
- </Button>
- )}
- </NavLink>
- <NavLink to={'/communityProfile'} onClick={handleLinkClick}>
- {({ isActive }) => (
- <Button
- variant={isActive === true ? 'success' : ''}
- className={`${
- isActive === true ? 'text-white' : 'text-secondary'
- }`}
- data-testid="communityProfileBtn"
- >
- <div className={styles.iconWrapper}>
- <SettingsIcon
- stroke={`${
- isActive === true
- ? 'var(--bs-white)'
- : 'var(--bs-secondary)'
- }`}
- />
- </div>
- {t('communityProfile')}
- </Button>
- )}
- </NavLink>
- </>
- )}
+ </div>
+ <div className="mt-auto">
+ <ProfileDropdown />
+ </div>
</div>
</div>
</>
diff --git a/src/components/LoginPortalToggle/LoginPortalToggle.module.css b/src/components/LoginPortalToggle/LoginPortalToggle.module.css
deleted file mode 100644
index db51554389..0000000000
--- a/src/components/LoginPortalToggle/LoginPortalToggle.module.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.navLinkClass {
- display: inline-block;
- padding: 0.375rem 0.75rem;
- font-size: 1rem;
- line-height: 1.4;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- color: var(--bs-gray-900);
- border-radius: 0.3rem;
- width: 100%;
- box-sizing: border-box;
- border: 1px solid var(--bs-gray-700);
- font-weight: 500;
- transition: all 0.25s ease;
-}
-
-.navLinkClass:hover {
- color: var(--bs-white);
- background-color: var(--bs-gray);
- border-color: var(--bs-gray);
-}
-
-.activeLink {
- color: white;
- border: 1px solid var(--bs-primary);
- background-color: var(--toggle-button-bg);
-}
-
-.activeLink:hover {
- color: var(--bs-white);
- background-color: var(--toggle-button-bg);
- border: 1px solid var(--bs-primary);
-}
diff --git a/src/components/LoginPortalToggle/LoginPortalToggle.tsx b/src/components/LoginPortalToggle/LoginPortalToggle.tsx
index 76305b02d3..64fa9317c7 100644
--- a/src/components/LoginPortalToggle/LoginPortalToggle.tsx
+++ b/src/components/LoginPortalToggle/LoginPortalToggle.tsx
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import styles from './LoginPortalToggle.module.css';
+import styles from '../../style/app.module.css';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import { NavLink } from 'react-router-dom';
diff --git a/src/components/OrgListCard/OrgListCard.module.css b/src/components/OrgListCard/OrgListCard.module.css
deleted file mode 100644
index 292456f310..0000000000
--- a/src/components/OrgListCard/OrgListCard.module.css
+++ /dev/null
@@ -1,148 +0,0 @@
-.orgCard {
- background-color: var(--bs-white);
- margin: 0.5rem;
- height: calc(120px + 2rem);
- padding: 1rem;
- border-radius: 8px;
- outline: 1px solid var(--bs-gray-200);
- position: relative;
-}
-
-.orgCard .innerContainer {
- display: flex;
-}
-
-.orgCard .innerContainer .orgImgContainer {
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- overflow: hidden;
- border-radius: 4px;
-}
-
-.orgCard .innerContainer .orgImgContainer {
- width: 125px;
- height: 120px;
- object-fit: contain;
-}
-
-.orgCard .innerContainer .orgImgContainer {
- width: 125px;
- height: 120px;
- background-color: var(--bs-gray-200);
-}
-
-.orgCard .innerContainer .content {
- flex: 1;
- margin-left: 1rem;
- width: 70%;
- margin-top: 0.7rem;
-}
-
-.orgCard button {
- position: absolute;
- bottom: 1rem;
- right: 1rem;
- z-index: 1;
-}
-
-.flaskIcon {
- margin-top: 4px;
-}
-
-.manageBtn {
- display: flex;
- justify-content: space-around;
- width: 8rem;
- background-color: var(--grey-bg-color) !important;
- color: black !important;
- border: 1px solid var(--dropdown-border-color);
-}
-
-.manageBtn:hover {
- border: 1px solid var(--dropdown-border-color) !important;
-}
-
-.orgName {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- font-size: 1rem;
-}
-
-.orgdesc {
- font-size: 0.9rem;
- color: var(--bs-gray-600);
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- line-clamp: 1;
- -webkit-box-orient: vertical;
- max-width: 20rem;
-}
-
-.orgadmin {
- font-size: 0.9rem;
-}
-
-.orgmember {
- font-size: 0.9rem;
-}
-
-.address {
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- line-clamp: 1;
- -webkit-box-orient: vertical;
- align-items: center;
-}
-
-.address h6 {
- font-size: 0.9rem;
- color: var(--bs-gray-600);
-}
-
-@media (max-width: 580px) {
- .orgCard {
- height: unset;
- margin: 0.5rem 0;
- padding: 1.25rem 1.5rem;
- }
-
- .orgCard .innerContainer {
- flex-direction: column;
- }
-
- .orgCard .innerContainer .orgImgContainer {
- margin-bottom: 0.8rem;
- }
-
- .orgCard .innerContainer .orgImgContainer img {
- height: auto;
- width: 100%;
- }
-
- .orgCard .innerContainer .content {
- margin-left: 0;
- }
-
- .orgCard button {
- bottom: 0;
- right: 0;
- position: relative;
- margin-left: auto;
- display: block;
- }
-
- .flaskIcon {
- margin-bottom: 6px;
- }
-
- .manageBtn {
- display: flex;
- justify-content: space-around;
- width: 100%;
- }
-}
diff --git a/src/components/OrgListCard/OrgListCard.tsx b/src/components/OrgListCard/OrgListCard.tsx
index cf651e9dfe..a6e1d82dad 100644
--- a/src/components/OrgListCard/OrgListCard.tsx
+++ b/src/components/OrgListCard/OrgListCard.tsx
@@ -4,7 +4,7 @@ import TruncatedText from './TruncatedText';
import FlaskIcon from 'assets/svgs/flask.svg?react';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
-import styles from './OrgListCard.module.css';
+import styles from '../../style/app.module.css';
import { useNavigate } from 'react-router-dom';
import type {
InterfaceOrgConnectionInfoType,
@@ -112,8 +112,12 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
)}
{/* Display the number of admins and members */}
<h6 className={styles.orgadmin}>
- {tCommon('admins')}: <span>{admins.length}</span>
- {tCommon('members')}: <span>{members.length}</span>
+ <div>
+ {tCommon('admins')}: <span>{admins.length}</span>
+ </div>
+ <div>
+ {tCommon('members')}: <span>{members.length}</span>
+ </div>
</h6>
</div>
</div>
diff --git a/src/components/ProfileDropdown/ProfileDropdown.module.css b/src/components/ProfileDropdown/ProfileDropdown.module.css
deleted file mode 100644
index 46af582126..0000000000
--- a/src/components/ProfileDropdown/ProfileDropdown.module.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.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 44px 0 rgba(246, 246, 246, 0.19);
-}
-.profileContainer:focus {
- outline: none;
- background-color: var(--bs-gray-100);
-}
-.imageContainer {
- width: 56px;
- height: 56px;
- border-radius: 100%;
- margin-right: 10px;
-}
-.imageContainer img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- border-radius: 100%;
-}
-.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;
- 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;
-}
-.profileContainer .profileText .secondaryText {
- font-size: 0.8rem;
- font-weight: 400;
- color: var(--bs-secondary);
- display: block;
- text-transform: capitalize;
-}
-.profileDropdown {
- background-color: transparent !important;
-}
-.profileDropdown .dropdown-toggle .btn .btn-normal {
- display: none !important;
- background-color: transparent !important;
-}
-.dropdownToggle {
- background-image: url(/public/images/svg/angleDown.svg);
- background-repeat: no-repeat;
- background-position: center;
- background-color: azure;
-}
-
-.dropdownToggle::after {
- border-top: none !important;
- border-bottom: none !important;
-}
-.avatarStyle {
- border-radius: 100%;
-}
diff --git a/src/components/ProfileDropdown/ProfileDropdown.tsx b/src/components/ProfileDropdown/ProfileDropdown.tsx
index 1148b9da8f..182b0d66db 100644
--- a/src/components/ProfileDropdown/ProfileDropdown.tsx
+++ b/src/components/ProfileDropdown/ProfileDropdown.tsx
@@ -3,7 +3,7 @@ import React from 'react';
import { ButtonGroup, Dropdown } from 'react-bootstrap';
import { useNavigate, useParams } from 'react-router-dom';
import useLocalStorage from 'utils/useLocalstorage';
-import styles from './ProfileDropdown.module.css';
+import styles from '../../style/app.module.css';
import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
import { useMutation } from '@apollo/client';
import { useTranslation } from 'react-i18next';
@@ -43,7 +43,6 @@ const profileDropdown = (): JSX.Element => {
try {
await revokeRefreshToken();
} catch (error) {
- /*istanbul ignore next*/
console.error('Error revoking refresh token:', error);
}
localStorage.clear();
@@ -54,16 +53,18 @@ const profileDropdown = (): JSX.Element => {
const fullName = `${firstName} ${lastName}`;
const displayedName =
fullName.length > MAX_NAME_LENGTH
- ? /*istanbul ignore next*/
- fullName.substring(0, MAX_NAME_LENGTH - 3) + '...'
+ ? fullName.substring(0, MAX_NAME_LENGTH - 3) + '...'
: fullName;
return (
- <Dropdown as={ButtonGroup} variant="none">
+ <Dropdown
+ className={`${styles.profilebutton}`}
+ as={ButtonGroup}
+ variant="none"
+ >
<div className={styles.profileContainer}>
<div className={styles.imageContainer}>
{userImage && userImage !== 'null' ? (
- /*istanbul ignore next*/
<img
src={userImage}
alt={`profile picture`}
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.module.css b/src/components/SuperAdminScreen/SuperAdminScreen.module.css
deleted file mode 100644
index 9496ef95fa..0000000000
--- a/src/components/SuperAdminScreen/SuperAdminScreen.module.css
+++ /dev/null
@@ -1,101 +0,0 @@
-.pageContainer {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
-}
-
-.expand {
- padding-left: 4rem;
- animation: moveLeft 0.5s ease-in-out;
-}
-
-.contract {
- padding-left: calc(300px + 2rem + 1.5rem);
- animation: moveRight 0.5s ease-in-out;
-}
-
-.collapseSidebarButton {
- position: fixed;
- height: 40px;
- bottom: 0;
- z-index: 9999;
- width: calc(300px + 2rem);
- background-color: rgba(245, 245, 245, 0.7);
- color: black;
- border: none;
- border-radius: 0px;
-}
-
-.collapseSidebarButton:hover,
-.opendrawer:hover {
- opacity: 1;
- color: black !important;
-}
-.opendrawer {
- position: fixed;
- display: flex;
- align-items: center;
- justify-content: center;
- top: 0;
- left: 0;
- width: 40px;
- height: 100vh;
- z-index: 9999;
- background-color: rgba(245, 245, 245);
- border: none;
- border-radius: 0px;
- margin-right: 20px;
- color: black;
-}
-
-@media (max-width: 1120px) {
- .contract {
- padding-left: calc(250px + 2rem + 1.5rem);
- }
- .collapseSidebarButton {
- width: calc(250px + 2rem);
- }
-}
-
-/* For tablets */
-@media (max-width: 820px) {
- .pageContainer {
- padding-left: 2.5rem;
- }
-
- .opendrawer {
- width: 25px;
- }
-
- .contract,
- .expand {
- animation: none;
- }
-
- .collapseSidebarButton {
- width: 100%;
- left: 0;
- right: 0;
- }
-}
-
-@keyframes moveLeft {
- from {
- padding-left: calc(300px + 2rem + 1.5rem);
- }
-
- to {
- padding-left: 1.5rem;
- }
-}
-
-@keyframes moveRight {
- from {
- padding-left: 1.5rem;
- }
-
- to {
- padding-left: calc(300px + 2rem + 1.5rem);
- }
-}
diff --git a/src/components/SuperAdminScreen/SuperAdminScreen.tsx b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
index 948dc334f7..91063e773c 100644
--- a/src/components/SuperAdminScreen/SuperAdminScreen.tsx
+++ b/src/components/SuperAdminScreen/SuperAdminScreen.tsx
@@ -3,8 +3,7 @@ import React, { useEffect, useState } from 'react';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
import { Outlet, useLocation } from 'react-router-dom';
-import styles from './SuperAdminScreen.module.css';
-import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+import styles from '../../style/app.module.css';
/**
* The SuperAdminScreen component manages the layout for the Super Admin screen,
@@ -73,7 +72,6 @@ const superAdminScreen = (): JSX.Element => {
<div style={{ flex: 1 }}>
<h2>{t('title')}</h2>
</div>
- <ProfileDropdown />
</div>
<Outlet />
</div>
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css b/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
deleted file mode 100644
index 15634f7ad0..0000000000
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.module.css
+++ /dev/null
@@ -1,149 +0,0 @@
-.orgCard {
- background-color: var(--bs-white);
- margin: 0.5rem;
- height: calc(120px + 2rem);
- padding: 1rem;
- border-radius: 8px;
- outline: 1px solid var(--bs-gray-200);
- position: relative;
-}
-
-.orgCard .innerContainer {
- display: flex;
-}
-
-.orgCard .innerContainer .orgImgContainer {
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- overflow: hidden;
- border-radius: 4px;
- width: 125px;
- height: 120px;
- object-fit: contain;
- background-color: var(--bs-gray-200);
-}
-
-.orgCard .innerContainer .content {
- flex: 1;
- margin-left: 1rem;
- width: 70%;
- margin-top: 0.7rem;
-}
-
-.orgCard button {
- position: absolute;
- bottom: 1rem;
- right: 1rem;
- z-index: 1;
-}
-
-.joinBtn {
- display: flex;
- justify-content: space-around;
- width: 8rem;
- border-width: medium;
-}
-
-.joinedBtn {
- display: flex;
- justify-content: space-around;
- width: 8rem;
-}
-
-.withdrawBtn {
- display: flex;
- justify-content: space-around;
- width: 8rem;
-}
-
-.orgName {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- font-size: 1rem;
-}
-
-.orgdesc {
- font-size: 0.9rem;
- color: var(--bs-gray-600);
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- line-clamp: 1;
- -webkit-box-orient: vertical;
- max-width: 20rem;
-}
-
-.orgadmin {
- font-size: 0.9rem;
-}
-
-.orgmember {
- font-size: 0.9rem;
-}
-
-.address {
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- line-clamp: 1;
- -webkit-box-orient: vertical;
- align-items: center;
-}
-
-.address h6 {
- font-size: 0.9rem;
- color: var(--bs-gray-600);
-}
-
-@media (max-width: 1420px) {
- .orgCard {
- width: 100%;
- }
-}
-
-@media (max-width: 550px) {
- .orgCard {
- width: 100%;
- }
-
- .orgCard {
- height: unset;
- margin: 0.5rem 0;
- padding: 1.25rem 1.5rem;
- }
-
- .orgCard .innerContainer .orgImgContainer {
- margin-bottom: 0.8rem;
- }
-
- .orgCard .innerContainer {
- flex-direction: column;
- }
-
- .orgCard .innerContainer .orgImgContainer img {
- height: auto;
- width: 100%;
- }
-
- .orgCard .innerContainer .content {
- margin-left: 0;
- }
-
- .orgCard button {
- bottom: 0;
- right: 0;
- position: relative;
- margin-left: auto;
- display: block;
- }
- .joinBtn,
- .joinedBtn,
- .withdrawBtn {
- display: flex;
- justify-content: space-around;
- width: 100%;
- }
-}
diff --git a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
index b468f84a22..58eeaa83de 100644
--- a/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
+++ b/src/components/UserPortal/OrganizationCard/OrganizationCard.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import styles from './OrganizationCard.module.css';
+import styles from '../../../style/app.module.css';
import { Button } from 'react-bootstrap';
import { Tooltip } from '@mui/material';
import { useTranslation } from 'react-i18next';
@@ -180,9 +180,12 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
</div>
)}
<h6 className={styles.orgadmin}>
- {tCommon('admins')}: <span>{props.admins?.length}</span>
- {tCommon('members')}:{' '}
- <span>{props.members?.length}</span>
+ <div>
+ {tCommon('admins')}: <span>{props.admins?.length}</span>
+ </div>
+ <div>
+ {tCommon('members')}: <span>{props.members?.length}</span>
+ </div>
</h6>
</div>
</div>
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 = ({
<h5 className={`${styles.titleHeader} text-secondary`}>
{tCommon('menu')}
</h5>
- <div className={styles.optionList}>
- {/* Link to "My Organizations" page */}
- <NavLink to={'/user/organizations'} onClick={handleLinkClick}>
- {({ isActive }) => (
- <Button
- variant={isActive === true ? 'success' : ''}
- className={`${
- isActive === true ? 'text-white' : 'text-secondary'
- }`}
- data-testid="orgsBtn"
- >
- <div className={styles.iconWrapper}>
- <OrganizationsIcon
- stroke={`${
- isActive === true
- ? 'var(--bs-white)'
- : 'var(--bs-secondary)'
- }`}
- />
- </div>
- {t('my organizations')}
- </Button>
- )}
- </NavLink>
- {/* Link to "Settings" page */}
- <NavLink to={'/user/settings'} onClick={handleLinkClick}>
- {({ isActive }) => (
- <Button
- variant={isActive === true ? 'success' : ''}
- className={`${
- isActive === true ? 'text-white' : 'text-secondary'
- }`}
- data-testid="settingsBtn"
- >
- <div className={styles.iconWrapper}>
- <SettingsIcon
- stroke={`${
- isActive === true
- ? 'var(--bs-white)'
- : 'var(--bs-secondary)'
- }`}
- />
- </div>
- {tCommon('settings')}
- </Button>
- )}
- </NavLink>
+ <div
+ className={`d-flex align-items flex-column ${styles.leftbarcompheight}`}
+ >
+ <div className={styles.optionList}>
+ {/* Link to "My Organizations" page */}
+
+ <NavLink to={'/user/organizations'} onClick={handleLinkClick}>
+ {({ isActive }) => (
+ <Button
+ variant={isActive ? 'success' : ''}
+ style={{
+ backgroundColor: isActive ? 'var(--sidebar-option-bg)' : '',
+ fontWeight: isActive ? 'bold' : 'normal',
+ color: isActive
+ ? 'var(--sidebar-option-text-active)'
+ : 'var(--sidebar-option-text-inactive)',
+ }}
+ data-testid="orgsBtn"
+ >
+ <div className={styles.iconWrapper}>
+ <OrganizationsIcon
+ stroke={`${
+ isActive === true
+ ? 'var(--sidebar-icon-stroke-active)'
+ : 'var(--sidebar-icon-stroke-inactive)'
+ }`}
+ />
+ </div>
+ {t('my organizations')}
+ </Button>
+ )}
+ </NavLink>
+ {/* Link to "Settings" page */}
+ <NavLink to={'/user/settings'} onClick={handleLinkClick}>
+ {({ isActive }) => (
+ <Button
+ variant={isActive ? 'success' : ''}
+ style={{
+ backgroundColor: isActive ? 'var(--sidebar-option-bg)' : '',
+ fontWeight: isActive ? 'bold' : 'normal',
+ boxShadow: isActive ? 'none' : '',
+ color: isActive
+ ? 'var(--sidebar-option-text-active)'
+ : 'var(--sidebar-option-text-inactive)',
+ }}
+ data-testid="settingsBtn"
+ >
+ <div className={styles.iconWrapper}>
+ <SettingsIcon
+ stroke={`${
+ isActive === true
+ ? 'var(--sidebar-icon-stroke-active)'
+ : 'var(--sidebar-icon-stroke-inactive)'
+ }`}
+ />
+ </div>
+ {tCommon('settings')}
+ </Button>
+ )}
+ </NavLink>
+ </div>
+ <div className="mt-auto">
+ <ProfileDropdown />
+ </div>
</div>
</div>
</>
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 => {
<div className={styles.cardTemplate}>
<div className={styles.keyWrapper}>
<div className={styles.themeOverlay} />
- <KeyLogo className={styles.keyLogo} fill="var(--bs-primary)" />
+ <KeyLogo
+ className={styles.keyLogo}
+ fill="var(--forgot-password-fill)"
+ />
</div>
<h3 className="text-center fw-bold">
{tCommon('forgotPassword')}
@@ -191,7 +193,7 @@ const ForgotPassword = (): JSX.Element => {
</div>
<Button
type="submit"
- className="mt-4 w-100"
+ className={`mt-4 w-100 ${styles.login_btn}`}
data-testid="getOtpBtn"
>
{t('getOtp')}
diff --git a/src/screens/LoginPage/LoginPage.tsx b/src/screens/LoginPage/LoginPage.tsx
index 48030d4667..7c3bbbcf91 100644
--- a/src/screens/LoginPage/LoginPage.tsx
+++ b/src/screens/LoginPage/LoginPage.tsx
@@ -601,7 +601,7 @@ const loginPage = (): JSX.Element => {
/>
<Button
tabIndex={-1}
- className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+ className={`${styles.email_button}`}
>
<EmailOutlinedIcon />
</Button>
@@ -632,7 +632,7 @@ const loginPage = (): JSX.Element => {
<Button
onClick={togglePassword}
data-testid="showPassword"
- className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+ className={`${styles.email_button}`}
>
{showPassword ? (
<i className="fas fa-eye"></i>
@@ -784,7 +784,7 @@ const loginPage = (): JSX.Element => {
<Button
data-testid="showPasswordCon"
onClick={toggleConfirmPassword}
- className={`position-absolute z-10 bottom-0 end-0 h-100 d-flex justify-content-center align-items-center`}
+ className={`${styles.email_button}`}
>
{showConfirmPassword ? (
<i className="fas fa-eye"></i>
@@ -845,7 +845,7 @@ const loginPage = (): JSX.Element => {
)}
<Button
type="submit"
- className="mt-4 w-100 mb-3"
+ className={`mt-4 fw-bold w-100 mb-3 ${styles.login_btn}`}
value="Register"
data-testid="registrationBtn"
disabled={signinLoading}
@@ -859,7 +859,7 @@ const loginPage = (): JSX.Element => {
<Button
variant="outline-secondary"
value="Register"
- className="mt-3 mb-5 w-100"
+ className={`mt-3 fw-bold mb-5 w-100 ${styles.reg_btn} `}
data-testid="goToLoginPortion"
onClick={(): void => {
setShowTab('LOGIN');
diff --git a/src/screens/OrgList/OrgList.tsx b/src/screens/OrgList/OrgList.tsx
index 4aaa9bfa32..bf8f938701 100644
--- a/src/screens/OrgList/OrgList.tsx
+++ b/src/screens/OrgList/OrgList.tsx
@@ -388,6 +388,7 @@ function orgList(): JSX.Element {
variant="success"
onClick={toggleModal}
data-testid="createOrganizationBtn"
+ className={styles.createorgdropdown}
>
<i className={'fa fa-plus me-2'} />
{t('createOrganization')}
diff --git a/src/screens/UserPortal/Organizations/Organizations.module.css b/src/screens/UserPortal/Organizations/Organizations.module.css
deleted file mode 100644
index 27262932d5..0000000000
--- a/src/screens/UserPortal/Organizations/Organizations.module.css
+++ /dev/null
@@ -1,145 +0,0 @@
-.borderNone {
- border: none;
-}
-
-.colorWhite {
- color: white;
-}
-
-.colorLight {
- background-color: #f5f5f5;
-}
-
-.mainContainer {
- max-height: 100%;
- overflow: auto;
-}
-
-.content {
- height: fit-content;
- min-height: calc(100% - 40px);
-}
-
-.paddingY {
- padding: 30px 0px;
-}
-
-.containerHeight {
- height: 100vh;
- padding: 1rem 1.5rem 0 calc(300px + 1.5rem);
-}
-
-.expand {
- padding-left: 4rem;
- animation: moveLeft 0.9s ease-in-out;
-}
-
-.contract {
- padding-left: calc(300px + 2rem + 1.5rem);
- animation: moveRight 0.5s ease-in-out;
-}
-
-.colorPrimary {
- background: #31bb6b;
-}
-
-.backgroundWhite {
- background-color: white;
-}
-
-.input {
- flex: 1;
- position: relative;
- margin-right: 10px;
-}
-
-.btnsContainer input {
- outline: 1px solid var(--bs-gray-400);
-}
-
-.collapseSidebarButton {
- position: fixed;
- height: 40px;
- bottom: 0;
- z-index: 9999;
- width: calc(300px);
- background-color: rgba(245, 245, 245, 0.7);
- color: black;
- border: none;
- border-radius: 0px;
-}
-
-.collapseSidebarButton:hover,
-.opendrawer:hover {
- opacity: 1;
- color: black !important;
-}
-.opendrawer {
- position: fixed;
- display: flex;
- align-items: center;
- justify-content: center;
- top: 0;
- left: 0;
- width: 40px;
- height: 100vh;
- z-index: 9999;
- background-color: rgba(245, 245, 245);
- border: none;
- border-radius: 0px;
- margin-right: 20px;
- color: black;
-}
-
-.opendrawer:hover {
- transition: background-color 0.5s ease;
- background-color: var(--bs-primary);
-}
-.collapseSidebarButton:hover {
- transition: background-color 0.5s ease;
- background-color: var(--bs-primary);
-}
-
-@media screen and (max-width: 850px) {
- .mainContainer {
- width: 100%;
- }
-}
-
-@media (max-width: 1120px) {
- .collapseSidebarButton {
- width: calc(250px + 2rem);
- }
-}
-
-@media (max-height: 650px) {
- .collapseSidebarButton {
- width: 250px;
- height: 20px;
- }
- .opendrawer {
- width: 30px;
- }
-}
-
-/* For tablets */
-@media (max-width: 820px) {
- .containerHeight {
- height: 100vh;
- padding: 2rem;
- }
- .opendrawer {
- width: 25px;
- }
-
- .contract,
- .expand {
- animation: none;
- }
-
- .collapseSidebarButton {
- width: 100%;
- left: 0;
- right: 0;
- }
-}
diff --git a/src/screens/UserPortal/Organizations/Organizations.tsx b/src/screens/UserPortal/Organizations/Organizations.tsx
index 4e1033cbc4..0ac148c730 100644
--- a/src/screens/UserPortal/Organizations/Organizations.tsx
+++ b/src/screens/UserPortal/Organizations/Organizations.tsx
@@ -13,8 +13,7 @@ import React, { useEffect, useState } from 'react';
import { Button, Dropdown, Form, InputGroup } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import useLocalStorage from 'utils/useLocalstorage';
-import styles from './Organizations.module.css';
-import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
+import styles from '../../../style/app.module.css';
const { getItem } = useLocalStorage();
@@ -317,19 +316,18 @@ export default function organizations(): JSX.Element {
hideDrawer === null
? ''
: hideDrawer
- ? styles.expand
- : styles.contract
+ ? styles.expandOrg
+ : styles.contractOrg
}`}
>
- <div className={`${styles.mainContainer}`}>
+ <div className={`${styles.mainContainerOrganization}`}>
<div className="d-flex justify-content-between align-items-center">
<div style={{ flex: 1 }}>
<h1>{t('selectOrganization')}</h1>
</div>
- <ProfileDropdown />
</div>
- <div className="mt-4">
+ <div className="mt-4 d-flex justify-content-between gap-4">
<InputGroup className={styles.maxWidth}>
<Form.Control
placeholder={t('searchOrganizations')}
@@ -377,7 +375,7 @@ export default function organizations(): JSX.Element {
className={`d-flex flex-column justify-content-between ${styles.content}`}
>
<div
- className={`d-flex flex-column ${styles.gap} ${styles.paddingY}`}
+ className={`d-flex flex-column ${styles.gap} ${styles.paddingY}`}
>
{loadingOrganizations ? (
<div className={`d-flex flex-row justify-content-center`}>
@@ -385,32 +383,37 @@ export default function organizations(): JSX.Element {
</div>
) : (
<>
- {' '}
{organizations && organizations.length > 0 ? (
- (rowsPerPage > 0
- ? organizations.slice(
- page * rowsPerPage,
- page * rowsPerPage + rowsPerPage,
- )
- : organizations
- ).map((organization: InterfaceOrganization, index) => {
- const cardProps: InterfaceOrganizationCardProps = {
- name: organization.name,
- image: organization.image,
- id: organization._id,
- description: organization.description,
- admins: organization.admins,
- members: organization.members,
- address: organization.address,
- membershipRequestStatus:
- organization.membershipRequestStatus,
- userRegistrationRequired:
- organization.userRegistrationRequired,
- membershipRequests: organization.membershipRequests,
- isJoined: organization.isJoined,
- };
- return <OrganizationCard key={index} {...cardProps} />;
- })
+ <div className="row">
+ {(rowsPerPage > 0
+ ? organizations.slice(
+ page * rowsPerPage,
+ page * rowsPerPage + rowsPerPage,
+ )
+ : organizations
+ ).map((organization: InterfaceOrganization, index) => {
+ const cardProps: InterfaceOrganizationCardProps = {
+ name: organization.name,
+ image: organization.image,
+ id: organization._id,
+ description: organization.description,
+ admins: organization.admins,
+ members: organization.members,
+ address: organization.address,
+ membershipRequestStatus:
+ organization.membershipRequestStatus,
+ userRegistrationRequired:
+ organization.userRegistrationRequired,
+ membershipRequests: organization.membershipRequests,
+ isJoined: organization.isJoined,
+ };
+ return (
+ <div key={index} className="col-md-6 mb-4">
+ <OrganizationCard {...cardProps} />
+ </div>
+ );
+ })}
+ </div>
) : (
<span>{t('nothingToShow')}</span>
)}
diff --git a/src/style/app.module.css b/src/style/app.module.css
index 7fa5e19d50..dde01a56d1 100644
--- a/src/style/app.module.css
+++ b/src/style/app.module.css
@@ -97,12 +97,21 @@
/* Background and Border */
--table-bg: #eaebef;
+ --profile-bg: #f6f8fc;
+ --screen-bg: #f2f7ff;
--tablerow-bg: #eff1f7;
--date-picker-bg: #f2f2f2;
--table-bg-color: var(--grey-bg-color);
--tablerow-bg-color: #ffffff;
--row-background: var(--bs-white, var(--bs-white));
--modal-background: rgba(0, 0, 0, 0.7);
+ --sort-bg: #fcfcfc;
+ --sidebar-option-bg: #eaebef;
+ --sidebar-icon-stroke-active: #000000;
+ --sidebar-icon-stroke-inactive: #808080;
+ --sidebar-option-text-active: #000000;
+ --sidebar-option-text-inactive: #808080;
+ --forgot-password-fill: #555555;
--input-field-border: var(--dimp-white);
--input-field-bg: #fff;
--input-field-shadow: var(--black-shadow-color);
@@ -118,6 +127,9 @@
--dropdown-shadow: #0000004c;
--dropdown-color: #555555;
+ --dropdown-button-bg: #555555;
+ --dropdown-button-fill: #555555;
+
/* Font Sizes */
--font-size-header: 16px;
@@ -136,13 +148,42 @@
/* Modal Dimensions */
--modal-width: 670px;
--modal-max-width: 680px;
+ /* Hover style */
+ --hover-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
+ 0 4px 8px 3px rgba(60, 64, 67, 0.15);
/* Additional Variables */
--input-shadow-color: #dddddd;
--delete-button-bg: #f8d6dc;
--delete-button-color: #ff4d4f;
--search-button-bg: #a8c7fa;
- --search-button-border: var(--brown-color);
+ --search-button-border: #555555;
+ --search-outline: #555555;
+ --search-button-fill: #555555;
+ --createorgdropdown-button-bg: #eaebef;
+ --createorgdropdown-button-border: #555555;
+ --langChange-button-bg: #a8c7fa;
+ --langChange-button-text: #1778f2;
+ --login-button-fill: #555555;
+ --login-button-bg: #a8c7fa;
+ --register-button-bg: #eaebef;
+ --buttonList-bg: #a8c7fa;
+ --leftDrawer-option-hover-focus-bg: #eaebef;
+ --leftDrawer-option-text: black;
+ --leftDrawer-bg: #fff;
+ --collapse-Sidebar-Button-fill: black;
+ --joined-button-color: #555555;
+ --joined-button-bg: #a8c7fa;
+ --org-desc-color: #4b5563;
+ --orgCard-bg: #fff;
+ --orgCard-outline: #e9ecef;
+ --orgCard-Image-bg: #e9ecef;
+ --profileContainer-focus-bg: #f8f9fa;
+ --organization-bg: #a8c7fa;
+ --organization-color: #555555;
+ --LoginToggle-button-color: #555555;
+ --LoginToggle-button-bg: #eaebef;
+ --LoginToggle-button-active: #a8c7fa;
--bs-primary: #0056b3;
--bs-warning: #ffc107;
--bs-white: #fff;
@@ -343,6 +384,9 @@
margin-top: 10px;
margin-bottom: 10px;
}
+.dropdown:hover {
+ box-shadow: var(--hover-shadow);
+}
.dropdown:is(
:hover,
@@ -353,9 +397,10 @@
:disabled,
:checked
) {
- box-shadow: 2.5px 2.5px 2.5px var(--dropdown-shadow);
- border: 1px solid var(--brown-color) !important;
- color: var(--dropdown-color) !important;
+ background-color: transparent !important;
+ border: 1px solid var(--brown-color);
+ color: var(--dropdown-button-bg) !important;
+ border-color: var(--brown-color) !important;
}
.dropdown:is(:focus, :focus-visible) {
@@ -396,6 +441,7 @@
flex: 1;
position: relative;
margin-right: 80px;
+ max-width: 473px !important;
}
.eventCreatebtn {
@@ -503,15 +549,12 @@
margin-top: 10px;
margin-bottom: 10px;
background-color: var(--bs-white);
+ border: none;
box-shadow: 0 1px 1px var(--input-shadow-color);
}
.inputField:focus {
- border: 0.1px solid var(--input-field-border) !important;
- background-color: var(--input-field-bg) !important;
- box-shadow: 4px 4px 8px var(--input-field-shadow);
- outline: none;
- transition: box-shadow 0.2s ease;
+ box-shadow: var(--hover-shadow);
}
.inputFieldModal {
@@ -526,9 +569,13 @@
}
.searchButton {
+ --bs-btn-active-color: var(--search-button-bg);
+ --bs-btn-active-bg: var(--search-button-bg);
+ --bs-btn-active-border-color: var(--search-button-bg);
margin-bottom: 10px;
- background-color: var(--search-button-bg) !important;
- border-color: var(--search-button-bg) !important;
+ color: var(--search-button-fill);
+ background-color: var(--search-button-bg);
+ border-color: var(--search-button-bg);
position: absolute;
z-index: 10;
bottom: 0;
@@ -542,20 +589,16 @@
}
.searchButton:hover {
- background-color: var(--search-button-bg) !important;
- border-color: var(--search-button-bg) !important;
- box-shadow: 0px 4px 10px var(--search-button-shadow);
+ background-color: var(--search-button-bg);
+ border-color: var(--search-button-bg);
+ box-shadow: var(--hover-shadow);
+ color: var(--brown-color) !important;
}
.searchButton:active {
+ transform: scale(0.95);
background-color: var(--search-button-bg) !important;
- border-color: var(--search-button-bg) !important;
- transform: scale(0.98);
-}
-
-.searchButton:focus {
- outline: none !important;
- box-shadow: 0px 4px 10px var(--search-button-shadow);
+ border-color: transparent !important;
}
.addButton {
@@ -2084,6 +2127,8 @@ input[type='radio']:checked + label:hover {
.btnsContainerOrgList {
display: flex;
+ width: 100%;
+ justify-content: space-between;
margin: 2.5rem 0 2.5rem 0;
}
@@ -2183,9 +2228,9 @@ input[type='radio']:checked + label:hover {
position: relative;
}
-.btnsContainerOrgList input {
+/* .btnsContainerOrgList input {
outline: 1px solid var(--bs-gray-400);
-}
+} */
.btnsContainerOrgList .inputOrgList button {
width: 52px;
@@ -2200,6 +2245,21 @@ input[type='radio']:checked + label:hover {
.listBoxOrgList .itemCardOrgList {
width: 50%;
}
+
+.createorgdropdown {
+ background-color: var(--createorgdropdown-button-bg);
+ border-color: var(--createorgdropdown-button-border);
+ height: 3rem;
+ margin-top: 0.7rem;
+ color: var(--dropdown-button-fill);
+}
+.createorgdropdown:active,
+.createorgdropdown:hover {
+ background-color: var(--createorgdropdown-button-bg) !important;
+ border-color: var(--createorgdropdown-button-border) !important;
+ color: var(--dropdown-button-fill) !important;
+ box-shadow: var(--hover-shadow);
+}
.notFound {
flex: 1;
display: flex;
@@ -2987,6 +3047,21 @@ form > input {
outline: none !important;
}
+.selectOrgText {
+ :global(.MuiOutlinedInput-root.Mui-focused) fieldset {
+ border-color: var(--primary-color);
+ }
+
+ :global(.MuiInputLabel-root.Mui-focused) {
+ color: var(--primary-color);
+ }
+
+ :global(.MuiAutocomplete-option:hover) {
+ background-color: var(--primary-color);
+ color: var(--text-color-light);
+ }
+}
+
.row .left_portion .inner .palisadoes_logo {
width: 600px;
height: auto;
@@ -3023,10 +3098,22 @@ form > input {
left: 1rem;
}
+/* Define your custom button styles */
.langChangeBtnStyle {
+ --bs-btn-active-bg: var(--langChange-button-bg);
+ --bs-btn-active-border-color: var(--langChange-button-bg);
+ --bs-btn-active-color: var(--langChange-button-text);
width: 7.5rem;
height: 2.2rem;
padding: 0;
+ color: var(--langChange-button-text);
+ border-color: var(--langChange-button-bg);
+ background-color: transparent; /* Default transparent background */
+}
+
+.langChangeBtnStyle:hover {
+ background-color: var(--langChange-button-bg) !important;
+ border-color: var(--langChange-button-bg) !important;
}
.talawa_logo {
@@ -3054,6 +3141,10 @@ form > input {
}
.email_button {
+ --bs-btn-active-bg: var(--search-button-bg);
+ --bs-btn-active-border-color: var(--search-button-bg);
+ --bs-btn-hover-bg: var(--search-button-bg);
+ --bs-btn-hover-border-color: var(--search-button-bg);
position: absolute;
z-index: 10;
bottom: 0;
@@ -3061,14 +3152,28 @@ form > input {
height: 100%;
display: flex;
background-color: var(--search-button-bg);
- border-color: var(--search-button-border, var(--black-color));
+ border-color: var(--search-button-bg);
justify-content: center;
align-items: center;
+ color: var(--search-button-fill);
+}
+.email_button:hover {
+ color: var(--search-button-fill) !important;
+ box-shadow: var(--hover-shadow);
}
.login_btn {
- background-color: var(--search-button-bg);
- border-color: var(--search-button-border, var(--black-color));
+ font-weight: bold;
+ color: var(--login-button-fill);
+ --bs-btn-bg: var(--login-button-bg);
+ --bs-btn-border-color: var(--login-button-bg);
+ --bs-btn-hover-bg: var(--login-button-bg);
+ --bs-btn-hover-border-color: var(--login-button-bg);
+ --bs-btn-active-color: var(--login-button-bg);
+ --bs-btn-active-bg: var(--login-button-bg);
+ --bs-btn-active-border-color: var(--login-button-bg);
+ --bs-btn-disabled-bg: var(--login-button-bg);
+ --bs-btn-disabled-border-color: var(--login-button-bg);
margin-top: 1rem;
margin-bottom: 1rem;
width: 100%;
@@ -3076,16 +3181,31 @@ form > input {
cursor: pointer;
}
+.login_btn:hover {
+ color: var(--login-button-fill) !important;
+ box-shadow: var(--hover-shadow);
+}
+
.reg_btn {
- background-color: var(--dropdown-border-color);
- border-color: var(--dropdown-border-color);
+ font-weight: bold;
+ background-color: var(--register-button-bg);
+ border-color: var(--register-button-bg);
+ --bs-btn-hover-bg: var(--register-button-bg);
+ --bs-btn-hover-border-color: var(--register-button-bg);
+ --bs-btn-active-color: var(--register-button-bg);
+ --bs-btn-active-bg: var(---register-button-bg);
+ --bs-btn-active-border-color: var(--register-button-bg);
margin-top: 1rem;
- color: var(--bs-white);
+ color: var(--login-button-fill);
margin-bottom: 1rem;
width: 100%;
transition: background-color 0.2s ease;
cursor: pointer;
}
+.reg_btn:hover {
+ color: var(--login-button-fill) !important;
+ box-shadow: var(--hover-shadow);
+}
.active_tab {
-webkit-animation: fadeIn 0.3s ease-in-out;
@@ -3162,13 +3282,6 @@ form > input {
width: 28px;
height: 26px;
}
-
-.imageContainer {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 0.5rem;
-}
/* CSS Refactor for OrgPost */
.btnsContainerOrgPost {
@@ -3639,6 +3752,9 @@ button[data-testid='createPostBtn'] {
}
}
+ .buttonList {
+ background-color: var(--buttonList-bg) !important;
+ }
/* AddOnEntry.tsx */
.entrytoggle {
@@ -3741,20 +3857,6 @@ button[data-testid='createPostBtn'] {
display: block;
}
-.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;
@@ -3786,6 +3888,7 @@ button[data-testid='createPostBtn'] {
.leftDrawer .titleHeader {
margin: 2rem 0 1rem 0;
font-weight: 600;
+ color: var(--black) !important;
}
.leftDrawer .optionList button {
@@ -3799,6 +3902,21 @@ button[data-testid='createPostBtn'] {
border: none;
}
+.leftDrawer .optionList button:hover {
+ background-color: var(--leftDrawer-option-hover-focus-bg) !important;
+ box-shadow: var(--hover-shadow);
+ color: var(--leftDrawer-option-text) !important;
+}
+.leftDrawer .optionList button:active,
+.leftDrawer .optionList button:focus {
+ background-color: var(--leftDrawer-option-hover-focus-bg) !important;
+ color: var(--leftDrawer-option-text) !important;
+ font-weight: bold;
+}
+.leftDrawer .optionList button:hover svg {
+ stroke: var(--leftDrawer-option-text) !important;
+}
+
.leftDrawer .optionList button .iconWrapper {
width: 36px;
}
@@ -3813,6 +3931,11 @@ button[data-testid='createPostBtn'] {
background-color: var(--bs-white);
}
+.leftDrawer .sidebarcompheight {
+ height: 100%;
+ padding-bottom: 48px;
+}
+
.leftDrawer .profileContainer:focus {
outline: none;
background-color: var(--bs-gray-100, var(--white-color));
@@ -3983,6 +4106,7 @@ button[data-testid='createPostBtn'] {
/* LeftDrawer general styles */
.leftDrawer {
height: 100vh; /* Ensure it spans the full height */
+ background-color: var(--profile-bg);
overflow-y: auto; /* Enable vertical scrolling */
transition: transform 0.3s ease;
will-change: transform; /* NEW */
@@ -4024,17 +4148,6 @@ button[data-testid='createPostBtn'] {
padding-right: 3rem;
}
-.profileContainer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- /* Add focus styles for keyboard navigation */
- &:focus-within {
- @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */
- }
-}
-
.bg-danger {
background-color: var(--delete-button-color);
}
@@ -4523,6 +4636,7 @@ button[data-testid='createPostBtn'] {
.paddingY {
padding: var(--spacing-xl, 1.875rem) 0;
+ margin-bottom: 4rem;
}
.eventActionsContainer {
@@ -6427,6 +6541,623 @@ button[data-testid='createPostBtn'] {
color: var(--black-color);
}
+/* usersidebar */
+
+.leftDrawer {
+ width: calc(300px);
+ background-color: var(--profile-bg) !important;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ z-index: 100;
+ display: flex;
+ flex-direction: column;
+ padding: 1rem 1rem 0 1rem;
+ background-color: var(--leftDrawer-bg);
+ transition: 0.5s;
+ font-family: var(--bs-leftDrawer-font-family);
+}
+
+.leftbarcompheight {
+ display: flex;
+ justify-content: space-between;
+ height: 100vh;
+ padding-bottom: 48px;
+}
+
+@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;
+ }
+}
+
+/* ProfileDropdown */
+
+.profileContainer {
+ border: none;
+ padding: 2.1rem 0.5rem;
+ height: 52px;
+ border-radius: 8px 0px 0px 8px;
+ display: flex;
+ align-items: center;
+ background-color: var(--profile-bg) !important;
+ justify-content: space-between;
+ width: 100%;
+ /* Add focus styles for keyboard navigation */
+ &:focus-within {
+ @extend .reusable-focus-visible; /* Referencing the reusable class from the general section */
+ }
+}
+.profilebutton {
+ width: 100%;
+}
+
+.profileContainer:focus {
+ outline: none;
+ background-color: var(--profileContainer-focus-bg);
+}
+.imageContainer {
+ width: 56px;
+ height: 56px;
+ border-radius: 100%;
+ margin-right: 10px;
+}
+.imageContainer img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 100%;
+}
+.profileContainer .profileText {
+ flex: 1;
+ text-align: start;
+ overflow: hidden;
+ margin-right: 4px;
+}
+.profileContainer .profileText .primaryText {
+ font-size: 1rem;
+ font-weight: 600;
+ 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;
+}
+.profileContainer .profileText .secondaryText {
+ font-size: 0.8rem;
+ font-weight: 400;
+ color: var(--bs-secondary);
+ display: block;
+ text-transform: capitalize;
+}
+.profileDropdown {
+ background-color: transparent !important;
+}
+.profileDropdown .dropdown-toggle .btn .btn-normal {
+ display: none !important;
+ background-color: transparent !important;
+}
+.dropdownToggle {
+ background-image: url(../../../public/images/svg/angleRight.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-color: var(--profile-bg) !important;
+}
+
+.dropdownToggle::after {
+ border-top: none !important;
+ border-bottom: none !important;
+}
+.avatarStyle {
+ border-radius: 100%;
+}
+
+/* SuperAdminScreen */
+
+.pageContainer {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+ background-color: var(--profile-bg) !important;
+ padding: 1rem 1.5rem 0 calc(300px + 2rem + 1.5rem);
+}
+
+.expand {
+ padding-left: 4rem;
+ animation: moveLeft 0.5s ease-in-out;
+}
+
+.contract {
+ padding-left: calc(300px + 2rem + 1.5rem);
+ animation: moveRight 0.5s ease-in-out;
+}
+
+.collapseSidebarButton {
+ --bs-btn-active-color: var(--profile-bg);
+ --bs-btn-active-bg: var(--profile-bg);
+ --bs-btn-active-border-color: var(--profile-bg);
+ position: fixed;
+ height: 40px;
+ bottom: 0;
+ z-index: 9999;
+ width: calc(250px + 2rem);
+ background-color: rgba(245, 245, 245, 0.7);
+ color: var(--collapse-Sidebar-Button-fill);
+ border: none;
+ border-radius: 0px;
+}
+
+.collapseSidebarButton:hover,
+.opendrawer:hover {
+ opacity: 1;
+ background-color: var(--profile-bg);
+ box-shadow: var(--hover-shadow);
+ color: black !important;
+}
+.opendrawer {
+ --bs-btn-active-color: var(--profile-bg);
+ --bs-btn-active-bg: var(--profile-bg);
+ --bs-btn-active-border-color: var(--profile-bg);
+ position: fixed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ top: 0;
+ left: 0;
+ width: 40px;
+ height: 100vh;
+ z-index: 9999;
+ background-color: var(--profile-bg);
+ border: none;
+ border-radius: 0px;
+ margin-right: 20px;
+ color: black;
+}
+
+@media (max-width: 1120px) {
+ .contract {
+ padding-left: calc(250px + 2rem + 1.5rem);
+ }
+ .collapseSidebarButton {
+ width: calc(250px + 2rem);
+ }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+ .pageContainer {
+ padding-left: 2.5rem;
+ }
+
+ .opendrawer {
+ width: 25px;
+ }
+
+ .contract,
+ .expand {
+ animation: none;
+ }
+
+ .collapseSidebarButton {
+ width: 100%;
+ left: 0;
+ right: 0;
+ }
+}
+
+@keyframes moveLeft {
+ from {
+ padding-left: calc(300px + 2rem + 1.5rem);
+ }
+
+ to {
+ padding-left: 1.5rem;
+ }
+}
+
+@keyframes moveRight {
+ from {
+ padding-left: 1.5rem;
+ }
+
+ to {
+ padding-left: calc(300px + 2rem + 1.5rem);
+ }
+}
+
+/* OrganizationCard */
+.joinBtn {
+ display: flex;
+ justify-content: space-around;
+ width: 8rem;
+ border-width: medium;
+}
+
+.joinedBtn {
+ display: flex;
+ justify-content: space-around;
+ width: 8rem;
+ color: var(--joined-button-color);
+ font-weight: bold;
+ background-color: var(--joined-button-bg) !important;
+ border-color: var(--joined-button-bg) !important;
+}
+
+.joinedBtn:hover {
+ background-color: var(--joined-button-bg) !important;
+ border-color: var(--joined-button-bg) !important;
+ color: var(--joined-button-color) !important;
+ box-shadow: var(--hover-shadow);
+}
+
+.withdrawBtn {
+ display: flex;
+ justify-content: space-around;
+ width: 8rem;
+}
+
+.orgName {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ font-size: 1rem;
+}
+
+.orgdesc {
+ font-size: 0.9rem;
+ color: var(--org-desc-color);
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ line-clamp: 1;
+ -webkit-box-orient: vertical;
+ max-width: 20rem;
+}
+
+.orgadmin {
+ font-size: 0.9rem;
+ display: flex;
+ align-items: start;
+ flex-direction: column;
+}
+
+@media (max-width: 1420px) {
+ .orgCard {
+ width: 100%;
+ }
+}
+
+@media (max-width: 550px) {
+ .orgCard {
+ width: 100%;
+ }
+
+ .orgCard {
+ height: unset;
+ margin: 0.5rem 0;
+ padding: 1.25rem 1.5rem;
+ }
+
+ .orgCard .innerContainer {
+ flex-direction: column;
+ }
+
+ .orgCard button {
+ bottom: 0;
+ right: 0;
+ position: relative;
+ margin-left: auto;
+ display: block;
+ }
+ .joinBtn,
+ .joinedBtn,
+ .withdrawBtn {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ }
+}
+
+/* OrgListCard */
+
+.orgCard {
+ background-color: var(--orgCard-bg);
+ margin: 1rem;
+ padding: 1rem;
+ border-radius: 8px;
+ outline: 1px solid var(--orgCard-outline);
+ position: relative;
+}
+
+.orgCard .innerContainer {
+ display: flex;
+ gap: 10px;
+}
+
+.orgCard .innerContainer .orgImgContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+ border-radius: 4px;
+ width: 125px;
+ height: 120px;
+ object-fit: contain;
+ margin-bottom: 0.8rem;
+ background-color: var(--orgCard-Image-bg);
+}
+.orgCard .innerContainer .content {
+ flex: 1;
+ margin-left: 1rem;
+ width: 70%;
+ margin-top: 0.7rem;
+ margin-left: 0;
+}
+
+.orgCard button {
+ position: absolute;
+ bottom: 1rem;
+ right: 1rem;
+ z-index: 1;
+}
+
+.flaskIcon {
+ margin-top: 4px;
+}
+
+.manageBtn {
+ display: flex;
+ justify-content: space-around;
+ width: 8rem;
+ border-color: var(--search-button-bg) !important;
+ background-color: var(--search-button-bg) !important;
+ color: #555555 !important;
+}
+
+.manageBtn:hover {
+ color: var(--brown-color) !important;
+ box-shadow: var(--hover-shadow);
+}
+
+.orgdesc {
+ font-size: 0.9rem;
+ color: var(--org-desc-color);
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ line-clamp: 1;
+ -webkit-box-orient: vertical;
+ max-width: 20rem;
+}
+
+.orgmember {
+ font-size: 0.9rem;
+}
+
+.address {
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-line-clamp: 1;
+ line-clamp: 1;
+ -webkit-box-orient: vertical;
+ align-items: center;
+}
+
+.address h6 {
+ font-size: 0.9rem;
+ color: var(--org-desc-color);
+}
+
+@media (max-width: 580px) {
+ .orgCard {
+ height: unset;
+ margin: 0.5rem 0;
+ padding: 1.25rem 1.5rem;
+ }
+
+ .orgCard .innerContainer {
+ flex-direction: column;
+ }
+
+ .orgCard .innerContainer .orgImgContainer img {
+ height: auto;
+ width: 100%;
+ }
+
+ .orgCard button {
+ bottom: 0;
+ right: 0;
+ position: relative;
+ margin-left: auto;
+ display: block;
+ }
+
+ .flaskIcon {
+ margin-bottom: 6px;
+ }
+
+ .manageBtn {
+ display: flex;
+ justify-content: space-around;
+ width: 100%;
+ }
+}
+
+/* Organizations */
+
+.borderNone {
+ border: none;
+}
+
+.colorWhite {
+ color: var(--search-outline);
+}
+
+.mainContainerOrganization {
+ max-height: 100%;
+ width: 100%;
+ overflow: auto;
+}
+
+.content {
+ min-height: calc(100% - 40px);
+}
+
+.paddingY {
+ padding: 30px 0px;
+}
+
+.containerHeight {
+ background-color: var(--profile-bg) !important;
+ min-height: 100vh;
+ padding: 1rem 1.5rem 0 calc(300px + 1.5rem);
+}
+
+.expandOrg {
+ padding-left: 4rem;
+ animation: moveLeft 0.9s ease-in-out;
+}
+
+.contractOrg {
+ padding-left: calc(300px + 2rem + 1.5rem);
+ animation: moveRight 0.5s ease-in-out;
+}
+
+.colorPrimary {
+ background: var(--organization-bg);
+ color: var(--organization-color) !important;
+ --bs-btn-active-bg: var(--organization-bg);
+}
+.colorPrimary:hover,
+.colorPrimary:focus,
+.colorPrimary:active {
+ background-color: var(--organization-bg) !important;
+ box-shadow: var(--hover-shadow);
+ color: var(--organization-color) !important;
+}
+
+.backgroundWhite {
+ background-color: white;
+}
+
+.input {
+ flex: 1;
+ position: relative;
+ margin-right: 10px;
+}
+
+.collapseSidebarButton:active,
+.opendrawer:active {
+ background-color: var(--profile-bg) !important;
+}
+
+.maxWidth {
+ max-width: 473px;
+}
+
+@media screen and (max-width: 850px) {
+ .mainContainerOrganization {
+ width: 100%;
+ }
+}
+
+@media (max-width: 1120px) {
+ .collapseSidebarButton {
+ width: calc(250px + 2rem);
+ }
+}
+
+@media (max-height: 650px) {
+ .collapseSidebarButton {
+ width: 250px;
+ height: 20px;
+ }
+ .opendrawer {
+ width: 30px;
+ }
+}
+
+/* For tablets */
+@media (max-width: 820px) {
+ .containerHeight {
+ height: 100vh;
+ padding: 2rem;
+ }
+ .opendrawer {
+ width: 25px;
+ }
+
+ .contractOrg,
+ .expandOrg {
+ animation: none;
+ }
+
+ .collapseSidebarButton {
+ width: 100%;
+ left: 0;
+ right: 0;
+ }
+}
+
+/* LoginPortaltoggle */
+
+.navLinkClass {
+ display: inline-block;
+ padding: 0.375rem 0.75rem;
+ font-size: 1rem;
+ line-height: 1.4;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ color: var(--LoginToggle-button-color);
+ border-radius: 0.3rem;
+ width: 100%;
+ box-sizing: border-box;
+ border: 1px solid var(--LoginToggle-button-bg);
+ font-weight: 500;
+ transition: all 0.25s ease;
+ background-color: var(--LoginToggle-button-bg);
+}
+
+.navLinkClass:hover {
+ box-shadow: var(--hover-shadow);
+ background-color: var(--LoginToggle-button-bg);
+ border-color: var(--LoginToggle-button-bg);
+}
+
+.activeLink {
+ color: var(--LoginToggle-button-color);
+ border: 1px solid var(--LoginToggle-button-active);
+ background-color: var(--LoginToggle-button-active);
+}
+
+.activeLink:hover {
+ box-shadow: var(--hover-shadow);
+ color: var(--LoginToggle-button-color);
+ border: 1px solid var(--LoginToggle-button-active);
+ background-color: var(--LoginToggle-button-active);
+}
/* people card */
.personImage_peoplecard {
border-radius: 50%;