displaying profile backdrop

src/containers/dialogs/BetterScrollDialog/index.tsx

@@ -7,6 +7,7 @@ interface IProps {
   children: React.ReactChild;
   header?: JSX.Element;
   footer?: JSX.Element;
+  backdrop?: JSX.Element;
   size?: 'medium' | 'big';
   width?: number;
   error?: string;
@@ -20,6 +21,7 @@ const BetterScrollDialog: FC<IProps> = ({
   children,
   header,
   footer,
+  backdrop,
   width = 600,
   error,
   onClose,
@@ -34,6 +36,8 @@ const BetterScrollDialog: FC<IProps> = ({
 
   return (
     <div className={styles.wrap} ref={ref}>
+      {backdrop && <div className={styles.backdrop}>{backdrop}</div>}
+
       <div className={styles.container} style={{ maxWidth: width }}>
         {onClose && (
           <div className={styles.close} onClick={onClose}>

src/containers/dialogs/BetterScrollDialog/styles.scss

@@ -97,3 +97,11 @@
   pointer-events: none;
   background: linear-gradient($red, transparentize($red, 1));
 }
+
+.backdrop {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

src/containers/dialogs/ProfileDialog/index.tsx

@@ -3,17 +3,24 @@ import { BetterScrollDialog } from '../BetterScrollDialog';
 import { ProfileInfo } from '~/containers/profile/ProfileInfo';
 import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
-import { selectAuthProfile } from '~/redux/auth/selectors';
+import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
 import { ProfileMessages } from '~/containers/profile/ProfileMessages';
 import { ProfileDescription } from '~/components/profile/ProfileDescription';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IAuthState } from '~/redux/auth/types';
+import pick from 'ramda/es/pick';
+import { ProfileBackdrop } from '~/components/profile/ProfileBackdrop';
 
 const TAB_CONTENT = {
   profile: <ProfileDescription />,
   messages: <ProfileMessages />,
 };
-const mapStateToProps = selectAuthProfile;
+
+const mapStateToProps = state => ({
+  profile: selectAuthProfile(state),
+  user: pick(['id'], selectAuthUser(state)),
+});
+
 const mapDispatchToProps = {
   authSetProfile: AUTH_ACTIONS.authSetProfile,
 };
@@ -23,9 +30,9 @@ type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & typeof mapDisp
 const ProfileDialogUnconnected: FC<IProps> = ({
   onRequestClose,
   authSetProfile,
-  is_loading,
-  user,
-  tab,
+
+  profile: { is_loading, user, tab },
+  user: { id },
 }) => {
   const setTab = useCallback((val: IAuthState['profile']['tab']) => authSetProfile({ tab: val }), [
     authSetProfile,
@@ -33,7 +40,16 @@ const ProfileDialogUnconnected: FC<IProps> = ({
 
   return (
     <BetterScrollDialog
-      header={<ProfileInfo is_loading={is_loading} user={user} tab={tab} setTab={setTab} />}
+      header={
+        <ProfileInfo
+          is_own={user && user.id === id}
+          is_loading={is_loading}
+          user={user}
+          tab={tab}
+          setTab={setTab}
+        />
+      }
+      backdrop={<ProfileBackdrop cover={user && user.cover} />}
       onClose={onRequestClose}
     >
       {TAB_CONTENT[tab] || null}