[FIX] User Portal: People Page Violates The Figma Style Guide (#3310)

* ui fix

* fix

* css fix

* Update src/screens/UserPortal/People/People.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix

* fix

* Update src/style/app.module.css

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* add test and ui fix

* fix

* ui fix

* fix

* ui fix

* ui fix

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

docs/docs/auto-docs/screens/OrganizationTags/OrganizationTagsMocks/variables/MOCKS_EMPTY.md

@@ -0,0 +1,63 @@
+[Admin Docs](/)
+
+***
+
+# Variable: MOCKS\_EMPTY
+
+> `const` **MOCKS\_EMPTY**: `object`[]
+
+Defined in: [src/screens/OrganizationTags/OrganizationTagsMocks.ts:344](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTagsMocks.ts#L344)
+
+## Type declaration
+
+### request
+
+> **request**: `object`
+
+#### request.query
+
+> **query**: `DocumentNode` = `ORGANIZATION_USER_TAGS_LIST`
+
+#### request.variables
+
+> **variables**: `object`
+
+#### request.variables.first
+
+> **first**: `number` = `TAGS_QUERY_DATA_CHUNK_SIZE`
+
+#### request.variables.id
+
+> **id**: `string` = `'orgId'`
+
+#### request.variables.sortedBy
+
+> **sortedBy**: `object`
+
+#### request.variables.sortedBy.id
+
+> **id**: `string` = `'DESCENDING'`
+
+#### request.variables.where
+
+> **where**: `object`
+
+#### request.variables.where.name
+
+> **name**: `object`
+
+#### request.variables.where.name.starts\_with
+
+> **starts\_with**: `string` = `''`
+
+### result
+
+> **result**: `object`
+
+#### result.data
+
+> **data**: `object`
+
+#### result.data.organizations
+
+> **organizations**: `object`[]

docs/docs/auto-docs/screens/OrganizationTags/OrganizationTagsMocks/variables/MOCKS_ERROR.md

@@ -6,7 +6,7 @@
 
 > `const` **MOCKS\_ERROR**: `object`[]
 
-Defined in: [src/screens/OrganizationTags/OrganizationTagsMocks.ts:413](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTagsMocks.ts#L413)
+Defined in: [src/screens/OrganizationTags/OrganizationTagsMocks.ts:319](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTagsMocks.ts#L319)
 
 ## Type declaration
 
@@ -32,7 +32,7 @@ Defined in: [src/screens/OrganizationTags/OrganizationTagsMocks.ts:413](https://
 
 #### request.variables.id
 
-> **id**: `string` = `'orgId'`
+> **id**: `string` = `'orgIdError'`
 
 #### request.variables.sortedBy
 

docs/docs/auto-docs/screens/OrganizationTags/OrganizationTagsMocks/variables/MOCKS_ERROR_ERROR_TAG.md

@@ -0,0 +1,35 @@
+[Admin Docs](/)
+
+***
+
+# Variable: MOCKS\_ERROR\_ERROR\_TAG
+
+> `const` **MOCKS\_ERROR\_ERROR\_TAG**: `object`[]
+
+Defined in: [src/screens/OrganizationTags/OrganizationTagsMocks.ts:334](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTagsMocks.ts#L334)
+
+## Type declaration
+
+### error
+
+> **error**: `Error`
+
+### request
+
+> **request**: `object`
+
+#### request.query
+
+> **query**: `DocumentNode` = `CREATE_USER_TAG`
+
+#### request.variables
+
+> **variables**: `object`
+
+#### request.variables.name
+
+> **name**: `string` = `'userTagE'`
+
+#### request.variables.organizationId
+
+> **organizationId**: `string` = `'orgId'`

docs/docs/auto-docs/screens/OrganizationTags/OrganizationTagsMocks/variables/MOCKS_NO_MORE_PAGES.md

@@ -0,0 +1,9 @@
+[Admin Docs](/)
+
+***
+
+# Variable: MOCKS\_NO\_MORE\_PAGES
+
+> `const` **MOCKS\_NO\_MORE\_PAGES**: (\{ `request`: \{ `query`: `DocumentNode`; `variables`: \{ `after`: `undefined`; `first`: `number`; `id`: `string`; `sortedBy`: \{ `id`: `string`; \}; `where`: \{ `name`: \{ `starts_with`: `string`; \}; \}; \}; \}; `result`: \{ `data`: \{ `organizations`: `object`[]; \}; \}; \} \| \{ `request`: \{ `query`: `DocumentNode`; `variables`: \{ `after`: `string`; `first`: `number`; `id`: `string`; `sortedBy`: \{ `id`: `string`; \}; `where`: \{ `name`: \{ `starts_with`: `string`; \}; \}; \}; \}; `result`: \{ `data`: `any`; \}; \})[]
+
+Defined in: [src/screens/OrganizationTags/OrganizationTagsMocks.ts:477](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTagsMocks.ts#L477)

docs/docs/auto-docs/screens/OrganizationTags/OrganizationTagsMocks/variables/MOCKS_NULL_END_CURSOR.md

@@ -0,0 +1,9 @@
+[Admin Docs](/)
+
+***
+
+# Variable: MOCKS\_NULL\_END\_CURSOR
+
+> `const` **MOCKS\_NULL\_END\_CURSOR**: (\{ `request`: \{ `query`: `DocumentNode`; `variables`: \{ `after`: `undefined`; `first`: `number`; `id`: `string`; `sortedBy`: \{ `id`: `string`; \}; `where`: \{ `name`: \{ `starts_with`: `string`; \}; \}; \}; \}; `result`: \{ `data`: \{ `organizations`: `object`[]; \}; \}; \} \| \{ `request`: \{ `query`: `DocumentNode`; `variables`: \{ `after`: `any`; `first`: `number`; `id`: `string`; `sortedBy`: \{ `id`: `string`; \}; `where`: \{ `name`: \{ `starts_with`: `string`; \}; \}; \}; \}; `result`: \{ `data`: \{ `organizations`: `object`[]; \}; \}; \})[]
+
+Defined in: [src/screens/OrganizationTags/OrganizationTagsMocks.ts:391](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTagsMocks.ts#L391)

docs/docs/auto-docs/screens/OrganizationTags/OrganizationTagsMocks/variables/MOCKS_UNDEFINED_USER_TAGS.md

@@ -0,0 +1,63 @@
+[Admin Docs](/)
+
+***
+
+# Variable: MOCKS\_UNDEFINED\_USER\_TAGS
+
+> `const` **MOCKS\_UNDEFINED\_USER\_TAGS**: `object`[]
+
+Defined in: [src/screens/OrganizationTags/OrganizationTagsMocks.ts:376](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/OrganizationTags/OrganizationTagsMocks.ts#L376)
+
+## Type declaration
+
+### request
+
+> **request**: `object`
+
+#### request.query
+
+> **query**: `DocumentNode` = `ORGANIZATION_USER_TAGS_LIST`
+
+#### request.variables
+
+> **variables**: `object`
+
+#### request.variables.first
+
+> **first**: `number` = `TAGS_QUERY_DATA_CHUNK_SIZE`
+
+#### request.variables.id
+
+> **id**: `string` = `'orgId'`
+
+#### request.variables.sortedBy
+
+> **sortedBy**: `object`
+
+#### request.variables.sortedBy.id
+
+> **id**: `string` = `'DESCENDING'`
+
+#### request.variables.where
+
+> **where**: `object`
+
+#### request.variables.where.name
+
+> **name**: `object`
+
+#### request.variables.where.name.starts\_with
+
+> **starts\_with**: `string` = `''`
+
+### result
+
+> **result**: `object`
+
+#### result.data
+
+> **data**: `object`
+
+#### result.data.organizations
+
+> **organizations**: `object`[]

docs/docs/auto-docs/screens/UserPortal/People/People/functions/default.md

@@ -6,7 +6,7 @@
 
 > **default**(): `JSX.Element`
 
-Defined in: [src/screens/UserPortal/People/People.tsx:39](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/People/People.tsx#L39)
+Defined in: [src/screens/UserPortal/People/People.tsx:40](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/screens/UserPortal/People/People.tsx#L40)
 
 `People` component displays a list of people associated with an organization.
 It allows users to filter between all members and admins, search for members by their first name,

src/components/UserPortal/PeopleCard/PeopleCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import aboutImg from 'assets/images/defaultImg.png';
-import styles from './PeopleCard.module.css';
+import styles from './../../../style/app.module.css';
 
 /**
  * Props interface for the PeopleCard component.
@@ -32,11 +32,11 @@ function peopleCard(props: InterfaceOrganizationCardProps): JSX.Element {
   const imageUrl = props.image ? props.image : aboutImg;
 
   return (
-    <div className={`d-flex flex-row`}>
+    <div className={styles.people_card_container}>
       {/* Container for serial number and image */}
-      <span style={{ flex: '1' }} className="d-flex">
+      <span style={{ flex: '1' }} className={styles.display_flex}>
         {/* Serial number */}
-        <span style={{ flex: '1' }} className="align-self-center">
+        <span style={{ flex: '1' }} className={styles.align_center}>
           {props.sno}
         </span>
         {/* Person's image */}
@@ -45,22 +45,22 @@ function peopleCard(props: InterfaceOrganizationCardProps): JSX.Element {
             src={imageUrl}
             width="80px"
             height="auto"
-            className={`${styles.personImage}`}
+            className={styles.personImage_peoplecard}
           />
         </span>
       </span>
       {/* Person's name */}
-      <b style={{ flex: '2' }} className="align-self-center">
+      <b style={{ flex: '2' }} className={styles.align_center}>
         {props.name}
       </b>
       {/* Person's email */}
-      <span style={{ flex: '2' }} className="align-self-center">
+      <span style={{ flex: '2' }} className={styles.align_center}>
         {props.email}
       </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 style={{ flex: '2' }} className={styles.align_center}>
+        <div className={styles.people_role}>
+          <span>{props.role}</span>
         </div>
       </div>
     </div>