messages form

src/containers/dialogs/BetterScrollDialog/index.tsx

@@ -22,8 +22,6 @@ const BetterScrollDialog: FC<IProps> = ({
   footer,
   width = 600,
   error,
-  onOverlayClick,
-  onRefCapture,
   onClose,
 }) => {
   const ref = useRef(null);
@@ -43,7 +41,12 @@ const BetterScrollDialog: FC<IProps> = ({
           </div>
         )}
         {header && <div className={styles.header}>{header}</div>}
-        <div className={styles.body}>{children}</div>
+
+        <div className={styles.body}>
+          {children}
+          {error && <div className={styles.error}>{error}</div>}
+        </div>
+
         {footer && <div className={styles.header}>{footer}</div>}
       </div>
     </div>

src/containers/dialogs/BetterScrollDialog/styles.scss

@@ -39,13 +39,14 @@
 .footer {
   @include outer_shadow();
 
-  padding: 10px;
+  // padding: 10px;
   background: darken($content_bg, 2%);
 }
 
 .body {
   @include outer_shadow();
 
+  position: relative;
   overflow: auto;
   flex: 1;
   background: $content_bg;
@@ -86,3 +87,13 @@
     height: 24px;
   }
 }
+
+.error {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  pointer-events: none;
+  background: linear-gradient($red, transparentize($red, 1));
+}

src/containers/dialogs/ProfileDialog/index.tsx

@@ -1,27 +1,32 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { BetterScrollDialog } from '../BetterScrollDialog';
-import styles from './styles.scss';
 import { ProfileInfo } from '~/containers/profile/ProfileInfo';
 import { IDialogProps } from '~/redux/types';
 import { connect } from 'react-redux';
 import { selectAuthProfile } from '~/redux/auth/selectors';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { CommentForm } from '~/components/node/CommentForm';
 import { ProfileMessages } from '~/containers/profile/ProfileMessages';
 
+const TAB_CONTENT = {
+  profile: <div>PROFILE</div>,
+  messages: <ProfileMessages />,
+};
 const mapStateToProps = selectAuthProfile;
 const mapDispatchToProps = {};
 
 type IProps = IDialogProps & ReturnType<typeof mapStateToProps> & {};
 
-const ProfileDialogUnconnected: FC<IProps> = ({ onRequestClose, is_loading, user }) => (
-  <BetterScrollDialog
-    header={<ProfileInfo is_loading={is_loading} user={user} />}
-    onClose={onRequestClose}
-  >
-    <ProfileMessages />
-  </BetterScrollDialog>
-);
+const ProfileDialogUnconnected: FC<IProps> = ({ onRequestClose, is_loading, user }) => {
+  const [tab, setTab] = useState('messages');
+
+  return (
+    <BetterScrollDialog
+      header={<ProfileInfo is_loading={is_loading} user={user} tab={tab} setTab={setTab} />}
+      onClose={onRequestClose}
+    >
+      {TAB_CONTENT[tab] || null}
+    </BetterScrollDialog>
+  );
+};
 
 const ProfileDialog = connect(
   mapStateToProps,