Progress

app/javascript/gabsocial/components/modal/edit_profile_modal.js

@@ -1,27 +1,86 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import Button from '../button'
-import Text from '../text'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { me } from '../../initial_state'
 import ModalLayout from './modal_layout'
+import Avatar from '../avatar'
+import Button from '../button'
+import Divider from '../divider'
+import Image from '../image'
+import Input from '../input'
+import Text from '../text'
+import Textarea from '../textarea'
 
 const messages = defineMessages({
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+  headerPhoto: { id: 'header_photo', defaultMessage: 'Header photo' },
+})
 
+const mapStateToProps = (state) => ({
+  account: state.getIn(['accounts', me]),
 })
 
 export default
 @injectIntl
+@connect(mapStateToProps)
 class EditProfileModal extends ImmutablePureComponent {
 
   static propTypes = {
+    account: ImmutablePropTypes.map,
     intl: PropTypes.object.isRequired,
   }
 
   render() {
-    const { intl } = this.props
+    const { account, intl } = this.props
+    
+    const headerSrc = !!account ? account.get('header') : ''
 
     return (
-      <ModalLayout>
-        test
+      <ModalLayout
+        title={intl.formatMessage(messages.edit_profile)}
+        noPadding
+        width={460}
+      >
+        <div className={[_s.default, _s.py5, _s.px5, _s.width100PC, _s.overflowHidden].join(' ')}>
+          <Image
+            alt={intl.formatMessage(messages.headerPhoto)}
+            className={_s.radiusSmall}
+            height='180px'
+            src={headerSrc}
+          />
+        </div>
+
+        <div className={[_s.default, _s.flexRow, _s.pl25].join(' ')}>
+          <div className={[_s.default, _s.circle, _s.mtNeg75PX, _s.boxShadowProfileAvatar].join(' ')}>
+            <Avatar
+              size={98}
+              account={account}
+              noHover
+            />
+          </div>
+        </div>
+
+        <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+          <Input
+            title='Name'
+            value=''
+            disabled={false}
+            // onChange={this.handleTitleChange}
+            placeholder='Add your name...'
+          />
+
+          <Divider isInvisible />
+
+          <Textarea
+            title='Bio'
+            value=''
+            disabled={false}
+            // onChange={this.handleDescriptionChange}
+            placeholder='Add your bio...'
+          />
+
+        </div>
+
       </ModalLayout>
     )
   }

app/javascript/gabsocial/components/modal/gif_picker_modal.js

@@ -127,7 +127,7 @@ class GifPickerModal extends PureComponent {
             <Button
               backgroundColor='none'
               title={intl.formatMessage(messages.close)}
-              className={_s.marginLeftAuto}
+              className={_s.mlAuto}
               onClick={this.onHandleCloseModal}
               color='secondary'
               icon='close'

app/javascript/gabsocial/components/modal/modal_layout.js

@@ -53,7 +53,7 @@ class ModalLayout extends PureComponent {
       <div style={{width: `${width}px`}}>
         <Block>
           <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
-            <Heading size='h3'>
+            <Heading size='h2'>
               {title}
             </Heading>
             {
@@ -61,7 +61,7 @@ class ModalLayout extends PureComponent {
               <Button
                 backgroundColor='none'
                 title={intl.formatMessage(messages.close)}
-                className={_s.marginLeftAuto}
+                className={_s.mlAuto}
                 onClick={this.onHandleCloseModal}
                 color='secondary'
                 icon='close'

app/javascript/gabsocial/components/modal/unauthorized_modal.js

@@ -34,7 +34,7 @@ class UnauthorizedModal extends ImmutablePureComponent {
           <Text className={_s.mb15}>
             {intl.formatMessage(messages.text)}
           </Text>
-          <Button href='/auth/sign_up' className={[_s.width240PX, _s.marginLeftAuto, _s.marginLeftAuto].join(' ')}>
+          <Button href='/auth/sign_up' className={[_s.width240PX, _s.mlAuto, _s.mlAuto].join(' ')}>
             {intl.formatMessage(messages.register)}
           </Button>
         </div>