Improving style of the page

src/Pages/PublicUserPage.js

@@ -39,7 +39,7 @@ import Typography from '@material-ui/core/Typography';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 function RenderFollowContainer(props) {
-  const { state } = useContext(Store)
+  const { state } = useContext(Store) 
   const [followed, setFollowed] = useState(props.followed)
   const toggleFollowed = () => { setFollowed(!followed) }
 
@@ -112,9 +112,12 @@ export default function PublicUserPage(props) {
     setUserData(data)
   }
   /*---------------------------------------------------------*/
-  const [following, setFollowing] = useState([]);
+  const [following, setFollowing] = useState(0);
   const fillFollowing = (data) => {
-    setFollowing(data);
+    if (data.errors)
+      setFollowing('Você precisa logar para ver o que usuário está ');
+    else
+      setFollowing(data.length);
   }
 
   /*content control variables--------------------------------*/
@@ -191,7 +194,7 @@ export default function PublicUserPage(props) {
                       </Grid>
                       <Grid style={{ marginTop: '0.5em', marginBottom: '0.5em', borderTop: "0.5px solid #DCDCDC", borderBottom: "0.5px solid #DCDCDC" }} container spacing={4} justify="center" alignItems="center" direction="row">
                         <Grid item>
-                          <Typography variant="h6"  >
+                          <Typography variant="h6" style={{ textAlign: 'center' }}>
                             {
                               loading ?
                                 <CircularProgress size={20} /> :
@@ -200,13 +203,11 @@ export default function PublicUserPage(props) {
                           </Typography>
                         </Grid>
                         <Grid item>
-                          <Typography variant="h6" >
+                          <Typography variant="h6" style={{ textAlign: 'center' }} >
                             {
                               loading ?
                                 <CircularProgress size={20} /> :
-                                following ?
-                                  `${following.length} seguindo` :
-                                  "0 seguindo"
+                                `${following} seguindo`
                             }
                           </Typography>
                         </Grid>
@@ -221,7 +222,7 @@ export default function PublicUserPage(props) {
                       onChange={handleChangeTab}
                       indicatorColor="primary"
                       textColor="primary"
-                      variant="fullwidth"
+                      variant="scrollable"
                       scrollButtons="desktop"
                       TabIndicatorProps={{ style: { background: "#00bcd4" } }}
                     >