Progress

2020-02-19 18:57:07 -05:00
parent be3daea78b
commit e37500c0cf
105 changed files with 1975 additions and 1393 deletions
--- a/app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.js
+++ b/app/javascript/gabsocial/features/account_timeline/components/moved_note/moved_note.js
@@ -2,7 +2,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { NavLink } from 'react-router-dom';
-import AvatarOverlay from '../../../../components/avatar_overlay';
 import DisplayName from '../../../../components/display_name';
 import Icon from '../../../../components/icon';

@@ -13,12 +12,11 @@ export default class MovedNote extends ImmutablePureComponent {
  };

  static propTypes = {
-    from: ImmutablePropTypes.map.isRequired,
    to: ImmutablePropTypes.map.isRequired,
  };

  render () {
-    const { from, to } = this.props;
+    const { to } = this.props;
    const displayNameHtml = { __html: from.get('display_name_html') };

    return (
@@ -38,7 +36,7 @@ export default class MovedNote extends ImmutablePureComponent {

        <NavLink to={`/${this.props.to.get('acct')}`} className='moved-note__display-name'>
          <div className='moved-note__display-avatar'>
-            <AvatarOverlay account={to} friend={from} />
+            <Avatar account={to} />
          </div>
          <DisplayName account={to} />
        </NavLink>
--- a/app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js
+++ b/app/javascript/gabsocial/features/compose/components/character_counter/character_counter.js
@@ -14,9 +14,9 @@ export default class CharacterCounter extends PureComponent {
    const dashoffset = circumference * (1 - diff)

    return (
-      <div className={[styles.default, styles.marginRight10PX, styles.justifyContentCenter, styles.alignItemsCenter].join(' ')}>
+      <div className={[_s.default, _s.marginRight10PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
        <svg width="32" height="32" viewBox="0 0 32 32">
-          <circle fill='none' cx="16" cy="16" r="12" fill="none" stroke="#e6e6e6" stroke-width="2" />
+          <circle fill='none' cx="16" cy="16" r="12" fill="none" stroke="#e6e6e6" strokeWidth="2" />
          <circle style={{
              // transform: 'rotate(-90deg)',
              strokeDashoffset: dashoffset,
--- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js
@@ -1,6 +1,8 @@
 import classNames from 'classnames/bind'
 import Icon from '../../../components/icon'

+const cx = classNames.bind(_s)
+
 export default class ComposeExtraButton extends PureComponent {
  static propTypes = {
    title: PropTypes.string,
@@ -25,8 +27,6 @@ export default class ComposeExtraButton extends PureComponent {
    const { title, disabled, onClick, icon, children } = this.props
    const { hovering } = this.state

-    const cx = classNames.bind(styles)
-
    const btnClasses = cx({
      default: 1,
      circle: 1,
@@ -44,13 +44,13 @@ export default class ComposeExtraButton extends PureComponent {
      text: 1,
      lineHeight15: 1,
      fontSize12PX: 1,
-      fontWeight500: 1,
-      colorSubtle: 1,
+      fontWeightMedium: 1,
+      colorSecondary: 1,
      displayNone: !hovering,
    })

    return (
-      <div className={[styles.default, styles.marginRight10PX].join(' ')}>
+      <div className={[_s.default, _s.marginRight10PX].join(' ')}>
        <button
          className={btnClasses}
          title={title}
@@ -59,7 +59,7 @@ export default class ComposeExtraButton extends PureComponent {
          onMouseEnter={() => this.handleOnMouseEnter()}
          onMouseLeave={() => this.handleOnMouseLeave()}
        >
-          <Icon id={icon} width='18px' height='18px' className={styles.fillColorSubtle} />
+          <Icon id={icon} width='18px' height='18px' className={_s.fillcolorSecondary} />
          <span className={titleClasses}>
            {title}
          </span>
--- a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
@@ -225,7 +225,7 @@ class ComposeForm extends ImmutablePureComponent {

    return (
      <div
-        className={[styles.default, styles.flexGrow1].join(' ')}
+        className={[_s.default, _s.flexGrow1].join(' ')}
        ref={this.setForm}
        onClick={this.handleClick}
      >
@@ -287,8 +287,8 @@ class ComposeForm extends ImmutablePureComponent {

        {
          /* !condensed && */
-          <div className={[styles.default, styles.flexRow, styles.marginTop10PX].join(' ')}>
-            <div className={[styles.default, styles.flexRow, styles.marginRightAuto].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.marginTop10PX].join(' ')}>
+            <div className={[_s.default, _s.flexRow, _s.marginRightAuto].join(' ')}>
              <UploadButton />
              {
                !edit && <PollButton />
@@ -299,11 +299,12 @@ class ComposeForm extends ImmutablePureComponent {
            </div>
            <CharacterCounter max={maxPostCharacterCount} text={text} />
            <Button
-              className={[styles.fontSize15PX, styles.paddingHorizontal15PX].join(' ')}
-              text={intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
+              className={[_s.fontSize15PX, _s.paddingHorizontal15PX].join(' ')}
              onClick={this.handleSubmit}
              disabled={disabledButton}
-            />
+            >
+              {intl.formatMessage(scheduledAt ? messages.schedulePost : messages.publish)}
+            </Button>
          </div>
        }

--- a/app/javascript/gabsocial/features/compose/components/upload_button.js
+++ b/app/javascript/gabsocial/features/compose/components/upload_button.js
@@ -68,7 +68,7 @@ class UploadButton extends ImmutablePureComponent {
        icon='media'
      >
        <label>
-          <span className={styles.displayNone}>{intl.formatMessage(messages.upload)}</span>
+          <span className={_s.displayNone}>{intl.formatMessage(messages.upload)}</span>
          <input
            key={resetFileKey}
            ref={this.setRef}
@@ -76,7 +76,7 @@ class UploadButton extends ImmutablePureComponent {
            accept={acceptContentTypes.toArray().join(',')}
            onChange={this.handleChange}
            disabled={disabled}
-            className={styles.displayNone}
+            className={_s.displayNone}
            multiple
          />
        </label>
--- a/app/javascript/gabsocial/features/home_timeline/index.js
+++ b/app/javascript/gabsocial/features/home_timeline/index.js
@@ -1,18 +1,15 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { expandHomeTimeline } from '../../actions/timelines';
-import StatusListContainer from '../../containers/status_list_container';
-import ColumnSettings from './components/column_settings';
-import Column from '../../components/column';
-import { HomeColumnHeader } from '../../components/column_header';
+import { defineMessages, injectIntl } from 'react-intl'
+import { expandHomeTimeline } from '../../actions/timelines'
+import StatusListContainer from '../../containers/status_list_container'

 const messages = defineMessages({
  title: { id: 'column.home', defaultMessage: 'Home' },
-});
+  empty: { id: 'empty_column.home', defaultMessage: 'Your home timeline is empty. Start following other users to recieve their content here.' },
+})

 const mapStateToProps = state => ({
-  hasUnread: state.getIn(['timelines', 'home', 'unread']) > 0,
  isPartial: state.getIn(['timelines', 'home', 'isPartial']),
-});
+})

 export default @connect(mapStateToProps)
@injectIntl
@@ -21,60 +18,57 @@ class HomeTimeline extends PureComponent {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    intl: PropTypes.object.isRequired,
-    hasUnread: PropTypes.bool,
    isPartial: PropTypes.bool,
-  };
+  }

  handleLoadMore = maxId => {
-    this.props.dispatch(expandHomeTimeline({ maxId }));
+    this.props.dispatch(expandHomeTimeline({ maxId }))
  }

  componentDidMount () {
-    this._checkIfReloadNeeded(false, this.props.isPartial);
+    this._checkIfReloadNeeded(false, this.props.isPartial)
  }

  componentDidUpdate (prevProps) {
-    this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial);
+    this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial)
  }

  componentWillUnmount () {
-    this._stopPolling();
+    this._stopPolling()
  }

  _checkIfReloadNeeded (wasPartial, isPartial) {
-    const { dispatch } = this.props;
+    const { dispatch } = this.props

-    if (wasPartial === isPartial) {
-      return;
-    } else if (!wasPartial && isPartial) {
+    if (!wasPartial && isPartial) {
      this.polling = setInterval(() => {
-        dispatch(expandHomeTimeline());
-      }, 3000);
+        dispatch(expandHomeTimeline())
+      }, 3000)
    } else if (wasPartial && !isPartial) {
-      this._stopPolling();
+      this._stopPolling()
    }
  }

  _stopPolling () {
    if (this.polling) {
-      clearInterval(this.polling);
-      this.polling = null;
+      clearInterval(this.polling)
+      this.polling = null
    }
  }

  render () {
-    const { intl, hasUnread } = this.props;
+    const { intl } = this.props
+
+    const emptyMessage = intl.formatMessage(messages.empty)

    return (
-      <Column heading={intl.formatMessage(messages.title)}>
-        <StatusListContainer
-          scrollKey='home_timeline'
-          onLoadMore={this.handleLoadMore}
-          timelineId='home'
-          emptyMessage={<FormattedMessage id='empty_column.home' defaultMessage='Your home timeline is empty. Start following other users to recieve their content here.'/>}
-        />
-      </Column>
-    );
+      <StatusListContainer
+        scrollKey='home_timeline'
+        onLoadMore={this.handleLoadMore}
+        timelineId='home'
+        emptyMessage={emptyMessage}
+      />
+    )
  }

 }
--- a/app/javascript/gabsocial/features/list_adder/list_adder.js
+++ b/app/javascript/gabsocial/features/list_adder/list_adder.js
@@ -7,7 +7,6 @@ import List from './components/list';
 import Account from '../../components/account';
 import IconButton from '../../components/icon_button';
 import NewListForm from '../lists/components/new_list_form';
-import ColumnSubheading from '../../components/column_subheading/column_subheading';

 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
  if (!lists) {
@@ -78,12 +77,10 @@ class ListAdder extends ImmutablePureComponent {

            <br />

-            <ColumnSubheading text={intl.formatMessage(messages.add)} />
            <NewListForm />

            <br />

-            <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
            <div className='list-adder__lists'>
              {listIds.map(ListId => <List key={ListId} listId={ListId} />)}
            </div>
--- a/app/javascript/gabsocial/features/list_editor/list_editor.js
+++ b/app/javascript/gabsocial/features/list_editor/list_editor.js
@@ -5,7 +5,6 @@ import { setupListEditor, resetListEditor } from '../../actions/lists';
 import Account from './components/account';
 import ListEditorSearch from './components/list_editor_search';
 import EditListForm from './components/edit_list_form/edit_list_form';
-import ColumnSubheading from '../../components/column_subheading';
 import IconButton from '../../components/icon_button';

 const mapStateToProps = state => ({
@@ -66,14 +65,12 @@ class ListEditor extends ImmutablePureComponent {
        </div>
        <div className='compose-modal__content'>
          <div className='list-editor'>
-            <ColumnSubheading text={intl.formatMessage(messages.changeTitle)} />
            <EditListForm />
            <br />

            {
              accountIds.size > 0 &&
              <div>
-                <ColumnSubheading text={intl.formatMessage(messages.removeFromList)} />
                <div className='list-editor__accounts'>
                  {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
                </div>
@@ -81,7 +78,6 @@ class ListEditor extends ImmutablePureComponent {
            }

            <br />
-            <ColumnSubheading text={intl.formatMessage(messages.addToList)} />
            <ListEditorSearch />
            <div className='list-editor__accounts'>
              {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
--- a/app/javascript/gabsocial/features/list_timeline/list_timeline.js
+++ b/app/javascript/gabsocial/features/list_timeline/list_timeline.js
@@ -6,11 +6,8 @@ import { expandListTimeline } from '../../actions/timelines';
 import { fetchList, deleteList } from '../../actions/lists';
 import { openModal } from '../../actions/modal';
 import StatusListContainer from '../../containers/status_list_container';
-import Column from '../../components/column';
 import ColumnIndicator from '../../components/column_indicator';
-import { HomeColumnHeader } from '../../components/column_header';
 import Button from '../../components/button';
-import ColumnHeaderSettingButton from '../../components/column_header_setting_button';

 const messages = defineMessages({
  deleteMessage: { id: 'confirmations.delete_list.message', defaultMessage: 'Are you sure you want to permanently delete this list?' },
@@ -19,7 +16,6 @@ const messages = defineMessages({

 const mapStateToProps = (state, props) => ({
  list: state.getIn(['lists', props.params.id]),
-  hasUnread: state.getIn(['timelines', `list:${props.params.id}`, 'unread']) > 0,
 });

 export default @connect(mapStateToProps)
@@ -33,7 +29,6 @@ class ListTimeline extends ImmutablePureComponent {
  static propTypes = {
    params: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
-    hasUnread: PropTypes.bool,
    list: PropTypes.oneOfType([ImmutablePropTypes.map, PropTypes.bool]),
    intl: PropTypes.object.isRequired,
  };
@@ -93,7 +88,7 @@ class ListTimeline extends ImmutablePureComponent {
  }

  render() {
-    const { hasUnread, list } = this.props;
+    const { list } = this.props;
    const { id } = this.props.params;
    const title = list ? list.get('title') : id;

@@ -116,38 +111,12 @@ class ListTimeline extends ImmutablePureComponent {
    );

    return (
-      <Column heading={title}>
-        <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
-          <div>
-            <ColumnHeaderSettingButton
-              onClick={this.handleEditClick}
-              icon='pencil'
-              title={<FormattedMessage id='lists.edit' defaultMessage='Edit list' />}
-            />
-
-            <ColumnHeaderSettingButton
-              onClick={this.handleDeleteClick}
-              icon='trash'
-              title={<FormattedMessage id='lists.delete' defaultMessage='Delete list' />}
-            />
-
-            <hr />
-
-            <ColumnHeaderSettingButton
-              to='/lists'
-              icon='arrow-right'
-              title={<FormattedMessage id='lists.view_all' defaultMessage='View all lists' />}
-            />
-          </div>
-        </HomeColumnHeader>
-
-        <StatusListContainer
-          scrollKey='list_timeline'
-          timelineId={`list:${id}`}
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={emptyMessage}
-        />
-      </Column>
+      <StatusListContainer
+        scrollKey='list_timeline'
+        timelineId={`list:${id}`}
+        onLoadMore={this.handleLoadMore}
+        emptyMessage={emptyMessage}
+      />
    );
  }

--- a/app/javascript/gabsocial/features/lists/lists.js
+++ b/app/javascript/gabsocial/features/lists/lists.js
@@ -1,77 +1,118 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { createSelector } from 'reselect';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { fetchLists } from '../../actions/lists';
-import ColumnIndicator from '../../components/column_indicator';
-import Column from '../../components/column';
-import ColumnLink from '../../components/column_link';
-import ColumnSubheading from '../../components/column_subheading';
-import NewListForm from './components/new_list_form';
-import ScrollableList from '../../components/scrollable_list';
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { NavLink } from 'react-router-dom'
+import { createSelector } from 'reselect'
+import { defineMessages, injectIntl } from 'react-intl'
+import classNames from 'classnames/bind'
+import { fetchLists } from '../../actions/lists'
+import ColumnIndicator from '../../components/column_indicator'
+import ScrollableList from '../../components/scrollable_list'
+import Icon from '../../components/icon'

 const messages = defineMessages({
-  heading: { id: 'column.lists', defaultMessage: 'Lists' },
-  subheading: { id: 'lists.subheading', defaultMessage: 'Your lists' },
  add: { id: 'lists.new.create', defaultMessage: 'Add List' },
-});
+  empty: { id: 'empty_column.lists', defaultMessage: 'You don\'t have any lists yet. When you create one, it will show up here.' },
+})

 const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-  if (!lists) {
-    return lists;
-  }
+  if (!lists) return lists

-  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
-});
+  return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')))
+})

 const mapStateToProps = state => ({
  lists: getOrderedLists(state),
-});
+})

-export default @connect(mapStateToProps)
+const mapDispatchToProps = (dispatch) => ({
+  onFetchLists() {
+    return dispatch(fetchLists())
+  },
+})
+
+const cx = classNames.bind(_s)
+
+export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl
 class Lists extends ImmutablePureComponent {

  static propTypes = {
    params: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
+    onFetchLists: PropTypes.func.isRequired,
    lists: ImmutablePropTypes.list,
    intl: PropTypes.object.isRequired,
-  };
+  }
+
+  state = {
+    fetched: false,
+  }

  componentWillMount() {
-    this.props.dispatch(fetchLists());
+    this.props.onFetchLists()
+      .then(() => this.setState({ fetched: true }))
+      .catch(() => this.setState({ fetched: true }))
  }

  render() {
-    const { intl, lists } = this.props;
+    const { intl, lists } = this.props
+    const { fetched } = this.state

-    if (!lists) {
-      return (<ColumnIndicator type='loading' />);
+    if (lists.size === 0 && !fetched) {
+      return <ColumnIndicator type='loading' />
    }

+    const emptyMessage = intl.formatMessage(messages.empty)
+
    return (
-      <Column icon='list-ul' heading={intl.formatMessage(messages.heading)} backBtn='slim'>
-        <br />
-        <ColumnSubheading text={intl.formatMessage(messages.add)} />
-        <NewListForm />
-        <br />
-        <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
-        <ScrollableList
-          scrollKey='lists'
-          emptyMessage={<FormattedMessage id='empty_column.lists' defaultMessage="You don't have any lists yet. When you create one, it will show up here." />}
-        >
-          {lists.map(list =>
-            <ColumnLink
-              key={list.get('id')}
-              to={`/list/${list.get('id')}`}
-              icon='list-ul'
-              text={list.get('title')}
-            />
-          )}
-        </ScrollableList>
-      </Column>
-    );
+      <ScrollableList
+        scrollKey='lists'
+        emptyMessage={emptyMessage}
+      >
+        <div className={[_s.default, _s.backgroundWhite, _s.radiusSmall, _s.overflowHidden, _s.border1PX, _s.bordercolorSecondary].join(' ')}>
+          {
+            lists.map((list, i) => {
+              const isLast = lists.length - 1 === i
+              return (
+                <ListItem key={list.get('id')} list={list} isLast={isLast} />
+              )
+            })
+          }
+        </div>
+      </ScrollableList>
+    )
  }

 }
+
+class ListItem extends ImmutablePureComponent {
+  static propTypes = {
+    isLast: PropTypes.bool,
+    list: ImmutablePropTypes.map,
+  }
+
+  render() {
+    const { list, isLast } = this.props
+
+    const containerClasses = cx({
+      default: 1,
+      cursorPointer: 1,
+      noUnderline: 1,
+      paddingHorizontal15PX: 1,
+      paddingVertical15PX: 1,
+      flexRow: 1,
+      alignItemsCenter: 1,
+      backgroundSubtle_onHover: 1,
+      bordercolorSecondary: !isLast,
+      borderBottom1PX: !isLast,
+    })
+
+    return (
+      <NavLink to={`/list/${list.get('id')}`} className={containerClasses} >
+        <span className={[_s.default, _s.text, _s.colorPrimary, _s.fontSize14PX].join(' ')}>
+          {list.get('title')}
+        </span>
+        <Icon id='angle-right' className={[_s.marginLeftAuto, _s.fillColorBlack].join(' ')} width='10px' height='10px' />
+      </NavLink>
+    )
+  }
+}
--- a/app/javascript/gabsocial/features/status/components/card/card.js
+++ b/app/javascript/gabsocial/features/status/components/card/card.js
@@ -124,7 +124,7 @@ export default class Card extends ImmutablePureComponent {
    return (
      <div
        ref={this.setRef}
-        className={[styles.default, styles.backgroundColorSubtle3, styles.positionAbsolute, styles.top0, styles.right0, styles.bottom0, styles.left0, styles.statusCardVideo].join(' ')}
+        className={[_s.default, _s.backgroundcolorSecondary3, _s.positionAbsolute, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
        dangerouslySetInnerHTML={content}
      />
    )
@@ -145,7 +145,7 @@ export default class Card extends ImmutablePureComponent {
    const title = interactive ?
      (
        <a
-          className={[styles.default, styles.displayFlex, styles.text, styles.noUnderline, styles.overflowWrapBreakWord, styles.colorBlack, styles.fontSize15PX, styles.fontWeight500].join(' ')}
+          className={[_s.default, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fontSize15PX, _s.fontWeightMedium].join(' ')}
          href={card.get('url')}
          title={card.get('title')}
          rel='noopener'
@@ -155,19 +155,19 @@ export default class Card extends ImmutablePureComponent {
        </a>
      )
      : (
-        <span className={[styles.default, styles.displayFlex, styles.text, styles.overflowWrapBreakWord, styles.colorBlack, styles.fontSize15PX, styles.fontWeight500].join(' ')}>
+        <span className={[_s.default, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fontSize15PX, _s.fontWeightMedium].join(' ')}>
          {card.get('title')}
        </span>
      )

    const description = (
-      <div className={[styles.default, styles.flexNormal, styles.paddingHorizontal10PX, styles.paddingVertical10PX, styles.borderColorSubtle, styles.borderLeft1PX].join(' ')}>
+      <div className={[_s.default, _s.flexNormal, _s.paddingHorizontal10PX, _s.paddingVertical10PX, _s.bordercolorSecondary, _s.borderLeft1PX].join(' ')}>
        {title}
-        <p className={[styles.default, styles.displayFlex, styles.text, styles.marginVertical5PX, styles.overflowWrapBreakWord, styles.colorSubtle, styles.fontSize13PX, styles.fontWeightNormal].join(' ')}>
+        <p className={[_s.default, _s.displayFlex, _s.text, _s.marginVertical5PX, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
          {trim(card.get('description') || '', maxDescription)}
        </p>
-        <span className={[styles.default, styles.marginTopAuto, styles.flexRow, styles.alignItemsCenter, styles.colorSubtle, styles.text, styles.displayFlex, styles.textOverflowEllipsis, styles.fontSize13PX].join(' ')}>
-          <Icon id='link' width='12px' height='12px' className={[styles.fillColorSubtle, styles.marginRight5PX].join(' ')} fixedWidth />
+        <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='12px' height='12px' className={[_s.fillcolorSecondary, _s.marginRight5PX].join(' ')} fixedWidth />
          {provider}
        </span>
      </div>
@@ -175,9 +175,9 @@ export default class Card extends ImmutablePureComponent {

    let embed = ''
    let thumbnail = interactive ?
-      <img src={cardImg} className={[styles.default, styles.objectFitCover, styles.positionAbsolute, styles.width100PC, styles.height100PC, styles.top0, styles.right0, styles.bottom0, styles.left0].join(' ')} />
+      <img src={cardImg} className={[_s.default, _s.objectFitCover, _s.positionAbsolute, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
      :
-      <img src={cardImg} className={[styles.default, styles.objectFitCover, styles.width400PX, styles.height260PX].join(' ')} />
+      <img src={cardImg} className={[_s.default, _s.objectFitCover, _s.width400PX, _s.height260PX].join(' ')} />

    if (interactive) {
      if (embedded) {
@@ -191,19 +191,19 @@ export default class Card extends ImmutablePureComponent {
      }

      return (
-        <div className={[styles.default, styles.width100PC, styles.paddingHorizontal10PX].join(' ')}>
-          <div className={[styles.default, styles.overflowHidden, styles.width100PC, styles.borderColorSubtle2, styles.border1PX, styles.radiusSmall].join(' ')}>
-            <div className={[styles.default, styles.width100PC].join(' ')}>
-              <div className={[styles.default, styles.width100PC, styles.paddingTop5625PC].join(' ')}>
+        <div className={[_s.default, _s.width100PC, _s.paddingHorizontal10PX].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(' ')}>
                { !!embed && embed}
                { !embed && thumbnail}
                { !embed &&
-                  <div className={[styles.default, styles.positionAbsolute, styles.top0, styles.right0, styles.left0, styles.bottom0, styles.alignItemsCenter, styles.justifyContentCenter].join(' ')}>
+                  <div className={[_s.default, _s.positionAbsolute, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
                    <button
-                      className={[styles.default, styles.cursorPointer, styles.backgroundColorOpaque, styles.radiusSmall, styles.paddingVertical15PX, styles.paddingHorizontal15PX].join(' ')}
+                      className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.paddingVertical15PX, _s.paddingHorizontal15PX].join(' ')}
                      onClick={this.handleEmbedClick}
                    >
-                      <Icon id={iconVariant} className={[styles.fillColorWhite].join(' ')}/>
+                      <Icon id={iconVariant} className={[_s.fillColorWhite].join(' ')}/>
                    </button>
                  </div>
                }
@@ -215,23 +215,23 @@ export default class Card extends ImmutablePureComponent {
      )
    } else if (cardImg) {
      embed = (
-        <div className={[styles.default].join(' ')}>
+        <div className={[_s.default].join(' ')}>
          {thumbnail}
        </div>
      )
    } else {
      embed = (
-        <div className={[styles.default, styles.paddingVertical15PX, styles.paddingHorizontal15PX, styles.width72PX, styles.alignItemsCenter, styles.justifyContentCenter].join(' ')}>
-          <Icon id='file-text' width='22px' height='22px' className={styles.fillColorSubtle} />
+        <div className={[_s.default, _s.paddingVertical15PX, _s.paddingHorizontal15PX, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+          <Icon id='file-text' width='22px' height='22px' className={_s.fillcolorSecondary} />
        </div>
      )
    }

    return (
-      <div className={[styles.default, styles.width100PC, styles.paddingHorizontal10PX].join(' ')}>
+      <div className={[_s.default, _s.width100PC, _s.paddingHorizontal10PX].join(' ')}>
        <a
          href={card.get('url')}
-          className={[styles.default, styles.cursorPointer, styles.flexRow, styles.overflowHidden, styles.noUnderline, styles.width100PC, styles.borderColorSubtle2, styles.border1PX, styles.radiusSmall].join(' ')}
+          className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.bordercolorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}
          rel='noopener'
          ref={this.setRef}
          >
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -30,6 +30,8 @@ import ProfilePage from '../../pages/profile_page'
 // import SearchPage from '../../pages/search_page';
 import HomePage from '../../pages/home_page'
 import NotificationsPage from '../../pages/notifications_page'
+import ListPage from '../../pages/list_page'
+import ListsPage from '../../pages/lists_page'
 // import GroupSidebarPanel from '../groups/sidebar_panel';

 import {
@@ -57,8 +59,8 @@ import {
  // Explore,
  // Groups,
  // GroupTimeline,
-  // ListTimeline,
-  // Lists,
+  ListTimeline,
+  Lists,
  // GroupMembers,
  // GroupRemovedAccounts,
  // GroupCreate,
@@ -192,11 +194,11 @@ class SwitchingColumnsArea extends PureComponent {
        <WrappedRoute path='/groups/:id' page={GroupPage} component={GroupTimeline} content={children} />

        <WrappedRoute path='/tags/:id' publicRoute component={HashtagTimeline} content={children} />
+*/}
+        <WrappedRoute path='/lists' page={ListsPage} component={Lists} content={children} />
+        <WrappedRoute path='/list/:id' page={ListPage} component={ListTimeline} content={children} />

-        <WrappedRoute path='/lists' layout={LAYOUT.DEFAULT} component={Lists} content={children} />
-        <WrappedRoute path='/list/:id' page={HomePage} component={ListTimeline} content={children} />
-    */}
-        <WrappedRoute path='/notifications' layout={LAYOUT.DEFAULT} page={NotificationsPage} component={Notifications} content={children} />
+        <WrappedRoute path='/notifications' page={NotificationsPage} component={Notifications} content={children} />
 {/*
        <WrappedRoute path='/search' exact publicRoute page={SearchPage} component={Search} content={children} />
        <WrappedRoute path='/search/people' exact page={SearchPage} component={Search} content={children} />