From c28a49fe13615d489b67ac6845971ce163ef282c Mon Sep 17 00:00:00 2001
From: Nitish Kumar <123248648+nitishkumar333@users.noreply.github.com>
Date: Tue, 26 Mar 2024 03:58:57 +0530
Subject: [PATCH] Redesign LeftDrawer (#1802)

* sidebar redesign

* failing test fix

* leftDrawer test coverage
---
 src/assets/css/app.css                        |   3 +
 .../CollapsibleDropdown.tsx                   |   2 +-
 .../LeftDrawer/LeftDrawer.module.css          |  15 ++-
 src/components/LeftDrawer/LeftDrawer.test.tsx |  30 +++--
 src/components/LeftDrawer/LeftDrawer.tsx      |  12 +-
 .../LeftDrawerOrg/LeftDrawerOrg.module.css    | 114 +++++++++++++++---
 .../LeftDrawerOrg/LeftDrawerOrg.tsx           |  16 +--
 .../OrganizationScreen.module.css             |  31 +++++
 .../OrganizationScreen/OrganizationScreen.tsx |  13 +-
 .../MemberDetail/MemberDetail.test.tsx        |   1 -
 src/screens/MemberDetail/MemberDetail.tsx     |   7 +-
 11 files changed, 182 insertions(+), 62 deletions(-)

diff --git a/src/assets/css/app.css b/src/assets/css/app.css
index ffabe972e8..a96b3afabe 100644
--- a/src/assets/css/app.css
+++ b/src/assets/css/app.css
@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 /*!
  * Bootstrap  v5.3.0 (https://getbootstrap.com/)
  * Copyright 2011-2023 The Bootstrap Authors
@@ -76,12 +77,14 @@
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
+  --bs-font-lato: 'Lato';
   --bs-gradient: linear-gradient(
     180deg,
     rgba(255, 255, 255, 0.15),
     rgba(255, 255, 255, 0)
   );
   --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-leftDrawer-font-family: var(--bs-font-sans-serif);
   --bs-body-font-size: 1rem;
   --bs-body-font-weight: 400;
   --bs-body-line-height: 1.5;
diff --git a/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx b/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
index 854f9dc598..03f08b044f 100644
--- a/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
+++ b/src/components/CollapsibleDropdown/CollapsibleDropdown.tsx
@@ -30,7 +30,7 @@ const collapsibleDropdown = ({
   return (
     <>
       <Button
-        variant={showDropdown ? 'success' : 'light'}
+        variant={showDropdown ? 'success' : ''}
         className={showDropdown ? 'text-white' : 'text-secondary'}
         onClick={(): void => setShowDropdown(!showDropdown)}
         aria-expanded={showDropdown}
diff --git a/src/components/LeftDrawer/LeftDrawer.module.css b/src/components/LeftDrawer/LeftDrawer.module.css
index 27130a4e3b..a9d330339f 100644
--- a/src/components/LeftDrawer/LeftDrawer.module.css
+++ b/src/components/LeftDrawer/LeftDrawer.module.css
@@ -9,6 +9,7 @@
   padding: 1rem 1rem 0 1rem;
   background-color: var(--bs-white);
   transition: 0.5s;
+  font-family: var(--bs-leftDrawer-font-family);
 }
 
 .activeDrawer {
@@ -34,8 +35,9 @@
 }
 
 .leftDrawer .talawaText {
-  font-size: 1rem;
+  font-size: 20px;
   text-align: center;
+  font-weight: 500;
 }
 
 .leftDrawer .titleHeader {
@@ -49,8 +51,9 @@
   width: 100%;
   text-align: start;
   margin-bottom: 0.8rem;
-  border-radius: 8px;
-  border: 1px solid var(--bs-gray-200);
+  border-radius: 16px;
+  outline: none;
+  border: none;
 }
 
 .leftDrawer .optionList button .iconWrapper {
@@ -62,9 +65,9 @@
   width: 100%;
   padding: 2.1rem 0.5rem;
   height: 52px;
-  border-radius: 8px;
   display: flex;
   align-items: center;
+  background-color: var(--bs-white);
 }
 
 .leftDrawer .profileContainer:focus {
@@ -100,10 +103,6 @@
   text-transform: capitalize;
 }
 
-.logout {
-  margin-bottom: 50px;
-}
-
 @media (max-width: 1120px) {
   .leftDrawer {
     width: calc(250px + 2rem);
diff --git a/src/components/LeftDrawer/LeftDrawer.test.tsx b/src/components/LeftDrawer/LeftDrawer.test.tsx
index d760229ec6..6cef74e73e 100644
--- a/src/components/LeftDrawer/LeftDrawer.test.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.test.tsx
@@ -94,16 +94,15 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
     expect(
       orgsBtn.className.includes('text-white btn btn-success'),
     ).toBeTruthy();
+    expect(rolesBtn.className.includes('text-secondary btn')).toBeTruthy();
     expect(
-      rolesBtn.className.includes('text-secondary btn btn-light'),
-    ).toBeTruthy();
-    expect(
-      communityProfileBtn.className.includes('text-secondary btn btn-light'),
+      communityProfileBtn.className.includes('text-secondary btn'),
     ).toBeTruthy();
 
     // Send to roles screen
     userEvent.click(rolesBtn);
     expect(global.window.location.pathname).toContain('/users');
+    userEvent.click(communityProfileBtn);
   });
 
   test('Testing Drawer when hideDrawer is null', () => {
@@ -117,6 +116,21 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
       </MockedProvider>,
     );
   });
+  test('Testing Drawer when hideDrawer is false', () => {
+    const tempProps: InterfaceLeftDrawerProps = {
+      ...props,
+      hideDrawer: false,
+    };
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <LeftDrawer {...tempProps} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>,
+    );
+  });
 });
 
 describe('Testing Left Drawer component for ADMIN', () => {
@@ -146,9 +160,7 @@ describe('Testing Left Drawer component for ADMIN', () => {
     expect(
       orgsBtn.className.includes('text-white btn btn-success'),
     ).toBeTruthy();
-    expect(
-      requestsBtn.className.includes('text-secondary btn btn-light'),
-    ).toBeTruthy();
+    expect(requestsBtn.className.includes('text-secondary btn')).toBeTruthy();
 
     // These screens arent meant for admins so they should not be present
     expect(screen.queryByTestId(/rolesBtn/i)).toBeNull();
@@ -175,8 +187,6 @@ describe('Testing Left Drawer component for ADMIN', () => {
     expect(
       requestsBtn.className.includes('text-white btn btn-success'),
     ).toBeTruthy();
-    expect(
-      orgsBtn.className.includes('text-secondary btn btn-light'),
-    ).toBeTruthy();
+    expect(orgsBtn.className.includes('text-secondary btn')).toBeTruthy();
   });
 });
diff --git a/src/components/LeftDrawer/LeftDrawer.tsx b/src/components/LeftDrawer/LeftDrawer.tsx
index 478b7f07b9..4fce2fb847 100644
--- a/src/components/LeftDrawer/LeftDrawer.tsx
+++ b/src/components/LeftDrawer/LeftDrawer.tsx
@@ -26,7 +26,7 @@ const leftDrawer = ({ hideDrawer }: InterfaceLeftDrawerProps): JSX.Element => {
   return (
     <>
       <div
-        className={`${styles.leftDrawer} customScroll ${
+        className={`${styles.leftDrawer} ${
           hideDrawer === null
             ? styles.hideElemByDefault
             : hideDrawer
@@ -37,12 +37,12 @@ const leftDrawer = ({ hideDrawer }: InterfaceLeftDrawerProps): JSX.Element => {
       >
         <TalawaLogo className={styles.talawaLogo} />
         <p className={styles.talawaText}>{t('talawaAdminPortal')}</p>
-        <h5 className={styles.titleHeader}>{t('menu')}</h5>
+        <h5 className={`${styles.titleHeader} text-secondary`}>{t('menu')}</h5>
         <div className={styles.optionList}>
           <NavLink to={'/orglist'}>
             {({ isActive }) => (
               <Button
-                variant={isActive === true ? 'success' : 'light'}
+                variant={isActive === true ? 'success' : ''}
                 className={`${
                   isActive === true ? 'text-white' : 'text-secondary'
                 }`}
@@ -65,7 +65,7 @@ const leftDrawer = ({ hideDrawer }: InterfaceLeftDrawerProps): JSX.Element => {
             <NavLink to={'/requests'}>
               {({ isActive }) => (
                 <Button
-                  variant={isActive === true ? 'success' : 'light'}
+                  variant={isActive === true ? 'success' : ''}
                   className={`${
                     isActive === true ? 'text-white' : 'text-secondary'
                   }`}
@@ -90,7 +90,7 @@ const leftDrawer = ({ hideDrawer }: InterfaceLeftDrawerProps): JSX.Element => {
               <NavLink to={'/users'}>
                 {({ isActive }) => (
                   <Button
-                    variant={isActive === true ? 'success' : 'light'}
+                    variant={isActive === true ? 'success' : ''}
                     className={`${
                       isActive === true ? 'text-white' : 'text-secondary'
                     }`}
@@ -112,7 +112,7 @@ const leftDrawer = ({ hideDrawer }: InterfaceLeftDrawerProps): JSX.Element => {
               <NavLink to={'/communityProfile'}>
                 {({ isActive }) => (
                   <Button
-                    variant={isActive === true ? 'success' : 'light'}
+                    variant={isActive === true ? 'success' : ''}
                     className={`${
                       isActive === true ? 'text-white' : 'text-secondary'
                     }`}
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
index c169189422..54560e7969 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.module.css
@@ -1,5 +1,6 @@
 .leftDrawer {
   width: calc(300px + 2rem);
+  min-height: 100%;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -9,6 +10,7 @@
   padding: 0.8rem 1rem 0 1rem;
   background-color: var(--bs-white);
   transition: 0.5s;
+  font-family: var(--bs-leftDrawer-font-family);
 }
 
 .activeDrawer {
@@ -36,26 +38,29 @@
 
 .leftDrawer .organizationContainer button {
   position: relative;
-  margin: 1.25rem 0;
+  margin: 0.7rem 0;
   padding: 2.5rem 0.1rem;
-  border-radius: 0.5rem;
-  border: 1px solid var(--bs-gray-300);
-  background-color: var(--bs-gray-100);
+  border-radius: 16px;
 }
 
 .leftDrawer .talawaLogo {
-  width: 42px;
-  height: 42px;
-  margin-right: 0.5rem;
+  width: 50px;
+  height: 50px;
+  margin-right: 0.3rem;
 }
 
 .leftDrawer .talawaText {
-  font-size: 1.1rem;
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .leftDrawer .titleHeader {
-  margin-bottom: 1rem;
   font-weight: 600;
+  margin: 0.6rem 0rem;
+}
+
+.leftDrawer .optionList {
+  height: 100%;
 }
 
 .leftDrawer .optionList button {
@@ -64,8 +69,12 @@
   width: 100%;
   text-align: start;
   margin-bottom: 0.8rem;
-  border: 1px solid var(--bs-gray-200);
-  border-radius: 8px;
+  border-radius: 16px;
+  font-size: 16px;
+  padding: 0.6rem;
+  padding-left: 0.8rem;
+  outline: none;
+  border: none;
 }
 
 .leftDrawer button .iconWrapper {
@@ -74,6 +83,7 @@
 
 .leftDrawer .optionList .collapseBtn {
   height: 48px;
+  border: none;
 }
 
 .leftDrawer button .iconWrapperSm {
@@ -83,24 +93,28 @@
   align-items: center;
 }
 
+.leftDrawer .organizationContainer .profileContainer {
+  background-color: #31bb6b33;
+  padding-right: 10px;
+}
+
 .leftDrawer .profileContainer {
   border: none;
   width: 100%;
-  margin-top: 5rem;
-  padding: 2.1rem 0.5rem;
   height: 52px;
-  border-radius: 8px;
+  border-radius: 16px;
   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;
+  margin-right: 8px;
 }
 
 .leftDrawer .profileContainer img {
@@ -134,10 +148,6 @@
   text-transform: capitalize;
 }
 
-.logout {
-  margin-bottom: 50px;
-}
-
 @media (max-width: 1120px) {
   .leftDrawer {
     width: calc(250px + 2rem);
@@ -146,6 +156,72 @@
 }
 
 /* For tablets */
+@media (max-height: 900px) {
+  .leftDrawer {
+    width: calc(300px + 1rem);
+  }
+  .leftDrawer .talawaLogo {
+    width: 38px;
+    height: 38px;
+    margin-right: 0.4rem;
+  }
+  .leftDrawer .talawaText {
+    font-size: 1rem;
+  }
+  .leftDrawer .organizationContainer button {
+    margin: 0.6rem 0;
+    padding: 2.2rem 0.1rem;
+  }
+  .leftDrawer .optionList button {
+    margin-bottom: 0.05rem;
+    font-size: 16px;
+    padding-left: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .primaryText {
+    font-size: 1rem;
+  }
+  .leftDrawer .profileContainer .profileText .secondaryText {
+    font-size: 0.8rem;
+  }
+}
+@media (max-height: 650px) {
+  .leftDrawer {
+    padding: 0.5rem 0.8rem 0 0.8rem;
+    width: calc(250px);
+  }
+  .leftDrawer .talawaText {
+    font-size: 0.8rem;
+  }
+  .leftDrawer .organizationContainer button {
+    margin: 0.2rem 0;
+    padding: 1.6rem 0rem;
+  }
+  .leftDrawer .titleHeader {
+    font-size: 16px;
+  }
+  .leftDrawer .optionList button {
+    margin-bottom: 0.05rem;
+    font-size: 14px;
+    padding: 0.4rem;
+    padding-left: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .primaryText {
+    font-size: 0.8rem;
+  }
+  .leftDrawer .profileContainer .profileText .secondaryText {
+    font-size: 0.6rem;
+  }
+  .leftDrawer .imageContainer {
+    width: 40px;
+    margin-left: 5px;
+    margin-right: 12px;
+  }
+  .leftDrawer .imageContainer img {
+    width: 40px;
+    height: 100%;
+  }
+}
+
 @media (max-width: 820px) {
   .hideElemByDefault {
     display: none;
diff --git a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
index 929ce32fb8..3e46faef96 100644
--- a/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
+++ b/src/components/LeftDrawerOrg/LeftDrawerOrg.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
 import type { TargetsType } from 'state/reducers/routesReducer';
 import type { InterfaceQueryOrganizationsListObject } from 'utils/interfaces';
-
+import { ReactComponent as AngleRightIcon } from 'assets/svgs/angleRight.svg';
 import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import styles from './LeftDrawerOrg.module.css';
 import Avatar from 'components/Avatar/Avatar';
@@ -56,7 +56,7 @@ const leftDrawerOrg = ({
   return (
     <>
       <div
-        className={`${styles.leftDrawer} customScroll ${
+        className={`${styles.leftDrawer} ${
           hideDrawer === null
             ? styles.hideElemByDefault
             : hideDrawer
@@ -107,26 +107,26 @@ const leftDrawerOrg = ({
               <div className={styles.profileText}>
                 <span className={styles.primaryText}>{organization.name}</span>
                 <span className={styles.secondaryText}>
-                  {organization.address.city}, {organization.address.state}
-                  <br />
-                  {organization.address.postalCode},{' '}
-                  {organization.address.countryCode}
+                  {organization.address.city}
                 </span>
               </div>
+              <AngleRightIcon fill={'var(--bs-secondary)'} />
             </button>
           )}
         </div>
 
         {/* Options List */}
         <div className={styles.optionList}>
-          <h5 className={styles.titleHeader}>{t('menu')}</h5>
+          <h5 className={`${styles.titleHeader} text-secondary`}>
+            {t('menu')}
+          </h5>
           {targets.map(({ name, url }, index) => {
             return url ? (
               <NavLink to={url} key={name}>
                 {({ isActive }) => (
                   <Button
                     key={name}
-                    variant={isActive === true ? 'success' : 'light'}
+                    variant={isActive === true ? 'success' : ''}
                     className={`${
                       isActive === true ? 'text-white' : 'text-secondary'
                     }`}
diff --git a/src/components/OrganizationScreen/OrganizationScreen.module.css b/src/components/OrganizationScreen/OrganizationScreen.module.css
index f7194abe2b..011c704d46 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.module.css
+++ b/src/components/OrganizationScreen/OrganizationScreen.module.css
@@ -115,6 +115,15 @@
   border-bottom: none !important;
 }
 
+.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 (max-width: 1120px) {
   .contract {
     padding-left: calc(250px + 2rem + 1.5rem);
@@ -124,6 +133,28 @@
   }
 }
 
+@media (max-height: 900px) {
+  .pageContainer {
+    padding: 1rem 1.5rem 0 calc(300px + 2rem);
+  }
+  .collapseSidebarButton {
+    height: 30px;
+    width: calc(300px + 1rem);
+  }
+}
+@media (max-height: 650px) {
+  .pageContainer {
+    padding: 1rem 1.5rem 0 calc(270px);
+  }
+  .collapseSidebarButton {
+    width: 250px;
+    height: 20px;
+  }
+  .opendrawer {
+    width: 30px;
+  }
+}
+
 /* For tablets */
 @media (max-width: 820px) {
   .pageContainer {
diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx
index 9185e96774..8989a7beb5 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.tsx
+++ b/src/components/OrganizationScreen/OrganizationScreen.tsx
@@ -1,6 +1,5 @@
 import LeftDrawerOrg from 'components/LeftDrawerOrg/LeftDrawerOrg';
 import React, { useEffect, useState } from 'react';
-import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
@@ -12,7 +11,7 @@ import ProfileDropdown from 'components/ProfileDropdown/profileDropdown';
 
 const OrganizationScreen = (): JSX.Element => {
   const location = useLocation();
-  const titleKey = map[location.pathname.split('/')[1]];
+  const titleKey: string | undefined = map[location.pathname.split('/')[1]];
   const { t } = useTranslation('translation', { keyPrefix: titleKey });
   const [hideDrawer, setHideDrawer] = useState<boolean | null>(null);
   const { orgId } = useParams();
@@ -51,7 +50,7 @@ const OrganizationScreen = (): JSX.Element => {
 
   return (
     <>
-      <Button
+      <button
         className={
           hideDrawer ? styles.opendrawer : styles.collapseSidebarButton
         }
@@ -64,7 +63,7 @@ const OrganizationScreen = (): JSX.Element => {
           }
           aria-hidden="true"
         ></i>
-      </Button>
+      </button>
       <div className={styles.drawer}>
         <LeftDrawerOrg
           orgId={orgId}
@@ -97,7 +96,11 @@ const OrganizationScreen = (): JSX.Element => {
 
 export default OrganizationScreen;
 
-const map: any = {
+interface InterfaceMapType {
+  [key: string]: string;
+}
+
+const map: InterfaceMapType = {
   orgdash: 'dashboard',
   orgpeople: 'organizationPeople',
   orgads: 'advertisement',
diff --git a/src/screens/MemberDetail/MemberDetail.test.tsx b/src/screens/MemberDetail/MemberDetail.test.tsx
index 85b8df1baa..1d4fe3a9b8 100644
--- a/src/screens/MemberDetail/MemberDetail.test.tsx
+++ b/src/screens/MemberDetail/MemberDetail.test.tsx
@@ -189,7 +189,6 @@ describe('MemberDetail', () => {
   test('should render the elements', async () => {
     const props = {
       id: 'rishav-jha-mech',
-      from: 'orglist',
     };
 
     render(
diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
index 8a34b30292..63580cedfe 100644
--- a/src/screens/MemberDetail/MemberDetail.tsx
+++ b/src/screens/MemberDetail/MemberDetail.tsx
@@ -4,7 +4,7 @@ import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
-import { useParams, useLocation, useNavigate } from 'react-router-dom';
+import { useParams, useLocation, Navigate } from 'react-router-dom';
 import UserUpdate from 'components/UserUpdate/UserUpdate';
 import { USER_DETAILS } from 'GraphQl/Queries/Queries';
 import styles from './MemberDetail.module.css';
@@ -23,7 +23,6 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
   const { t } = useTranslation('translation', {
     keyPrefix: 'memberDetail',
   });
-  const navigate = useNavigate();
   const location = useLocation();
 
   const [state, setState] = useState(1);
@@ -67,7 +66,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
 
   /* istanbul ignore next */
   if (error) {
-    navigate(`/orgpeople/${currentUrl}`);
+    return <Navigate to={`/orgpeople/${currentUrl}`} />;
   }
 
   const addAdmin = async (): Promise<void> => {
@@ -86,7 +85,7 @@ const MemberDetail: React.FC<MemberDetailProps> = ({ id }): JSX.Element => {
         }, 2000);
       }
       /* istanbul ignore next */
-    } catch (error: any) {
+    } catch (error: unknown) {
       /* istanbul ignore next */
       errorHandler(t, error);
     }