Progress

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

@@ -9,9 +9,9 @@ export default
 class ConfirmationModal extends PureComponent {
 
   static propTypes = {
-    title: PropTypes.node.isRequired,
-    message: PropTypes.node.isRequired,
-    confirm: PropTypes.string.isRequired,
+    title: PropTypes.any.isRequired,
+    message: PropTypes.any.isRequired,
+    confirm: PropTypes.any.isRequired,
     onClose: PropTypes.func.isRequired,
     onConfirm: PropTypes.func.isRequired,
     secondary: PropTypes.string,

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

@@ -49,8 +49,9 @@ export const mapDispatchToProps = (dispatch, { onClose }) => ({
     }
   },
 
-  handleSelectResult: (resultId) => {
-
+  handleSelectResult: (result) => {
+    dispatch(setSelectedGif(result))
+    onClose()
   },
 
   // dispatchSubmit: (e) => {
@@ -70,11 +71,11 @@ class GifPickerModal extends PureComponent {
     handleCloseModal: PropTypes.func.isRequired,
     handleFetchCategories: PropTypes.func.isRequired,
     handleOnChange: PropTypes.func.isRequired,
+    handleSelectResult: PropTypes.func.isRequired,
     categories: PropTypes.array.isRequired,
     results: PropTypes.array.isRequired,
     loading: PropTypes.bool,
     error: PropTypes.bool,
-    chosenUrl: PropTypes.string,
     searchText: PropTypes.string,
   }
 
@@ -98,8 +99,8 @@ class GifPickerModal extends PureComponent {
     this.props.handleOnChange(category)
   }
 
-  handleSelectGifResult = (resultId) => {
-    console.log("handleSelectGifResult:", resultId)
+  handleSelectGifResult = (resultBlock) => {
+    this.props.handleSelectResult(resultBlock)
   }
 
   render() {
@@ -109,7 +110,7 @@ class GifPickerModal extends PureComponent {
       results,
       loading,
       error,
-      searchText
+      searchText,
     } = this.props
 
     return (
@@ -165,6 +166,7 @@ class GifPickerModal extends PureComponent {
 }
 
 class GifResultsCollectionColumn extends PureComponent {
+
   static propTypes = {
     results: PropTypes.array.isRequired,
     handleSelectGifResult: PropTypes.func.isRequired,
@@ -183,8 +185,8 @@ class GifResultsCollectionColumn extends PureComponent {
         results.map((result, i) => (
           <button
             key={`gif-result-item-${i}`}
-            onClick={() => this.onClick(result.id)}
-            className={[_s.default, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
+            onClick={() => this.onClick(result)}
+            className={[_s.default, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
           >
             <Image
               height={result.media[0].tinygif.dims[1]}
@@ -196,9 +198,11 @@ class GifResultsCollectionColumn extends PureComponent {
       </div>
     )
   }
+
 }
 
 class GifResultsCollection extends PureComponent {
+
   static propTypes = {
     results: PropTypes.array.isRequired,
     handleSelectGifResult: PropTypes.func.isRequired,
@@ -250,7 +254,7 @@ class GifCategoriesCollection extends PureComponent {
             <button
               key={`gif-category-${i}`}
               onClick={() => this.onClick(category.searchterm)}
-              className={[_s.default, _s.px2, _s.py2, _s.width50PC].join(' ')}
+              className={[_s.default, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.width50PC].join(' ')}
             >
               <div className={[_s.default, _s.cursorPointer].join(' ')}>
                 <Image
@@ -269,4 +273,5 @@ class GifCategoriesCollection extends PureComponent {
       </div>
     )
   }
+
 }

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

@@ -158,19 +158,23 @@ class MediaModal extends ImmutablePureComponent {
       pagination = media.map((item, i) => {
         const btnClasses = CX({
           default: 1,
-          px5: 1,
-          py5: 1,
+          width10PX: 1,
+          height10PX: 1,
           outlineNone: 1,
-          colorPrimary: 1,
           circle: 1,
           cursorPointer: 1,
+          colorPrimary: i === index,
+          lineHeight0825: i === index,
           bgPrimaryOpaque: i !== index,
           bgPrimary: i === index,
         })
+        const activeText = i === index ? '•' : ''
 
         return (
           <li className={[_s.default, _s.px5].join(' ')} key={`media-pagination-${i}`}>
-            <button tabIndex='0' className={btnClasses} onClick={this.handleChangeIndex} data-index={i} />
+            <button tabIndex='0' className={btnClasses} onClick={this.handleChangeIndex} data-index={i}>
+              {activeText}
+            </button>
           </li>
         )
       })
@@ -234,6 +238,9 @@ class MediaModal extends ImmutablePureComponent {
     const swipeableViewsStyle = {
       width: '100%',
       height: '100%',
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'center',
     }
 
     const navigationClasses = CX({
@@ -244,7 +251,7 @@ class MediaModal extends ImmutablePureComponent {
     return (
       <div className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
         <div
-          className={[_s.default, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
+          className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
           role='presentation'
           onClick={onClose}
         >
@@ -252,6 +259,7 @@ class MediaModal extends ImmutablePureComponent {
             style={swipeableViewsStyle}
             containerStyle={{
               alignItems: 'center',
+              width: '100%',
             }}
             onChangeIndex={this.handleSwipe}
             onSwitching={this.handleSwitching}
@@ -286,7 +294,7 @@ class MediaModal extends ImmutablePureComponent {
 
         </div>
 
-        <ul className={[_s.default, _s.posAbsolute, _s.bottom0, _s.mb15, _s.flexRow, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15, _s.listStyleNone].join(' ')}>
+        <ul className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15, _s.flexRow, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15, _s.listStyleNone].join(' ')}>
           {pagination}
         </ul>
       </div>

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

@@ -135,7 +135,7 @@ class ModalRoot extends PureComponent {
   }
 
   renderLoading = () => {
-    return <ModalLoading />
+    return null
   }
 
   renderError = () => {

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

@@ -45,12 +45,7 @@ class ProUpgradeModal extends ImmutablePureComponent {
         </div>
 
         <Button
-          backgroundColor='brand'
-          color='white'
-          icon='pro'
           href='https://pro.gab.com'
-          className={_s.justifyContentCenter}
-          iconClassName={[_s.mr5, _s.fillWhite].join(' ')}
         >
           <Text color='inherit' weight='bold' align='center'>
             {intl.formatMessage(messages.title)}

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

@@ -56,8 +56,8 @@ class ReportModal extends ImmutablePureComponent {
     onClose: PropTypes.func.isRequired,
   }
 
-  handleCommentChange = e => {
-    this.props.dispatch(changeReportComment(e.target.value))
+  handleCommentChange = (e) => {
+    this.props.dispatch(changeReportComment(value))
   }
 
   handleForwardChange = e => {