diff --git a/src/pages/bots/Body.tsx b/src/pages/bots/Body.tsx index 100427eb..5d17669a 100644 --- a/src/pages/bots/Body.tsx +++ b/src/pages/bots/Body.tsx @@ -39,12 +39,12 @@ const BotText = styled.div` const Body = styled.div` flex: 1; - height: calc(100% - 105px); - padding-bottom: 80px; + height: calc(100vh - 60px); width: 100%; overflow: auto; display: flex; flex-direction: column; + align-items: center; `; const Label = styled.div` font-family: Roboto; diff --git a/src/pages/tickets/style.ts b/src/pages/tickets/style.ts index cd8fb03b..514ca555 100644 --- a/src/pages/tickets/style.ts +++ b/src/pages/tickets/style.ts @@ -2,11 +2,12 @@ import styled from 'styled-components'; export const Body = styled.div` flex: 1; - height: calc(100% - 105px); + height: calc(100vh - 60px); width: 100%; overflow: auto; display: flex; flex-direction: column; + align-items: center; `; export const OrgBody = styled.div` diff --git a/src/pages/tribes/Body.tsx b/src/pages/tribes/Body.tsx index cb2c2e7f..30fe7c56 100644 --- a/src/pages/tribes/Body.tsx +++ b/src/pages/tribes/Body.tsx @@ -12,7 +12,6 @@ import { observer } from 'mobx-react-lite'; import { useStores } from '../../store'; import { useIsMobile, usePageScroll } from '../../hooks'; import { SearchTextInput } from '../../components/common'; -import NoResults from '../../people/utils/NoResults'; import PageLoadSpinner from '../../people/utils/PageLoadSpinner'; import { colors } from '../../config/colors'; import tags from './tags'; @@ -22,7 +21,6 @@ import Tribe from './Tribe'; const Body = styled.div` flex: 1; height: calc(100vh - 60px); - // padding-bottom:80px; width: 100%; overflow: auto; background: ${colors.dark.tribesBackground}; @@ -45,6 +43,35 @@ const StyledTagPopupWrapper = styled.div` } `; +const H = styled.div` + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 37px; + letter-spacing: 0.1em; + text-align: center; + + font-family: Roboto; + font-style: normal; + line-height: 26px; + display: flex; + align-items: center; + text-align: center; + + color: #292c33; + letter-spacing: 0px; + color: rgb(60, 63, 65); +`; + +const NoResult = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + margin-top: 20px; +`; + function BodyComponent() { const { main, ui } = useStores(); const [selected, setSelected] = useState(''); @@ -120,7 +147,7 @@ function BodyComponent() { if (loading) { return ( - + ); @@ -243,7 +270,9 @@ function BodyComponent() { )) ) : ( - + + No results + )} diff --git a/src/pages/tribes/__tests__/Body.spec.tsx b/src/pages/tribes/__tests__/Body.spec.tsx index 27e13542..543fb171 100644 --- a/src/pages/tribes/__tests__/Body.spec.tsx +++ b/src/pages/tribes/__tests__/Body.spec.tsx @@ -143,4 +143,32 @@ describe('Tribes Body Component', () => { }); }); }); + + test('content element has justifyContent and alignItems centered', async () => { + (useStores as jest.Mock).mockReturnValue({ + main: { + tribes: [], + getTribes: jest.fn() + }, + ui: { + peoplePageNumber: 1, + searchText: 'abc', + tags: [] + } + }); + + (useFuse as jest.Mock).mockReturnValue([]); + + const { getByTestId } = render(); + + const contentElement = getByTestId('content'); + + expect(contentElement).toBeInTheDocument(); + + const styles = window.getComputedStyle(contentElement); + const { justifyContent, alignItems } = styles; + + expect(justifyContent).toEqual('center'); + expect(alignItems).toEqual('center'); + }); }); diff --git a/src/people/main/Body.tsx b/src/people/main/Body.tsx index 720ca781..ea9e3743 100644 --- a/src/people/main/Body.tsx +++ b/src/people/main/Body.tsx @@ -18,7 +18,7 @@ import { usePeopleFilteredSearch } from './usePeopleFilteredSearch'; const color = colors['light']; const Body = styled.div<{ isMobile: boolean }>` flex: 1; - height: ${(p: any) => (p.isMobile ? 'calc(100% - 105px)' : 'calc(100% - 65px)')}; + height: ${(p: any) => (p.isMobile ? 'calc(100% - 105px)' : 'calc(100vh - 60px)')}; background: ${(p: any) => (p.isMobile ? undefined : color.grayish.G950)}; width: 100%; overflow-x: hidden; @@ -94,9 +94,20 @@ function BodyComponent() { history.push(`/p/${uuid}`); } + if (isLoading) { + return ( + + + + ); + } + return ( { handleScroll(e); @@ -118,25 +129,21 @@ function BodyComponent() { />
- {isLoading ? ( - - ) : ( - <> - {main.people.map((p: Person) => ( - - ))} + <> + {main.people.map((p: Person) => ( + + ))} - {!main.people.length && } - - - )} + {!main.people.length && } + +
{openStartUpModel && ( diff --git a/src/people/main/__tests__/Body.spec.tsx b/src/people/main/__tests__/Body.spec.tsx index bad3f433..b84344b0 100644 --- a/src/people/main/__tests__/Body.spec.tsx +++ b/src/people/main/__tests__/Body.spec.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor, act } from '@testing-library/react'; import '@testing-library/jest-dom'; import nock from 'nock'; import { user } from '../../../__test__/__mockData__/user'; @@ -15,9 +15,9 @@ describe('BodyComponent', () => { .reply(200, {}); it('content element has equal left and right margins', () => { - render(); + const { getByTestId } = render(); - const contentElement = screen.getByTestId('content'); + const contentElement = getByTestId('content'); expect(contentElement).toBeInTheDocument(); @@ -28,17 +28,34 @@ describe('BodyComponent', () => { expect(marginLeft).toEqual(marginRight); }); - it('filter is in viewport when device is mobile', () => { - Object.assign(window, { innerWidth: 375 }); + it('content element has justifyContent and alignItems centered', async () => { + const { getByTestId } = render(); + + const contentElement = getByTestId('content'); - render(); - const filterNode = screen.getByTestId('PeopleHeader'); + expect(contentElement).toBeInTheDocument(); - const { left, right, bottom, top, width, height } = filterNode.getBoundingClientRect(); + const styles = window.getComputedStyle(contentElement); + const { justifyContent, alignItems } = styles; - expect(left).toBeGreaterThanOrEqual(0); - expect(top).toBeGreaterThanOrEqual(0); - expect(right - width).toBeGreaterThanOrEqual(0); - expect(bottom - height).toBeGreaterThanOrEqual(0); + expect(justifyContent).toEqual('center'); + expect(alignItems).toEqual('center'); + }); + + it('filter is in viewport when device is mobile', async () => { + Object.assign(window, { innerWidth: 375 }); + act(async () => { + render(); + await waitFor(() => { + const filterNode = screen.getByTestId('PeopleHeader'); + + const { left, right, bottom, top, width, height } = filterNode.getBoundingClientRect(); + + expect(left).toBeGreaterThanOrEqual(0); + expect(top).toBeGreaterThanOrEqual(0); + expect(right - width).toBeGreaterThanOrEqual(0); + expect(bottom - height).toBeGreaterThanOrEqual(0); + }); + }); }); });