Progress

app/javascript/gabsocial/actions/popover.js

@@ -1,12 +1,11 @@
 export const POPOVER_OPEN = 'POPOVER_OPEN'
 export const POPOVER_CLOSE = 'POPOVER_CLOSE'
 
-export function openPopover(type, keyboard = false, placement = 'top') {
+export function openPopover(type, props) {
   return {
-    keyboard,
-    placement,
     type: POPOVER_OPEN,
     popoverType: type,
+    popoverProps: props,
   }
 }
 

app/javascript/gabsocial/components/account.js

@@ -114,7 +114,7 @@ class Account extends ImmutablePureComponent {
           onClick: requested ? this.handleUnrequest : this.handleBlock,
           color: 'primary',
           backgroundColor: 'tertiary',
-          className: _s.marginTop5PX,
+          className: _s.mt5,
         }
       } else if (!account.get('moved') || following) {
         buttonOptions = {
@@ -122,7 +122,7 @@ class Account extends ImmutablePureComponent {
           outline: !following,
           color: !following ? 'brand' : 'white',
           backgroundColor: !following ? 'none' : 'brand',
-          className: _s.marginTop5PX,
+          className: _s.mt5,
           onClick: this.handleFollow,
         }
         buttonText = intl.formatMessage(following ? messages.unfollow : messages.follow)
@@ -141,7 +141,7 @@ class Account extends ImmutablePureComponent {
         narrow
         circle
         backgroundColor='none'
-        className={_s.paddingHorizontal5PX}
+        className={_s.px5}
         onClick={dismissAction}
         icon='close'
         iconWidth='8px'
@@ -151,7 +151,7 @@ class Account extends ImmutablePureComponent {
     )
 
     return (
-      <div className={[_s.default, _s.marginTop5PX, _s.marginBottom15PX].join(' ')}>
+      <div className={[_s.default, _s.mt5, _s.mb15].join(' ')}>
         <div className={[_s.default, _s.flexRow].join(' ')}>
 
           <NavLink
@@ -165,7 +165,7 @@ class Account extends ImmutablePureComponent {
           <NavLink
             title={account.get('acct')}
             to={`/${account.get('acct')}`}
-            className={[_s.default, _s.alignItemsStart, _s.paddingHorizontal10PX, _s.flexGrow1].join(' ')}
+            className={[_s.default, _s.alignItemsStart, _s.px10, _s.flexGrow1].join(' ')}
           >
             <DisplayName account={account} multiline={compact} />
             {!compact && button}

app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js

@@ -222,11 +222,11 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       outlineNone: 1,
       backgroundColorPrimary: !small,
       backgroundSubtle: small,
-      paddingVertical15PX: !small,
+      py15: !small,
-      paddingVertical10PX: small,
+      py10: small,
       fontSize16PX: !small,
       fontSize14PX: small,
-      marginRight5PX: small,
+      mr5: small,
     })
 
     // <div aria-activedescendant="typeaheadFocus-0.35973815699338085"
@@ -248,7 +248,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       return (
       <Fragment>
           <div className={[_s.default, _s.flexGrow1].join(' ')}>
-            <div className={[_s.default, _s.marginLeft5PX].join(' ')}>
+            <div className={[_s.default, _s.ml5].join(' ')}>
 
               <ContentEditable
                 noFocuscontainerRefocus

app/javascript/gabsocial/components/badge.js

@@ -26,7 +26,7 @@ export default class Badge extends PureComponent {
       <Text
         color='white'
         size='extraSmall'
-        className={[_s.backgroundColorBrand, _s.paddingHorizontal5PX, _s.lineHeight125, _s.radiusSmall].join(' ')}
+        className={[_s.backgroundColorBrand, _s.px5, _s.lineHeight125, _s.radiusSmall].join(' ')}
       >
         {children}
       </Text>

app/javascript/gabsocial/components/button.js

@@ -116,9 +116,9 @@ export default class Button extends PureComponent {
       circle: !text,
       radiusSmall: radiusSmall,
 
-      paddingVertical5PX: narrow,
+      py5: narrow,
-      paddingVertical10PX: !text && !narrow,
+      py10: !text && !narrow,
-      paddingHorizontal15PX: !text,
+      px15: !text,
 
       width100PC: block,
 

app/javascript/gabsocial/components/column_header.js

@@ -41,16 +41,16 @@ export default class ColumnHeader extends PureComponent {
           showBackBtn &&
           <Button
             backgroundColor='none'
-            className={[_s.alignItemsCenter, _s.paddingLeft0, _s.justifyContentCenter].join(' ')}
+            className={[_s.alignItemsCenter, _s.pl0, _s.justifyContentCenter].join(' ')}
             icon='back'
             iconWidth='20px'
             iconHeight='20px'
-            iconClassName={[_s.marginRight5PX, _s.fillColorPrimary].join(' ')}
+            iconClassName={[_s.mr5, _s.fillColorPrimary].join(' ')}
             onClick={this.handleBackClick}
           />
         }
 
-        <div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.marginRight10PX].join(' ')}>
+        <div className={[_s.default, _s.height100PC, _s.justifyContentCenter, _s.mr10].join(' ')}>
           <Heading size='h1'>
             {title}
           </Heading>
@@ -71,7 +71,7 @@ export default class ColumnHeader extends PureComponent {
                   backgroundColor='tertiary'
                   onClick={() => action.onClick()}
                   key={`column-header-action-btn-${i}`}
-                  className={[_s.marginLeft5PX, _s.paddingHorizontal10PX].join(' ')}
+                  className={[_s.ml5, _s.px10].join(' ')}
                   iconClassName={_s.fillColorSecondary}
                   icon={action.icon}
                   iconWidth='20px'

app/javascript/gabsocial/components/column_indicator.js

@@ -30,14 +30,14 @@ class ColumnIndicator extends PureComponent {
     const title = type !== 'error' ? intl.formatMessage(messages[type]) : message
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.paddingVertical15PX].join(' ')}>
+      <div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}>
         <Icon id={type} width='44px' height='44px' />
         {
           type !== 'loading' &&
           <Text
             align='center'
             size='medium'
-            className={_s.marginTop10PX}
+            className={_s.mt10}
           >
             {title}
           </Text>

app/javascript/gabsocial/components/comment.js

@@ -18,14 +18,42 @@ const messages = defineMessages({
 })
 
 const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
+  const getStatus = makeGetStatus()
 
-  const mapStateToProps = (state, props) => ({
+  const mapStateToProps = (state, props) => {
-    status: getStatus(state, props),
+    const status = getStatus(state, props)
-  });
+    let descendantsIds = Immutable.List()
 
-  return mapStateToProps;
+    if (status) {
-};
+      // ALL descendants
+      descendantsIds = descendantsIds.withMutations(mutable => {
+        const ids = [status.get('id')]
+
+        while (ids.length > 0) {
+          let id = ids.shift();
+          const replies = state.getIn(['contexts', 'replies', id])
+
+          if (status.get('id') !== id) {
+            mutable.push(id)
+          }
+
+          if (replies) {
+            replies.reverse().forEach(reply => {
+              ids.unshift(reply)
+            });
+          }
+        }
+      })
+    }
+
+    return {
+      status,
+      descendantsIds,
+    }
+  }
+
+  return mapStateToProps
+}
 
 export default
 @injectIntl
@@ -34,6 +62,7 @@ class Comment extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map.isRequired,
+    descendantsIds: ImmutablePropTypes.list,
   }
 
   handleClick = () => {
@@ -55,24 +84,24 @@ class Comment extends ImmutablePureComponent {
     console.log("status:", status)
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX, _s.paddingVertical5PX].join(' ')} data-comment={status.get('id')}>
+      <div className={[_s.default, _s.px10, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
         <div className={[_s.default].join(' ')}>
 
           <div className={[_s.default, _s.flexRow].join(' ')}>
             <NavLink
               to={`/${status.getIn(['account', 'acct'])}`}
               title={status.getIn(['account', 'acct'])}
-              className={[_s.default, _s.marginRight10PX, _s.paddingTop5PX].join(' ')}
+              className={[_s.default, _s.mr10, _s.pt5].join(' ')}
             >
               <Avatar account={status.get('account')} size={32} />
             </NavLink>
 
             <div className={[_s.default, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical5PX, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
+              <div className={[_s.default, _s.px10, _s.py5, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
-                <div className={_s.paddingTop2PX}>
+                <div className={_s.pt2}>
                   <CommentHeader status={status} />
                 </div>
-                <div className={[_s.paddingVertical5PX].join(' ')}>
+                <div className={[_s.py5].join(' ')}>
                   <StatusContent
                     status={status}
                     onClick={this.handleClick}
@@ -81,14 +110,14 @@ class Comment extends ImmutablePureComponent {
                   />
                 </div>
               </div>
-              <div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
+              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
                 
                 <Button
                   text
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
-                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
                 >
                   <Text size='extraSmall' color='inherit' weight='bold'>
                     Like
@@ -100,7 +129,7 @@ class Comment extends ImmutablePureComponent {
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
-                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
                 >
                   <Text size='extraSmall' color='inherit' weight='bold'>
                     Reply
@@ -112,7 +141,7 @@ class Comment extends ImmutablePureComponent {
                   radiusSmall
                   backgroundColor='none'
                   color='tertiary'
-                  className={[_s.paddingHorizontal5PX, _s.backgroundSubtle_onHover, _s.paddingVertical2PX, _s.marginRight5PX].join(' ')}
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
                 >
                   <Text size='extraSmall' color='inherit' weight='bold'>
                     ···

app/javascript/gabsocial/components/comment_header.js

@@ -48,7 +48,7 @@ class CommentHeader extends ImmutablePureComponent {
                 backgroundColor='none'
                 color='tertiary'
                 onClick={this.handleOpenStatusEdits}
-                className={_s.marginLeft5PX}
+                className={_s.ml5}
               >
                 <Text size='extraSmall' color='inherit'>
                   Edited
@@ -67,7 +67,7 @@ class CommentHeader extends ImmutablePureComponent {
                   backgroundColor='none'
                   color='tertiary'
                   to={statusUrl}
-                  className={_s.marginLeft5PX}
+                  className={_s.ml5}
                 >
                 <Text size='extraSmall' color='inherit'>
                   {favoriteCount}
@@ -87,7 +87,7 @@ class CommentHeader extends ImmutablePureComponent {
                   backgroundColor='none'
                   color='tertiary'
                   to={statusUrl}
-                  className={_s.marginLeft5PX}
+                  className={_s.ml5}
                 >
                 <Text size='extraSmall' color='inherit'>
                   {repostCount}
@@ -105,7 +105,7 @@ class CommentHeader extends ImmutablePureComponent {
             backgroundColor='none'
             color='tertiary'
             to={statusUrl}
-            className={_s.marginLeft5PX}
+            className={_s.ml5}
           >
             <Text size='extraSmall' color='inherit'>
               <RelativeTimestamp timestamp={status.get('created_at')} />

app/javascript/gabsocial/components/comment_list.js

@@ -0,0 +1,161 @@
+import { Fragment } from 'react'
+import { NavLink } from 'react-router-dom'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { makeGetStatus } from '../selectors';
+import CommentHeader from './comment_header'
+import Avatar from './avatar'
+import Button from './button'
+import DisplayName from './display_name'
+import DotTextSeperator from './dot_text_seperator'
+import RelativeTimestamp from './relative_timestamp'
+import Text from './text'
+import StatusContent from './status_content'
+
+const messages = defineMessages({
+  follow: { id: 'follow', defaultMessage: 'Follow' },
+})
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus()
+
+  const mapStateToProps = (state, props) => {
+    const status = getStatus(state, props)
+    let descendantsIds = Immutable.List()
+
+    if (status) {
+      // ALL descendants
+      descendantsIds = descendantsIds.withMutations(mutable => {
+        const ids = [status.get('id')]
+
+        while (ids.length > 0) {
+          let id = ids.shift();
+          const replies = state.getIn(['contexts', 'replies', id])
+
+          if (status.get('id') !== id) {
+            mutable.push(id)
+          }
+
+          if (replies) {
+            replies.reverse().forEach(reply => {
+              ids.unshift(reply)
+            });
+          }
+        }
+      })
+    }
+
+    return {
+      status,
+      descendantsIds,
+    }
+  }
+
+  return mapStateToProps
+}
+
+export default
+@injectIntl
+@connect(makeMapStateToProps)
+class Comment extends ImmutablePureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    descendantsIds: ImmutablePropTypes.list,
+
+  }
+
+  handleClick = () => {
+    // if (this.props.onClick) {
+    //   this.props.onClick();
+    //   return;
+    // }
+
+    // if (!this.context.router) return;
+
+    // this.context.router.history.push(
+    //   `/${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`
+    // )
+  }
+
+  render() {
+    const { status } = this.props
+
+    console.log("status:", status)
+
+    return (
+      <div className={[_s.default, _s.px10, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
+        <div className={[_s.default].join(' ')}>
+
+          <div className={[_s.default, _s.flexRow].join(' ')}>
+            <NavLink
+              to={`/${status.getIn(['account', 'acct'])}`}
+              title={status.getIn(['account', 'acct'])}
+              className={[_s.default, _s.mr10, _s.pt5].join(' ')}
+            >
+              <Avatar account={status.get('account')} size={32} />
+            </NavLink>
+
+            <div className={[_s.default, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.px10, _s.py5, _s.radiusSmall, _s.backgroundSubtle].join(' ')}>
+                <div className={_s.pt2}>
+                  <CommentHeader status={status} />
+                </div>
+                <div className={[_s.py5].join(' ')}>
+                  <StatusContent
+                    status={status}
+                    onClick={this.handleClick}
+                    isComment
+                    collapsable
+                  />
+                </div>
+              </div>
+              <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
+                
+                <Button
+                  text
+                  radiusSmall
+                  backgroundColor='none'
+                  color='tertiary'
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
+                >
+                  <Text size='extraSmall' color='inherit' weight='bold'>
+                    Like
+                  </Text>
+                </Button>
+
+                <Button
+                  text
+                  radiusSmall
+                  backgroundColor='none'
+                  color='tertiary'
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
+                >
+                  <Text size='extraSmall' color='inherit' weight='bold'>
+                    Reply
+                  </Text>
+                </Button>
+
+                <Button
+                  text
+                  radiusSmall
+                  backgroundColor='none'
+                  color='tertiary'
+                  className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')}
+                >
+                  <Text size='extraSmall' color='inherit' weight='bold'>
+                    ···
+                  </Text>
+                </Button>
+
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/display_name.js

@@ -9,8 +9,8 @@ import Icon from './icon'
 const cx = classNames.bind(_s)
 
 const mapDispatchToProps = dispatch => ({
-  openUserInfoPopover() {
+  openUserInfoPopover(props) {
-    dispatch(openPopover('USER_INFO'))
+    dispatch(openPopover('USER_INFO', props))
   },
   closeUserInfoPopover() {
     dispatch(closePopover())
@@ -33,13 +33,21 @@ class DisplayName extends ImmutablePureComponent {
   }
 
   handleMouseEnter = debounce(() => {
-    // console.log("SHOW - USER POPOVER")
+    console.log("SHOW - USER POPOVER")
-    // this.props.openUserInfoPopover()
+    this.props.openUserInfoPopover({
-  }, 50, { leading: true })
+      targetRef: this.node,
+      position: 'top',
+      account: this.props.account,
+    })
+  }, 1000, { leading: true })
 
-  handleMouseLeave = () => {
+  handleMouseLeave = debounce(() => {
-    // console.log("HIDE - USER POPOVER")
+    console.log("HIDE - USER POPOVER")
-    // this.props.closeUserInfoPopover()
+    this.props.closeUserInfoPopover()
+  }, 1000, { leading: true })
+
+  setRef = (n) => {
+    this.node = n;
   }
 
   render() {
@@ -72,7 +80,7 @@ class DisplayName extends ImmutablePureComponent {
       whiteSpaceNoWrap: 1,
       fontWeightBold: 1,
       colorPrimary: 1,
-      marginRight2PX: 1,
+      mr2: 1,
       lineHeight125: !small,
       fontSize14PX: small,
       fontSize15PX: !large,
@@ -90,7 +98,7 @@ class DisplayName extends ImmutablePureComponent {
       fontWeightNormal: 1,
       lineHeight15: multiline,
       lineHeight125: !multiline,
-      marginLeft5PX: !multiline,
+      ml5: !multiline,
       fontSize14PX: small,
       fontSize15PX: !large,
       fontSize16PX: large && !small,
@@ -102,7 +110,7 @@ class DisplayName extends ImmutablePureComponent {
 
     // : todo :
     return (
-      <span {...containerOptions}>
+      <span {...containerOptions} ref={this.setRef}>
         <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
           <bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
             <strong

app/javascript/gabsocial/components/divider.js

@@ -16,8 +16,8 @@ export default class Divider extends PureComponent {
       borderBottom1PX: !invisible,
       borderColorSecondary2: !invisible,
       width100PC: 1,
-      marginBottom15PX: !small,
+      mb15: !small,
-      marginVertical10PX: small || invisible,
+      my10: small || invisible,
     })
 
     return (

app/javascript/gabsocial/components/dot_text_seperator.js

@@ -4,7 +4,7 @@ export default class DotTextSeperator extends PureComponent {
 
   render() {
     return (
-      <Text size='small' color='secondary' className={_s.marginLeft5PX}>·</Text>
+      <Text size='small' color='secondary' className={_s.ml5}>·</Text>
     )
   }
 

app/javascript/gabsocial/components/file_input.js

@@ -45,8 +45,8 @@ export default class FileInput extends PureComponent {
       borderDashed: 1,
       borderColorSecondary: 1,
       backgroundColorPrimary: 1,
-      paddingHorizontal10PX: 1,
+      px10: 1,
-      paddingVertical10PX: 1,
+      py10: 1,
       radiusSmall: 1,
       cursorPointer: 1,
     })
@@ -55,7 +55,7 @@ export default class FileInput extends PureComponent {
       <div>
         {
           !!title &&
-          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
             <Text size='small' weight='medium' color='secondary'>
               {title}
             </Text>

app/javascript/gabsocial/components/group_collection_item.js

@@ -64,9 +64,9 @@ class GroupCollectionItem extends ImmutablePureComponent {
       borderColorSecondary: 1,
       radiusSmall: 1,
       border1PX: 1,
-      marginBottom10PX: 1,
+      mb10: 1,
-      marginLeft5PX: 1,
+      ml5: 1,
-      marginRight5PX: 1,
+      mr5: 1,
       backgroundColorPrimary: 1,
       backgroundSubtle_onHover: isMember,
     })
@@ -83,19 +83,19 @@ class GroupCollectionItem extends ImmutablePureComponent {
             height={imageHeight}
           />
 
-          <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginVertical10PX].join(' ')}>
+          <div className={[_s.default, _s.px10, _s.my10].join(' ')}>
             <Text color='primary' size='medium' weight='bold'>
               {group.get('title')}
             </Text>
 
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.marginTop5PX].join(' ')}>
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.mt5].join(' ')}>
               <Text color='secondary' size='small'>
                 {shortNumberFormat(group.get('member_count'))}
                 &nbsp;
               {intl.formatMessage(messages.members)}
               </Text>
               <DotTextSeperator />
-              <Text color='secondary' size='small' className={_s.marginLeft5PX}>
+              <Text color='secondary' size='small' className={_s.ml5}>
                 {subtitle}
               </Text>
             </div>
@@ -103,7 +103,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
 
           {
             !isMember &&
-            <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom10PX].join(' ')}>
+            <div className={[_s.default, _s.px10, _s.mb10].join(' ')}>
               <Button
                 color='primary'
                 backgroundColor='tertiary'

app/javascript/gabsocial/components/group_list_item.js

@@ -59,12 +59,12 @@ class GroupListItem extends ImmutablePureComponent {
       backgroundSubtle_onHover: 1,
       borderColorSecondary: 1,
       radiusSmall: !slim,
-      marginTop5PX: !slim,
+      mt5: !slim,
-      marginBottom10PX: !slim,
+      mb10: !slim,
       border1PX: !slim,
       borderBottom1PX: slim && !isLast,
       flexRow: slim,
-      paddingVertical5PX: slim,
+      py5: slim,
     })
 
     const imageClasses = cx({
@@ -72,14 +72,14 @@ class GroupListItem extends ImmutablePureComponent {
       radiusSmall: slim,
       height72PX: slim,
       width72PX: slim,
-      marginLeft15PX: slim,
+      ml15: slim,
     })
 
     const textContainerClasses = cx({
       default: 1,
-      paddingHorizontal10PX: 1,
+      px10: 1,
-      marginTop5PX: 1,
+      mt5: 1,
-      marginBottom10PX: !slim,
+      mb10: !slim,
     })
 
     return (
@@ -100,14 +100,14 @@ class GroupListItem extends ImmutablePureComponent {
 
           {
             slim &&
-            <Text color='secondary' size='small' className={_s.marginTop5PX}>
+            <Text color='secondary' size='small' className={_s.mt5}>
               {shortNumberFormat(group.get('member_count'))}
               &nbsp;
               {intl.formatMessage(messages.members)}
             </Text>
           }
 
-          <Text color='secondary' size='small' className={_s.marginTop5PX}>
+          <Text color='secondary' size='small' className={_s.mt5}>
             {subtitle}
           </Text>
 

app/javascript/gabsocial/components/hashtag_item.js

@@ -31,13 +31,13 @@ export default class HashtagItem extends ImmutablePureComponent {
     return (
       <NavLink
         to='/tags/test'
-        className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.paddingHorizontal15PX, _s.paddingVertical5PX].join(' ')}
+        className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.px15, _s.py5].join(' ')}
         onMouseEnter={() => this.handleOnMouseEnter()}
         onMouseLeave={() => this.handleOnMouseLeave()}
       >
         <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
           <div>
-            <Text color='brand' size='medium' weight='bold' className={[_s.paddingVertical2PX, _s.lineHeight15].join(' ')}>
+            <Text color='brand' size='medium' weight='bold' className={[_s.py2, _s.lineHeight15].join(' ')}>
               #randomhashtag
             </Text>
           </div>
@@ -52,7 +52,7 @@ export default class HashtagItem extends ImmutablePureComponent {
             className={_s.marginLeftAuto}
           />
         </div>
-        <Text color='secondary' size='small' className={_s.paddingVertical2PX}>
+        <Text color='secondary' size='small' className={_s.py2}>
           10,240 Gabs
         </Text>
       </NavLink>

app/javascript/gabsocial/components/heading.js

@@ -15,6 +15,7 @@ export default class Heading extends PureComponent {
   static propTypes = {
     children: PropTypes.any,
     size: PropTypes.oneOf(Object.keys(SIZES)),
+    center: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -22,11 +23,12 @@ export default class Heading extends PureComponent {
   }
 
   render() {
-    const { children, size } = this.props
+    const { children, size, center } = this.props
 
     const classes = cx({
       default: 1,
       text: 1,
+      textAlignCenter: center,
 
       colorPrimary: [SIZES.h1, SIZES.h3].indexOf(size) > -1,
       colorSecondary: [SIZES.h2, SIZES.h4, SIZES.h5].indexOf(size) > -1,
@@ -37,10 +39,10 @@ export default class Heading extends PureComponent {
       fontSize13PX: size === SIZES.h4,
       fontSize12PX: size === SIZES.h5,
 
-      marginTop5PX: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
+      mt5: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
 
       lineHeight2: size === SIZES.h5,
-      paddingVertical2PX: size === SIZES.h5,
+      py2: size === SIZES.h5,
 
       // fontWeightNormal: weight === WEIGHTS.normal,
       fontWeightMedium: [SIZES.h1, SIZES.h5].indexOf(size) > -1,

app/javascript/gabsocial/components/input.js

@@ -41,20 +41,20 @@ export default class Input extends PureComponent {
       outlineNone: 1,
       lineHeight125: 1,
       displayBlock: 1,
-      paddingVertical10PX: 1,
+      py10: 1,
       backgroundTransparent: 1,
       fontSize15PX: 1,
       flexGrow1: 1,
-      paddingHorizontal5PX: !!prependIcon,
+      px5: !!prependIcon,
-      paddingLeft15PX: !prependIcon,
+      pl15: !prependIcon,
-      paddingRight15PX: !hasClear,
+      pr15: !hasClear,
     })
 
     return (
       <Fragment>
         {
           !!title &&
-          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
             <Text size='small' weight='medium' color='secondary'>
               {title}
             </Text>
@@ -63,7 +63,7 @@ export default class Input extends PureComponent {
         <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
           {
             !!prependIcon &&
-            <Icon id={prependIcon} width='16px' height='16px' className={[_s.marginLeft15PX, _s.marginRight5PX].join(' ')} />
+            <Icon id={prependIcon} width='16px' height='16px' className={[_s.ml15, _s.mr5].join(' ')} />
           }
 
           <input

app/javascript/gabsocial/components/link_footer.js

@@ -97,7 +97,7 @@ class LinkFooter extends PureComponent {
     ]
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal10PX, _s.marginBottom15PX].join(' ')}>
+      <div className={[_s.default, _s.px10, _s.mb15].join(' ')}>
         <nav aria-label='Footer' role='navigation' className={[_s.default, _s.flexWrap, _s.flexRow].join(' ')}>
           {
             linkFooterItems.map((linkFooterItem, i) => {
@@ -113,7 +113,7 @@ class LinkFooter extends PureComponent {
                   href={linkFooterItem.to}
                   data-method={linkFooterItem.logout ? 'delete' : null}
                   onClick={linkFooterItem.onClick || null}
-                  className={[_s.marginVertical5PX, _s.paddingRight15PX].join(' ')}
+                  className={[_s.my5, _s.pr15].join(' ')}
                 >
                   <Text size='small' color='secondary'>
                     {linkFooterItem.text}
@@ -124,11 +124,11 @@ class LinkFooter extends PureComponent {
           }
         </nav>
 
-        <Text size='small' color='secondary' className={_s.marginTop10PX}>
+        <Text size='small' color='secondary' className={_s.mt10}>
           © {currentYear} Gab AI, Inc.
         </Text>
 
-        <Text size='small' color='secondary' tagName='p' className={_s.marginTop10PX}>
+        <Text size='small' color='secondary' tagName='p' className={_s.mt10}>
           <FormattedMessage
             id='getting_started.open_source_notice'
             defaultMessage='Gab Social is open source software. You can contribute or report issues on our self-hosted GitLab at {gitlab}.'

app/javascript/gabsocial/components/list_item.js

@@ -19,8 +19,8 @@ export default class ListItem extends PureComponent {
       default: 1,
       cursorPointer: 1,
       noUnderline: 1,
-      paddingHorizontal15PX: 1,
+      px15: 1,
-      paddingVertical15PX: 1,
+      py15: 1,
       flexRow: 1,
       alignItemsCenter: 1,
       backgroundSubtle_onHover: 1,

app/javascript/gabsocial/components/media_gallery/media_gallery.js

@@ -521,7 +521,7 @@ class MediaGallery extends PureComponent {
       borderColorSecondary: size === 1,
       borderTop1PX: size === 1,
       borderBottom1PX: size === 1,
-      paddingHorizontal5PX: size > 1,
+      px5: size > 1,
     })
 
     return (

app/javascript/gabsocial/components/media_item.js

@@ -81,8 +81,8 @@ export default class MediaItem extends ImmutablePureComponent {
       top0: 1,
       height100PC: 1,
       width100PC: 1,
-      paddingVertical5PX: !small,
+      py5: !small,
-      paddingHorizontal5PX: !small,
+      px5: !small,
     })
 
     const linkClasses = cx({
@@ -138,7 +138,7 @@ export default class MediaItem extends ImmutablePureComponent {
 
               {
                 !!badge &&
-                <div className={[_s.default, _s.positionAbsolute, _s.radiusSmall, _s.backgroundColorOpaque, _s.paddingHorizontal5PX, _s.paddingVertical5PX, _s.marginRight5PX, _s.marginVertical5PX, _s.bottom0, _s.right0].join(' ')}>
+                <div className={[_s.default, _s.positionAbsolute, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}>
                   <Text size='extraSmall' color='white'>
                     {badge}
                   </Text>

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

@@ -1,20 +1,20 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePureComponent from 'react-immutable-pure-component'
-import { openModal } from '../../actions/modal';
+import { openModal } from '../../actions/modal'
-import { cancelReplyCompose } from '../../actions/compose';
+import { cancelReplyCompose } from '../../actions/compose'
-import ModalLayout from './modal_layout';
+import ModalLayout from './modal_layout'
-import TimelineComposeBlock from '../timeline_compose_block';
+import TimelineComposeBlock from '../timeline_compose_block'
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
   title: { id: 'navigation_bar.compose', defaultMessage: 'Compose new gab' },
-});
+})
 
 const mapStateToProps = state => {
   return {
     composeText: state.getIn(['compose', 'text']),
   };
-};
+}
 
 export default
 @connect(mapStateToProps)
@@ -33,7 +33,8 @@ class ComposeModal extends ImmutablePureComponent {
 
     if (composeText) {
       dispatch(openModal('CONFIRM', {
-        message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
+        title: <FormattedMessage id='discard-gab-title' defaultMessage='Discard gab?' />,
+        message: <FormattedMessage id='discard-gab-message' defaultMessage="This can't be undone and you'll lose your draft." />,
         confirm: intl.formatMessage(messages.confirm),
         onConfirm: () => dispatch(cancelReplyCompose()),
         onCancel: () => dispatch(openModal('COMPOSE')),
@@ -45,7 +46,7 @@ class ComposeModal extends ImmutablePureComponent {
   };
 
   render() {
-    const { intl } = this.props;
+    const { intl } = this.props
 
     return (
       <ModalLayout

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

@@ -1,12 +1,15 @@
 import { injectIntl, FormattedMessage } from 'react-intl'
-import ModalLayout from './modal_layout'
+import Block from '../block'
 import Button from '../button'
+import Heading from '../heading'
+import Text from '../text'
 
 export default
 @injectIntl
 class ConfirmationModal extends PureComponent {
 
   static propTypes = {
+    title: PropTypes.node.isRequired,
     message: PropTypes.node.isRequired,
     confirm: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
@@ -32,7 +35,7 @@ class ConfirmationModal extends PureComponent {
   }
 
   handleCancel = () => {
-    const {onClose, onCancel} = this.props
+    const { onClose, onCancel } = this.props
     onClose()
     if (onCancel) onCancel()
   }
@@ -41,24 +44,67 @@ class ConfirmationModal extends PureComponent {
     this.button = c
   }
 
-  render () {
+  render() {
-    const { message, confirm, secondary } = this.props
+    const {
+      title,
+      message,
+      confirm,
+      secondary
+    } = this.props
 
     return (
-      <div className='modal-root__modal confirmation-modal'>
+      <div className={_s.width330PX}>
-        <div className='confirmation-modal__container'>
+        <Block>
-          {message}
+          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
-        </div>
+            <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
 
-        <div className='confirmation-modal__action-bar'>
+              <Heading size='h1' center>
-          <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
+                {title}
-            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+              </Heading>
-          </Button>
+
-          {secondary !== undefined && (
+              <div className={[_s.default, _s.mt10].join(' ')}>
-            <Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
+                <Text align='center' color='secondary'>
-          )}
+                  {message}
-          <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
+                </Text>
-        </div>
+
+                <div className={[_s.default, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
+                  <Button
+                    backgroundColor='tertiary'
+                    color='primary'
+                    onClick={this.handleCancel}
+                    className={[_s.mr10, _s.flexGrow1].join(' ')}
+                  >
+                    <Text size='medium' weight='bold' color='inherit'>
+                      <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+                    </Text>
+                  </Button>
+                  
+                  { /**
+                    : todo :
+                     */
+                    secondary !== undefined && (
+                      <Button text={secondary} onClick={this.handleSecondary} />
+                    )
+                  }
+
+                  <Button 
+                    backgroundColor='brand'
+                    color='white'
+                    onClick={this.handleClick}
+                    ref={this.setRef}
+                    className={_s.flexGrow1}
+                  >
+                    <Text size='medium' weight='bold' color='inherit'>
+                      {confirm}
+                    </Text>
+                  </Button>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+        </Block>
       </div>
     )
   }

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

@@ -27,7 +27,7 @@ class ModalLayout extends PureComponent {
     return (
       <div className={[_s.width645PX].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.paddingHorizontal15PX].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
             <Heading size='h3'>
               {title}
             </Heading>
@@ -41,7 +41,7 @@ class ModalLayout extends PureComponent {
               iconWidth='10px'
             />
           </div>
-          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+          <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
             {children}
           </div>
         </Block>

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

@@ -23,38 +23,34 @@ class ProUpgradeModal extends ImmutablePureComponent {
 
     return (
       <ModalLayout title={intl.formatMessage(messages.title)}>
-        <div>
+        <Text>
-          <Text>
+          {intl.formatMessage(messages.text)}
-            {intl.formatMessage(messages.text)}
+        </Text>
-          </Text>
+        <Text>
-          <Text>
+          {intl.formatMessage(messages.benefits)}
-            {intl.formatMessage(messages.benefits)}
+        </Text>
-          </Text>
+
+        <div className={[_s.default, _s.my10].join(' ')}>
+          <Text>• Schedule Posts</Text>
+          <Text>• Get Verified</Text>
+          <Text>• Create Groups</Text>
+          <Text>• Larger Video and Image Uploads</Text>
+          <Text>• Receive the PRO Badge</Text>
+          <Text>• Remove in-feed promotions</Text>
         </div>
 
-        <ul>
+        <Button
-          <li>
+          centered
-            <Text>Schedule Posts</Text>
+          backgroundColor='brand'
-          </li>
+          color='white'
-          <li>
+          icon='pro'
-            <Text>Get Verified</Text>
+          href='https://pro.gab.com'
-          </li>
+          className={_s.justifyContentCenter}
-          <li>
+          iconClassName={[_s.mr5, _s.fillColorWhite].join(' ')}
-            <Text>Create Groups</Text>
+        >
-          </li>
+          <Text color='inherit' weight='bold' align='center'>
-          <li>
+            {intl.formatMessage(messages.title)}
-            <Text>Larger Video and Image Uploads</Text>
+          </Text>
-          </li>
-          <li>
-            <Text>Receive the PRO Badge</Text>
-          </li>
-          <li>
-            <Text>Remove in-feed promotions</Text>
-          </li>
-        </ul>
-
-        <Button icon='pro' href='https://pro.gab.com'>
-          {intl.formatMessage(messages.title)}
         </Button>
 
       </ModalLayout>

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

@@ -26,15 +26,15 @@ class UnauthorizedModal extends ImmutablePureComponent {
 
     return (
       <ModalLayout title={intl.formatMessage(messages.signup)}>
-        <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
+        <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
-          <Text className={_s.marginBottom15PX}>
+          <Text className={_s.mb15}>
             {intl.formatMessage(messages.text)}
           </Text>
           <Button href='/auth/sign_up' className={[_s.width240PX, _s.marginLeftAuto, _s.marginLeftAuto].join(' ')}>
             {intl.formatMessage(messages.register)}
           </Button>
         </div>
-        <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
+        <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
           <Text color='secondary'>
             {
               intl.formatMessage(messages.login, {

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -42,7 +42,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
             <div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}>
               <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
                 <Icon id='group' height='14px' width='14px' />
-                <Text size='small' className={_s.marginLeft5PX}>
+                <Text size='small' className={_s.ml5}>
                   {intl.formatMessage(messages.members)}
                 </Text>
               </div>

app/javascript/gabsocial/components/panel/media_gallery_panel.js

@@ -66,7 +66,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
         headerButtonTitle={intl.formatMessage(messages.show_all)}
         headerButtonTo={`/${account.get('acct')}/media`}
       >
-        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
+        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
           {
             attachments.slice(0, 16).map((attachment) => (
               <MediaItem

app/javascript/gabsocial/components/panel/panel_layout.js

@@ -32,11 +32,11 @@ export default class PanelLayout extends PureComponent {
     } = this.props
 
     return (
-      <aside className={[_s.default, _s.marginBottom15PX].join(' ')}>
+      <aside className={[_s.default, _s.mb15].join(' ')}>
         <Block>
           {
             (title || subtitle) &&
-            <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+            <div className={[_s.default, _s.px15, _s.py10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
               <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
                 <Heading size='h3'>
                   {title}
@@ -69,7 +69,7 @@ export default class PanelLayout extends PureComponent {
 
           {
             !noPadding &&
-            <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+            <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
               {children}
             </div>
           }
@@ -87,7 +87,7 @@ export default class PanelLayout extends PureComponent {
                 backgroundColor='none'
                 to={footerButtonTo}
                 onClick={footerButtonAction}
-                className={[_s.paddingHorizontal15PX, _s.paddingVertical15PX, _s.backgroundSubtle_onHover].join(' ')}
+                className={[_s.px15, _s.py15, _s.backgroundSubtle_onHover].join(' ')}
               >
                 <Text color='brand' align='left' size='medium'>
                   {footerButtonTitle}

app/javascript/gabsocial/components/panel/profile_info_panel.js

@@ -73,7 +73,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
               <Text
                 size='small'
                 color='secondary'
-                className={_s.marginLeft5PX}
+                className={_s.ml5}
               >
                 {
                   intl.formatMessage(messages.memberSince, {

app/javascript/gabsocial/components/panel/user_panel.js

@@ -43,18 +43,18 @@ class UserPanel extends ImmutablePureComponent {
         />
 
         <NavLink
-          className={[_s.default, _s.flexRow, _s.paddingVertical10PX, _s.paddingHorizontal15PX, _s.noUnderline].join(' ')}
+          className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
           to={`/${account.get('acct')}`}
         >
           <div className={[_s.default, _s.marginTopNeg30PX, _s.circle, _s.borderColorWhite, _s.border2PX].join(' ')}>
             <Avatar account={account} size={62} />
           </div>
-          <div className={[_s.default, _s.marginLeft15PX].join(' ')}>
+          <div className={[_s.default, _s.ml15].join(' ')}>
             <DisplayName account={account} multiline />
           </div>
         </NavLink>
 
-        <div className={[_s.default, _s.marginBottom15PX, _s.marginTop5PX, _s.flexRow, _s.paddingHorizontal15PX].join(' ')}>
+        <div className={[_s.default, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
           <UserStat
             to={`/${account.get('acct')}`}
             title={intl.formatMessage(messages.gabs)}

app/javascript/gabsocial/components/poll.js

@@ -104,8 +104,8 @@ class Poll extends ImmutablePureComponent {
     const listItemClasses = cx({
       default: 1,
       flexRow: 1,
-      paddingVertical10PX: showResults,
+      py10: showResults,
-      marginBottom10PX: 1,
+      mb10: 1,
       border1PX: !showResults,
       borderColorSecondary: !showResults,
       circle: !showResults,
@@ -117,8 +117,8 @@ class Poll extends ImmutablePureComponent {
     const textContainerClasses = cx({
       default: 1,
       width100PC: 1,
-      paddingHorizontal15PX: 1,
+      px15: 1,
-      paddingVertical10PX: !showResults,
+      py10: !showResults,
       cursorPointer: !showResults,
       alignItemsCenter: !showResults,
     })
@@ -151,7 +151,7 @@ class Poll extends ImmutablePureComponent {
                 checked={active}
                 onChange={this.handleOptionChange}
                 disabled={disabled}
-                className={[_s.default, _s.marginRight10PX].join(' ')}
+                className={[_s.default, _s.mr10].join(' ')}
               />
             }
 
@@ -188,7 +188,7 @@ class Poll extends ImmutablePureComponent {
     const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item)
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+      <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
         <ul className={[_s.default, _s.listStyleNone].join(' ')}>
           {
             poll.get('options').map((option, i) => this.renderOption(option, i))
@@ -200,11 +200,11 @@ class Poll extends ImmutablePureComponent {
             !showResults &&
             <Button
               narrow
-              className={_s.marginRight10PX}
+              className={_s.mr10}
               disabled={disabled}
               onClick={this.handleVote}
             >
-              <Text color='inherit' size='small' className={_s.paddingHorizontal10PX}>
+              <Text color='inherit' size='small' className={_s.px10}>
                 {intl.formatMessage(messages.vote)}
               </Text>
             </Button>
@@ -222,7 +222,7 @@ class Poll extends ImmutablePureComponent {
               poll.get('expires_at') &&
               <Fragment>
                 <DotTextSeperator />
-                <Text color='secondary' className={_s.marginLeft5PX}>
+                <Text color='secondary' className={_s.ml5}>
                   {timeRemaining}
                 </Text>
               </Fragment>

app/javascript/gabsocial/components/popover/popover_base.js

@@ -1,5 +1,6 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import { Manager, Reference, Popper } from 'react-popper'
 import classnames from 'classnames/bind'
 import Overlay from 'react-overlays/lib/Overlay'
 import spring from 'react-motion/lib/spring'
@@ -52,14 +53,16 @@ class PopoverBase extends ImmutablePureComponent {
     isModalOpen: PropTypes.bool.isRequired,
     onOpen: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
-    popoverPlacement: PropTypes.string,
+    position: PropTypes.string,
     openPopoverType: PropTypes.number,
     openedViaKeyboard: PropTypes.bool,
     visible: PropTypes.bool,
+    targetRef: PropTypes.node,
   }
 
   static defaultProps = {
     title: 'Menu',
+    position: 'bottom',
   }
 
   state = {
@@ -124,7 +127,19 @@ class PopoverBase extends ImmutablePureComponent {
   }
 
   render() {
-    const { icon, children, visible, items, size, title, disabled, popoverPlacement, openPopoverType, openedViaKeyboard } = this.props
+    const {
+      icon,
+      children,
+      visible,
+      items,
+      size,
+      title,
+      disabled,
+      position,
+      openPopoverType,
+      openedViaKeyboard,
+      targetRef,
+    } = this.props
     const open = this.state.id === openPopoverType
 
     const containerClasses = cx({
@@ -134,12 +149,24 @@ class PopoverBase extends ImmutablePureComponent {
     })
 
     return (
-      <div onKeyDown={this.handleKeyDown} className={containerClasses}>
+      <Manager>
-        { /* <div show={open} placement={popoverPlacement} target={this.findTarget}>
+        <Popper
-          <PopoverMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
+          placement={position}
-          {children}
+          referenceElement={targetRef}
-        </div> */}
+        >
-      </div>
+          {({ ref, style, placement, arrowProps }) => (
+            <div ref={ref} style={style} data-placement={placement}>
+              <div ref={arrowProps.ref} style={arrowProps.style} />
+              <div data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
+              {children}
+                { /* <div show={open} placement={popoverPlacement} target={this.findTarget}>
+                  <PopoverMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
+                </div> */}
+              </div>
+            </div>
+          )}
+        </Popper>
+      </Manager>
     )
   }
 

app/javascript/gabsocial/components/popover/popover_root.js

@@ -24,7 +24,7 @@ const POPOVER_COMPONENTS = {
   SIDEBAR_MORE: () => Promise.resolve({ default: SidebarMorePopover }),
   STATUS_OPTIONS: () => Promise.resolve({ default: StatusOptionsPopover }),
   STATUS_VISIBILITY: () => Promise.resolve({ default: StatusVisibilityPopover }),
-  USER_INFO: () => UserInfoPopover,
+  USER_INFO: () => Promise.resolve({ default: UserInfoPopover }),
 }
 
 const mapStateToProps = state => ({
@@ -148,26 +148,45 @@ class PopoverRoot extends PureComponent {
     }
   }
 
-  renderError = (props) => {
+  renderError = () => {
-    return <BundleModalError />
+    return null
+  }
+
+  renderLoading = () => {
+    return null
   }
 
   render() {
-    const { type, style, placement } = this.props
+    const {
+      type,
+      style,
+      props,
+    } = this.props
     const { mounted } = this.state
     const visible = !!type
 
-    console.log("popover root - type, visible:", type, visible)
+    console.log("popover root - type, visible:", type, visible, props, POPOVER_COMPONENTS[type])
-
-    // <PopoverBase className={`popover-menu ${placement}`} visible={visible} ref={this.setRef}>
-    //     {
-    //       visible &&
-    //       <UserInfoPopover />
-    //     }
-    //   </PopoverBase>
 
     return (
-      <div></div>
+      <PopoverBase
+        visible={visible}
+        ref={this.setRef}
+        {...props}
+      >
+        {
+          visible &&
+          <Bundle
+            fetchComponent={POPOVER_COMPONENTS[type]}
+            loading={this.renderLoading(type)}
+            error={this.renderError}
+            renderDelay={200}
+          >
+            {
+              (SpecificComponent) => <SpecificComponent {...props} />
+            }
+          </Bundle>
+        }
+      </PopoverBase>
     )
   }
 }

app/javascript/gabsocial/components/popover/user_info_popover.js

@@ -1,11 +1,62 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { shortNumberFormat } from '../../utils/numbers'
 import PopoverLayout from './popover_layout'
+import Avatar from '../avatar'
+import Button from '../button'
+import DisplayName from '../display_name'
 import Text from '../text'
 
-export default class UserInfoPopover extends PureComponent {
+export default class UserInfoPopover extends ImmutablePureComponent {
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+  }
+
   render() {
+    const { account } = this.props
+
+    const content = !account ? null : { __html: account.get('note_emojified') }
+
     return (
       <PopoverLayout>
-        <Text>testing</Text>
+        <div className={[_s.default, _s.px15, _s.py15].join(' ')} style={{width: '260px'}}>
+          
+          <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div className={[_s.default, _s.flexGrow1].join(' ')}>
+              <Avatar account={account} size={42} />
+              <DisplayName account={account} multiline noHover />
+            </div>
+            <div className={[_s.default, _s.marginLeftAuto].join(' ')}>
+              <Button
+                color='white'
+              >
+                <Text size='medium' weight='bold' color='inherit'>
+                  Following
+                </Text>
+              </Button>
+            </div>
+          </div>
+
+          <div className={[_s.default, _s.my10].join(' ')}>
+            <div className={_s.dangerousContent} dangerouslySetInnerHTML={content} />
+          </div>
+
+          <div className={[_s.default, _s.flexRow].join(' ')}>
+            <div>
+              <Text size='small'>
+                {shortNumberFormat(account.get('following_count'))}
+                Following
+              </Text>
+            </div>
+            <div>
+              <Text size='small'>
+                {shortNumberFormat(account.get('followers_count'))}
+                Followers
+              </Text>
+            </div>
+          </div>
+
+        </div>
       </PopoverLayout>
     )
   }

app/javascript/gabsocial/components/recursive_comment.js

@@ -0,0 +1,91 @@
+import { Fragment } from 'react'
+import { NavLink } from 'react-router-dom'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { makeGetStatus } from '../selectors';
+import CommentHeader from './comment_header'
+import Avatar from './avatar'
+import Button from './button'
+import DisplayName from './display_name'
+import DotTextSeperator from './dot_text_seperator'
+import RelativeTimestamp from './relative_timestamp'
+import Text from './text'
+import StatusContent from './status_content'
+
+const messages = defineMessages({
+  follow: { id: 'follow', defaultMessage: 'Follow' },
+})
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus()
+
+  const mapStateToProps = (state, props) => {
+    const status = getStatus(state, props)
+    let descendantsIds = Immutable.List()
+
+    if (status) {
+      // ALL descendants
+      descendantsIds = descendantsIds.withMutations(mutable => {
+        const ids = [status.get('id')]
+
+        while (ids.length > 0) {
+          let id = ids.shift();
+          const replies = state.getIn(['contexts', 'replies', id])
+
+          if (status.get('id') !== id) {
+            mutable.push(id)
+          }
+
+          if (replies) {
+            replies.reverse().forEach(reply => {
+              ids.unshift(reply)
+            });
+          }
+        }
+      })
+    }
+
+    return {
+      status,
+      descendantsIds,
+    }
+  }
+
+  return mapStateToProps
+}
+
+export default
+@injectIntl
+@connect(makeMapStateToProps)
+class Comment extends ImmutablePureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    descendantsIds: ImmutablePropTypes.list,
+
+  }
+
+  constructListItem = (item) => {
+    if (item.nestedItems) {
+      return (
+        <List key={item.key}>
+          {item.nestedItems.map(this.constructListItem)}
+        </List>
+      )
+    } else {
+      return <ListItem key={item.key} item={item} />
+    }
+  }
+
+  render() {
+    const { listItems } = this.props
+
+    return (
+      <List>
+        {listItems.map(this.constructListItem)}
+      </List>
+    )
+  }
+
+}

app/javascript/gabsocial/components/select.js

@@ -22,7 +22,7 @@ export default class Select extends ImmutablePureComponent {
     return (
       <div className={_s.default}>
         <select
-          className={[_s.default, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.select].join(' ')}
+          className={[_s.default, _s.outlineNone, _s.text, _s.border1PX, _s.borderColorSecondary, _s.px15, _s.select].join(' ')}
           value={value}
           onChange={onChange}
         >

app/javascript/gabsocial/components/sidebar.js

@@ -45,7 +45,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(closeSidebar())
   },
   onOpenComposeModal() {
-    dispatch(openModal('COMPOSE'))
+    dispatch(openModal('PRO_UPGRADE'))
   },
 })
 
@@ -199,11 +199,11 @@ class Sidebar extends ImmutablePureComponent {
       <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
         <div className={[_s.default, _s.width240PX].join(' ')}>
           <div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
-            <div className={[_s.default, _s.height100PC, _s.width240PX, _s.paddingRight15PX, _s.marginVertical10PX].join(' ')}>
+            <div className={[_s.default, _s.height100PC, _s.width240PX, _s.pr15, _s.my10].join(' ')}>
 
               <SidebarHeader />
 
-              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.marginBottom15PX].join(' ')}>
+              <nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}>
                 <SidebarSectionTitle>Menu</SidebarSectionTitle>
                 {
                   menuItems.map((menuItem, i) => (
@@ -227,7 +227,7 @@ class Sidebar extends ImmutablePureComponent {
               <Button
                 block
                 onClick={this.handleOpenComposeModal}
-                className={[_s.paddingVertical15PX, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
+                className={[_s.py15, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
               >
                 Gab
               </Button>

app/javascript/gabsocial/components/sidebar_header.js

@@ -29,7 +29,7 @@ class SidebarHeader extends ImmutablePureComponent {
     return (
       <Fragment>
         <h1 className={[_s.default].join(' ')}>
-          <NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.paddingHorizontal10PX].join(' ')}>
+          <NavLink to='/' aria-label='Gab' className={[_s.default, _s.noSelect, _s.noUnderline, _s.height50PX, _s.justifyContentCenter, _s.cursorPointer, _s.px10].join(' ')}>
             <GabLogo />
           </NavLink>
         </h1>

app/javascript/gabsocial/components/sidebar_section_item.js

@@ -42,8 +42,8 @@ export default class SidebarSectionItem extends PureComponent {
       maxWidth100PC: 1,
       width100PC: 1,
       flexRow: 1,
-      paddingVertical5PX: 1,
+      py5: 1,
-      paddingHorizontal10PX: 1,
+      px10: 1,
       alignItemsCenter: 1,
       radiusSmall: 1,
       // border1PX: shouldShowActive,
@@ -71,10 +71,10 @@ export default class SidebarSectionItem extends PureComponent {
       text: 1,
       marginLeftAuto: 1,
       fontSize12PX: 1,
-      paddingHorizontal5PX: 1,
+      px5: 1,
-      marginRight2PX: 1,
+      mr2: 1,
       lineHeight15: 1,
-      marginLeft5PX: 1,
+      ml5: 1,
       colorSecondary: !isNotifications,
       colorWhite: isNotifications,
       backgroundColorBrand: isNotifications,
@@ -100,7 +100,7 @@ export default class SidebarSectionItem extends PureComponent {
               />
             }
           </div>
-          <div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
+          <div className={[_s.default, _s.flexNormal, _s.px10, _s.textOverflowEllipsis, _s.overflowWrapBreakWord, _s.flexRow, _s.width100PC].join(' ')}>
             <span className={textClasses}>{title}</span>
           </div>
           { count > 0 &&

app/javascript/gabsocial/components/sidebar_section_title.js

@@ -10,7 +10,7 @@ export default class SidebarSectionTitle extends PureComponent {
     const { children } = this.props
 
     return (
-      <div className={[_s.default, _s.paddingVertical5PX, _s.paddingHorizontal10PX, _s.marginTop10PX].join(' ')}>
+      <div className={[_s.default, _s.py5, _s.px10, _s.mt10].join(' ')}>
         <Text size='small' weight='bold' color='secondary'>
           {children}
         </Text>

app/javascript/gabsocial/components/status/status.js

@@ -330,14 +330,14 @@ class Status extends ImmutablePureComponent {
       );
     } else if (featured) {
       prepend = (
-        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingVertical5PX, _s.paddingHorizontal15PX].join(' ')}>
+        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.py5, _s.px15].join(' ')}>
           <Icon
             id='pin'
             width='10px'
             height='10px'
             className={_s.fillColorSecondary}
           />
-          <Text size='small' color='secondary' className={_s.marginLeft5PX}>
+          <Text size='small' color='secondary' className={_s.ml5}>
             {intl.formatMessage(messages.pinned)}
           </Text>
         </div>
@@ -452,9 +452,9 @@ class Status extends ImmutablePureComponent {
 
     const containerClasses = cx({
       default: 1,
-      marginBottom15PX: !borderless,
+      mb15: !borderless,
       backgroundColorPrimary: 1,
-      paddingBottom15PX: featured,
+      pb15: featured,
       borderBottom1PX: featured,
       borderColorSecondary: featured,
     })
@@ -508,9 +508,10 @@ class Status extends ImmutablePureComponent {
             ) */ }
 
               <StatusActionBar status={status} account={account} {...other} />
-              <div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.paddingTop10PX, _s.paddingHorizontal15PX, _s.marginBottom10PX].join(' ')}>
+
+              { /* <div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.pt10, _s.px15, _s.mb10].join(' ')}>
                 <ComposeFormContainer statusId={status.get('id')} shouldCondense />
-              </div>
+              </div> */ }
             </div>
           </div>
         </div>

app/javascript/gabsocial/components/status_action_bar.js

@@ -143,19 +143,19 @@ class StatusActionBar extends ImmutablePureComponent {
 
     const containerClasses = cx({
       default: 1,
-      paddingHorizontal10PX: 1,
+      px10: 1,
-      marginTop10PX: !shouldCondense,
+      mt10: !shouldCondense,
-      marginTop5PX: shouldCondense,
+      mt5: shouldCondense,
     })
 
     const innerContainerClasses = cx({
       default: 1,
-      paddingVertical2PX: 1,
+      py2: 1,
       flexRow: 1,
       width100PC: 1,
       borderTop1PX: !shouldCondense,
       borderColorSecondary: !shouldCondense,
-      marginTop5PX: hasInteractions,
+      mt5: hasInteractions,
     })
 
     const interactionBtnClasses = cx({
@@ -163,15 +163,15 @@ class StatusActionBar extends ImmutablePureComponent {
       text: 1,
       cursorPointer: 1,
       fontWeightNormal: 1,
-      marginRight10PX: 1,
+      mr10: 1,
-      paddingVertical5PX: 1,
+      py5: 1,
     })
 
     return (
       <div className={containerClasses}>
         {
           hasInteractions &&
-          <div className={[_s.default, _s.flexRow, _s.paddingHorizontal5PX].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.px5].join(' ')}>
             {
               favoriteCount > 0 &&
               <button className={interactionBtnClasses}>
@@ -202,7 +202,7 @@ class StatusActionBar extends ImmutablePureComponent {
           </div>
         }
         <div className={innerContainerClasses}>
-          <div className={[_s.default, _s.flexRow, _s.paddingVertical2PX, _s.width100PC].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.py2, _s.width100PC].join(' ')}>
             <StatusActionBarItem
               title={formatMessage(messages.like)}
               icon='like'

app/javascript/gabsocial/components/status_action_bar/index.js

@@ -1 +0,0 @@
-export { default } from '../status_action_bar'

app/javascript/gabsocial/components/status_action_bar_item.js

@@ -25,8 +25,8 @@ export default class StatusActionBarItem extends PureComponent {
       justifyContentCenter: 1,
       flexRow: 1,
       alignItemsCenter: 1,
-      paddingVertical10PX: 1,
+      py10: 1,
-      paddingHorizontal10PX: 1,
+      px10: 1,
       width100PC: 1,
       radiusSmall: 1,
       outlineNone: 1,
@@ -36,14 +36,14 @@ export default class StatusActionBarItem extends PureComponent {
     })
 
     return (
-      <div className={[_s.default, _s.flexGrow1, _s.paddingHorizontal10PX].join(' ')}>
+      <div className={[_s.default, _s.flexGrow1, _s.px10].join(' ')}>
         <button
           className={btnClasses}
           onClick={onClick}
           active={active}
           disabled={disabled}
         >
-          <Icon width='16px' height='16px' id={icon} className={[_s.default, _s.marginRight10PX, _s.fillColorSecondary].join(' ')} />
+          <Icon width='16px' height='16px' id={icon} className={[_s.default, _s.mr10, _s.fillColorSecondary].join(' ')} />
           {title}
         </button>
       </div>

app/javascript/gabsocial/components/status_content/status_content.js

@@ -170,7 +170,7 @@ class StatusContent extends ImmutablePureComponent {
     //   'status__content--with-action': this.props.onClick && this.context.router,
     //   'status__content--with-spoiler': status.get('spoiler_text').length > 0,
     //   'status__content--collapsed': this.state.collapsed === true,
-    //   // _s.paddingHorizontal15PX, _s.marginBottom15PX
+    //   // _s.px15, _s.mb15
     // });
 
     if (isRtl(status.get('search_index'))) {
@@ -209,8 +209,8 @@ class StatusContent extends ImmutablePureComponent {
       const hasMarginBottom = !!status.get('card') || !!status.get('poll') || status.get('media_attachments').size > 0
 
       const containerClasses = cx({
-        paddingHorizontal15PX: !isComment,
+        px15: !isComment,
-        marginBottom15PX: hasMarginBottom,
+        mb15: hasMarginBottom,
       })
 
       return (
@@ -228,7 +228,7 @@ class StatusContent extends ImmutablePureComponent {
           {
             this.state.collapsed &&
             <button
-              className={[_s.default, _s.displayFlex, _s.cursorPointer, _s.paddingVertical2PX, _s.text, _s.colorPrimary, _s.fontWeightBold, _s.fontSize15PX].join(' ')}
+              className={[_s.default, _s.displayFlex, _s.cursorPointer, _s.py2, _s.text, _s.colorPrimary, _s.fontWeightBold, _s.fontSize15PX].join(' ')}
               onClick={this.props.onClick}
             >
               {intl.formatMessage(messages.readMore)}
@@ -242,7 +242,7 @@ class StatusContent extends ImmutablePureComponent {
       <div
         tabIndex='0'
         ref={this.setRef}
-        className={[_s.paddingHorizontal15PX, _s.marginBottom15PX, _s.statusContent].join(' ')}
+        className={[_s.px15, _s.mb15, _s.statusContent].join(' ')}
         style={directionStyle}
         dangerouslySetInnerHTML={content}
         lang={status.get('language')}

app/javascript/gabsocial/components/status_header.js

@@ -168,18 +168,18 @@ export default class StatusHeader extends ImmutablePureComponent {
     // </div>
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+      <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
-        <div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
+        <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
 
           <NavLink
             to={`/${status.getIn(['account', 'acct'])}`}
             title={status.getIn(['account', 'acct'])}
-            className={[_s.default, _s.marginRight10PX].join(' ')}
+            className={[_s.default, _s.mr10].join(' ')}
           >
             <Avatar account={status.get('account')} size={50} />
           </NavLink>
 
-          <div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.marginTop5PX].join(' ')}>
+          <div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.mt5].join(' ')}>
 
             <div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsStart].join(' ')}>
               <NavLink
@@ -218,7 +218,7 @@ export default class StatusHeader extends ImmutablePureComponent {
 
               <DotTextSeperator />
 
-              <Icon id='globe' width='12px' height='12px' className={[_s.default, _s.displayInline, _s.marginLeft5PX, _s.fillColorSecondary].join(' ')} />
+              <Icon id='globe' width='12px' height='12px' className={[_s.default, _s.displayInline, _s.ml5, _s.fillColorSecondary].join(' ')} />
 
               {
                 !!status.get('group') &&
@@ -230,7 +230,7 @@ export default class StatusHeader extends ImmutablePureComponent {
                     backgroundColor='none'
                     color='none'
                     to={`/groups/${status.getIn(['group', 'id'])}`}
-                    className={_s.marginLeft5PX}
+                    className={_s.ml5}
                   >
                     <Text size='small' color='secondary'>
                       {status.getIn(['group', 'title'])}
@@ -249,7 +249,7 @@ export default class StatusHeader extends ImmutablePureComponent {
                     backgroundColor='none'
                     color='none'
                     onClick={this.handleOpenStatusEdits}
-                    className={_s.marginLeft5PX}
+                    className={_s.ml5}
                   >
                     <Text size='small' color='secondary'>
                       Edited

app/javascript/gabsocial/components/status_list/index.js

@@ -1 +0,0 @@
-export { default } from '../status_list'

app/javascript/gabsocial/components/tab_bar.js

@@ -10,7 +10,7 @@ export default class TabBar extends PureComponent {
     const { tabs, large } = this.props
 
     return (
-      <div className={[_s.default, _s.height53PX, _s.paddingHorizontal5PX, _s.flexRow].join(' ')}>
+      <div className={[_s.default, _s.height53PX, _s.px5, _s.flexRow].join(' ')}>
         { !!tabs &&
           tabs.map((tab, i) => (
             <TabBarItem key={`tab-bar-item-${i}`} {...tab} large={large} />

app/javascript/gabsocial/components/tab_bar_item.js

@@ -45,10 +45,10 @@ class TabBarItem extends PureComponent {
       alignItemsCenter: 1,
       justifyContentCenter: 1,
       borderBottom2PX: 1,
-      paddingVertical5PX: 1,
+      py5: 1,
       borderColorTransparent: !isCurrent,
       borderColorBrand: isCurrent,
-      marginRight5PX: large,
+      mr5: large,
     })
 
     const textParentClasses = cx({
@@ -57,8 +57,8 @@ class TabBarItem extends PureComponent {
       alignItemsCenter: 1,
       justifyContentCenter: 1,
       radiusSmall: 1,
-      paddingHorizontal10PX: !large,
+      px10: !large,
-      paddingHorizontal15PX: large,
+      px15: large,
       backgroundSubtle2Dark_onHover: !isCurrent,
     })
 

app/javascript/gabsocial/components/textarea.js

@@ -37,22 +37,22 @@ export default class Textarea extends PureComponent {
       outlineNone: 1,
       lineHeight125: 1,
       displayBlock: 1,
-      paddingVertical10PX: 1,
+      py10: 1,
       backgroundTransparent: 1,
       fontSize15PX: 1,
       flexGrow1: 1,
       heightMax100VH: 1,
       resizeVertical: 1,
-      paddingHorizontal5PX: !!prependIcon,
+      px5: !!prependIcon,
-      paddingLeft15PX: !prependIcon,
+      pl15: !prependIcon,
-      paddingRight15PX: !hasClear,
+      pr15: !hasClear,
     })
 
     return (
       <div>
         {
           !!title &&
-          <div className={[_s.default, _s.marginBottom10PX, _s.paddingLeft15PX].join(' ')}>
+          <div className={[_s.default, _s.mb10, _s.pl15].join(' ')}>
             <Text size='small' weight='medium' color='secondary'>
               {title}
             </Text>

app/javascript/gabsocial/components/timeline_compose_block.js

@@ -55,14 +55,14 @@ class TimelineComposeBlock extends ImmutablePureComponent {
     }
 
     return (
-      <section className={[_s.default, _s.marginBottom15PX].join(' ')}>
+      <section className={[_s.default, _s.mb15].join(' ')}>
         <Block>
-          <div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.paddingHorizontal15PX, _s.paddingVertical2PX].join(' ')}>
+          <div className={[_s.default, _s.backgroundSubtle, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2].join(' ')}>
             <Heading size='h5'>
               {intl.formatMessage(messages.createPost)}
             </Heading>
           </div>
-          <div className={[_s.default, _s.flexRow, _s.paddingHorizontal15PX, _s.paddingVertical15PX].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.px15, _s.py15].join(' ')}>
             <ComposeFormContainer {...rest} />
           </div>
         </Block>

app/javascript/gabsocial/components/trends_panel_item.js

@@ -47,18 +47,18 @@ export default class TrendingItem extends ImmutablePureComponent {
     return (
       <NavLink
         to='/test'
-        className={[_s.default, _s.noUnderline, _s.paddingHorizontal15PX, _s.paddingVertical5PX, _s.borderColorSecondary, _s.borderBottom1PX,  _s.backgroundSubtle_onHover].join(' ')}
+        className={[_s.default, _s.noUnderline, _s.px15, _s.py5, _s.borderColorSecondary, _s.borderBottom1PX,  _s.backgroundSubtle_onHover].join(' ')}
         onMouseEnter={() => this.handleOnMouseEnter()}
         onMouseLeave={() => this.handleOnMouseLeave()}
       >
-        <div className={[_s.default, _s.flexRow, _s.marginTop5PX].join(' ')}>
+        <div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}>
           <Text size='small' color='secondary'>1</Text>
           <DotTextSeperator />
-          <Text size='small' color='secondary' className={_s.marginLeft5PX}>Politics</Text>
+          <Text size='small' color='secondary' className={_s.ml5}>Politics</Text>
         </div>
-        <div className={[_s.default, _s.paddingVertical5PX].join(' ')}>
+        <div className={[_s.default, _s.py5].join(' ')}>
           <Text color='primary' weight='bold' size='medium'>Trump Campaign</Text>
-          <Text color='secondary' className={[_s.marginTop5PX, _s.marginBottom10PX].join(' ')}>46.7K Gabs</Text>
+          <Text color='secondary' className={[_s.mt5, _s.mb10].join(' ')}>46.7K Gabs</Text>
           <TrendingItemCard />
         </div>
       </NavLink>

app/javascript/gabsocial/components/trends_panel_item_card.js

@@ -50,7 +50,7 @@ export default class TrendingItemCard extends ImmutablePureComponent {
     // URL with title, description, image
     return (
       <div className={[_s.default, _s.flexRow, _s.overflowHidden, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall, _s.backgroundSubtle_onHover].join(' ')}>
-        <div className={[_s.default, _s.flexNormal, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
+        <div className={[_s.default, _s.flexNormal, _s.py10, _s.px10].join(' ')}>
           <Text color='secondary'  className={_s.lineHeight15}>
             NYPost
           </Text>

app/javascript/gabsocial/components/upload_area.js

@@ -60,7 +60,7 @@ class UploadArea extends PureComponent {
               opacity: backgroundOpacity
             }}
           >
-            <div className={[_s.default, _s.width340PX, _s.height260PX, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
+            <div className={[_s.default, _s.width340PX, _s.height260PX, _s.px10, _s.py10].join(' ')}>
               <div
                 className={[_s.default, _s.positionAbsolute, _s.backgroundColorPrimary, _s.height100PC, _s.width100PC, _s.radiusSmall].join(' ')}
                 style={{

app/javascript/gabsocial/components/user_stat.js

@@ -28,7 +28,7 @@ export default class UserStat extends PureComponent {
       <NavLink
         to={to}
         title={`${value} ${title}`}
-        className={[_s.default, _s.flexGrow1, _s.cursorPointer, _s.noUnderline, _s.paddingRight15PX].join(' ')}
+        className={[_s.default, _s.flexGrow1, _s.cursorPointer, _s.noUnderline, _s.pr15].join(' ')}
         onMouseEnter={() => this.handleOnMouseEnter()}
         onMouseLeave={() => this.handleOnMouseLeave()}
       >

app/javascript/gabsocial/features/account_gallery.js

@@ -94,7 +94,7 @@ class AccountGallery extends ImmutablePureComponent {
         <div
           role='feed'
           onScroll={this.handleScroll}
-          className={[_s.default, _s.flexRow, _s.flexWrap, _s.heightMin50VH, _s.paddingVertical5PX, _s.paddingHorizontal5PX].join(' ')}
+          className={[_s.default, _s.flexRow, _s.flexWrap, _s.heightMin50VH, _s.py5, _s.px5].join(' ')}
         >
 
           {

app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js

@@ -17,7 +17,7 @@ export default class CharacterCounter extends PureComponent {
     const dashoffset = circumference * (1 - diff)
 
     return (
-      <div className={[_s.default, _s.marginRight10PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
+      <div className={[_s.default, _s.mr10, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
         <svg width={actualRadius * 2} height={actualRadius * 2} viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}>
           <circle fill='none' cx={actualRadius} cy={actualRadius} r={radius} fill="none" stroke="#e6e6e6" strokeWidth="2" />
           <circle style={{

app/javascript/gabsocial/features/compose/components/compose_extra_button.js

@@ -39,8 +39,8 @@ export default class ComposeExtraButton extends PureComponent {
 
     const containerClasses = cx({
       default: 1,
-      marginRight10PX: !small,
+      mr10: !small,
-      marginRight2PX: small,
+      mr2: small,
     })
 
     const btnClasses = cx({
@@ -52,15 +52,15 @@ export default class ComposeExtraButton extends PureComponent {
       backgroundSubtle: !hovering && !active,
       backgroundSubtle2: hovering && !active,
       backgroundColorBrandLight: active,
-      paddingVertical10PX: !small,
+      py10: !small,
-      paddingHorizontal10PX: !small,
+      px10: !small,
-      paddingVertical5PX: small,
+      py5: small,
-      paddingHorizontal5PX: small,
+      px5: small,
     })
 
     const titleClasses = cx({
       default: 1,
-      marginLeft5PX: 1,
+      ml5: 1,
       text: 1,
       lineHeight15: 1,
       fontSize12PX: 1,

app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js

@@ -243,26 +243,26 @@ class ComposeForm extends ImmutablePureComponent {
       flexRow: shouldCondense,
       radiusSmall: shouldCondense,
       backgroundSubtle: shouldCondense,
-      paddingHorizontal5PX: shouldCondense,
+      px5: shouldCondense,
     })
 
     const actionsContainerClasses = cx({
       default: 1,
       flexRow: 1,
       alignItemsCenter: 1,
-      marginTop10PX: !shouldCondense,
+      mt10: !shouldCondense,
     })
 
     const avatarContainerClasses = cx({
       default: 1,
-      marginRight10PX: 1,
+      mr10: 1,
-      marginTop5PX: shouldCondense,
+      mt5: shouldCondense,
     })
 
     const contentWarningClasses = cx({
       default: 1,
-      paddingTop5PX: 1,
+      pt5: 1,
-      paddingBottom10PX: 1,
+      pb10: 1,
       borderBottom1PX: 1,
       borderColorSecondary: 1,
       displayNone: !spoiler
@@ -355,7 +355,7 @@ class ComposeForm extends ImmutablePureComponent {
             {
               !shouldCondense &&
               <Button
-                className={[_s.fontSize15PX, _s.paddingHorizontal15PX].join(' ')}
+                className={[_s.fontSize15PX, _s.px15].join(' ')}
                 onClick={this.handleSubmit}
                 disabled={disabledButton}
               >

app/javascript/gabsocial/features/compose/components/poll_form.js

@@ -68,17 +68,17 @@ class PollFormOption extends ImmutablePureComponent {
 
     const toggleClasses = cx({
       default: 1,
-      paddingHorizontal10PX: 1,
+      px10: 1,
-      paddingVertical10PX: 1,
+      py10: 1,
       borderColorSecondary: 1,
       border1PX: 1,
       outlineNone: 1,
-      marginRight10PX: 1,
+      mr10: 1,
       circle: !isPollMultiple,
     })
 
     return (
-      <li className={[_s.default, _s.flexRow, _s.marginBottom10PX].join(' ')}>
+      <li className={[_s.default, _s.flexRow, _s.mb10].join(' ')}>
         <label className={[_s.default, _s.flexRow, _s.flexGrow1, _s.alignItemsCenter].join(' ')}>
           <span
             className={toggleClasses}
@@ -106,7 +106,7 @@ class PollFormOption extends ImmutablePureComponent {
             narrow
             circle
             backgroundColor='none'
-            className={[_s.marginLeft5PX, _s.justifyContentCenter].join(' ')}
+            className={[_s.ml5, _s.justifyContentCenter].join(' ')}
             icon='close'
             iconWidth='8px'
             iconHeight='8px'
@@ -167,7 +167,7 @@ class PollForm extends ImmutablePureComponent {
     if (!options) return null
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
+      <div className={[_s.default, _s.px10, _s.py10, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
         <ul className={[_s.default, _s.listStyleNone].join(' ')}>
           {
             options.map((title, i) => (
@@ -192,12 +192,12 @@ class PollForm extends ImmutablePureComponent {
                 outline
                 backgroundColor='none'
                 color='brand'
-                className={[_s.alignItemsCenter, _s.marginRight10PX].join(' ')}
+                className={[_s.alignItemsCenter, _s.mr10].join(' ')}
                 onClick={this.handleAddOption}
                 icon='add'
                 iconWidth='14px'
                 iconHeight='14px'
-                iconClassName={[_s.fillColorBrand, _s.marginRight5PX].join(' ')}
+                iconClassName={[_s.fillColorBrand, _s.mr5].join(' ')}
               >
                 <Text color='brand'>
                   {intl.formatMessage(messages.add_option)}

app/javascript/gabsocial/features/followers.js

@@ -74,12 +74,12 @@ class Followers extends ImmutablePureComponent {
 
     return (
       <Block>
-        <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.justifyContentCenter, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+        <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
           <Heading size='h3'>
             {intl.formatMessage(messages.followers)}
           </Heading>
         </div>
-        <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+        <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
           <ScrollableList
             scrollKey='followers'
             hasMore={hasMore}

app/javascript/gabsocial/features/following.js

@@ -74,12 +74,12 @@ class Following extends ImmutablePureComponent {
 
     return (
       <Block>
-        <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX, _s.justifyContentCenter, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
+        <div className={[_s.default, _s.px15, _s.py10, _s.justifyContentCenter, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
           <Heading size='h3'>
             {intl.formatMessage(messages.follows)}
           </Heading>
         </div>
-        <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+        <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
           <ScrollableList
             scrollKey='following'
             hasMore={hasMore}

app/javascript/gabsocial/features/group_create.js

@@ -145,7 +145,7 @@ class Create extends ImmutablePureComponent {
 				<Divider invisible />
 
 				<Button
-					className={_s.marginLeft10PX}
+					className={_s.ml10}
 				>
 					<Text color='white'>
 						{intl.formatMessage(!!group ? messages.update : messages.create)}

app/javascript/gabsocial/features/list_create.js

@@ -52,7 +52,7 @@ class ListCreate extends PureComponent {
           disabled={disabled}
         />
 
-        <div className={[_s.default, _s.marginVertical10PX, _s.paddingVertical5PX, _s.marginLeft10PX].join(' ')}>
+        <div className={[_s.default, _s.my10, _s.py5, _s.ml10].join(' ')}>
           <Text color='secondary' size='small'>
             Lists are private and only you can see who is on a list.<br/>
             No one else can view your lists. No one knows that they are on your list.
@@ -60,7 +60,7 @@ class ListCreate extends PureComponent {
         </div>
 
         <Button
-          className={_s.marginLeft10PX}
+          className={_s.ml10}
         >
           <Text color='white'>
             {intl.formatMessage(messages.create)}

app/javascript/gabsocial/features/notifications/components/notification/notification-alt.js

@@ -41,27 +41,27 @@ class Notification extends ImmutablePureComponent {
     const { status, notificationType, accounts } = this.props
 
     return (
-      <div className={[_s.default, _s.paddingHorizontal10PX].join(' ')}>
+      <div className={[_s.default, _s.px10].join(' ')}>
         <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.marginVertical10PX, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
-            <Icon id='apps' height='20px' width='20px' className={_s.marginTop5PX} />
+            <Icon id='apps' height='20px' width='20px' className={_s.mt5} />
 
-            <div className={[_s.default, _s.marginLeft15PX].join(' ')}>
+            <div className={[_s.default, _s.ml15].join(' ')}>
               <div className={[_s.default, _s.flexRow].join(' ')}>
                 {
                   accounts.slice(0, 6).map((account, i) => (
                     <NavLink
                       to={`/${account.get('acct')}`}
                       key={`fav-avatar-${i}`}
-                      className={_s.marginRight5PX}
+                      className={_s.mr5}
                     >
                       <Avatar size='30' account={account} />
                     </NavLink>
                   ))
                 }
               </div>
-              <div className={[_s.default, _s.paddingTop10PX].join(' ')}>
+              <div className={[_s.default, _s.pt10].join(' ')}>
                 <div className={[_s.default, _s.flexRow].join(' ')}>
                   <div className={_s.text}>
                     {
@@ -76,7 +76,7 @@ class Notification extends ImmutablePureComponent {
                 </div>
               </div>
 
-              <div className={[_s.default, _s.paddingTop10PX].join(' ')}>
+              <div className={[_s.default, _s.pt10].join(' ')}>
                 <Text color='secondary' size='medium'>
                   post this at 1-14-2020 12:15pm (edited)
                 </Text>
@@ -102,28 +102,28 @@ class Notification extends ImmutablePureComponent {
     return (
       <NavLink
         to={`/`}
-        className={[_s.default, _s.paddingHorizontal10PX, _s.backgroundSubtle_onHover].join(' ')}
+        className={[_s.default, _s.px10, _s.backgroundSubtle_onHover].join(' ')}
       >
         <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.marginVertical10PX, _s.paddingVertical10PX, _s.paddingHorizontal10PX].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
 
-            <Icon id='apps' height='20px' width='20px' className={_s.marginTop5PX} />
+            <Icon id='apps' height='20px' width='20px' className={_s.mt5} />
 
-            <div className={[_s.default, _s.marginLeft15PX].join(' ')}>
+            <div className={[_s.default, _s.ml15].join(' ')}>
               <div className={[_s.default, _s.flexRow].join(' ')}>
                 {
                   accounts.slice(0, 6).map((account, i) => (
                     <NavLink
                       to={`/${account.get('acct')}`}
                       key={`fav-avatar-${i}`}
-                      className={_s.marginRight5PX}
+                      className={_s.mr5}
                     >
                       <Avatar size='30' account={account} />
                     </NavLink>
                   ))
                 }
               </div>
-              <div className={[_s.default, _s.paddingTop10PX].join(' ')}>
+              <div className={[_s.default, _s.pt10].join(' ')}>
                 <div className={[_s.default, _s.flexRow].join(' ')}>
                   <div className={_s.text}>
                     {
@@ -138,7 +138,7 @@ class Notification extends ImmutablePureComponent {
                 </div>
               </div>
 
-              <div className={[_s.default, _s.paddingTop10PX].join(' ')}>
+              <div className={[_s.default, _s.pt10].join(' ')}>
                 <Text color='secondary' size='medium'>
                   post this at 1-14-2020 12:15pm (edited)
                 </Text>

app/javascript/gabsocial/features/status/components/card/card.js

@@ -161,13 +161,13 @@ export default class Card extends ImmutablePureComponent {
       )
 
     const description = (
-      <div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
+      <div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
         {title}
-        <p className={[_s.default, _s.displayFlex, _s.text, _s.marginVertical5PX, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
+        <p className={[_s.default, _s.displayFlex, _s.text, _s.my5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
           {trim(card.get('description') || '', maxDescription)}
         </p>
         <span className={[_s.default, _s.marginTopAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
-          <Icon id='link' width='10px' height='10px' className={[_s.fillColorSecondary, _s.marginRight5PX].join(' ')} fixedWidth />
+          <Icon id='link' width='10px' height='10px' className={[_s.fillColorSecondary, _s.mr5].join(' ')} fixedWidth />
           {provider}
         </span>
       </div>
@@ -191,7 +191,7 @@ export default class Card extends ImmutablePureComponent {
       }
 
       return (
-        <div className={[_s.default, _s.width100PC, _s.paddingHorizontal10PX].join(' ')}>
+        <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
           <div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}>
             <div className={[_s.default, _s.width100PC].join(' ')}>
               <div className={[_s.default, _s.width100PC, _s.paddingTop5625PC].join(' ')}>
@@ -200,7 +200,7 @@ export default class Card extends ImmutablePureComponent {
                 { !embed &&
                   <div className={[_s.default, _s.positionAbsolute, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
                     <button
-                      className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}
+                      className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
                       onClick={this.handleEmbedClick}
                     >
                       <Icon id={iconVariant} className={[_s.fillColorWhite].join(' ')}/>
@@ -221,14 +221,14 @@ export default class Card extends ImmutablePureComponent {
       )
     } else {
       embed = (
-        <div className={[_s.default, _s.paddingVertical15PX, _s.paddingHorizontal15PX, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+        <div className={[_s.default, _s.py15, _s.px15, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
           <Icon id='file-text' width='22px' height='22px' className={_s.fillColorSecondary} />
         </div>
       )
     }
 
     return (
-      <div className={[_s.default, _s.width100PC, _s.paddingHorizontal10PX].join(' ')}>
+      <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
         <a
           href={card.get('url')}
           className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.backgroundSubtle_onHover, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}

app/javascript/gabsocial/features/status/status.js

@@ -73,6 +73,8 @@ const makeMapStateToProps = () => {
 
       // ONLY Direct descendants
       descendantsIds = state.getIn(['contexts', 'replies', status.get('id')])
+
+      console.log("descendantsIds:", descendantsIds)
     }
 
     return {
@@ -439,7 +441,7 @@ class Status extends ImmutablePureComponent {
 
           {
             descendantsIds && descendantsIds.size > 0 &&
-            <div className={[_s.default, _s.marginRight10PX, _s.marginLeft10PX, _s.marginBottom10PX, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}/>
+            <div className={[_s.default, _s.mr10, _s.ml10, _s.mb10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}/>
           }
 
           {descendants}

app/javascript/gabsocial/features/video/video.js

@@ -456,8 +456,8 @@ class Video extends PureComponent {
       default: 1,
       positionAbsolute: 1,
       circle: 1,
-      paddingHorizontal10PX: 1,
+      px10: 1,
-      paddingVertical10PX: 1,
+      py10: 1,
       backgroundColorBrand: 1,
       marginLeftNeg5PX: 1,
       z3: 1,
@@ -469,7 +469,7 @@ class Video extends PureComponent {
     const progressClasses = cx({
       default: 1,
       radiusSmall: 1,
-      marginTop10PX: 1,
+      mt10: 1,
       positionAbsolute: 1,
       height4PX: 1,
     })
@@ -549,19 +549,19 @@ class Video extends PureComponent {
           ref={this.setVolumeRef}
         >
           <div
-            className={[_s.default, _s.radiusSmall, _s.marginVertical10PX, _s.positionAbsolute, _s.width4PX, _s.marginLeft10PX, _s.backgroundColorPrimaryOpaque].join(' ')}
+            className={[_s.default, _s.radiusSmall, _s.my10, _s.positionAbsolute, _s.width4PX, _s.ml10, _s.backgroundColorPrimaryOpaque].join(' ')}
             style={{
               height: '102px',
             }}
           />
           <div
-            className={[_s.default, _s.radiusSmall, _s.marginVertical10PX, _s.bottom0, _s.positionAbsolute, _s.width4PX, _s.marginLeft10PX, _s.backgroundColorPrimary].join(' ')}
+            className={[_s.default, _s.radiusSmall, _s.my10, _s.bottom0, _s.positionAbsolute, _s.width4PX, _s.ml10, _s.backgroundColorPrimary].join(' ')}
             style={{
               height: `${volumeHeight}px`
             }}
           />
           <span
-            className={[_s.default, _s.cursorPointer, _s.positionAbsolute, _s.circle, _s.paddingHorizontal5PX, _s.boxShadow1, _s.marginBottomNeg5PX, _s.paddingVertical5PX, _s.backgroundColorPrimary, _s.z3].join(' ')}
+            className={[_s.default, _s.cursorPointer, _s.positionAbsolute, _s.circle, _s.px5, _s.boxShadow1, _s.marginBottomNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')}
             tabIndex='0'
             style={{
               marginLeft: '7px',
@@ -570,7 +570,7 @@ class Video extends PureComponent {
           />
         </div>
 
-        <div className={[_s.default, _s.z2, _s.paddingHorizontal15PX, _s.videoPlayerControlsBackground, _s.positionAbsolute, _s.bottom0, _s.right0, _s.left0].join(' ')}>
+        <div className={[_s.default, _s.z2, _s.px15, _s.videoPlayerControlsBackground, _s.positionAbsolute, _s.bottom0, _s.right0, _s.left0].join(' ')}>
 
           <div
             className={[_s.default, _s.cursorPointer, _s.height22PX, _s.videoPlayerSeek].join(' ')}
@@ -591,7 +591,7 @@ class Video extends PureComponent {
             />
           </div>
 
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.paddingBottom5PX, _s.noSelect].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.pb5, _s.noSelect].join(' ')}>
             <Button
               narrow
               backgroundColor='none'
@@ -601,7 +601,7 @@ class Video extends PureComponent {
               iconWidth='16px'
               iconHeight='16px'
               iconClassName={_s.fillColorWhite}
-              className={_s.paddingLeft0}
+              className={_s.pl0}
             />
 
             <div className={[_s.default, _s.marginLeftAuto, _s.flexRow, _s.alignItemsCenter].join(' ')}>
@@ -621,7 +621,7 @@ class Video extends PureComponent {
                 iconWidth='24px'
                 iconHeight='24px'
                 iconClassName={_s.fillColorWhite}
-                className={[_s.paddingHorizontal10PX, _s.marginLeft10PX].join(' ')}
+                className={[_s.px10, _s.ml10].join(' ')}
                 onMouseEnter={this.handleMouseEnterAudio}
                 onMouseLeave={this.handleMouseLeaveAudio}
               />
@@ -635,7 +635,7 @@ class Video extends PureComponent {
                 iconWidth='20px'
                 iconHeight='20px'
                 iconClassName={_s.fillColorWhite}
-                className={[_s.paddingHorizontal10PX, _s.paddingRight0].join(' ')}
+                className={[_s.px10, _s.pr0].join(' ')}
               />
             </div>
           </div>

app/javascript/gabsocial/layouts/default_layout.js

@@ -26,7 +26,7 @@ export default class DefaultLayout extends PureComponent {
         <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
 
           <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
-            <div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+            <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width645PX].join(' ')}>
                 <ColumnHeader
                   title={title}
@@ -43,7 +43,7 @@ export default class DefaultLayout extends PureComponent {
 
           <div className={[_s.default, _s.height53PX].join(' ')}></div>
 
-          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
+          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
             <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
               <div className={_s.default}>
                 {children}

app/javascript/gabsocial/layouts/group_layout.js

@@ -51,7 +51,7 @@ export default class GroupLayout extends ImmutablePureComponent {
         <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
 
           <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
-            <div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+            <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width645PX].join(' ')}>
                 <ColumnHeader
                   title={title}
@@ -68,21 +68,21 @@ export default class GroupLayout extends ImmutablePureComponent {
 
           <div className={[_s.default, _s.height53PX].join(' ')}></div>
 
-          <div className={[_s.default, _s.width1015PX, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
+          <div className={[_s.default, _s.width1015PX, _s.pl15, _s.py15].join(' ')}>
 
-            <div className={[_s.default, _s.z1, _s.width100PC, _s.marginBottom15PX].join(' ')}>
+            <div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}>
               <Block>
                 <div className={[_s.default, _s.width100PC].join(' ')}>
                   <Image className={_s.height350PX} src='https://gab.com/media/user/bz-5cf53d08403d4.jpeg' />
                   <div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}>
-                    <div className={[_s.default, _s.flexRow, _s.height100PC, _s.paddingHorizontal10PX].join(' ')}>
+                    <div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}>
                       <TabBar tabs={tabs} />
                       <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.marginLeftAuto].join(' ')}>
                         <Button
                           color='primary'
                           backgroundColor='tertiary'
                           radiusSmall
-                          className={_s.marginRight5PX}
+                          className={_s.mr5}
                         >
                           <Text color='inherit' size='small'>
                             Leave/Join
@@ -92,7 +92,7 @@ export default class GroupLayout extends ImmutablePureComponent {
                           color='primary'
                           backgroundColor='tertiary'
                           radiusSmall
-                          className={_s.marginRight5PX}
+                          className={_s.mr5}
                         >
                           <Text color='inherit' size='small'>
                             Share
@@ -102,7 +102,7 @@ export default class GroupLayout extends ImmutablePureComponent {
                           radiusSmall
                           color='primary'
                           backgroundColor='tertiary'
-                          className={_s.marginRight5PX}
+                          className={_s.mr5}
                           icon='ellipsis'
                         />
                       </div>

app/javascript/gabsocial/layouts/profile_layout.js

@@ -45,30 +45,30 @@ export default class ProfileLayout extends ImmutablePureComponent {
 
         <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
 
-          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
+          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
             <div className={[_s.default, _s.z1, _s.width100PC].join(' ')}>
               <div className={[_s.default, _s.height350PX, _s.width100PC, _s.radiusSmall, _s.overflowHidden].join(' ')}>
                 <Image className={_s.height350PX} src={account.get('header')} />
               </div>
 
               <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary, _s.width100PC].join(' ')}>
-                <div className={[_s.default, _s.flexRow, _s.paddingHorizontal15PX].join(' ')}>
+                <div className={[_s.default, _s.flexRow, _s.px15].join(' ')}>
                   <Image
                     className={[_s.circle, _s.marginTopNeg75PX, _s.borderColorWhite, _s.border2PX].join(' ')}
                     height='150px'
                     width='150px'
                     src={account.get('avatar')}
                   />
-                  <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+                  <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
                     <DisplayName account={account} multiline large />
                   </div>
                 </div>
 
-                <div className={[_s.default, _s.flexRow, _s.borderBottom1PX, _s.borderColorSecondary, _s.marginTop5PX, _s.height53PX].join(' ')}>
+                <div className={[_s.default, _s.flexRow, _s.borderBottom1PX, _s.borderColorSecondary, _s.mt5, _s.height53PX].join(' ')}>
                   <div className={[_s.default].join(' ')}>
                     <TabBar tabs={tabs} large />
                   </div>
-                  <div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.paddingVertical5PX].join(' ')}>
+                  <div className={[_s.default, _s.flexRow, _s.marginLeftAuto, _s.py5].join(' ')}>
                     <Button
                       outline
                       icon='ellipsis'
@@ -77,7 +77,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
                       iconClassName={_s.fillColorBrand}
                       color='brand'
                       backgroundColor='none'
-                      className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.marginRight10PX, _s.paddingHorizontal10PX].join(' ')}
+                      className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
                     />
                     <Button
                       outline
@@ -87,17 +87,17 @@ export default class ProfileLayout extends ImmutablePureComponent {
                       iconClassName={_s.fillColorBrand}
                       color='brand'
                       backgroundColor='none'
-                      className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.marginRight10PX, _s.paddingHorizontal10PX].join(' ')}
+                      className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
                     />
                     <Button
                       className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
                     >
-                      <span className={[_s.paddingHorizontal15PX].join(' ')}>
+                      <span className={[_s.px15].join(' ')}>
                         <Text
                           color='white'
                           weight='bold'
                           size='medium'
-                          className={[_s.paddingHorizontal15PX].join(' ')}
+                          className={[_s.px15].join(' ')}
                         >
                           Follow
                         </Text>
@@ -107,7 +107,7 @@ export default class ProfileLayout extends ImmutablePureComponent {
                 </div>
               </div>
 
-              <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingRight15PX, _s.paddingVertical15PX].join(' ')}>
+              <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pr15, _s.py15].join(' ')}>
                 <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
                   <div className={_s.default}>
                     {children}

app/javascript/gabsocial/layouts/search_layout.js

@@ -25,7 +25,7 @@ export default class SearchLayout extends PureComponent {
         <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}>
 
           <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.positionFixed].join(' ')}>
-            <div className={[_s.default, _s.height53PX, _s.paddingLeft15PX, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
+            <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
               <div className={[_s.default, _s.width645PX].join(' ')}>
                 <ColumnHeader
                   title={'Search'}
@@ -42,7 +42,7 @@ export default class SearchLayout extends PureComponent {
 
           <div className={[_s.default, _s.height53PX].join(' ')}></div>
 
-          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.paddingLeft15PX, _s.paddingVertical15PX].join(' ')}>
+          <div className={[_s.default, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween, _s.pl15, _s.py15].join(' ')}>
             <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
               <div className={_s.default}>
                 {children}

app/javascript/gabsocial/reducers/popover.js

@@ -16,8 +16,7 @@ export default function popoverMenu(state = initialState, action) {
       console.log("POPOVER_OPEN:", action)
       return {
         popoverType: action.popoverType,
-        placement: action.placement,
+        popoverProps: action.popoverProps,
-        keyboard: action.keyboard
       }
     case POPOVER_CLOSE:
       console.log("POPOVER_CLOSE:", action)

app/javascript/styles/global.css

@@ -707,12 +707,12 @@ body {
   z-index: 4;
 }
 
-.marginVertical5PX {
+.my5 {
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-.marginLeft5PX {
+.ml5 {
   margin-left: 5px;
 }
 
@@ -724,28 +724,28 @@ body {
   margin-bottom: -5px;
 }
 
-.marginRight2PX {
+.mr2 {
   margin-right: 2px;
 }
 
-.marginRight5PX {
+.mr5 {
   margin-right: 5px;
 }
 
-.marginVertical10PX {
+.my10 {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
-.marginRight10PX {
+.mr10 {
   margin-right: 10px;
 }
 
-.marginLeft15PX {
+.ml15 {
   margin-left: 15px;
 }
 
-.marginLeft10PX {
+.ml10 {
   margin-left: 10px;
 }
 
@@ -757,19 +757,19 @@ body {
   margin-right: auto;
 }
 
-.marginBottom15PX {
+.mb15 {
   margin-bottom: 15px;
 }
 
-.marginBottom10PX {
+.mb10 {
   margin-bottom: 10px;
 }
 
-.marginTop10PX {
+.mt10 {
   margin-top: 10px;
 }
 
-.marginTop5PX {
+.mt5 {
   margin-top: 5px;
 }
 
@@ -793,86 +793,81 @@ body {
   padding-top: 25%;
 }
 
-.paddingTop10PX {
+.pt10 {
   padding-top: 10px;
 }
 
-.paddingTop5PX {
+.pt5 {
   padding-top: 5px;
 }
 
-.paddingTop2PX {
+.pt2 {
   padding-top: 2px;
 }
 
-.paddingBottom10PX {
+.pb10 {
   padding-bottom: 10px;
 }
 
-.paddingBottom5PX {
+.pb5 {
   padding-bottom: 5px;
 }
 
-.paddingHorizontal15PX {
+.px15 {
   padding-left: 15px;
   padding-right: 15px;
 }
 
-.paddingLeft15PX {
+.pl15 {
   padding-left: 15px;
 }
 
-.paddingLeft0 {
+.pl0 {
   padding-left: 0;
 }
 
-.paddingRight0 {
+.pr0 {
   padding-right: 0;
 }
 
-.paddingRight15PX {
+.pr15 {
   padding-right: 15px;
 }
 
-.paddingVertical5PX {
+.py5 {
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
-.paddingVertical10PX {
+.py10 {
   padding-top: 10px;
   padding-bottom: 10px;
 }
 
-.paddingVertical15PX {
+.py15 {
   padding-top: 15px;
   padding-bottom: 15px;
 }
 
-.paddingVertical2PX {
+.py2 {
   padding-top: 2px;
   padding-bottom: 2px;
 }
 
-.paddingBottom15PX {
+.pb15 {
   padding-bottom: 15px;
 }
 
-.paddingHorizontal5PX {
+.px5 {
   padding-left: 5px;
   padding-right: 5px;
 }
 
-.paddingHorizontal10PX {
+.px10 {
   padding-left: 10px;
   padding-right: 10px;
 }
 
-.paddingHorizontal20PX {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
 .opacity0 {
   opacity: 0;
 }

package.json

@@ -140,6 +140,7 @@
     "react-motion": "^0.5.2",
     "react-notification": "^6.8.4",
     "react-overlays": "^0.8.3",
+    "react-popper": "^1.3.7",
     "react-redux": "^6.0.1",
     "react-redux-loading-bar": "^4.0.8",
     "react-router-dom": "^4.1.1",

yarn.lock

@@ -11455,7 +11455,7 @@ react-popper@^1.3.4:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-popper@^1.3.6:
+react-popper@^1.3.6, react-popper@^1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
   integrity sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==