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
PalisadoesFoundation · Jan 21, 2025 · bdee2c7 · bdee2c7
1 parent 07c7986
commit bdee2c7
Show file tree

Hide file tree

Showing 29 changed files with 1,053 additions and 1,165 deletions.
diff --git 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/...to-docs/components/LeftDrawer/LeftDrawer/interfaces/InterfaceLeftDrawerProps.md b/...to-docs/components/LeftDrawer/LeftDrawer/interfaces/InterfaceLeftDrawerProps.md
@@ -4,20 +4,20 @@
 
 # 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
 
 ### hideDrawer
 
 > **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)
 
 ***
 
 ### setHideDrawer
 
 > **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/...ocs/auto-docs/components/SuperAdminScreen/SuperAdminScreen/functions/default.md b/...ocs/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/...cs/auto-docs/components/UserPortal/UserSidebar/UserSidebar/functions/default.md b/...cs/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/...ents/UserPortal/UserSidebar/UserSidebar/interfaces/InterfaceUserSidebarProps.md b/...ents/UserPortal/UserSidebar/UserSidebar/interfaces/InterfaceUserSidebarProps.md
@@ -4,20 +4,20 @@
 
 # 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
 
 ### hideDrawer
 
 > **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)
 
 ***
 
 ### setHideDrawer
 
 > **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/...s/auto-docs/screens/UserPortal/Organizations/Organizations/functions/default.md b/...s/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
diff --git a/src/assets/css/app.css b/src/assets/css/app.css
diff --git 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
@@ -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
diff --git 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';