From ce7cd78702469362b3226460892a76ad6c57eab0 Mon Sep 17 00:00:00 2001
From: Dergelyova <88082907+Dergelyova@users.noreply.github.com>
Date: Tue, 1 Feb 2022 10:07:05 +0300
Subject: [PATCH 1/2] Issue 467 created expert profile for mobile screen

---
 .../components/ExpertMaterialsContainer.tsx   | 206 ++++++++++--------
 .../components/ExpertMaterialsMobile.tsx      |  79 +++++++
 .../styles/ExpertMaterialsMobile.styles.ts    |  42 ++++
 3 files changed, 231 insertions(+), 96 deletions(-)
 create mode 100644 src/old/modules/experts/components/ExpertMaterialsMobile.tsx
 create mode 100644 src/old/modules/experts/styles/ExpertMaterialsMobile.styles.ts

diff --git a/src/old/modules/experts/components/ExpertMaterialsContainer.tsx b/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
index 6160acf2a..42c0c3ca3 100644
--- a/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
+++ b/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
@@ -1,6 +1,6 @@
 import { Box, Grid, Typography } from '@material-ui/core';
 import { isEmpty, uniq } from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
@@ -58,6 +58,8 @@ import {
 } from '../../../../models/expertMaterials';
 import { updatePostTypes, updateDir } from '../../utilities/utilityFunctions';
 import { selectExpertPostsByIds } from '../../../../models/helpers/selectors';
+import { ScreenContext } from '../../../provider/MobileProvider/ScreenContext';
+import ExpertMaterialsMobile from './ExpertMaterialsMobile';
 
 export interface IExpertMaterialsContainerProps {
   expertId: number;
@@ -97,6 +99,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
     ActiveDirectionType[]
   >();
   const previous = usePrevious({ page });
+  const { mobile } = useContext(ScreenContext);
 
   const [boundResetMaterials, boundFetchExpertMaterials] = useActions([
     resetMaterials,
@@ -411,6 +414,110 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
       </Grid>
     );
   }
+  const FilterCheckboxes = propertiesLoaded && (
+    <>
+      <CheckboxLeftsideFilterForm
+        disabledPostTypes={disabledPostTypes}
+        expertId={expertId}
+        onFormChange={(checked, disabled) =>
+          setFilters(checked, FilterTypeEnum.POST_TYPES, disabled)
+        }
+        possibleFilters={postTypesInPlural}
+        selectedFilters={selectedPostTypes}
+        filterTitle={t(langTokens.common.byType).toLowerCase()}
+        allTitle={t(langTokens.common.allTypes)}
+        setTheOnlyAvailableFilter={(name) => {
+          handleChipsLogicTransform(name, FilterTypeEnum.POST_TYPES);
+        }}
+        filterType={QueryTypeEnum.POST_TYPES}
+      />
+      <CheckboxLeftsideFilterForm
+        disabledDirections={disabledDirections}
+        expertId={expertId}
+        onFormChange={(checked, disabled) =>
+          setFilters(checked, FilterTypeEnum.DIRECTIONS, disabled)
+        }
+        possibleFilters={directions}
+        selectedFilters={selectedDirections}
+        filterTitle={t(langTokens.common.byDirection).toLowerCase()}
+        allTitle={t(langTokens.common.allDirections)}
+        setTheOnlyAvailableFilter={(name) => {
+          handleChipsLogicTransform(name, FilterTypeEnum.DIRECTIONS);
+        }}
+        filterType={QueryTypeEnum.DIRECTIONS}
+      />
+    </>
+  );
+
+  const SelectedTypes = (
+    <Box className={classes.container}>
+      {typeof selectedPostTypes === 'string' ? (
+        <Typography
+          className={classes.selectedFilters}
+          component="div"
+          variant="subtitle2"
+        >
+          {t(langTokens.common.allTypes)}
+        </Typography>
+      ) : (
+        <ChipsList
+          filtersPlural={postTypesInPlural}
+          checkedNames={getPostTypes()}
+          handleDelete={handleDeleteChip}
+          chipsListType={ChipFilterEnum.POST_TYPE}
+        />
+      )}
+      <Typography className={classes.divider} component="span">
+        |
+      </Typography>
+      {typeof selectedDirections === 'string' ? (
+        <Typography
+          className={classes.selectedFilters}
+          component="div"
+          variant="subtitle2"
+        >
+          {t(langTokens.common.allDirections)}
+        </Typography>
+      ) : (
+        <ChipsList
+          checkedNames={getDirections()}
+          handleDelete={handleDeleteChip}
+          chipsListType={ChipFilterEnum.DIRECTION}
+        />
+      )}
+      <Typography className={classes.divider} component="span">
+        |
+      </Typography>
+      <Typography
+        className={classes.totalFilters}
+        component="div"
+        variant="subtitle2"
+        color="textSecondary"
+      >
+        {totalElements}{' '}
+        {t(langTokens.materials.material, {
+          count: totalElements,
+        }).toLowerCase()}
+      </Typography>
+    </Box>
+  );
+
+  if (mobile) {
+    return (
+      <ExpertMaterialsMobile
+        expert={expert}
+        page={page}
+        header={t(langTokens.experts.selectExpertMaterials)}
+        loading={loading}
+        totalElements={totalElements}
+        materials={materials}
+        // possibleFilters={postTypesInPlural}
+        SelectedTypes={SelectedTypes}
+        FilterCheckboxes={FilterCheckboxes}
+        setPage={loadMore}
+      />
+    );
+  }
 
   return (
     <>
@@ -428,40 +535,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
           >
             {t(langTokens.experts.selectExpertMaterials)}
           </Typography>
-          {propertiesLoaded && (
-            <>
-              <CheckboxLeftsideFilterForm
-                disabledPostTypes={disabledPostTypes}
-                expertId={expertId}
-                onFormChange={(checked, disabled) =>
-                  setFilters(checked, FilterTypeEnum.POST_TYPES, disabled)
-                }
-                possibleFilters={postTypesInPlural}
-                selectedFilters={selectedPostTypes}
-                filterTitle={t(langTokens.common.byType).toLowerCase()}
-                allTitle={t(langTokens.common.allTypes)}
-                setTheOnlyAvailableFilter={(name) => {
-                  handleChipsLogicTransform(name, FilterTypeEnum.POST_TYPES);
-                }}
-                filterType={QueryTypeEnum.POST_TYPES}
-              />
-              <CheckboxLeftsideFilterForm
-                disabledDirections={disabledDirections}
-                expertId={expertId}
-                onFormChange={(checked, disabled) =>
-                  setFilters(checked, FilterTypeEnum.DIRECTIONS, disabled)
-                }
-                possibleFilters={directions}
-                selectedFilters={selectedDirections}
-                filterTitle={t(langTokens.common.byDirection).toLowerCase()}
-                allTitle={t(langTokens.common.allDirections)}
-                setTheOnlyAvailableFilter={(name) => {
-                  handleChipsLogicTransform(name, FilterTypeEnum.DIRECTIONS);
-                }}
-                filterType={QueryTypeEnum.DIRECTIONS}
-              />
-            </>
-          )}
+          <div className={classes.scrollabelContainer}>{FilterCheckboxes}</div>
         </Grid>
         <Grid
           className={classes.materialsContainer}
@@ -472,67 +546,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
           md={9}
           direction="column"
         >
-          <Box className={classes.container}>
-            <Typography
-              className={classes.chipsHeading}
-              component="div"
-              variant="subtitle2"
-            >
-              {`${t(langTokens.experts.selectedExpertMaterials)}:`}
-            </Typography>
-            {typeof selectedPostTypes === 'string' &&
-            !TheOnlyAvailablePostType ? (
-              <Typography
-                className={classes.selectedFilters}
-                component="div"
-                variant="subtitle2"
-              >
-                {t(langTokens.common.allTypes)}
-              </Typography>
-            ) : (
-              <ChipsList
-                TheOnlyAvailablePostType={TheOnlyAvailablePostType}
-                filtersPlural={postTypesInPlural}
-                checkedNames={getPostTypes()}
-                handleDelete={handleDeleteChip}
-                chipsListType={ChipFilterEnum.POST_TYPE}
-              />
-            )}
-            <Typography className={classes.divider} component="span">
-              |
-            </Typography>
-            {typeof selectedDirections === 'string' &&
-            !TheOnlyAvailableDirection ? (
-              <Typography
-                className={classes.selectedFilters}
-                component="div"
-                variant="subtitle2"
-              >
-                {t(langTokens.common.allDirections)}
-              </Typography>
-            ) : (
-              <ChipsList
-                TheOnlyAvailableDirection={TheOnlyAvailableDirection}
-                checkedNames={getDirections()}
-                handleDelete={handleDeleteChip}
-                chipsListType={ChipFilterEnum.DIRECTION}
-              />
-            )}
-            <Typography className={classes.divider} component="span">
-              |
-            </Typography>
-            <Typography
-              className={classes.totalFilters}
-              component="div"
-              variant="subtitle2"
-              color="textSecondary"
-            >
-              {totalElements}{' '}
-              {t(langTokens.materials.material, {
-                count: totalElements,
-              }).toLowerCase()}
-            </Typography>
-          </Box>
+          <div className={classes.selectedFiltersWraper}>{SelectedTypes}</div>
           {page === 0 && loading === LoadingStatusEnum.pending ? (
             <LoadingContainer loading={LoadingStatusEnum.pending} expand />
           ) : (
diff --git a/src/old/modules/experts/components/ExpertMaterialsMobile.tsx b/src/old/modules/experts/components/ExpertMaterialsMobile.tsx
new file mode 100644
index 000000000..f53961a5e
--- /dev/null
+++ b/src/old/modules/experts/components/ExpertMaterialsMobile.tsx
@@ -0,0 +1,79 @@
+import React, { FC, useState } from 'react';
+import ExpertInfo from './ExpertInfo';
+import FiltersMenu from 'components/FiltersMenuMobile/FiltersMenu';
+import { PostsList } from 'old/lib/components/Posts/PostsList';
+import FiltersButton from 'old/lib/components/FiltersButton/FiltersButton';
+import { LoadingContainer } from 'old/lib/components/Loading/LoadingContainer';
+import UpButton from 'old/lib/components/UpButton/UpButton';
+import { Container, Grid, Box, Typography } from '@material-ui/core';
+import {
+  IPost,
+  LoadingStatusType,
+  LoadingStatusEnum,
+  IExpert,
+} from 'old/lib/types';
+import { useStyles } from '../styles/ExpertMaterialsMobile.styles';
+import TopSection from 'components/Posts/TopSection/TopSection';
+
+interface IExpertMaterialsMobileProps {
+  page: number;
+  header: string;
+  loading: LoadingStatusType;
+  materials: IPost[];
+  totalElements: number;
+  //   resetPage: () => void;
+  SelectedTypes: JSX.Element;
+  FilterCheckboxes: JSX.Element | false;
+  //   LoadMoreButton: JSX.Element;
+  expert: IExpert;
+  setPage: () => void;
+}
+const ExpertMaterialsMobile: FC<IExpertMaterialsMobileProps> = ({
+  expert,
+  totalElements,
+  FilterCheckboxes,
+  SelectedTypes,
+  header,
+  page,
+  loading,
+  materials,
+  setPage,
+}) => {
+  const classes = useStyles();
+
+  const [filtersMenuOpen, setFiltersMenuOpen] = useState(false);
+  return (
+    <Container>
+      {/* <Box className={classes.headerContainer}>
+        <Typography component="span" className={classes.divider} />
+        <Typography component="p" className={classes.header}>
+          {header}
+        </Typography>
+        <Typography component="span" className={classes.divider} />
+      </Box> */}
+      <ExpertInfo expert={expert} />
+      {/* <TopSection author={expert} /> */}
+      {page === 0 && loading === LoadingStatusEnum.pending ? (
+        <LoadingContainer loading={LoadingStatusEnum.pending} expand />
+      ) : (
+        <>
+          <PostsList postsList={materials} resetPage={setPage} mobile />
+        </>
+      )}
+      <UpButton />
+      <FiltersButton
+        filtersMenuOpen={filtersMenuOpen}
+        setFiltersMenuOpen={setFiltersMenuOpen}
+      />
+      <FiltersMenu
+        filtersMenuOpen={filtersMenuOpen}
+        setFiltersMenuOpen={setFiltersMenuOpen}
+        totalElements={totalElements}
+        SelectedTypes={SelectedTypes}
+        FilterCheckboxes={FilterCheckboxes}
+      />
+    </Container>
+  );
+};
+
+export default ExpertMaterialsMobile;
diff --git a/src/old/modules/experts/styles/ExpertMaterialsMobile.styles.ts b/src/old/modules/experts/styles/ExpertMaterialsMobile.styles.ts
new file mode 100644
index 000000000..b8253bc78
--- /dev/null
+++ b/src/old/modules/experts/styles/ExpertMaterialsMobile.styles.ts
@@ -0,0 +1,42 @@
+import { makeStyles } from '@material-ui/core';
+
+export const useStyles = makeStyles(
+  () => ({
+    container: {
+      padding: 'auto',
+      minHeight: 'calc(100vh - 353px)',
+    },
+    headerContainer: {
+      boxSizing: 'border-box',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      margin: '25px 10px 20px',
+    },
+    divider: {
+      width: '40%',
+      height: '1px',
+      background: 'black',
+    },
+    header: {
+      lineHeight: '22px',
+      fontSize: '24px',
+      fontFamily: 'Raleway',
+      fontWeight: 700,
+      paddingInline: '15px',
+      whiteSpace: 'nowrap',
+    },
+    showAllButton: {
+      margin: '20px 0 30px 0',
+      width: '217px',
+      height: '48px',
+      border: 'none',
+      borderRadius: '24px',
+      fontSize: '17px',
+      backgroundColor: '#4FDFFF',
+    },
+  }),
+  {
+    name: 'ExpertsMaterialsMobile',
+  },
+);

From 6cb12eed4a670c73e873baf936e18583cdade975 Mon Sep 17 00:00:00 2001
From: Dergelyova <88082907+Dergelyova@users.noreply.github.com>
Date: Tue, 1 Feb 2022 23:57:38 +0300
Subject: [PATCH 2/2] bugfix 467 adapted expert profile to mobile

---
 .../modules/experts/components/ExpertInfo.tsx | 36 ++++++++++++-
 .../components/ExpertMaterialsContainer.tsx   | 50 +++++++++++++------
 .../components/ExpertMaterialsMobile.tsx      | 45 +++++++----------
 .../experts/components/ExpertsViewMobile.tsx  |  2 +-
 .../experts/styles/ExpertInfo.styles.ts       | 39 ++++++++++++++-
 .../styles/ExpertMaterialsMobile.styles.ts    | 42 ----------------
 .../MaterialsView/MaterialsPublished.tsx      |  1 -
 7 files changed, 125 insertions(+), 90 deletions(-)
 delete mode 100644 src/old/modules/experts/styles/ExpertMaterialsMobile.styles.ts

diff --git a/src/old/modules/experts/components/ExpertInfo.tsx b/src/old/modules/experts/components/ExpertInfo.tsx
index 351f70336..c5dbc3526 100644
--- a/src/old/modules/experts/components/ExpertInfo.tsx
+++ b/src/old/modules/experts/components/ExpertInfo.tsx
@@ -1,8 +1,9 @@
-import { Avatar, Grid, Typography } from '@material-ui/core';
-import React from 'react';
+import { Avatar, Grid, Typography, Box, CardMedia } from '@material-ui/core';
+import React, { useContext } from 'react';
 import { IExpert } from '../../../lib/types';
 import { useStyles } from '../styles/ExpertInfo.styles';
 import Accordion from './Accordion';
+import { ScreenContext } from '../../../provider/MobileProvider/ScreenContext';
 
 export interface IExpertInfoProps {
   expert: IExpert;
@@ -11,6 +12,37 @@ export interface IExpertInfoProps {
 const ExpertInfo: React.FC<IExpertInfoProps> = ({ expert }) => {
   const classes = useStyles();
   const expertFullName = `${expert.firstName} ${expert.lastName}`;
+  const { mobile } = useContext(ScreenContext);
+
+  if (mobile) {
+    return (
+      <>
+        <Box className={classes.root}>
+          <Box className={classes.avatarSection}>
+            <Avatar
+              src={expert.avatar}
+              alt="Photo"
+              variant="circle"
+              className={classes.avatar}
+            />
+          </Box>
+          <Box>
+            <Typography variant="h3" className={classes.fullName}>
+              {expertFullName}
+            </Typography>
+            <Typography align="justify" className={classes.bio}>
+              {expert.bio}
+            </Typography>
+          </Box>
+        </Box>
+        <Grid container item className={classes.accordionWrapper}>
+          {expert.email || expert.socialNetwork ? (
+            <Accordion expert={expert} />
+          ) : null}
+        </Grid>
+      </>
+    );
+  }
 
   return (
     <>
diff --git a/src/old/modules/experts/components/ExpertMaterialsContainer.tsx b/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
index 42c0c3ca3..7ba195dd7 100644
--- a/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
+++ b/src/old/modules/experts/components/ExpertMaterialsContainer.tsx
@@ -449,9 +449,24 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
     </>
   );
 
+  const header = () => {
+    if (!mobile)
+      return (
+        <Typography
+          className={classes.chipsHeading}
+          component="div"
+          variant="subtitle2"
+        >
+          {`${t(langTokens.experts.selectedExpertMaterials)}:`}
+        </Typography>
+      );
+    return <></>;
+  };
+
   const SelectedTypes = (
     <Box className={classes.container}>
-      {typeof selectedPostTypes === 'string' ? (
+      {header()}
+      {typeof selectedPostTypes === 'string' && !TheOnlyAvailablePostType ? (
         <Typography
           className={classes.selectedFilters}
           component="div"
@@ -461,6 +476,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
         </Typography>
       ) : (
         <ChipsList
+          TheOnlyAvailablePostType={TheOnlyAvailablePostType}
           filtersPlural={postTypesInPlural}
           checkedNames={getPostTypes()}
           handleDelete={handleDeleteChip}
@@ -470,7 +486,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
       <Typography className={classes.divider} component="span">
         |
       </Typography>
-      {typeof selectedDirections === 'string' ? (
+      {typeof selectedDirections === 'string' && !TheOnlyAvailableDirection ? (
         <Typography
           className={classes.selectedFilters}
           component="div"
@@ -480,6 +496,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
         </Typography>
       ) : (
         <ChipsList
+          TheOnlyAvailableDirection={TheOnlyAvailableDirection}
           checkedNames={getDirections()}
           handleDelete={handleDeleteChip}
           chipsListType={ChipFilterEnum.DIRECTION}
@@ -502,19 +519,30 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
     </Box>
   );
 
+  const LoadMoreButtonEl = (
+    <LoadMoreButton
+      clicked={loadMore}
+      isLastPage={isLastPage}
+      loading={loading}
+      totalPages={totalPages}
+      totalElements={totalElements}
+      pageNumber={pageNumber}
+      textType={LoadMoreButtonTextType.POST}
+    />
+  );
+
   if (mobile) {
     return (
       <ExpertMaterialsMobile
         expert={expert}
         page={page}
-        header={t(langTokens.experts.selectExpertMaterials)}
         loading={loading}
         totalElements={totalElements}
         materials={materials}
-        // possibleFilters={postTypesInPlural}
         SelectedTypes={SelectedTypes}
         FilterCheckboxes={FilterCheckboxes}
-        setPage={loadMore}
+        resetPage={loadMore}
+        LoadMoreButton={LoadMoreButtonEl}
       />
     );
   }
@@ -535,7 +563,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
           >
             {t(langTokens.experts.selectExpertMaterials)}
           </Typography>
-          <div className={classes.scrollabelContainer}>{FilterCheckboxes}</div>
+          <div>{FilterCheckboxes}</div>
         </Grid>
         <Grid
           className={classes.materialsContainer}
@@ -559,15 +587,7 @@ const ExpertMaterialsContainer: React.FC<IExpertMaterialsContainerProps> = ({
                   alignItems="center"
                   ref={gridRef}
                 >
-                  <LoadMoreButton
-                    clicked={loadMore}
-                    isLastPage={isLastPage}
-                    loading={loading}
-                    totalPages={totalPages}
-                    totalElements={totalElements}
-                    pageNumber={pageNumber}
-                    textType={LoadMoreButtonTextType.POST}
-                  />
+                  {LoadMoreButtonEl}
                 </Grid>
               ) : null}
             </>
diff --git a/src/old/modules/experts/components/ExpertMaterialsMobile.tsx b/src/old/modules/experts/components/ExpertMaterialsMobile.tsx
index f53961a5e..2076c3e10 100644
--- a/src/old/modules/experts/components/ExpertMaterialsMobile.tsx
+++ b/src/old/modules/experts/components/ExpertMaterialsMobile.tsx
@@ -1,65 +1,56 @@
 import React, { FC, useState } from 'react';
-import ExpertInfo from './ExpertInfo';
 import FiltersMenu from 'components/FiltersMenuMobile/FiltersMenu';
 import { PostsList } from 'old/lib/components/Posts/PostsList';
 import FiltersButton from 'old/lib/components/FiltersButton/FiltersButton';
 import { LoadingContainer } from 'old/lib/components/Loading/LoadingContainer';
 import UpButton from 'old/lib/components/UpButton/UpButton';
-import { Container, Grid, Box, Typography } from '@material-ui/core';
+import { Container, Grid } from '@material-ui/core';
 import {
   IPost,
   LoadingStatusType,
   LoadingStatusEnum,
   IExpert,
 } from 'old/lib/types';
-import { useStyles } from '../styles/ExpertMaterialsMobile.styles';
-import TopSection from 'components/Posts/TopSection/TopSection';
+import ExpertInfo from './ExpertInfo';
 
 interface IExpertMaterialsMobileProps {
   page: number;
-  header: string;
   loading: LoadingStatusType;
   materials: IPost[];
   totalElements: number;
-  //   resetPage: () => void;
   SelectedTypes: JSX.Element;
   FilterCheckboxes: JSX.Element | false;
-  //   LoadMoreButton: JSX.Element;
+  LoadMoreButton: JSX.Element;
   expert: IExpert;
-  setPage: () => void;
+  resetPage: () => void;
 }
 const ExpertMaterialsMobile: FC<IExpertMaterialsMobileProps> = ({
   expert,
   totalElements,
   FilterCheckboxes,
   SelectedTypes,
-  header,
   page,
   loading,
   materials,
-  setPage,
+  resetPage,
+  LoadMoreButton,
 }) => {
-  const classes = useStyles();
-
   const [filtersMenuOpen, setFiltersMenuOpen] = useState(false);
   return (
     <Container>
-      {/* <Box className={classes.headerContainer}>
-        <Typography component="span" className={classes.divider} />
-        <Typography component="p" className={classes.header}>
-          {header}
-        </Typography>
-        <Typography component="span" className={classes.divider} />
-      </Box> */}
       <ExpertInfo expert={expert} />
-      {/* <TopSection author={expert} /> */}
-      {page === 0 && loading === LoadingStatusEnum.pending ? (
-        <LoadingContainer loading={LoadingStatusEnum.pending} expand />
-      ) : (
-        <>
-          <PostsList postsList={materials} resetPage={setPage} mobile />
-        </>
-      )}
+      <Grid item container alignItems="center" xs={12} direction="column">
+        {page === 0 && loading === LoadingStatusEnum.pending ? (
+          <LoadingContainer loading={LoadingStatusEnum.pending} expand />
+        ) : (
+          <>
+            <PostsList postsList={materials} resetPage={resetPage} mobile />
+            <Grid container justify="center">
+              {LoadMoreButton}
+            </Grid>
+          </>
+        )}
+      </Grid>
       <UpButton />
       <FiltersButton
         filtersMenuOpen={filtersMenuOpen}
diff --git a/src/old/modules/experts/components/ExpertsViewMobile.tsx b/src/old/modules/experts/components/ExpertsViewMobile.tsx
index 4c58ea922..949d36608 100644
--- a/src/old/modules/experts/components/ExpertsViewMobile.tsx
+++ b/src/old/modules/experts/components/ExpertsViewMobile.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState, useRef, useEffect } from 'react';
+import React, { FC, useState } from 'react';
 import { Container, Grid, Box, Typography } from '@material-ui/core';
 import { LoadingContainer } from 'old/lib/components/Loading/LoadingContainer';
 import FiltersMenu from 'components/FiltersMenuMobile/FiltersMenu';
diff --git a/src/old/modules/experts/styles/ExpertInfo.styles.ts b/src/old/modules/experts/styles/ExpertInfo.styles.ts
index e7a661049..11037767e 100644
--- a/src/old/modules/experts/styles/ExpertInfo.styles.ts
+++ b/src/old/modules/experts/styles/ExpertInfo.styles.ts
@@ -1,20 +1,55 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core';
 
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    minHeight: '100px',
+    display: 'flex',
+    alignItems: 'center',
+    [theme.breakpoints.down('xs')]: {
+      marginTop: theme.spacing(2),
+      padding: '10px 0 0',
+      marginBottom: 0,
+    },
+  },
   personalInfo: {
     margin: '0 0 20px 0',
+    [theme.breakpoints.down('xs')]: {
+      // marginTop: theme.spacing(16),
+      padding: '10px 0 0',
+      marginBottom: 0,
+    },
+  },
+  avatarSection: {
+    [theme.breakpoints.down('xs')]: {
+      alignSelf: 'flex-start',
+    },
   },
   avatar: {
     margin: '0 0 40px 0',
     width: '100%	',
     height: '280px',
+    [theme.breakpoints.down('xs')]: {
+      width: 87,
+      height: 87,
+      marginRight: '20px',
+    },
   },
   fullName: {
     marginBottom: '20px',
+    [theme.breakpoints.down('xs')]: {
+      fontSize: '18px',
+      marginBottom: '5px',
+    },
   },
   bio: {
     marginBottom: '80px',
     textAlign: 'left',
+    [theme.breakpoints.down('xs')]: {
+      marginBottom: '40px',
+      fontSize: '14px',
+      fontStyle: 'italic',
+      lineHeight: '1.43',
+    },
   },
   accordionWrapper: {
     marginBottom: '50px',
diff --git a/src/old/modules/experts/styles/ExpertMaterialsMobile.styles.ts b/src/old/modules/experts/styles/ExpertMaterialsMobile.styles.ts
deleted file mode 100644
index b8253bc78..000000000
--- a/src/old/modules/experts/styles/ExpertMaterialsMobile.styles.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { makeStyles } from '@material-ui/core';
-
-export const useStyles = makeStyles(
-  () => ({
-    container: {
-      padding: 'auto',
-      minHeight: 'calc(100vh - 353px)',
-    },
-    headerContainer: {
-      boxSizing: 'border-box',
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      margin: '25px 10px 20px',
-    },
-    divider: {
-      width: '40%',
-      height: '1px',
-      background: 'black',
-    },
-    header: {
-      lineHeight: '22px',
-      fontSize: '24px',
-      fontFamily: 'Raleway',
-      fontWeight: 700,
-      paddingInline: '15px',
-      whiteSpace: 'nowrap',
-    },
-    showAllButton: {
-      margin: '20px 0 30px 0',
-      width: '217px',
-      height: '48px',
-      border: 'none',
-      borderRadius: '24px',
-      fontSize: '17px',
-      backgroundColor: '#4FDFFF',
-    },
-  }),
-  {
-    name: 'ExpertsMaterialsMobile',
-  },
-);
diff --git a/src/views/Profile/MaterialsView/MaterialsPublished.tsx b/src/views/Profile/MaterialsView/MaterialsPublished.tsx
index daa148b47..c0337399b 100644
--- a/src/views/Profile/MaterialsView/MaterialsPublished.tsx
+++ b/src/views/Profile/MaterialsView/MaterialsPublished.tsx
@@ -47,7 +47,6 @@ export interface IMaterialsPublishedProps {
 
 const MaterialsPublished: React.FC<IMaterialsPublishedProps> = ({
   expertId,
-  expert,
 }) => {
   const { t } = useTranslation();
   const classes = useStyles();