progress

2020-05-03 01:22:49 -04:00
parent 196a906cec
commit 055b5a430f
85 changed files with 1110 additions and 1051 deletions
--- a/app/javascript/gabsocial/components/account.js
+++ b/app/javascript/gabsocial/components/account.js
@@ -135,6 +135,8 @@ class Account extends ImmutablePureComponent {
        isOutline={true}
        color='brand'
        backgroundColor='none'
+        icon={actionIcon}
+        iconSize='10px'
      >
        {actionTitle}
      </Button>
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox.js
@@ -265,7 +265,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
              className={textareaClasses}
              disabled={disabled}
              placeholder={placeholder}
-              autoFocus={false}
+            dautoFocus={false}
              value={value}
              onChange={this.onChange}
              // onKeyDown={this.onKeyDown}
--- a/app/javascript/gabsocial/components/button.js
+++ b/app/javascript/gabsocial/components/button.js
@@ -138,6 +138,7 @@ export default class Button extends PureComponent {
      cursorPointer: 1,
      textAlignCenter: 1,
      outlineNone: 1,
+      // outlineOnFocus: !isText,
      flexRow: !!children && !!icon,
      cursorNotAllowed: isDisabled,
      opacity05: isDisabled,
@@ -221,6 +222,9 @@ export default class Button extends PureComponent {
      )
    }

+    const isLogout = href === '/auth/sign_out'
+    const dataMethod = isLogout ? 'delete' : undefined
+
    const options = {
      rel,
      target,
@@ -230,6 +234,7 @@ export default class Button extends PureComponent {
      className: classes,
      href: href || undefined,
      ref: this.setRef,
+      'data-method': dataMethod,
      ...handlers,
    }

--- a/app/javascript/gabsocial/components/divider.js
+++ b/app/javascript/gabsocial/components/divider.js
@@ -1,7 +1,4 @@
-import classnames from 'classnames/bind'
-
-// Bind CSS Modules global variable `_s` to classNames module
-const cx = classnames.bind(_s)
+import { CX } from '../constants'

 /**
 * Renders a divider component
@@ -18,7 +15,7 @@ export default class Divider extends PureComponent {
  render() {
    const { isSmall, isInvisible } = this.props

-    const classes = cx({
+    const classes = CX({
      default: 1,
      borderBottom1PX: !isInvisible,
      borderColorSecondary: !isInvisible,
--- a/app/javascript/gabsocial/components/heading.js
+++ b/app/javascript/gabsocial/components/heading.js
@@ -31,13 +31,13 @@ export default class Heading extends PureComponent {
  }

  render() {
-    const { children, size, center } = this.props
+    const { children, size, isCentered } = this.props

    // Each size has it's own custom style
    const classes = cx({
      default: 1,
      text: 1,
-      textAlignCenter: center,
+      textAlignCenter: isCentered,

      colorPrimary: [SIZES.h1, SIZES.h2].indexOf(size) > -1,
      colorSecondary: [SIZES.h3, SIZES.h4, SIZES.h5].indexOf(size) > -1,
--- a/app/javascript/gabsocial/components/link_footer.js
+++ b/app/javascript/gabsocial/components/link_footer.js
@@ -54,11 +54,12 @@ class LinkFooter extends PureComponent {
        text: intl.formatMessage(messages.help),
        requiresUser: true,
      },
-      {
-        onClick: onOpenHotkeys,
-        text: intl.formatMessage(messages.hotkeys),
-        requiresUser: true,
-      },
+      // : todo :
+      // {
+      //   onClick: onOpenHotkeys,
+      //   text: intl.formatMessage(messages.hotkeys),
+      //   requiresUser: true,
+      // },
      {
        to: '/auth/edit',
        text: intl.formatMessage(messages.security),
--- a/app/javascript/gabsocial/components/list_item.js
+++ b/app/javascript/gabsocial/components/list_item.js
@@ -56,6 +56,8 @@ export default class ListItem extends PureComponent {
      flexRow: 1,
      alignItemsCenter: 1,
      width100PC: 1,
+      outlineNone: 1,
+      bgTransparent: 1,
      bgSubtle_onHover: 1,
      borderColorSecondary: !isLast,
      borderBottom1PX: !isLast,
--- a/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
@@ -8,7 +8,7 @@ import SettingSwitch from '../setting_switch'
 import Text from '../text'

 const messages = defineMessages({
-  title: { id: 'community_timeline_settings', defaultMessage: 'Community Timeline Settings' },
+  title: { id: 'community_timeline_settings', defaultMessage: 'Community Feed Settings' },
  saveAndClose: { id: 'saveClose', defaultMessage: 'Save & Close' },
  onlyMedia: { id: 'community.column_settings.media_only', defaultMessage: 'Media Only' },
  showInSidebar: { id: 'show_in_sidebar', defaultMessage: 'Show in Sidebar' },
@@ -18,17 +18,15 @@ const mapStateToProps = (state) => ({
  settings: state.getIn(['settings', 'community']),
 })

-const mapDispatchToProps = (dispatch, { onClose }) => {
-  return {
-    onChange(key, checked) {
-      dispatch(changeSetting(['community', ...key], checked))
-    },
-    onSave() {
-      dispatch(saveSettings())
-      onClose()
-    },
-  }
-}
+const mapDispatchToProps = (dispatch, { onClose }) => ({
+  onChange(key, checked) {
+    dispatch(changeSetting(['community', ...key], checked))
+  },
+  onSave() {
+    dispatch(saveSettings())
+    onClose()
+  },
+})

 export default
@connect(mapStateToProps, mapDispatchToProps)
@@ -39,6 +37,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
    intl: PropTypes.object.isRequired,
    settings: ImmutablePropTypes.map.isRequired,
    onChange: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
    onSave: PropTypes.func.isRequired,
  }

@@ -47,10 +46,16 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
  }

  render() {
-    const { intl, settings, onChange, onClose } = this.props
+    const {
+      intl,
+      settings,
+      onChange,
+      onClose,
+    } = this.props

    return (
      <ModalLayout
+        onClose={onClose}
        width={320}
        title={intl.formatMessage(messages.title)}
      >
--- a/app/javascript/gabsocial/components/modal/confirmation_modal.js
+++ b/app/javascript/gabsocial/components/modal/confirmation_modal.js
@@ -14,8 +14,6 @@ class ConfirmationModal extends PureComponent {
    confirm: PropTypes.any.isRequired,
    onClose: PropTypes.func.isRequired,
    onConfirm: PropTypes.func.isRequired,
-    secondary: PropTypes.string,
-    onSecondary: PropTypes.func,
    intl: PropTypes.object.isRequired,
    onCancel: PropTypes.func,
  }
@@ -29,11 +27,6 @@ class ConfirmationModal extends PureComponent {
    this.props.onConfirm()
  }

-  handleSecondary = () => {
-    this.props.onClose()
-    this.props.onSecondary()
-  }
-
  handleCancel = () => {
    const { onClose, onCancel } = this.props
    onClose()
@@ -49,7 +42,6 @@ class ConfirmationModal extends PureComponent {
      title,
      message,
      confirm,
-      secondary
    } = this.props

    return (
@@ -74,19 +66,11 @@ class ConfirmationModal extends PureComponent {
                    onClick={this.handleCancel}
                    className={[_s.mr10, _s.flexGrow1].join(' ')}
                  >
-                    <Text size='medium' weight='bold' color='inherit'>
+                    <Text size='medium' weight='bold' align='center' color='inherit'>
                      <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
                    </Text>
                  </Button>
-                  
-                  { /**
-                    : todo :
-                     */
-                    secondary !== undefined && (
-                      <Button text={secondary} onClick={this.handleSecondary} />
-                    )
-                  }
-
+                
                  <Button 
                    backgroundColor='brand'
                    color='white'
@@ -94,7 +78,7 @@ class ConfirmationModal extends PureComponent {
                    ref={this.setRef}
                    className={_s.flexGrow1}
                  >
-                    <Text size='medium' weight='bold' color='inherit'>
+                    <Text size='medium' weight='bold' align='center' color='inherit'>
                      {confirm}
                    </Text>
                  </Button>
--- a/app/javascript/gabsocial/components/modal/display_options_modal.js
+++ b/app/javascript/gabsocial/components/modal/display_options_modal.js
@@ -1,6 +1,12 @@
 import { injectIntl, defineMessages } from 'react-intl'
-import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import {
+  DEFAULT_THEME,
+  DEFAULT_FONT_SIZE,
+  FONT_SIZES,
+} from '../../constants'
 import ModalLayout from './modal_layout'
 import Button from '../button'
 import Text from '../text'
@@ -12,12 +18,15 @@ const messages = defineMessages({
 })

 const mapStateToProps = (state) => ({
-  settings: state.getIn(['notifications', 'filter']),
+  displayOptionsSettings: state.getIn(['settings', 'displayOptions']),
+  fontSize: state.getIn(['settings', 'displayOptions', 'fontSize'], DEFAULT_FONT_SIZE),
+  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
 })

 const mapDispatchToProps = (dispatch) => ({
-  onChange(path, value) {
-    dispatch(setFilter(path, value))
+  onChange(key, value) {
+    dispatch(changeSetting(['displayOptions', key], value))
+    dispatch(saveSettings())
  },
 })

@@ -27,34 +36,47 @@ export default
 class DisplayOptionsModal extends ImmutablePureComponent {

  static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
-    account: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
+    fontSize: PropTypes.string,
    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    displayOptionsSettings: ImmutablePropTypes.map,
+    theme: PropTypes.string,
    onChange: PropTypes.func.isRequired,
-    settings: ImmutablePropTypes.map.isRequired,
+    onClose: PropTypes.func.isRequired,
  }

-  handleClick = () => {
-    this.props.onClose()
-    this.props.onConfirm(this.props.account, this.props.notifications)
+  updateOnProps = [
+    'fontSize',
+    'displayOptionsSettings',
+    'theme',
+  ]
+
+  handleOnFontSizeChange = (e) => {
+    const fontSizeNames = Object.keys(FONT_SIZES)
+    const index = fontSizeNames[e.target.value]
+
+    this.props.onChange('fontSize', index)
+  }
+
+  handleOnThemeSelected = (e) => {
+    this.props.onChange('theme', e.target.value)
+  }
+
+  handleOnRadiusKeyDisabled = (key, checked) => {
+    this.props.onChange(key, checked)
  }

-  // document.documentElement.style.setProperty("--color-surface", "black");
-  
  render() {
    const {
-      account,
+      fontSize,
+      displayOptionsSettings,
      intl,
-      settings,
-      onChange,
+      theme,
      onClose,
    } = this.props

-    // theme - light, muted, dark
-    // text size - extra small, small, normal, medium, large, extra large
-    // rounded borders
+    const fontSizeNames = Object.keys(FONT_SIZES)
+    const currentFontSizeIndex = fontSizeNames.indexOf(fontSize)

    return (
      <ModalLayout
@@ -64,86 +86,165 @@ class DisplayOptionsModal extends ImmutablePureComponent {
      >

        <div className={[_s.default, _s.mb15].join(' ')}>
-          <Text>
+          <Text align='center' color='secondary' size='medium'>
            {intl.formatMessage(messages.message)}
          </Text>
        </div>

-        <div className={[_s.default, _s.mb10].join(' ')}>
-          <Text weight='bold' color='secondary'>
+        <div className={[_s.default, _s.mb15].join(' ')}>
+          <Text weight='bold' size='small' color='secondary'>
            Font Size
          </Text>
          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
-            test
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '12px'}}>
+                Aa
+              </span>
+              <input
+                type='range'
+                min='0'
+                value={currentFontSizeIndex}
+                max={fontSizeNames.length - 1}
+                onInput={this.handleOnFontSizeChange}
+                onChange={this.handleOnFontSizeChange}
+                className={[_s.flexGrow1, _s.outlineNone, _s.ml15, _s.mr15].join(' ')}
+              />
+              <span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '18px'}}>
+                Aa
+              </span>
+            </div>
          </div>
        </div>

-        <div className={[_s.default, _s.mb10].join(' ')}>
-          <Text weight='bold' color='secondary'>
+        <div className={[_s.default, _s.mb15].join(' ')}>
+          <Text weight='bold' size='small' color='secondary'>
            Rounded
          </Text>
          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
            <SettingSwitch
-              prefix='notification'
-              settings={settings}
-              settingPath={'onlyVerified'}
-              onChange={onChange}
-              label={'Small Radius'}
+              prefix='displayOptions'
+              settings={displayOptionsSettings}
+              settingPath={'radiusSmallDisabled'}
+              onChange={this.handleOnRadiusKeyDisabled}
+              label={'Small Radius Disabled'}
            />

            <SettingSwitch
-              prefix='notification'
-              settings={settings}
-              settingPath={'onlyVerified'}
-              onChange={onChange}
-              label={'Circle Radius'}
+              prefix='displayOptions'
+              settings={displayOptionsSettings}
+              settingPath={'radiusCircleDisabled'}
+              onChange={this.handleOnRadiusKeyDisabled}
+              label={'Circles Disabled'}
            />
          </div>
        </div>

        <div className={[_s.default, _s.mb10].join(' ')}>
-          <Text weight='bold' color='secondary'>
+          <Text weight='bold' size='small' color='secondary'>
            Theme
          </Text>
-          <div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+          <div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>

-            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
-                <Text>
-                  Light
-                </Text>
-              </div>
-            </div>
+            <ThemeBlock
+              title='Light'
+              value='light'
+              checked={theme === 'light'}
+              onChange={this.handleOnThemeSelected}
+              style={{
+                borderColor: '#ececed',
+                backgroundColor: '#fff',
+                color: '#2d3436',
+              }}
+            />

-            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
-                <Text>
-                  Muted
-                </Text>
-              </div>
-            </div>
+            <ThemeBlock
+              title='Muted'
+              value='muted'
+              checked={theme === 'muted'}
+              onChange={this.handleOnThemeSelected}
+              style={{
+                borderColor: '#424141',
+                backgroundColor: '#222',
+                color: '#fff',
+              }}
+            />

-            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
-              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
-                <Text>
-                  Black
-                </Text>
-              </div>
-            </div>
+            <ThemeBlock
+              title='Black'
+              value='black'
+              checked={theme === 'black'}
+              onChange={this.handleOnThemeSelected}
+              style={{
+                borderColor: '#212020',
+                backgroundColor: '#13171b',
+                color: '#cccbcb',
+              }}
+            />

          </div>
        </div>
-        
-        <div className={[_s.mlAuto, _s.mrAuto].join(' ')}>
-          <Button>
-            <Text size='medium' color='inherit'>
+
+        <div className={[_s.mlAuto, _s.my10, _s.mrAuto].join(' ')}>
+          <Button onClick={onClose}>
+            <Text size='medium' color='inherit' className={_s.px10}>
              Done
            </Text>
          </Button>
        </div>

-      </ModalLayout> 
+      </ModalLayout>
    )
  }

 }
+
+class ThemeBlock extends PureComponent {
+
+  static propTypes = {
+    checked: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    title: PropTypes.string,
+    value: PropTypes.string,
+    style: PropTypes.object,
+  }
+
+  render() {
+    const {
+      checked,
+      onChange,
+      title,
+      value,
+      style,
+    } = this.props
+
+    const id = `theme-${value}`
+
+    return (
+      <label className={[_s.default, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
+        <div
+          className={[_s.default, _s.borderBottom6PX, _s.alignItemsCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
+          style={style}
+        >
+          <input
+            type='radio'
+            name='theme'
+            value={value}
+            id={id}
+            checked={checked}
+            onChange={onChange}
+          />
+          <Text
+            align='center'
+            size='medium'
+            weight='bold'
+            color='inherit'
+            className={[_s.py10, _s.flexGrow1].join(' ')}
+          >
+            {title}
+          </Text>
+        </div>
+      </label>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/modal/list_delete_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_delete_modal.js
@@ -1,3 +1,5 @@
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'
 import { deleteList } from '../../actions/lists'
 import ConfirmationModal from './confirmation_modal'
@@ -9,24 +11,24 @@ const messages = defineMessages({
 })

 const mapDispatchToProps = (dispatch) => ({
-  onConfirm(listId) {
-    dispatch(deleteList(listId))
-  },
+  onConfirm: (listId) => dispatch(deleteList(listId)),
 })

 export default
@injectIntl
@connect(null, mapDispatchToProps)
-class ListDeleteModal extends PureComponent {
+class ListDeleteModal extends ImmutablePureComponent {

  static propTypes = {
-    list: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
+    list: ImmutablePropTypes.map.isRequired,
    intl: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
  }

  handleClick = () => {
    this.props.onConfirm(this.props.list.get('id'))
+    // : todo :
+    // redirect back to /lists
  }

  render() {
--- a/app/javascript/gabsocial/components/modal/list_editor_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_editor_modal.js
@@ -14,19 +14,20 @@ class ListEditorModal extends ImmutablePureComponent {
  static propTypes = {
    intl: PropTypes.object.isRequired,
    onClose: PropTypes.func.isRequired,
-    listId: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
  }

  render() {
-    const { intl, onClose, listId } = this.props
+    const { intl, onClose, id } = this.props

    return (
      <ModalLayout
        title={intl.formatMessage(messages.title)}
        width={500}
        onClose={onClose}
+        noPadding
      >
-        <ListEdit listId={listId} />
+        <ListEdit id={id} />
      </ModalLayout>
    )
  }
--- a/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
+++ b/app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
@@ -21,17 +21,15 @@ const mapStateToProps = (state) => ({
  settings: state.getIn(['settings', 'list']),
 })

-const mapDispatchToProps = (dispatch, { onClose }) => {
-  return {
-    onChange(key, checked) {
-      dispatch(changeSetting(['list', ...key], checked))
-    },
-    onSave() {
-      dispatch(saveSettings())
-      onClose()
-    },
-  }
-}
+const mapDispatchToProps = (dispatch, { onClose }) => ({
+  onChange(key, checked) {
+    dispatch(changeSetting(['list', ...key], checked))
+  },
+  onSave() {
+    dispatch(saveSettings())
+    onClose()
+  },
+})

 export default
@connect(mapStateToProps, mapDispatchToProps)
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -29,6 +29,8 @@ import {
  MODAL_MUTE,
  MODAL_PRO_UPGRADE,
  MODAL_REPORT,
+  MODAL_STATUS_LIKES,
+  MODAL_STATUS_REPOSTS,
  MODAL_STATUS_REVISIONS,
  MODAL_UNAUTHORIZED,
  MODAL_UNFOLLOW,
@@ -60,6 +62,8 @@ import {
  MuteModal,
  ProUpgradeModal,
  ReportModal,
+  StatusLikesModal,
+  StatusRepostsModal,
  StatusRevisionsModal,
  UnauthorizedModal,
  UnfollowModal,
@@ -92,6 +96,8 @@ MODAL_COMPONENTS[MODAL_MEDIA] = MediaModal
 MODAL_COMPONENTS[MODAL_MUTE] = MuteModal
 MODAL_COMPONENTS[MODAL_PRO_UPGRADE] = ProUpgradeModal
 MODAL_COMPONENTS[MODAL_REPORT] = ReportModal
+MODAL_COMPONENTS[MODAL_STATUS_LIKES] = StatusLikesModal
+MODAL_COMPONENTS[MODAL_STATUS_REPOSTS] = StatusRepostsModal
 MODAL_COMPONENTS[MODAL_STATUS_REVISIONS] = StatusRevisionsModal
 MODAL_COMPONENTS[MODAL_UNAUTHORIZED] = UnauthorizedModal
 MODAL_COMPONENTS[MODAL_UNFOLLOW] = UnfollowModal
--- a/app/javascript/gabsocial/components/modal/status_likes_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_likes_modal.js
@@ -0,0 +1,44 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import StatusLikes from '../../features/status_likes'
+import ModalLayout from './modal_layout'
+
+const messages = defineMessages({
+  title: { id: 'likes', defaultMessage: 'Likes' },
+})
+
+export default
+@injectIntl
+class StatusLikesModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
+  }
+
+  render() {
+    const {
+      intl,
+      onClose,
+      status,
+    } = this.props
+
+    const params = {
+      statusId: status.get('id'),
+    }
+
+    return (
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width={460}
+        onClose={onClose}
+        noPadding
+      >
+        <StatusLikes params={params} />
+      </ModalLayout>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/modal/status_reposts_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_reposts_modal.js
@@ -0,0 +1,44 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import StatusReposts from '../../features/status_reposts'
+import ModalLayout from './modal_layout'
+
+const messages = defineMessages({
+  title: { id: 'reposts', defaultMessage: 'Reposts' },
+})
+
+export default
+@injectIntl
+class StatusRepostsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map.isRequired,
+  }
+
+  render() {
+    const {
+      intl,
+      onClose,
+      status,
+    } = this.props
+
+    const params = {
+      statusId: status.get('id'),
+    }
+
+    return (
+      <ModalLayout
+        title={intl.formatMessage(messages.title)}
+        width={460}
+        onClose={onClose}
+        noPadding
+      >
+        <StatusReposts params={params} />
+      </ModalLayout>
+    )
+  }
+
+}
--- a/app/javascript/gabsocial/components/modal/status_stats_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_stats_modal.js
@@ -1,68 +0,0 @@
-import { injectIntl, defineMessages } from 'react-intl'
-import { muteAccount } from '../../actions/accounts'
-
-const messages = defineMessages({
-  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
-})
-
-const mapStateToProps = (state) => ({
-  isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
-  account: state.getIn(['mutes', 'new', 'account']),
-})
-
-const mapDispatchToProps = (dispatch) => ({
-  onConfirm(account, notifications) {
-    dispatch(muteAccount(account.get('id'), notifications))
-  },
-})
-
-export default
-@connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class UnfollowModal extends PureComponent {
-
-  static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
-    account: PropTypes.object.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    this.button.focus()
-  }
-
-  handleClick = () => {
-    this.props.onClose()
-    this.props.onConfirm(this.props.account, this.props.notifications)
-  }
-
-  handleCancel = () => {
-    this.props.onClose()
-  }
-
-  render() {
-    const { account, intl } = this.props
-
-    // , {
-    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-    //   confirm: intl.formatMessage(messages.unfollowConfirm),
-    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-    // }));
-
-    return (
-      <ConfirmationModal
-        title={`Mute @${account.get('acct')}`}
-        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
-        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
-        onConfirm={() => {
-          // dispatch(blockDomain(domain))
-          // dispatch(blockDomain(domain))
-        }}
-      />
-    )
-  }
-
-}
--- a/app/javascript/gabsocial/components/panel/list_details_panel.js
+++ b/app/javascript/gabsocial/components/panel/list_details_panel.js
@@ -1,10 +1,11 @@
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
+import moment from 'moment-mini'
 import PanelLayout from './panel_layout'
+import ColumnIndicator from '../column_indicator'
 import Divider from '../divider'
 import Icon from '../icon'
-import RelativeTimestamp from '../relative_timestamp'
 import Text from '../text'

 const messages = defineMessages({
@@ -18,16 +19,20 @@ class ListDetailsPanel extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
-    onEdit: PropTypes.func.isRequired,
    list: ImmutablePropTypes.map,
+    onEdit: PropTypes.func.isRequired,
  }

-  handleOnEdit = () => {
-    this.props.onEdit()
-  }
+  updateOnProps = [
+    'list',
+  ]

  render() {
-    const { intl, list } = this.props
+    const {
+      intl,
+      list,
+      onEdit,
+    } = this.props

    const title = !!list ? list.get('title') : ''
    const createdAt = !!list ? list.get('created_at') : ''
@@ -36,34 +41,41 @@ class ListDetailsPanel extends ImmutablePureComponent {
      <PanelLayout
        title={intl.formatMessage(messages.title)}
        headerButtonTitle={intl.formatMessage(messages.edit)}
-        headerButtonAction={this.handleOnEdit}
+        headerButtonAction={onEdit}
      >
-        <div className={_s.default}>
+        {
+          (!title || !createdAt) &&
+          <ColumnIndicator type='loading' />
+        }
+        {
+          title && createdAt &&
+          <div className={_s.default}>
+
+            <div className={_s.default}>
+              <Text weight='medium'>
+                {title}
+              </Text>
+            </div>
+
+            <Divider isSmall />
+
+            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
+              <Icon id='calendar' size='12px' className={_s.fillSecondary} />
+              <Text
+                size='small'
+                color='secondary'
+                className={_s.ml5}
+              >
+                {
+                  <FormattedMessage id='lists.panel_created' defaultMessage='Created: {date}' values={{
+                    date: moment(createdAt).format('lll'),
+                  }} />
+                }
+              </Text>
+            </div>

-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-            <Text weight='medium'>
-              {title}
-            </Text>
          </div>
-
-          <Divider isSmall />
-
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
-            <Icon id='calendar' size='12px' className={_s.fillSecondary} />
-            <Text
-              size='small'
-              color='secondary'
-              className={_s.ml5}
-            >
-              {
-                <FormattedMessage id='lists.panel_created' defaultMessage='Created: {date}' values={{
-                  date: <RelativeTimestamp timestamp={createdAt} />,
-                }} />
-              }
-            </Text>
-          </div>
-
-        </div>
+        }
      </PanelLayout>
    )
  }
--- a/app/javascript/gabsocial/components/popover/sidebar_more_popover.js
+++ b/app/javascript/gabsocial/components/popover/sidebar_more_popover.js
@@ -1,6 +1,7 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import {  MODAL_DISPLAY_OPTIONS } from '../../constants'
 import { openModal } from '../../actions/modal'
+import { closePopover } from '../../actions/popover'
 import PopoverLayout from './popover_layout'
 import List from '../list'

@@ -13,6 +14,7 @@ const messages = defineMessages({

 const mapDispatchToProps = (dispatch) => ({
  onOpenDisplayModal: () => {
+    dispatch(closePopover())
    dispatch(openModal(MODAL_DISPLAY_OPTIONS))
  },
 })
@@ -54,7 +56,7 @@ class SidebarMorePopover extends PureComponent {
            },
            {
              title: intl.formatMessage(messages.logout),
-              href: '/auth/log_out',
+              href: '/auth/sign_out',
            },
          ]}
        />
--- a/app/javascript/gabsocial/components/scrollable_list.js
+++ b/app/javascript/gabsocial/components/scrollable_list.js
@@ -2,6 +2,7 @@ import throttle from 'lodash.throttle'
 import { List as ImmutableList } from 'immutable'
 import IntersectionObserverArticle from './intersection_observer_article'
 import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
+import Block from './block'
 import ColumnIndicator from './column_indicator'
 import LoadMore from './load_more'

@@ -250,7 +251,11 @@ export default class ScrollableList extends PureComponent {
      );
    }

-    return <ColumnIndicator type='error' message={emptyMessage} />
+    return (
+      <Block>
+        <ColumnIndicator type='error' message={emptyMessage} />
+      </Block>
+    )
  }

 }
--- a/app/javascript/gabsocial/components/search.js
+++ b/app/javascript/gabsocial/components/search.js
@@ -147,6 +147,7 @@ class Search extends PureComponent {
            onChange={this.handleOnChange}
            onFocus={this.handleOnFocus}
            onBlur={this.handleOnBlur}
+            autoComplete='off'
          />

          <Button
--- a/app/javascript/gabsocial/components/setting_switch.js
+++ b/app/javascript/gabsocial/components/setting_switch.js
@@ -16,6 +16,14 @@ export default class SettingSwitch extends ImmutablePureComponent {
    onChange: PropTypes.func.isRequired,
  }

+  updateOnProps = [
+    'prefix',
+    'settings',
+    'settingPath',
+    'description',
+    'label',
+  ]
+
  onChange = ({ target }) => {
    this.props.onChange(this.props.settingPath, target.checked)
  }
--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar.js
@@ -38,17 +38,13 @@ const messages = defineMessages({
  donate: { id: 'tabs_bar.donate', defaultMessage: 'Make a Donation' },
 })

-const mapStateToProps = (state) => {
-  const getAccount = makeGetAccount()
-
-  return {
-    account: getAccount(state, me),
-    moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE',
-    notificationCount: state.getIn(['notifications', 'unread']),
-    homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
-    showCommunityTimeline: state.getIn(['settings', 'community', 'shows', 'inSidebar']),
-  }
-}
+const mapStateToProps = (state) => ({
+  account: makeGetAccount()(state, me),
+  moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE',
+  notificationCount: state.getIn(['notifications', 'unread']),
+  homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
+  showCommunityTimeline: state.getIn(['settings', 'community', 'shows', 'inSidebar']),
+})

 const mapDispatchToProps = (dispatch) => ({
  onClose() {
@@ -91,7 +87,7 @@ class Sidebar extends ImmutablePureComponent {
    this.props.onOpenComposeModal()
  }

-  handleOpenSidebarMorePopover =() => {
+  handleOpenSidebarMorePopover = () => {
    this.props.openSidebarMorePopover({
      targetRef: this.moreBtnRef,
      position: 'top',
@@ -226,23 +222,46 @@ class Sidebar extends ImmutablePureComponent {
        <div className={[_s.default, _s.width240PX].join(' ')}>
          <div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}>
            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.overflowYScroll].join(' ')}>
-              <div className={_s.default}>
+              <div className={[_s.default, _s.width100PC].join(' ')}>
                {
                  !!title &&
-                  <div className={[_s.default, _s.flexRow, _s.px5, _s.py10].join(' ')}>
-                    <Button
-                      noClasses
-                      color='primary'
-                      backgroundColor='none'
-                      className={[_s.alignItemsCenter, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
-                      icon='back'
-                      iconSize='20px'
-                      iconClassName={[_s.mr5, _s.fillPrimary].join(' ')}
-                      onClick={this.handleBackClick}
-                    />
+                  <div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
+                    {
+                      showBackBtn &&
+                      <Button
+                        noClasses
+                        color='primary'
+                        backgroundColor='none'
+                        className={[_s.alignItemsCenter, _s.bgTransparent, _s.mr5, _s.cursorPointer, _s.outlineNone, _s.default, _s.justifyContentCenter].join(' ')}
+                        icon='arrow-left'
+                        iconSize='24px'
+                        iconClassName={[_s.mr5, _s.fillPrimary].join(' ')}
+                        onClick={this.handleBackClick}
+                      />
+                    }
                    <Heading size='h1'>
                      {title}
                    </Heading>
+                    {
+                      !!actions &&
+                      <div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
+                        {
+                          actions.map((action, i) => (
+                            <Button
+                              isNarrow
+                              backgroundColor='none'
+                              color='primary'
+                              onClick={() => action.onClick()}
+                              key={`action-btn-${i}`}
+                              className={[_s.ml5, _s.px5].join(' ')}
+                              icon={action.icon}
+                              iconClassName={_s.fillPrimary}
+                              iconSize='14px'
+                            />
+                          ))
+                        }
+                      </div>
+                    }
                  </div>
                }
                {
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -89,6 +89,8 @@ class Status extends ImmutablePureComponent {
    cachedMediaWidth: PropTypes.number,
    contextType: PropTypes.string,
    commentsLimited: PropTypes.bool,
+    onOpenLikes: PropTypes.func.isRequired,
+    onOpenReposts: PropTypes.func.isRequired,
  }

  // Avoid checking props that are functions (and whose equality will always
@@ -472,6 +474,8 @@ class Status extends ImmutablePureComponent {
                  onReply={this.props.onReply}
                  onRepost={this.props.onRepost}
                  onShare={this.props.onShare}
+                  onOpenLikes={this.props.onOpenLikes}
+                  onOpenReposts={this.props.onOpenReposts}
                />
              }

--- a/app/javascript/gabsocial/components/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar.js
@@ -37,6 +37,8 @@ class StatusActionBar extends ImmutablePureComponent {
    onReply: PropTypes.func.isRequired,
    onRepost: PropTypes.func.isRequired,
    status: ImmutablePropTypes.map.isRequired,
+    onOpenLikes: PropTypes.func.isRequired,
+    onOpenReposts: PropTypes.func.isRequired,
  }

  updateOnProps = ['status']
@@ -58,15 +60,11 @@ class StatusActionBar extends ImmutablePureComponent {
  }

  openLikesList = () => {
-    // : todo :
-  }
-
-  toggleCommentsVisible = () => {
-    // : todo :
+    this.props.onOpenLikes(this.props.status)
  }

  openRepostsList = () => {
-    // : todo :
+    this.props.onOpenReposts(this.props.status)
  }

  setRepostButton = (n) => {
--- a/app/javascript/gabsocial/components/switch.js
+++ b/app/javascript/gabsocial/components/switch.js
@@ -35,6 +35,7 @@ export default class Switch extends PureComponent {
      circle: 1,
      border1PX: 1,
      mlAuto: 1,
+      bgPrimary: 1,
      borderColorSecondary: 1,
      bgBrand: checked,
    })