[FIX] User Portal: People Page Violates The Figma Style Guide

src/components/UserPortal/PeopleCard/PeopleCard.module.css

@@ -1,33 +0,0 @@
-.mainContainer {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  padding: 10px;
-  cursor: pointer;
-  background-color: white;
-  border-radius: 10px;
-  box-shadow: 2px 2px 8px 0px #c8c8c8;
-  overflow: hidden;
-}
-
-.personDetails {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.personImage {
-  border-radius: 50%;
-  margin-right: 20px;
-  max-width: 70px;
-}
-
-.borderBox {
-  border: 1px solid #dddddd;
-  box-shadow: 5px 5px 4px 0px #31bb6b1f;
-  border-radius: 4px;
-}
-
-.greenText {
-  color: #31bb6b;
-}

src/components/UserPortal/PeopleCard/PeopleCard.tsx

@@ -45,7 +45,7 @@ function peopleCard(props: InterfaceOrganizationCardProps): JSX.Element {
             src={imageUrl}
             width="80px"
             height="auto"
-            className={`${styles.personImage}`}
+            className={styles.personImage_peoplecard}
           />
         </span>
       </span>
@@ -59,8 +59,8 @@ function peopleCard(props: InterfaceOrganizationCardProps): JSX.Element {
       </span>
       {/* Person's role with additional styling */}
       <div style={{ flex: '2' }} className="align-self-center">
-        <div className={`w-75 border py-2 px-3 ${styles.borderBox}`}>
-          <span className={`${styles.greenText}`}>{props.role}</span>
+        <div className={`w-75 border py-2 px-3 rounded`}>
+          <span>{props.role}</span>
         </div>
       </div>
     </div>

src/screens/UserPortal/People/People.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import PeopleCard from 'components/UserPortal/PeopleCard/PeopleCard';
-import { Dropdown, Form, InputGroup } from 'react-bootstrap';
+import { Dropdown, Form, Button } from 'react-bootstrap';
 import PaginationList from 'components/PaginationList/PaginationList';
 import {
   ORGANIZATIONS_MEMBER_CONNECTION_LIST,
   ORGANIZATION_ADMINS_LIST,
 } from 'GraphQl/Queries/Queries';
 import { useQuery } from '@apollo/client';
-import { FilterAltOutlined, SearchOutlined } from '@mui/icons-material';
-import styles from './People.module.css';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import { FilterAltOutlined } from '@mui/icons-material';
+import styles from '../../../style/app.module.css';
 import { useTranslation } from 'react-i18next';
 import HourglassBottomIcon from '@mui/icons-material/HourglassBottom';
 import { useParams } from 'react-router-dom';
@@ -162,121 +163,112 @@ export default function people(): JSX.Element {
 
   return (
     <>
-      <div className={`d-flex flex-row`}>
-        <div className={`${styles.mainContainer}`}>
-          <div
-            className={`mt-4 d-flex flex-row justify-content-between flex-wrap ${styles.gap}`}
-          >
-            <InputGroup className={`${styles.maxWidth} ${styles.shadow}`}>
-              <Form.Control
-                placeholder={t('searchUsers')}
-                id="searchPeople"
-                type="text"
-                className={`${styles.borderBox} ${styles.backgroundWhite} ${styles.placeholderColor}`}
-                onKeyUp={handleSearchByEnter}
-                data-testid="searchInput"
-              />
-              <InputGroup.Text
-                className={`${styles.colorPrimary} ${styles.borderRounded5}`}
-                style={{ cursor: 'pointer' }}
-                onClick={handleSearchByBtnClick}
-                data-testid="searchBtn"
-              >
-                <SearchOutlined className={`${styles.colorWhite}`} />
-              </InputGroup.Text>
-            </InputGroup>
-            <Dropdown drop="down-centered">
-              <Dropdown.Toggle
-                className={`${styles.greenBorder} ${styles.backgroundWhite} ${styles.colorGreen} ${styles.semiBold} ${styles.shadow} ${styles.borderRounded8}`}
-                id="dropdown-basic"
-                data-testid={`modeChangeBtn`}
-              >
-                <FilterAltOutlined />
-                {tCommon('filter').toUpperCase()}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                {modes.map((value, index) => {
-                  return (
-                    <Dropdown.Item
-                      key={index}
-                      data-testid={`modeBtn${index}`}
-                      onClick={(): void => setMode(index)}
-                    >
-                      {value}
-                    </Dropdown.Item>
-                  );
-                })}
-              </Dropdown.Menu>
-            </Dropdown>
-          </div>
-          <div className={`d-flex flex-column ${styles.content}`}>
-            <div
-              className={`d-flex border py-3 px-4 mt-4 bg-white ${styles.topRadius}`}
+      <div className={`${styles.mainContainer_people}`}>
+        <div className={styles.people__header}>
+          <div className={styles.input}>
+            <Form.Control
+              placeholder={t('searchUsers')}
+              id="searchPeople"
+              type="text"
+              className={styles.inputField}
+              onKeyUp={handleSearchByEnter}
+              data-testid="searchInput"
+            />
+
+            <Button
+              className={styles.searchButton}
+              data-testid="searchBtn"
+              style={{ cursor: 'pointer' }}
+              onClick={handleSearchByBtnClick}
             >
-              <span style={{ flex: '1' }} className="d-flex">
-                <span style={{ flex: '1' }}>S.No</span>
-                <span style={{ flex: '1' }}>Avatar</span>
-              </span>
-              <span style={{ flex: '2' }}>Name</span>
-              <span style={{ flex: '2' }}>Email</span>
-              <span style={{ flex: '2' }}>Role</span>
-            </div>
+              <SearchOutlinedIcon />
+            </Button>
+          </div>
 
-            <div
-              className={`d-flex flex-column border px-4 p-3 mt-0 ${styles.gap} ${styles.bottomRadius} ${styles.backgroundWhite}`}
+          <Dropdown drop="down-centered">
+            <Dropdown.Toggle
+              className={styles.dropdown}
+              id="dropdown-basic"
+              data-testid={`modeChangeBtn`}
             >
-              {loading ? (
-                <div className={`d-flex flex-row justify-content-center`}>
-                  <HourglassBottomIcon /> <span>Loading...</span>
-                </div>
-              ) : (
-                <>
-                  {members && members.length > 0 ? (
-                    (rowsPerPage > 0
-                      ? members.slice(
-                          page * rowsPerPage,
-                          page * rowsPerPage + rowsPerPage,
-                        )
-                      : /* istanbul ignore next */
-                        members
-                    ).map((member: InterfaceMember, index) => {
-                      const name = `${member.firstName} ${member.lastName}`;
+              <FilterAltOutlined
+                sx={{
+                  fontSize: '25px',
+                  marginBottom: '2px',
+                  marginRight: '2px',
+                }}
+              />
+              {tCommon('filter')}
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {modes.map((value, index) => {
+                return (
+                  <Dropdown.Item
+                    key={index}
+                    data-testid={`modeBtn${index}`}
+                    onClick={(): void => setMode(index)}
+                  >
+                    {value}
+                  </Dropdown.Item>
+                );
+              })}
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+        <div className={`d-flex flex-column ${styles.people_content}`}>
+          <div className={styles.people_card_header}>
+            <span style={{ flex: '1' }} className="d-flex">
+              <span style={{ flex: '1' }}>S.No</span>
+              <span style={{ flex: '1' }}>Avatar</span>
+            </span>
+            <span style={{ flex: '2' }}>Name</span>
+            <span style={{ flex: '2' }}>Email</span>
+            <span style={{ flex: '2' }}>Role</span>
+          </div>
+
+          <div
+            className={`d-flex flex-column border px-4 p-3 mt-0 ${styles.gap} ${styles.bottomRadius} ${styles.backgroundWhite}`}
+          >
+            {loading ? (
+              <div className={`d-flex flex-row justify-content-center`}>
+                <HourglassBottomIcon /> <span>Loading...</span>
+              </div>
+            ) : (
+              <>
+                {members && members.length > 0 ? (
+                  (rowsPerPage > 0
+                    ? members.slice(
+                        page * rowsPerPage,
+                        page * rowsPerPage + rowsPerPage,
+                      )
+                    : members
+                  ).map((member: InterfaceMember, index) => {
+                    const name = `${member.firstName} ${member.lastName}`;
 
-                      const cardProps: InterfaceOrganizationCardProps = {
-                        name,
-                        image: member.image,
-                        id: member._id,
-                        email: member.email,
-                        role: member.userType,
-                        sno: (index + 1).toString(),
-                      };
-                      return <PeopleCard key={index} {...cardProps} />;
-                    })
-                  ) : (
-                    <span>{t('nothingToShow')}</span>
-                  )}
-                </>
-              )}
-            </div>
-            <table>
-              <tbody>
-                <tr>
-                  <PaginationList
-                    count={
-                      /* istanbul ignore next */
-                      members ? members.length : 0
-                    }
-                    rowsPerPage={rowsPerPage}
-                    page={page}
-                    onPageChange={handleChangePage}
-                    onRowsPerPageChange={handleChangeRowsPerPage}
-                  />
-                </tr>
-              </tbody>
-            </table>
+                    const cardProps: InterfaceOrganizationCardProps = {
+                      name,
+                      image: member.image,
+                      id: member._id,
+                      email: member.email,
+                      role: member.userType,
+                      sno: (index + 1).toString(),
+                    };
+                    return <PeopleCard key={index} {...cardProps} />;
+                  })
+                ) : (
+                  <span>{t('nothingToShow')}</span>
+                )}
+              </>
+            )}
           </div>
+          <PaginationList
+            count={members ? members.length : 0}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
         </div>
-        {/* <OrganizationSidebar /> */}
       </div>
     </>
   );