Redesign LeftDrawer (PalisadoesFoundation#1802)

* sidebar redesign * failing test fix * leftDrawer test coverage
AdityaRaimec22 · Mar 25, 2024 · c28a49f · c28a49f
1 parent 1fb5142
commit c28a49f
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 62 deletions.
diff --git a/src/assets/css/app.css b/src/assets/css/app.css
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;