Progress

app/javascript/gabsocial/components/bundle_column_error/bundle_column_error.js

@@ -1,5 +1,4 @@
 import { defineMessages, injectIntl } from 'react-intl';
-import Column from '../column';
 import IconButton from '../icon_button';
 
 const messages = defineMessages({
@@ -25,12 +24,10 @@ class BundleColumnError extends PureComponent {
     const { intl: { formatMessage } } = this.props;
 
     return (
-      <Column>
+      <div className='error-column'>
-        <div className='error-column'>
+        <IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
-          <IconButton title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
+        {formatMessage(messages.body)}
-          {formatMessage(messages.body)}
+      </div>
-        </div>
-      </Column>
     );
   }
 

app/javascript/gabsocial/components/column/column.js

@@ -1,30 +0,0 @@
-import { isMobile } from '../../utils/is_mobile';
-
-export default class Column extends PureComponent {
-
-  static propTypes = {
-    heading: PropTypes.string,
-    icon: PropTypes.string,
-    children: PropTypes.node,
-    active: PropTypes.bool,
-    hideHeadingOnMobile: PropTypes.bool,
-    backBtn: PropTypes.oneOf([
-      'normal',
-      'slim',
-    ]),
-  };
-
-  render () {
-    const { heading, icon, children, active, hideHeadingOnMobile, backBtn } = this.props;
-
-    const showHeading = heading && (!hideHeadingOnMobile || (hideHeadingOnMobile && !isMobile(window.innerWidth)));
-    const columnHeaderId = showHeading && heading.replace(/ /g, '-');
-
-    return (
-      <div role='region' aria-labelledby={columnHeaderId} className={[_s.default].join(' ')}>
-        {children}
-      </div>
-    );
-  }
-
-}

app/javascript/gabsocial/components/column/column.scss

@@ -1,22 +0,0 @@
-.column {
-  display: flex;
-  position: relative;
-  box-sizing: border-box;
-  flex-direction: column;
-  // width: 350px;
-  flex: 1 1 100%;
-  overflow: hidden;
-
-  @media screen and (min-width: 631px) {
-    flex: 0 0 auto;
-    padding: 10px 5px;
-
-    &:first-child {
-      padding-left: 10px;
-    }
-
-    &:last-child {
-      padding-right: 10px;
-    }
-  }
-}

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

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

app/javascript/gabsocial/components/column_settings_heading/column_settings_heading.js

@@ -1,14 +0,0 @@
-export default class ColumnSettingsHeading extends PureComponent {
-  static propTypes = {
-    heading: PropTypes.object.isRequired,
-    id: PropTypes.string,
-  };
-
-  render() {
-    const { heading, id } = this.props;
-
-    return (
-      <span id={id} className='column-settings-heading'>{heading}</span>
-    )
-  }
-}

app/javascript/gabsocial/components/column_settings_heading/column_settings_heading.scss

@@ -1,7 +0,0 @@
-.column-settings-heading {
-  display: block;
-  color: $darker-text-color;
-  cursor: default;
-  font-weight: 500;
-  margin-bottom: 10px;
-}

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

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

app/javascript/gabsocial/components/error_boundary/error_boundary.scss

@@ -1,19 +0,0 @@
-.error-boundary {
-  &__container {
-    @include margin-center(auto);
-  }
-
-  span {
-    display: block;
-    text-align: center;
-    color: $secondary-text-color;
-  }
-
-  &__link {
-    display: block;
-    text-align: center;
-    color: $gab-brand-default;
-
-    @include margin-center(15px);
-  }
-}

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

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

app/javascript/gabsocial/components/intersection_observer_article.js

@@ -1,6 +1,6 @@
 import { is } from 'immutable';
-import scheduleIdleTask from '../../utils/schedule_idle_task';
+import scheduleIdleTask from '../utils/schedule_idle_task';
-import getRectFromEntry from '../../utils/get_rect_from_entry';
+import getRectFromEntry from '../utils/get_rect_from_entry';
 
 // Diff these props in the "rendered" state
 const updateOnPropsForRendered = ['id', 'index', 'listLength'];

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

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

app/javascript/gabsocial/components/intersection_observer_article/intersection_observer_article.scss

@@ -1,4 +0,0 @@
-article {
-  // TEMPORARY - content of columns may be significantly altered
-  // background: $gab-background-container;
-}

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

@@ -1,11 +1,11 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import classNames from 'classnames';
-import StatusContent from '../../status_content';
+import StatusContent from '../status_content';
-import Avatar from '../../avatar';
+import Avatar from '../avatar';
-import RelativeTimestamp from '../../relative_timestamp';
+import RelativeTimestamp from '../relative_timestamp';
-import DisplayName from '../../display_name';
+import DisplayName from '../display_name';
-import IconButton from '../../icon_button';
+import IconButton from '../icon_button';
 
 export default class ActionsModal extends ImmutablePureComponent {
 

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

@@ -1,12 +1,12 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
-import Button from '../../button';
+import Button from '../button';
-import StatusContent from '../../status_content';
+import StatusContent from '../status_content';
-import Avatar from '../../avatar';
+import Avatar from '../avatar';
-import RelativeTimestamp from '../../relative_timestamp';
+import RelativeTimestamp from '../relative_timestamp';
-import DisplayName from '../../display_name';
+import DisplayName from '../display_name';
-import Icon from '../../icon';
+import Icon from '../icon';
 
 const messages = defineMessages({
   cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },

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

@@ -1,9 +1,9 @@
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 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' },

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

@@ -1,7 +1,9 @@
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, FormattedMessage } from 'react-intl'
-import Button from '../../button';
+import ModalLayout from './modal_layout'
+import Button from '../button'
 
-export default @injectIntl
+export default
+@injectIntl
 class ConfirmationModal extends PureComponent {
 
   static propTypes = {
@@ -13,34 +15,34 @@ class ConfirmationModal extends PureComponent {
     onSecondary: PropTypes.func,
     intl: PropTypes.object.isRequired,
     onCancel: PropTypes.func,
-  };
+  }
 
   componentDidMount() {
-    this.button.focus();
+    this.button.focus()
   }
 
   handleClick = () => {
-    this.props.onClose();
+    this.props.onClose()
-    this.props.onConfirm();
+    this.props.onConfirm()
   }
 
   handleSecondary = () => {
-    this.props.onClose();
+    this.props.onClose()
-    this.props.onSecondary();
+    this.props.onSecondary()
   }
 
   handleCancel = () => {
-    const {onClose, onCancel} = this.props;
+    const {onClose, onCancel} = this.props
-    onClose();
+    onClose()
-    if (onCancel) onCancel();
+    if (onCancel) onCancel()
   }
 
   setRef = (c) => {
-    this.button = c;
+    this.button = c
   }
 
   render () {
-    const { message, confirm, secondary } = this.props;
+    const { message, confirm, secondary } = this.props
 
     return (
       <div className='modal-root__modal confirmation-modal'>
@@ -58,7 +60,7 @@ class ConfirmationModal extends PureComponent {
           <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
         </div>
       </div>
-    );
+    )
   }
 
 }

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

@@ -1,6 +1,6 @@
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
-import api from '../../../api'
+import api from '../../api'
 
 const messages = defineMessages({
   embed: { id: 'status.embed', defaultMessage: 'Embed' },

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

@@ -1,9 +1,9 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import classNames from 'classnames';
-import { changeUploadCompose } from '../../../actions/compose';
+import { changeUploadCompose } from '../../actions/compose';
-import { getPointerPosition } from '../../../utils/element_position';
+import { getPointerPosition } from '../../utils/element_position';
-import ImageLoader from '../../image_loader';
+import ImageLoader from '../image_loader';
 
 const mapStateToProps = (state, { id }) => ({
   media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),

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

@@ -1,27 +0,0 @@
-import ActionsModal from './actions_modal/actions_modal';
-import BoostModal from './boost_modal/boost_modal';
-import ComposeModal from './compose_modal/compose_modal';
-import ConfirmationModal from './confirmation_modal/confirmation_modal';
-import EmbedModal from './embed_modal/embed_modal';
-import FocalPointModal from './focal_point_modal/focal_point_modal';
-import HotkeysModal from './hotkeys_modal';
-import MediaModal from './media_modal/media_modal';
-import MuteModal from './mute_modal/mute_modal';
-import ReportModal from './report_modal/report_modal';
-import UnauthorizedModal from './unauthorized_modal';
-import VideoModal from './video_modal/video_modal';
-
-export {
-  ActionsModal,
-  BoostModal,
-  ComposeModal,
-  ConfirmationModal,
-  EmbedModal,
-  FocalPointModal,
-  HotkeysModal,
-  MediaModal,
-  MuteModal,
-  ReportModal,
-  UnauthorizedModal,
-  VideoModal,
-};

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

@@ -3,11 +3,11 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ReactSwipeableViews from 'react-swipeable-views';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Video from '../../../features/video';
+import Video from '../../features/video';
-import ExtendedVideoPlayer from '../../extended_video_player';
+import ExtendedVideoPlayer from '../extended_video_player';
-import IconButton from '../../icon_button';
+import IconButton from '../icon_button';
-import ImageLoader from '../../image_loader';
+import ImageLoader from '../image_loader';
-import Icon from '../../icon';
+import Icon from '../icon';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },

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

@@ -1,18 +1,17 @@
 import ModalBase from './modal_base'
 import Bundle from '../../features/ui/util/bundle'
 import BundleModalError from '../bundle_modal_error'
-import {
+import ActionsModal from './actions_modal'
-  ActionsModal,
+import MediaModal from './media_modal'
-  MediaModal,
+// import VideoModal from './video_modal'
-  VideoModal,
+import BoostModal from './boost_modal'
-  BoostModal,
+import ConfirmationModal from './confirmation_modal'
-  ConfirmationModal,
+import FocalPointModal from './focal_point_modal'
-  FocalPointModal,
+import HotkeysModal from './hotkeys_modal'
-  HotkeysModal,
+import ComposeModal from './compose_modal'
-  ComposeModal,
+import UnauthorizedModal from './unauthorized_modal'
-  UnauthorizedModal,
+import ProUpgradeModal from './pro_upgrade_modal'
-  ProUpgradeModal,
+import ModalLoading from './modal_loading'
-} from '.'
 import {
   MuteModal,
   ReportModal,
@@ -21,11 +20,10 @@ import {
   ListAdder,
   StatusRevisionModal,
 } from '../../features/ui/util/async-components'
-import ModalLoading from '../modal_loading'
 
 const MODAL_COMPONENTS = {
   'MEDIA': () => Promise.resolve({ default: MediaModal }),
-  'VIDEO': () => Promise.resolve({ default: VideoModal }),
+  // 'VIDEO': () => Promise.resolve({ default: VideoModal }),
   'BOOST': () => Promise.resolve({ default: BoostModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'MUTE': MuteModal,

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

@@ -1,9 +1,9 @@
 import { injectIntl, defineMessages } from 'react-intl';
-import { closeModal } from '../../../actions/modal';
+import { closeModal } from '../../actions/modal';
-import { muteAccount } from '../../../actions/accounts';
+import { muteAccount } from '../../actions/accounts';
-import { toggleHideNotifications } from '../../../actions/mutes';
+import { toggleHideNotifications } from '../../actions/mutes';
-import ToggleSwitch from '../../toggle_switch';
+import ToggleSwitch from '../toggle_switch';
-import Button from '../../button';
+import Button from '../button';
 
 const messages = defineMessages({
   muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },

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

@@ -1,63 +1,63 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePureComponent from 'react-immutable-pure-component'
-import { me } from '../initial_state';
+import Button from '../button'
-import IconButton from './icon_button';
+import Text from '../text'
-import Icon from './icon';
+import ModalLayout from './modal_layout'
 
 const messages = defineMessages({
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+  title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
-});
+  text: { id: 'pro_upgrade_modal.text', defaultMessage: 'Gab is fully funded by people like you. Please consider supporting us on our mission to defend free expression online for all people.' },
-
+  benefits: { id: 'pro_upgrade_modal.benefits', defaultMessage: 'Here are just some of the benefits that thousands of GabPRO members receive:' },
-const mapStateToProps = state => {
+})
-  return {
-    account: state.getIn(['accounts', me]),
-  };
-};
 
+export default
+@injectIntl
 class ProUpgradeModal extends ImmutablePureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
-    onClose: PropTypes.func.isRequired,
+  }
-  };
 
-  onClickClose = () => {
+  render() {
-    this.props.onClose('PRO_UPGRADE');
+    const { intl } = this.props
-  };
-
-  render () {
-    const { intl } = this.props;
 
     return (
-      <div className='modal-root__modal compose-modal pro-upgrade-modal'>
+      <ModalLayout title={intl.formatMessage(messages.title)}>
-        <div className='compose-modal__header'>
+        <div>
-          <h3 className='compose-modal__header__title'><FormattedMessage id='promo.gab_pro' defaultMessage='Upgrade to GabPRO' /></h3>
+          <Text>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+            {intl.formatMessage(messages.text)}
+          </Text>
+          <Text>
+            {intl.formatMessage(messages.benefits)}
+          </Text>
         </div>
-        <div className='compose-modal__content pro-upgrade-modal__content'>
+
-          <div>
+        <ul>
-            <span className="pro-upgrade-modal__text">
+          <li>
-              <FormattedMessage id='pro_upgrade_modal.text' defaultMessage='Gab is fully funded by people like you. Please consider supporting us on our mission to defend free expression online for all people.' />
+            <Text>Schedule Posts</Text>
-              <FormattedMessage id='pro_upgrade_modal.benefits' defaultMessage='Here are just some of the benefits that thousands of GabPRO members receive:' />
+          </li>
-            </span>
+          <li>
-            <ul className="pro-upgrade-modal__list">
+            <Text>Get Verified</Text>
-              <li>Schedule Posts</li>
+          </li>
-              <li>Get Verified</li>
+          <li>
-              <li>Create Groups</li>
+            <Text>Create Groups</Text>
-              <li>Larger Video and Image Uploads</li>
+          </li>
-              <li>Receive the PRO Badge</li>
+          <li>
-              <li>Remove in-feed promotions</li>
+            <Text>Larger Video and Image Uploads</Text>
-              <li>More value being added daily!</li>
+          </li>
-            </ul>
+          <li>
-            <a href='https://pro.gab.com' className='pro-upgrade-modal__button button'>
+            <Text>Receive the PRO Badge</Text>
-              <Icon id='arrow-up' fixedWidth/>
+          </li>
-              <FormattedMessage id='promo.gab_pro' defaultMessage='Upgrade to GabPRO' />
+          <li>
-            </a>
+            <Text>Remove in-feed promotions</Text>
-          </div>
+          </li>
-        </div>
+        </ul>
-      </div>
+
-    );
+        <Button icon='pro' href='https://pro.gab.com'>
+          {intl.formatMessage(messages.title)}
+        </Button>
+
+      </ModalLayout>
+    )
   }
 }
-
-export default injectIntl(connect(mapStateToProps)(ProUpgradeModal));

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

@@ -2,13 +2,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl } from 'react-intl';
 import { OrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { changeReportComment, changeReportForward, submitReport } from '../../../actions/reports';
+import { changeReportComment, changeReportForward, submitReport } from '../../actions/reports';
-import { expandAccountTimeline } from '../../../actions/timelines';
+import { expandAccountTimeline } from '../../actions/timelines';
-import { makeGetAccount } from '../../../selectors';
+import { makeGetAccount } from '../../selectors';
-import StatusCheckBox from '../../status_check_box';
+import StatusCheckBox from '../status_check_box';
-import ToggleSwitch from '../../toggle_switch';
+import ToggleSwitch from '../toggle_switch';
-import Button from '../../button';
+import Button from '../button';
-import IconButton from '../../icon_button';
+import IconButton from '../icon_button';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },

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

@@ -2,8 +2,8 @@
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import StatusRevisionListContainer from '../../../containers/status_revision_list_container';
+import StatusRevisionListContainer from '../../containers/status_revision_list_container';
-import IconButton from '../../../components/icon_button';
+import IconButton from '../icon_button';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },

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

@@ -1,7 +1,7 @@
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
-import Video from '../../../features/video';
+import Video from '../../features/video';
 
 export const previewState = 'previewVideoModal';
 

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

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

app/javascript/gabsocial/components/scrollable_list.js

@@ -1,9 +1,9 @@
 import { throttle } from 'lodash';
 import { List as ImmutableList } from 'immutable';
-import IntersectionObserverArticleContainer from '../../containers/intersection_observer_article_container';
+import IntersectionObserverArticleContainer from '../containers/intersection_observer_article_container';
-import IntersectionObserverWrapper from '../../features/ui/util/intersection_observer_wrapper';
+import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
-import ColumnIndicator from '../column_indicator';
+import ColumnIndicator from './column_indicator';
-import LoadMore from '../load_more';
+import LoadMore from './load_more';
 
 const MOUSE_IDLE_DELAY = 300;
 

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

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

app/javascript/gabsocial/components/scrollable_list/scrollable_list.scss

@@ -1,6 +0,0 @@
-.scrollable-list {
-  &--flex {
-    display: flex;
-    flex-direction: column;
-  }
-}

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

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

app/javascript/gabsocial/components/section_headline_bar/section_headline_bar.js

@@ -1,62 +0,0 @@
-import { NavLink } from 'react-router-dom';
-import classNames from 'classnames';
-import Icon from '../icon';
-
-class SectionHeadlineBarItem extends PureComponent {
-  static propTypes = {
-    to: PropTypes.string,
-    icon: PropTypes.string,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    title: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.node,
-    ]),
-    exact: PropTypes.bool,
-  };
-
-  render() {
-    const { to, title, icon, className, onClick, exact } = this.props;
-
-    const classes = classNames('section-header-bar__item', className);
-
-    if (to) {
-      return (
-        <NavLink className={classes} exact={exact} to={to}>{title}</NavLink>
-      )
-    } else if (icon) {
-      return (
-        <button className={classes} onClick={onClick} title={title}>
-          <Icon id={icon} fixedWidth />
-        </button>
-      )
-    }
-
-    return (
-      <button className={classes} onClick={onClick}>{title}</button>
-    )
-  }
-};
-
-export default class SectionHeadlineBar extends PureComponent {
-  static propTypes = {
-    items: PropTypes.array.isRequired,
-    className: PropTypes.string,
-  };
-
-  render() {
-    const { items, className } = this.props;
-
-    const classes = classNames('section-headline-bar', className);
-
-    return (
-      <div className={classes}>
-        {
-          items.forEach((item, i) => (
-            <SectionHeadlineBarItem key={`shbi-${i}`} {...item} />
-          ))
-        }
-      </div>
-    )
-  }
-}

app/javascript/gabsocial/components/section_headline_bar/section_headline_bar.scss

@@ -1,58 +0,0 @@
-.section-headline-bar {
-  background: darken($ui-base-color, 4%);
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  cursor: default;
-  display: flex;
-  flex-shrink: 0;
-
-  button {
-    background: darken($ui-base-color, 4%);
-    border: 0;
-    margin: 0;
-  }
-
-  button,
-  a {
-    display: block;
-    flex: 1 1 auto;
-    color: $secondary-text-color;
-    padding: 15px 0;
-    text-decoration: none;
-    position: relative;
-
-    @include text-sizing(14px, 500, 1, center);
-
-    &.active {
-      color: $primary-text-color;
-
-      &::before,
-      &::after {
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        border-style: solid;
-        border-width: 0 10px 10px;
-        border-color: transparent transparent lighten($ui-base-color, 8%);
-
-        @include pseudo;
-        @include size(0);
-      }
-
-      &::after {
-        bottom: -1px;
-        border-color: transparent transparent $ui-base-color;
-      }
-    }
-  }
-}
-
-.account-section-headline {
-
-  button,
-  a {
-    flex: none;
-    padding: 18px 15px;
-
-    @include text-sizing(16px, 600);
-  }
-}

app/javascript/gabsocial/components/timeline_queue_button_header.js

@@ -1,6 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { shortNumberFormat } from '../../utils/numbers';
+import { shortNumberFormat } from '../utils/numbers';
 
 export default class TimelineQueueButtonHeader extends PureComponent {
 

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

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

app/javascript/gabsocial/components/timeline_queue_button_header/timeline_queue_button_header.scss

@@ -1,29 +0,0 @@
-.timeline-queue-header {
-  display: block;
-  width: 100%;
-  max-height: 0px;
-  position: relative;
-  background-color: darken($ui-base-color, 8%);
-  border-bottom: 1px solid;
-  border-top: 1px solid;
-  border-color: darken($ui-base-color, 4%);
-  transition: max-height 2.5s ease;
-  overflow: hidden;
-
-  &--extended {
-    max-height: 46px;
-  }
-
-  &__btn {
-    display: block;
-    cursor: pointer;
-    color: $secondary-text-color;
-
-    @include size(100%);
-    @include text-sizing(14px, 400, 46px, center);
-
-    span {
-      height: 46px;
-    }
-  }
-}

app/javascript/gabsocial/containers/media_container.js

@@ -8,7 +8,7 @@ import Card from '../features/status/components/card';
 import Poll from '../components/poll';
 import MediaGallery from '../components/media_gallery';
 import ModalRoot from '../components/modal/modal_root';
-import { MediaModal } from '../components/modal';
+import MediaModal from '../components/modal/media_modal';
 
 const { localeData, messages } = getLocale();
 addLocaleData(localeData);

app/javascript/gabsocial/containers/status_revision_list_container.js

@@ -1,5 +1,5 @@
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { load } from '../../../actions/status_revision_list';
+import { load } from '../actions/status_revision_list';
 import StatusRevisionList from '../components/status_revision_list';
 
 class StatusRevisionListContainer extends ImmutablePureComponent {

app/javascript/gabsocial/features/account_gallery/account_gallery.js

@@ -10,10 +10,8 @@ import { expandAccountMediaTimeline } from '../../actions/timelines';
 import { me } from '../../initial_state';
 import { getAccountGallery } from '../../selectors';
 import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
 import MediaItem from './components/media_item';
 import LoadMore from '../../components/load_more';
-import SectionHeadlineBar from '../../components/section_headline_bar';
 
 const messages = defineMessages({
   posts: { id: 'account.posts', defaultMessage: 'Gabs' },
@@ -63,7 +61,7 @@ class LoadMoreMedia extends ImmutablePureComponent {
     this.props.onLoadMore(this.props.maxId);
   }
 
-  render () {
+  render() {
     return (
       <LoadMore
         disabled={this.props.disabled}
@@ -93,7 +91,7 @@ class AccountGallery extends ImmutablePureComponent {
     width: 323,
   };
 
-  componentDidMount () {
+  componentDidMount() {
     const { params: { username }, accountId } = this.props;
 
     if (accountId && accountId !== -1) {
@@ -104,7 +102,7 @@ class AccountGallery extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
       this.props.dispatch(fetchAccount(nextProps.params.accountId));
       this.props.dispatch(expandAccountMediaTimeline(nextProps.accountId));
@@ -154,14 +152,14 @@ class AccountGallery extends ImmutablePureComponent {
     }
   }
 
-  render () {
+  render() {
     const { attachments, isLoading, hasMore, isAccount, accountId, unavailable, accountUsername, intl } = this.props;
     const { width } = this.state;
 
     if (!isAccount && accountId !== -1) {
       return (<ColumnIndicator type='missing' />);
     } else if (accountId === -1 || (!attachments && isLoading)) {
-      return ( <ColumnIndicator type='loading' /> );
+      return (<ColumnIndicator type='loading' />);
     } else if (unavailable) {
       return (<ColumnIndicator type='error' message={intl.formatMessage(messages.error)} />);
     }
@@ -173,9 +171,8 @@ class AccountGallery extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
+      <div className='scrollable-list scrollable-list--flex' onScroll={this.handleScroll}>
-        <div className='scrollable-list scrollable-list--flex' onScroll={this.handleScroll}>
+        { /* <SectionHeadlineBar
-          <SectionHeadlineBar
             className='account-section-headline'
             items={[
               {
@@ -194,32 +191,31 @@ class AccountGallery extends ImmutablePureComponent {
                 title: intl.formatMessage(messages.media),
               },
             ]}
-          />
+          /> */ }
 
-          <div role='feed' className='account-gallery__container' ref={this.handleRef}>
+        <div role='feed' className='account-gallery__container' ref={this.handleRef}>
-            {attachments.map((attachment, index) => attachment === null ? (
+          {attachments.map((attachment, index) => attachment === null ? (
-              <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
+            <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
-            ) : (
+          ) : (
               <MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
             ))}
 
-            {
+          {
-              attachments.size == 0 &&
+            attachments.size == 0 &&
-              <div className='empty-column-indicator'>
+            <div className='empty-column-indicator'>
-                <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
+              <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
-              </div>
-            }
-
-            {loadOlder}
-          </div>
-
-          {isLoading && attachments.size === 0 && (
-            <div className='slist__append'>
-              <ColumnIndicator type='loading' />
             </div>
-          )}
+          }
+
+          {loadOlder}
         </div>
-      </Column>
+
+        {isLoading && attachments.size === 0 && (
+          <div className='slist__append'>
+            <ColumnIndicator type='loading' />
+          </div>
+        )}
+      </div>
     );
   }
 

app/javascript/gabsocial/features/account_timeline/account_timeline.js

@@ -8,8 +8,6 @@ import { fetchAccountIdentityProofs } from '../../actions/identity_proofs';
 import { me } from '../../initial_state';
 import StatusList from '../../components/status_list/status_list';
 import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
-import SectionHeadlineBar from '../../components/section_headline_bar' ;
 
 const messages = defineMessages({
   posts: { id: 'account.posts', defaultMessage: 'Gabs' },
@@ -70,7 +68,7 @@ class AccountTimeline extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  componentWillMount () {
+  componentWillMount() {
     const { params: { username }, accountId, withReplies } = this.props;
 
     if (accountId && accountId !== -1) {
@@ -87,7 +85,7 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId) || nextProps.withReplies !== this.props.withReplies) {
       this.props.dispatch(fetchAccount(nextProps.accountId));
       this.props.dispatch(fetchAccountIdentityProofs(nextProps.accountId));
@@ -106,7 +104,7 @@ class AccountTimeline extends ImmutablePureComponent {
     }
   }
 
-  render () {
+  render() {
     const { statusIds, featuredStatusIds, isLoading, hasMore, isAccount, accountId, unavailable, accountUsername, intl } = this.props;
 
     if (!isAccount && accountId !== -1) {
@@ -117,38 +115,38 @@ class AccountTimeline extends ImmutablePureComponent {
       return (<ColumnIndicator type='error' message={intl.formatMessage(messages.error)} />);
     }
 
+    /* <SectionHeadlineBar
+        className='account-section-headline'
+        items={[
+          {
+            exact: true,
+            to: `/${accountUsername}`,
+            title: intl.formatMessage(messages.posts),
+          },
+          {
+            exact: true,
+            to: `/${accountUsername}/with_replies`,
+            title: intl.formatMessage(messages.postsWithReplies),
+          },
+          {
+            exact: true,
+            to: `/${accountUsername}/media`,
+            title: intl.formatMessage(messages.media),
+          },
+        ]}
+      />
+      */
+
     return (
-      <Column>
+      <StatusList
-        <SectionHeadlineBar
+        scrollKey='account_timeline'
-          className='account-section-headline'
+        statusIds={statusIds}
-          items={[
+        featuredStatusIds={featuredStatusIds}
-            {
+        isLoading={isLoading}
-              exact: true,
+        hasMore={hasMore}
-              to: `/${accountUsername}`,
+        onLoadMore={this.handleLoadMore}
-              title: intl.formatMessage(messages.posts),
+        emptyMessage={<FormattedMessage id='empty_column.account_timeline' defaultMessage='No gabs here!' />}
-            },
+      />
-            {
-              exact: true,
-              to: `/${accountUsername}/with_replies`,
-              title: intl.formatMessage(messages.postsWithReplies),
-            },
-            {
-              exact: true,
-              to: `/${accountUsername}/media`,
-              title: intl.formatMessage(messages.media),
-            },
-          ]}
-        />
-        <StatusList
-          scrollKey='account_timeline'
-          statusIds={statusIds}
-          featuredStatusIds={featuredStatusIds}
-          isLoading={isLoading}
-          hasMore={hasMore}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='empty_column.account_timeline' defaultMessage='No gabs here!' />}
-        />
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/blocks/blocks.js

@@ -3,7 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
 import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
 import AccountContainer from '../../containers/account_container';
 import { fetchBlocks, expandBlocks } from '../../actions/blocks';
 import ScrollableList from '../../components/scrollable_list';
@@ -45,18 +44,16 @@ class Blocks extends ImmutablePureComponent {
     }
 
     return (
-      <Column icon='ban' heading={intl.formatMessage(messages.heading)} backBtn='slim'>
+      <ScrollableList
-        <ScrollableList
+        scrollKey='blocks'
-          scrollKey='blocks'
+        onLoadMore={this.handleLoadMore}
-          onLoadMore={this.handleLoadMore}
+        hasMore={hasMore}
-          hasMore={hasMore}
+        emptyMessage={<FormattedMessage id='empty_column.blocks' defaultMessage="You haven't blocked any users yet." />}
-          emptyMessage={<FormattedMessage id='empty_column.blocks' defaultMessage="You haven't blocked any users yet." />}
+      >
-        >
+        {accountIds.map(id =>
-          {accountIds.map(id =>
+          <AccountContainer key={id} id={id} />
-            <AccountContainer key={id} id={id} />
+        )}
-          )}
+      </ScrollableList>
-        </ScrollableList>
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/domain_blocks/domain_blocks.js

@@ -5,7 +5,6 @@ import { debounce } from 'lodash';
 import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';
 import DomainContainer from '../../containers/domain_container';
 import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
 import ScrollableList from '../../components/scrollable_list';
 
 const messages = defineMessages({
@@ -46,18 +45,16 @@ class Blocks extends ImmutablePureComponent {
     }
 
     return (
-      <Column icon='minus-circle' heading={intl.formatMessage(messages.heading)} backBtn='slim'>
+      <ScrollableList
-        <ScrollableList
+        scrollKey='domain_blocks'
-          scrollKey='domain_blocks'
+        onLoadMore={this.handleLoadMore}
-          onLoadMore={this.handleLoadMore}
+        hasMore={hasMore}
-          hasMore={hasMore}
+        emptyMessage={<FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no hidden domains yet.' />}
-          emptyMessage={<FormattedMessage id='empty_column.domain_blocks' defaultMessage='There are no hidden domains yet.' />}
+      >
-        >
+        {domains.map(domain =>
-          {domains.map(domain =>
+          <DomainContainer key={domain} domain={domain} />
-            <DomainContainer key={domain} domain={domain} />
+        )}
-          )}
+      </ScrollableList>
-        </ScrollableList>
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/favourited_statuses/favourited_statuses.js

@@ -4,7 +4,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { debounce } from 'lodash';
 import { fetchFavouritedStatuses, expandFavouritedStatuses } from '../../actions/favourites';
 import { meUsername } from '../../initial_state';
-import Column from '../../components/column';
 import StatusList from '../../components/status_list';
 import ColumnIndicator from '../../components/column_indicator';
 
@@ -44,7 +43,6 @@ class Favourites extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
         <StatusList
           statusIds={statusIds}
           scrollKey='favourited_statuses'
@@ -53,7 +51,6 @@ class Favourites extends ImmutablePureComponent {
           onLoadMore={this.handleLoadMore}
           emptyMessage={<FormattedMessage id='empty_column.favourited_statuses' defaultMessage="You don't have any favourite gabs yet. When you favourite one, it will show up here." />}
         />
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/follow_requests/follow_requests.js

@@ -4,7 +4,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
 import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';
 import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
 import AccountAuthorize from './components/account_authorize';
 import ScrollableList from '../../components/scrollable_list';
 
@@ -45,18 +44,16 @@ class FollowRequests extends ImmutablePureComponent {
     }
 
     return (
-      <Column icon='user-plus' heading={intl.formatMessage(messages.heading)} backBtn='slim'>
+      <ScrollableList
-        <ScrollableList
+        scrollKey='follow_requests'
-          scrollKey='follow_requests'
+        onLoadMore={this.handleLoadMore}
-          onLoadMore={this.handleLoadMore}
+        hasMore={hasMore}
-          hasMore={hasMore}
+        emptyMessage={<FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />}
-          emptyMessage={<FormattedMessage id='empty_column.follow_requests' defaultMessage="You don't have any follow requests yet. When you receive one, it will show up here." />}
+      >
-        >
+        {accountIds.map(id =>
-          {accountIds.map(id =>
+          <AccountAuthorize key={id} id={id} />
-            <AccountAuthorize key={id} id={id} />
+        )}
-          )}
+      </ScrollableList>
-        </ScrollableList>
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/followers/followers.js

@@ -11,7 +11,6 @@ import {
 } from '../../actions/accounts';
 import { me } from '../../initial_state';
 import AccountContainer from '../../containers/account_container';
-import Column from '../../components/column';
 import ScrollableList from '../../components/scrollable_list';
 
 const mapStateToProps = (state, { params: { username } }) => {
@@ -52,7 +51,7 @@ class Followers extends ImmutablePureComponent {
     unavailable: PropTypes.bool,
   };
 
-  componentWillMount () {
+  componentWillMount() {
     const { params: { username }, accountId } = this.props;
 
     if (accountId && accountId !== -1) {
@@ -63,7 +62,7 @@ class Followers extends ImmutablePureComponent {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) {
       this.props.dispatch(fetchAccount(nextProps.accountId));
       this.props.dispatch(fetchFollowers(nextProps.accountId));
@@ -76,7 +75,7 @@ class Followers extends ImmutablePureComponent {
     }
   }, 300, { leading: true });
 
-  render () {
+  render() {
     const { accountIds, hasMore, isAccount, accountId, unavailable } = this.props;
 
     if (!isAccount && accountId !== -1) {
@@ -88,18 +87,16 @@ class Followers extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
+      <ScrollableList
-        <ScrollableList
+        scrollKey='followers'
-          scrollKey='followers'
+        hasMore={hasMore}
-          hasMore={hasMore}
+        onLoadMore={this.handleLoadMore}
-          onLoadMore={this.handleLoadMore}
+        emptyMessage={<FormattedMessage id='account.followers.empty' defaultMessage='No one follows this user yet.' />}
-          emptyMessage={<FormattedMessage id='account.followers.empty' defaultMessage='No one follows this user yet.' />}
+      >
-        >
+        {accountIds.map(id =>
-          {accountIds.map(id =>
+          <AccountContainer key={id} id={id} withNote={false} />
-            <AccountContainer key={id} id={id} withNote={false} />
+        )}
-          )}
+      </ScrollableList>
-        </ScrollableList>
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/following/following.js

@@ -11,7 +11,6 @@ import {
 import { me } from '../../initial_state';
 import AccountContainer from '../../containers/account_container';
 import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
 import ScrollableList from '../../components/scrollable_list';
 
 const mapStateToProps = (state, { params: { username } }) => {
@@ -90,18 +89,16 @@ class Following extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
+      <ScrollableList
-        <ScrollableList
+        scrollKey='following'
-          scrollKey='following'
+        hasMore={hasMore}
-          hasMore={hasMore}
+        onLoadMore={this.handleLoadMore}
-          onLoadMore={this.handleLoadMore}
+        emptyMessage={<FormattedMessage id='account.follows.empty' defaultMessage="This user doesn't follow anyone yet." />}
-          emptyMessage={<FormattedMessage id='account.follows.empty' defaultMessage="This user doesn't follow anyone yet." />}
+      >
-        >
+        {accountIds.map(id =>
-          {accountIds.map(id =>
+          <AccountContainer key={id} id={id} withNote={false} />
-            <AccountContainer key={id} id={id} withNote={false} />
+        )}
-          )}
+      </ScrollableList>
-        </ScrollableList>
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/groups/members/index.js

@@ -1,7 +1,6 @@
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
-import ColumnIndicator from '../../../components/column_indicator';
 import {
 	fetchMembers,
 	expandMembers,
@@ -10,7 +9,6 @@ import {
 } from '../../../actions/groups';
 import { FormattedMessage } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
-import Column from '../../../components/column';
 import ScrollableList from '../../../components/scrollable_list';
 import Dropdown from '../../../components/dropdown_menu'
 
@@ -51,15 +49,10 @@ class GroupMembers extends ImmutablePureComponent {
 		const { accountIds, hasMore, group, relationships, dispatch } = this.props;
 		
 		if (!group || !accountIds || !relationships) {
-			return (
+			return <LoadingIndicator />
-				<Column>
-					<LoadingIndicator />
-				</Column>
-			);
 		}
 
 		return (
-			<Column>
 				<ScrollableList
 					scrollKey='members'
 					hasMore={hasMore}
@@ -84,7 +77,6 @@ class GroupMembers extends ImmutablePureComponent {
 						);
 					})}
 				</ScrollableList>
-			</Column>
 		);
 	}
 

app/javascript/gabsocial/features/groups/removed_accounts/index.js

@@ -3,24 +3,23 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
 import ColumnIndicator from '../../../components/column_indicator';
 import {
-  fetchRemovedAccounts,
+	fetchRemovedAccounts,
-  expandRemovedAccounts,
+	expandRemovedAccounts,
-  removeRemovedAccount,
+	removeRemovedAccount,
 } from '../../../actions/groups';
 import { FormattedMessage } from 'react-intl';
 import AccountContainer from '../../../containers/account_container';
-import Column from '../../../components/column';
 import ScrollableList from '../../../components/scrollable_list';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
-  remove: { id: 'groups.removed_accounts', defaultMessage: 'Allow joining' },
+	remove: { id: 'groups.removed_accounts', defaultMessage: 'Allow joining' },
 });
 
 const mapStateToProps = (state, { params: { id } }) => ({
-  group: state.getIn(['groups', id]),
+	group: state.getIn(['groups', id]),
-  accountIds: state.getIn(['user_lists', 'groups_removed_accounts', id, 'items']),
+	accountIds: state.getIn(['user_lists', 'groups_removed_accounts', id, 'items']),
-  hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', id, 'next']),
+	hasMore: !!state.getIn(['user_lists', 'groups_removed_accounts', id, 'next']),
 });
 
 export default @connect(mapStateToProps)
@@ -28,53 +27,51 @@ export default @connect(mapStateToProps)
 class GroupRemovedAccounts extends ImmutablePureComponent {
 
 	static propTypes = {
-	  params: PropTypes.object.isRequired,
+		params: PropTypes.object.isRequired,
-	  dispatch: PropTypes.func.isRequired,
+		dispatch: PropTypes.func.isRequired,
-	  accountIds: ImmutablePropTypes.list,
+		accountIds: ImmutablePropTypes.list,
-	  hasMore: PropTypes.bool,
+		hasMore: PropTypes.bool,
 	};
 
-	componentWillMount () {
+	componentWillMount() {
-	  const { params: { id } } = this.props;
+		const { params: { id } } = this.props;
 
-	  this.props.dispatch(fetchRemovedAccounts(id));
+		this.props.dispatch(fetchRemovedAccounts(id));
 	}
 
-	componentWillReceiveProps (nextProps) {
+	componentWillReceiveProps(nextProps) {
-	  if (nextProps.params.id !== this.props.params.id) {
+		if (nextProps.params.id !== this.props.params.id) {
-	    this.props.dispatch(fetchRemovedAccounts(nextProps.params.id));
+			this.props.dispatch(fetchRemovedAccounts(nextProps.params.id));
-	  }
+		}
 	}
 
 	handleLoadMore = debounce(() => {
-	  this.props.dispatch(expandRemovedAccounts(this.props.params.id));
+		this.props.dispatch(expandRemovedAccounts(this.props.params.id));
 	}, 300, { leading: true });
 
-	render () {
+	render() {
-	  const { accountIds, hasMore, group, intl } = this.props;
+		const { accountIds, hasMore, group, intl } = this.props;
 
-	  if (!group || !accountIds) {
+		if (!group || !accountIds) {
-	    return (<ColumnIndicator type='loading' />);
+			return <ColumnIndicator type='loading' />
-	  }
+		}
 
-	  return (
+		return (
-  <Column>
+			<ScrollableList
-	      <ScrollableList
+				scrollKey='removed_accounts'
-	        scrollKey='removed_accounts'
+				hasMore={hasMore}
-	        hasMore={hasMore}
+				onLoadMore={this.handleLoadMore}
-	        onLoadMore={this.handleLoadMore}
+				emptyMessage={<FormattedMessage id='group.removed_accounts.empty' defaultMessage='This group does not has any removed accounts.' />}
-	        emptyMessage={<FormattedMessage id='group.removed_accounts.empty' defaultMessage='This group does not has any removed accounts.' />}
+			>
-  >
+				{accountIds.map(id => (<AccountContainer
-    {accountIds.map(id => (<AccountContainer
+					key={id}
-	          key={id}
+					id={id}
-	          id={id}
+					actionIcon='remove'
-	          actionIcon='remove'
+					onActionClick={() => this.props.dispatch(removeRemovedAccount(group.get('id'), id))}
-	          onActionClick={() => this.props.dispatch(removeRemovedAccount(group.get('id'), id))}
+					actionTitle={intl.formatMessage(messages.remove)}
-	          actionTitle={intl.formatMessage(messages.remove)}
+				/>))}
-	        />))}
+			</ScrollableList>
-  </ScrollableList>
+		)
-	    </Column>
-	  );
 	}
 
 }

app/javascript/gabsocial/features/hashtag_timeline/hashtag_timeline.js

@@ -3,7 +3,6 @@ import { isEqual } from 'lodash';
 import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines';
 import { connectHashtagStream } from '../../actions/streaming';
 import StatusListContainer from '../../containers/status_list_container';
-import Column from '../../components/column';
 
 const mapStateToProps = (state, props) => ({
   hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}`, 'unread']) > 0,
@@ -102,14 +101,12 @@ class HashtagTimeline extends PureComponent {
     const { id } = this.props.params;
 
     return (
-      <Column heading={`#${id}`}>
+      <StatusListContainer
-        <StatusListContainer
+        scrollKey='hashtag_timeline'
-          scrollKey='hashtag_timeline'
+        timelineId={`hashtag:${id}`}
-          timelineId={`hashtag:${id}`}
+        onLoadMore={this.handleLoadMore}
-          onLoadMore={this.handleLoadMore}
+        emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
-          emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
+      />
-        />
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/home_timeline/components/column_settings/column_settings.js

@@ -3,7 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import { changeSetting, saveSettings } from '../../../../actions/settings';
 import SettingToggle from '../../../../components/setting_toggle';
-import ColumnSettingsHeading from '../../../../components/column_settings_heading';
 
 const mapStateToProps = state => ({
   settings: state.getIn(['settings', 'home']),
@@ -31,9 +30,7 @@ class ColumnSettings extends ImmutablePureComponent {
 
     return (
       <div>
-        <ColumnSettingsHeading
+        <FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' />
-          heading={<FormattedMessage id='home.column_settings.basic' defaultMessage='Basic' />}
-        />
 
         <SettingToggle
           prefix='home_timeline'

app/javascript/gabsocial/features/mutes/mutes.js

@@ -5,7 +5,6 @@ import { debounce } from 'lodash';
 import { fetchMutes, expandMutes } from '../../actions/mutes';
 import AccountContainer from '../../containers/account_container';
 import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
 import ScrollableList from '../../components/scrollable_list';
 
 const messages = defineMessages({
@@ -41,23 +40,21 @@ class Mutes extends ImmutablePureComponent {
     const { intl, hasMore, accountIds } = this.props;
 
     if (!accountIds) {
-      return (<ColumnIndicator type='loading' />);
+      return <ColumnIndicator type='loading' />
     }
 
     return (
-      <Column icon='volume-off' heading={intl.formatMessage(messages.heading)} backBtn='slim'>
+      <ScrollableList
-        <ScrollableList
+        scrollKey='mutes'
-          scrollKey='mutes'
+        onLoadMore={this.handleLoadMore}
-          onLoadMore={this.handleLoadMore}
+        hasMore={hasMore}
-          hasMore={hasMore}
+        emptyMessage={<FormattedMessage id='empty_column.mutes' defaultMessage="You haven't muted any users yet." />}
-          emptyMessage={<FormattedMessage id='empty_column.mutes' defaultMessage="You haven't muted any users yet." />}
+      >
-        >
+        {accountIds.map(id =>
-          {accountIds.map(id =>
+          <AccountContainer key={id} id={id} />
-            <AccountContainer key={id} id={id} />
+        )}
-          )}
+      </ScrollableList>
-        </ScrollableList>
+    )
-      </Column>
-    );
   }
 
 }

app/javascript/gabsocial/features/notifications/components/column_settings/column_settings.js

@@ -3,7 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import ColumnHeaderSettingButton from '../../../../components/column_header_setting_button';
 import SettingToggle from '../../../../components/setting_toggle';
-import ColumnSettingsHeading from '../../../../components/column_settings_heading';
 
 export default class ColumnSettings extends ImmutablePureComponent {
 
@@ -18,14 +17,14 @@ export default class ColumnSettings extends ImmutablePureComponent {
     this.props.onChange(['push', ...path], checked);
   }
 
-  render () {
+  render() {
     const { settings, pushSettings, onChange, onClear } = this.props;
 
     const filterShowStr = <FormattedMessage id='notifications.column_settings.filter_bar.show' defaultMessage='Show' />;
     const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
-    const alertStr  = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
+    const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
-    const showStr   = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
+    const showStr = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
-    const soundStr  = <FormattedMessage id='notifications.column_settings.sound' defaultMessage='Play sound' />;
+    const soundStr = <FormattedMessage id='notifications.column_settings.sound' defaultMessage='Play sound' />;
 
     const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed');
     const pushStr = showPushSettings && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />;
@@ -39,20 +38,13 @@ export default class ColumnSettings extends ImmutablePureComponent {
         />
 
         <div role='group' aria-labelledby='notifications-filter-bar'>
-          <ColumnSettingsHeading
+          <FormattedMessage id='notifications.column_settings.filter_bar.category' defaultMessage='Quick filter bar' />
-            id='notifications-filter-bar'
-            heading={<FormattedMessage id='notifications.column_settings.filter_bar.category' defaultMessage='Quick filter bar' />}
-          />
           <SettingToggle id='show-filter-bar' prefix='notifications' settings={settings} settingPath={['quickFilter', 'show']} onChange={onChange} label={filterShowStr} />
           <SettingToggle id='show-filter-bar' prefix='notifications' settings={settings} settingPath={['quickFilter', 'advanced']} onChange={onChange} label={filterAdvancedStr} />
         </div>
 
         <div role='group' aria-labelledby='notifications-follow'>
-          <ColumnSettingsHeading
+          <FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' />
-            id='notifications-follow'
-            heading={<FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' />}
-          />
-
           <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow']} onChange={onChange} label={alertStr} />
           {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow']} onChange={this.onPushChange} label={pushStr} />}
           <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'follow']} onChange={onChange} label={showStr} />
@@ -60,11 +52,7 @@ export default class ColumnSettings extends ImmutablePureComponent {
         </div>
 
         <div role='group' aria-labelledby='notifications-favourite'>
-          <ColumnSettingsHeading
+          <FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favorites:' />
-            id='notifications-favourite'
-            heading={<FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favorites:' />}
-          />
-
           <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
           {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'favourite']} onChange={this.onPushChange} label={pushStr} />}
           <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'favourite']} onChange={onChange} label={showStr} />
@@ -72,11 +60,7 @@ export default class ColumnSettings extends ImmutablePureComponent {
         </div>
 
         <div role='group' aria-labelledby='notifications-mention'>
-          <ColumnSettingsHeading
+          <FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' />
-            id='notifications-mention'
-            heading={<FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' />}
-          />
-
           <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'mention']} onChange={onChange} label={alertStr} />
           {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'mention']} onChange={this.onPushChange} label={pushStr} />}
           <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'mention']} onChange={onChange} label={showStr} />
@@ -84,11 +68,7 @@ export default class ColumnSettings extends ImmutablePureComponent {
         </div>
 
         <div role='group' aria-labelledby='notifications-reblog'>
-          <ColumnSettingsHeading
+          <FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Reposts:' />
-            id='notifications-reblog'
-            heading={<FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Reposts:' />}
-          />
-
           <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
           {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'reblog']} onChange={this.onPushChange} label={pushStr} />}
           <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={showStr} />
@@ -96,11 +76,7 @@ export default class ColumnSettings extends ImmutablePureComponent {
         </div>
 
         <div role='group' aria-labelledby='notifications-poll'>
-          <ColumnSettingsHeading
+          <FormattedMessage id='notifications.column_settings.poll' defaultMessage='Poll results:' />
-            id='notifications-poll'
-            heading={<FormattedMessage id='notifications.column_settings.poll' defaultMessage='Poll results:' />}
-          />
-
           <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'poll']} onChange={onChange} label={alertStr} />
           {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'poll']} onChange={this.onPushChange} label={pushStr} />}
           <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'poll']} onChange={onChange} label={showStr} />

app/javascript/gabsocial/features/notifications/components/notification_filter_bar/notification_filter_bar.js

@@ -1,5 +1,4 @@
 import { defineMessages, injectIntl } from 'react-intl';
-import SectionHeadlineBar from '../../../../components/section_headline_bar';
 
 const messages = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
@@ -30,7 +29,7 @@ class NotificationFilterBar extends PureComponent {
 
     if (!advancedMode) {
       return (
-        <SectionHeadlineBar
+        { /* <SectionHeadlineBar
           items={[
             {
               className: selectedFilter === 'all' ? 'active' : '',
@@ -43,12 +42,15 @@ class NotificationFilterBar extends PureComponent {
               title: intl.formatMessage(messages.filterMentions),
             }
           ]}
-        />
+        /> */ }
       )
     }
 
     return (
-      <SectionHeadlineBar
+      <div />
+    )
+
+    /* <SectionHeadlineBar
         items={[
           {
             className: selectedFilter === 'all' ? 'active' : '',
@@ -86,8 +88,7 @@ class NotificationFilterBar extends PureComponent {
             icon: 'user-plus',
           },
         ]}
-      />
+      /> */
-    )
   }
 
 }

app/javascript/gabsocial/features/notifications/notifications.js

@@ -15,7 +15,6 @@ import NotificationContainer from './containers/notification_container';
 import ScrollableList from '../../components/scrollable_list';
 import LoadMore from '../../components/load_more';
 // import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
-import Column from '../../components/column';
 
 const messages = defineMessages({
   title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@@ -177,11 +176,11 @@ class Notifications extends ImmutablePureComponent {
     );
 
     return (
-      <Column ref={this.setColumnRef} heading={intl.formatMessage(messages.title)}>
+      <div ref={this.setColumnRef}>
         { /* filterBarContainer */ }
         { /* <TimelineQueueButtonHeader onClick={this.handleDequeueNotifications} count={totalQueuedNotificationsCount} itemType='notification' /> */ }
         { scrollContainer }
-      </Column>
+      </div>
     );
   }
 

app/javascript/gabsocial/features/pinned_statuses/pinned_statuses.js

@@ -3,7 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import { fetchPinnedStatuses } from '../../actions/pin_statuses';
 import { meUsername } from '../../initial_state';
-import Column from '../../components/column';
 import StatusList from '../../components/status_list/status_list';
 import ColumnIndicator from '../../components/column_indicator';
 
@@ -33,18 +32,16 @@ class PinnedStatuses extends ImmutablePureComponent {
     const { statusIds, hasMore, isMyAccount } = this.props;
 
     if (!isMyAccount) {
-      return (<ColumnIndicator type='missing' />);
+      return <ColumnIndicator type='missing' />
     }
 
     return (
-      <Column>
+      <StatusList
-        <StatusList
+        statusIds={statusIds}
-          statusIds={statusIds}
+        scrollKey='pinned_statuses'
-          scrollKey='pinned_statuses'
+        hasMore={hasMore}
-          hasMore={hasMore}
+        emptyMessage={<FormattedMessage id='pinned_statuses.none' defaultMessage='No pins to show.' />}
-          emptyMessage={<FormattedMessage id='pinned_statuses.none' defaultMessage='No pins to show.' />}
+      />
-        />
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/reblogs/reblogs.js

@@ -6,7 +6,6 @@ import { fetchStatus } from '../../actions/statuses';
 import { makeGetStatus } from '../../selectors';
 import AccountContainer from '../../containers/account_container';
 import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
 import ScrollableList from '../../components/scrollable_list';
 
 const mapStateToProps = (state, props) => {
@@ -54,16 +53,14 @@ class Reblogs extends ImmutablePureComponent {
     }
 
     return (
-      <Column>
+      <ScrollableList
-        <ScrollableList
+        scrollKey='reblogs'
-          scrollKey='reblogs'
+        emptyMessage={<FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this gab yet. When someone does, they will show up here.' />}
-          emptyMessage={<FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this gab yet. When someone does, they will show up here.' />}
+      >
-        >
+        {accountIds.map(id =>
-          {accountIds.map(id =>
+          <AccountContainer key={id} id={id} withNote={false} />
-            <AccountContainer key={id} id={id} withNote={false} />
+        )}
-          )}
+      </ScrollableList>
-        </ScrollableList>
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/search/components/header/header.js

@@ -1,5 +1,4 @@
 import { FormattedMessage } from 'react-intl';
-import SectionHeadlineBar from '../../../../components/section_headline_bar';
 
 const mapStateToProps = state => ({
   value: state.getIn(['search', 'value']),
@@ -41,14 +40,14 @@ class Header extends PureComponent {
         </div>
         <div className='search-header__type-filters'>
           <div className='search-header__type-filters-tabs'>
-            <SectionHeadlineBar
+            { /* <SectionHeadlineBar
               items={[
                 {
                   to: '/search',
                   title: <FormattedMessage id='search_results.top' defaultMessage='Top' />
                 }
               ]}
-            />
+            /> */ }
           </div>
         </div>
       </div>

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

@@ -39,7 +39,6 @@ import Icon from '../../components/icon';
 import ColumnIndicator from '../../components/column_indicator';
 import DetailedStatus from './components/detailed_status';
 import ActionBar from './components/detailed_status_action_bar';
-import Column from '../../components/column';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -81,7 +80,7 @@ const makeMapStateToProps = () => {
         const ids = [status.get('id')];
 
         while (ids.length > 0) {
-          let id        = ids.shift();
+          let id = ids.shift();
           const replies = state.getIn(['contexts', 'replies', id]);
 
           if (status.get('id') !== id) {
@@ -134,15 +133,15 @@ class Status extends ImmutablePureComponent {
     loadedStatusId: undefined,
   };
 
-  componentWillMount () {
+  componentWillMount() {
     this.props.dispatch(fetchStatus(this.props.params.statusId));
   }
 
-  componentDidMount () {
+  componentDidMount() {
     attachFullscreenListener(this.onFullScreenChange);
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
       this._scrolledIntoView = false;
       this.props.dispatch(fetchStatus(nextProps.params.statusId));
@@ -359,7 +358,7 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  _selectChild (index, align_top) {
+  _selectChild(index, align_top) {
     const container = this.node;
     const element = container.querySelectorAll('.focusable')[index];
 
@@ -373,7 +372,7 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  renderChildren (list) {
+  renderChildren(list) {
     return list.map(id => (
       <StatusContainer
         key={id}
@@ -389,7 +388,7 @@ class Status extends ImmutablePureComponent {
     this.node = c;
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     if (this._scrolledIntoView) {
       return;
     }
@@ -406,7 +405,7 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     detachFullscreenListener(this.onFullScreenChange);
   }
 
@@ -414,7 +413,7 @@ class Status extends ImmutablePureComponent {
     this.setState({ fullscreen: isFullscreen() });
   }
 
-  render () {
+  render() {
     let ancestors, descendants;
     const { status, ancestorsIds, descendantsIds, intl, domain } = this.props;
 
@@ -442,63 +441,61 @@ class Status extends ImmutablePureComponent {
       toggleSensitive: this.handleHotkeyToggleSensitive,
     };
 
+    /* me &&
+      <ColumnHeader
+        extraButton={(
+          <button
+            className='column-header__button'
+            title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)}
+            aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)}
+            onClick={this.handleToggleAll}
+            aria-pressed={
+              status.get('hidden') ? 'false' : 'true'}
+          >
+            <Icon id={status.get('hidden') ? 'eye-slash' : 'eye'
+            }
+            />
+          </button>
+        )}
+      />
+    */
+
     return (
-      <Column heading={intl.formatMessage(messages.detailedStatus)}>
+      <div ref={this.setRef}>
-        { /* me &&
+        {ancestors}
-          <ColumnHeader
-            extraButton={(
-              <button
-                className='column-header__button'
-                title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)}
-                aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)}
-                onClick={this.handleToggleAll}
-                aria-pressed={
-                  status.get('hidden') ? 'false' : 'true'}
-              >
-                <Icon id={status.get('hidden') ? 'eye-slash' : 'eye'
-                }
-                />
-              </button>
-            )}
-          />
-        */ }
 
-        <div ref={this.setRef}>
+        <HotKeys handlers={handlers}>
-          {ancestors}
+          <div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
+            <DetailedStatus
+              status={status}
+              onOpenVideo={this.handleOpenVideo}
+              onOpenMedia={this.handleOpenMedia}
+              onToggleHidden={this.handleToggleHidden}
+              domain={domain}
+              showMedia={this.state.showMedia}
+              onToggleMediaVisibility={this.handleToggleMediaVisibility}
+            />
 
-          <HotKeys handlers={handlers}>
+            <ActionBar
-            <div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
+              status={status}
-              <DetailedStatus
+              onReply={this.handleReplyClick}
-                status={status}
+              onFavourite={this.handleFavouriteClick}
-                onOpenVideo={this.handleOpenVideo}
+              onReblog={this.handleReblogClick}
-                onOpenMedia={this.handleOpenMedia}
+              onDelete={this.handleDeleteClick}
-                onToggleHidden={this.handleToggleHidden}
+              onDirect={this.handleDirectClick}
-                domain={domain}
+              onMention={this.handleMentionClick}
-                showMedia={this.state.showMedia}
+              onMute={this.handleMuteClick}
-                onToggleMediaVisibility={this.handleToggleMediaVisibility}
+              onMuteConversation={this.handleConversationMuteClick}
-              />
+              onBlock={this.handleBlockClick}
+              onReport={this.handleReport}
+              onPin={this.handlePin}
+              onEmbed={this.handleEmbed}
+            />
+          </div>
+        </HotKeys>
 
-              <ActionBar
+        {descendants}
-                status={status}
+      </div>
-                onReply={this.handleReplyClick}
-                onFavourite={this.handleFavouriteClick}
-                onReblog={this.handleReblogClick}
-                onDelete={this.handleDeleteClick}
-                onDirect={this.handleDirectClick}
-                onMention={this.handleMentionClick}
-                onMute={this.handleMuteClick}
-                onMuteConversation={this.handleConversationMuteClick}
-                onBlock={this.handleBlockClick}
-                onReport={this.handleReport}
-                onPin={this.handlePin}
-                onEmbed={this.handleEmbed}
-              />
-            </div>
-          </HotKeys>
-
-          {descendants}
-        </div>
-      </Column>
     );
   }
 

app/javascript/gabsocial/features/ui/util/async-components.js

@@ -107,15 +107,15 @@ export function Mutes() {
 }
 
 export function MuteModal() {
-  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal')
+  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal/mute_modal')
 }
 
 export function StatusRevisionModal() {
-  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal')
+  return import(/* webpackChunkName: "modals/mute_modal" */'../../../components/modal/status_revision_modal')
 }
 
 export function ReportModal() {
-  return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal')
+  return import(/* webpackChunkName: "modals/report_modal" */'../../../components/modal/report_modal')
 }
 
 export function MediaGallery() {
@@ -127,7 +127,7 @@ export function Video() {
 }
 
 export function EmbedModal() {
-  return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal')
+  return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal/embed_modal')
 }
 
 export function ListEditor() {