changed profile stats appearance

src/layouts/ProfileLayout/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useEffect } from 'react';
 import styles from './styles.module.scss';
-import { Route, RouteComponentProps, Switch } from 'react-router';
+import { RouteComponentProps } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { authLoadProfile } from '~/redux/auth/actions';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
@@ -8,10 +8,10 @@ import { selectAuthProfile, selectUser } from '~/redux/auth/selectors';
 import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft';
 import { Container } from '~/containers/main/Container';
 import { FlowGrid } from '~/components/flow/FlowGrid';
-import { FlowLayout } from '~/layouts/FlowLayout';
 import { Sticky } from '~/components/containers/Sticky';
 import { selectFlow } from '~/redux/flow/selectors';
 import { ProfilePageStats } from '~/containers/profile/ProfilePageStats';
+import { Card } from '~/components/containers/Card';
 
 type Props = RouteComponentProps<{ username: string }> & {};
 
@@ -38,6 +38,13 @@ const ProfileLayout: FC<Props> = ({
           <div className={styles.row}>
             <ProfilePageLeft profile={profile} username={username} />
           </div>
+
+          {!!profile.user?.description && (
+            <div className={styles.row}>
+              <Card className={styles.description}>{profile.user.description}</Card>
+            </div>
+          )}
+
           <div className={styles.row}>
             <ProfilePageStats />
           </div>

src/layouts/ProfileLayout/styles.module.scss

@@ -12,9 +12,12 @@
 .left {
 }
 
-.right {
-}
-
 .row {
   margin-bottom: $gap;
 }
+
+.description {
+  font: $font_14_semibold;
+  text-align: center;
+  padding: $gap * 2 $gap;
+}