Progress

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

@@ -14,6 +14,8 @@ const messages = defineMessages({
   combo: { id: 'boost_modal.combo', defaultMessage: 'You can press {combo} to skip this next time' },
 });
 
+// : todo :
+
 export default
 @injectIntl
 class BoostModal extends ImmutablePureComponent {

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

@@ -74,7 +74,6 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}

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

@@ -58,7 +58,7 @@ class ConfirmationModal extends PureComponent {
           <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
             <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
 
-              <Heading size='h1' center>
+              <Heading size='h1' isCentered>
                 {title}
               </Heading>
 

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

@@ -21,6 +21,7 @@ class EditProfileModal extends ImmutablePureComponent {
 
     return (
       <ModalLayout>
+        test
       </ModalLayout>
     )
   }

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

@@ -99,7 +99,7 @@ class EmbedModal extends ImmutablePureComponent {
             />
             {
               !oembed && 
-              <Icon id='loading' height='34px' width='34px' className={[_s.positionAbsolute, _s.z3].join(' ')} />
+              <Icon id='loading' size='34px' className={[_s.posAbs, _s.z3].join(' ')} />
             }
           </div>
 

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

@@ -131,8 +131,7 @@ class GifPickerModal extends PureComponent {
               onClick={this.onHandleCloseModal}
               color='secondary'
               icon='close'
-              iconWidth='10px'
-              iconWidth='10px'
+              iconSize='10px'
             />
           </div>
           <div className={[_s.default, _s.heightMin50VH, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
@@ -258,8 +257,8 @@ class GifCategoriesCollection extends PureComponent {
                   height={150}
                   src={category.image}
                 />
-                <div className={[_s.default, _s.positionAbsolute, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
-                  <Text color='white' weight='bold' size='large' align='left'>
+                <div className={[_s.default, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
+                  <Text color='white' weight='bold' size='large'>
                     {category.searchterm}
                   </Text>
                 </div>

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

@@ -40,7 +40,6 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           icon='pro'

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

@@ -70,7 +70,6 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}

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

@@ -103,7 +103,6 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}

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

@@ -103,7 +103,6 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           className={_s.justifyContentCenter}

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

@@ -18,6 +18,8 @@ const messages = defineMessages({
 
 export const previewState = 'previewMediaModal';
 
+// : todo :
+
 export default
 @injectIntl
 class MediaModal extends ImmutablePureComponent {

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

@@ -137,13 +137,13 @@ class ModalBase extends PureComponent {
           <Fragment>
             <div
               role='presentation'
-              className={[_s.default, _s.backgroundColorOpaque, _s.positionFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+              className={[_s.default, _s.backgroundColorOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
             />
             <div
               ref={this.setDialog}
               role='dialog'
               onClick={this.handleOnClose}
-              className={[_s.default, _s.positionFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
+              className={[_s.default, _s.posFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
             >
               {children}
             </div>

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

@@ -65,8 +65,7 @@ class ModalLayout extends PureComponent {
                 onClick={this.onHandleCloseModal}
                 color='secondary'
                 icon='close'
-                iconWidth='10px'
-                iconWidth='10px'
+                iconSize='10px'
               />
             }
           </div>

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

@@ -20,6 +20,7 @@ import BoostModal from './boost_modal'
 import CommunityTimelineSettingsModal from './community_timeline_settings_modal'
 import ComposeModal from './compose_modal'
 import ConfirmationModal from './confirmation_modal'
+import EditProfileModal from './edit_profile_modal'
 import GifPickerModal from './gif_picker_modal'
 import GroupCreateModal from './group_create_modal'
 import GroupDeleteModal from './group_delete_modal'
@@ -46,6 +47,7 @@ const MODAL_COMPONENTS = {
   COMMUNITY_TIMELINE_SETTINGS: () => Promise.resolve({ default: CommunityTimelineSettingsModal }),
   COMPOSE: () => Promise.resolve({ default: ComposeModal }),
   CONFIRM: () => Promise.resolve({ default: ConfirmationModal }),
+  EDIT_PROFILE: () => Promise.resolve({ default: EditProfileModal }),
   EMBED: () => Promise.resolve({ default: EmbedModal }),
   GIF_PICKER: () => Promise.resolve({ default: GifPickerModal }),
   GROUP_CREATE: () => Promise.resolve({ default: GroupCreateModal }),

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

@@ -45,7 +45,6 @@ class ProUpgradeModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          centered
           backgroundColor='brand'
           color='white'
           icon='pro'

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

@@ -151,9 +151,9 @@ class ReportModal extends ImmutablePureComponent {
             }
             
             <Button
-              disabled={isSubmitting}
+              isDisabled={isSubmitting}
               onClick={this.handleSubmit}
-              className={_s.marginTopAuto}
+              className={_s.mtAuto}
             >
               {intl.formatMessage(messages.submit)}
             </Button>