Progress

2020-05-14 16:45:39 -04:00
parent 4acc21944c
commit 0626928899
30 changed files with 286 additions and 100 deletions
--- a/app/javascript/gabsocial/components/bundle_column_error.js
+++ b/app/javascript/gabsocial/components/bundle_column_error.js
@@ -1,5 +1,16 @@
-import { defineMessages, injectIntl } from 'react-intl'
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'
+import {
+  source_url,
+  version,
+} from '../initial_state'
+import {
+  APP_NAME,
+  DEFAULT_REL,
+} from '../constants'
 import Button from './button'
+import Divider from './divider'
+import Icon from './icon'
+import Text from './text'

 const messages = defineMessages({
  title: { id: 'bundle_column_error.title', defaultMessage: 'Network error' },
@@ -24,9 +35,71 @@ class BundleColumnError extends PureComponent {
    const { intl: { formatMessage } } = this.props

    return (
-      <div className='error-column'>
-        <Button title={formatMessage(messages.retry)} icon='refresh' onClick={this.handleRetry} size={64} />
-        {formatMessage(messages.body)}
+      <div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+        <div className={[_s.default, _s.height53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
+
+            <div className={[_s.default, _s.flexRow].join(' ')}>
+
+              <h1 className={[_s.default, _s.mr15].join(' ')}>
+                <Button href='/' isText aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
+                  <Icon id='logo' className={_s.fillWhite} />
+                </Button>
+              </h1>
+
+            </div>
+          </div>
+        </div>
+
+        <div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}>
+
+          <Icon id='warning' size='28px' className={[_s.default, _s.fillSecondary, _s.mb15].join(' ')} />
+
+          <Text size='medium' className={_s.pt15}>
+            {formatMessage(messages.body)}
+          </Text>
+
+          <div className={[_s.default, _s.py10, _s.my10].join(' ')}>
+            <Text>
+              {APP_NAME} ({version})
+            </Text>
+
+            <div className={[_s.default, _s.flexRow, _s.mt10, _s.alignItemsCenter].join(' ')}>
+              <Button
+                isText
+                href={source_url}
+                rel={DEFAULT_REL}
+                target='_blank'
+                backgroundColor='tertiary'
+                color='primary'
+                radiusSmall
+                className={[_s.py2, _s.px10].join(' ')}
+              >
+                <Text color='inherit'>
+                  <FormattedMessage
+                    id='errors.unexpected_crash.report_issue'
+                    defaultMessage='Report issue'
+                  />
+                </Text>
+              </Button>
+
+            </div>
+          </div>
+
+          <Divider />
+
+          <div className={[_s.default, _s.flexRow].join(' ')}>
+            <Button
+              icon='repost'
+              onClick={this.handleRetry} size={64}
+            >
+              <Text align='center' color='inherit' className={_s.ml5}>
+                {formatMessage(messages.retry)}
+              </Text>
+            </Button>
+          </div>
+
+        </div>
      </div>
    )
  }
--- a/app/javascript/gabsocial/components/card_view.js
+++ b/app/javascript/gabsocial/components/card_view.js
@@ -1,17 +0,0 @@
-export default class CardView extends PureComponent {
-
-  static propTypes = {
-    children: PropTypes.any,
-  }
-
-  render() {
-    const { children } = this.props
-
-    return (
-      <div title='cardview' className={[_s.default].join(' ')}>
-        {children}
-      </div>
-    )
-  }
-
-}
--- a/app/javascript/gabsocial/components/emoji/emoji.js
+++ b/app/javascript/gabsocial/components/emoji/emoji.js
@@ -10,11 +10,16 @@ const emojify = (str, customEmojis = {}) => {
  const tagCharsWithoutEmojis = '<&';
  const tagCharsWithEmojis = Object.keys(customEmojis).length ? '<&:' : '<&';
  let rtn = '', tagChars = tagCharsWithEmojis, invisible = 0;
+
  for (;;) {
    let match, i = 0, tag;
    while (i < str.length && (tag = tagChars.indexOf(str[i])) === -1 && (invisible || !(match = trie.search(str.slice(i))))) {
      i += str.codePointAt(i) < 65536 ? 1 : 2;
    }
+
+    let size = 16;
+    let mt = -3;
+
    let rend, replacement = '';
    if (i === str.length) {
      break;
@@ -29,7 +34,7 @@ const emojify = (str, customEmojis = {}) => {
        // if you want additional emoji handler, add statements below which set replacement and return true.
        if (shortname in customEmojis) {
          const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
-          replacement = `<img draggable="false" style="height:16px;width:16px;margin:-3px 0 0;font-family: 'object-fit:contain',inherit;vertical-align: middle;-o-object-fit: contain;object-fit: contain;" alt="${shortname}" title="${shortname}" src="${filename}" />`;
+          replacement = `<img draggable="false" style="height:${size}px;width:${size}px;margin:${mt}px 0 0;font-family:'object-fit:contain',inherit;vertical-align:middle;-o-object-fit:contain;object-fit:contain;" alt="${shortname}" title="${shortname}" src="${filename}" />`;
          return true;
        }
        return false;
@@ -60,7 +65,7 @@ const emojify = (str, customEmojis = {}) => {
    } else { // matched to unicode emoji
      const { filename, shortCode } = unicodeMapping[match];
      const title = shortCode ? `:${shortCode}:` : '';
-      replacement = `<img draggable="false" style="height:16px;width:16px;margin:-3px 0 0;font-family: 'object-fit:contain',inherit;vertical-align: middle;-o-object-fit: contain;object-fit: contain;" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`;
+      replacement = `<img draggable="false" style="height:${size}px;width:${size}px;margin:${mt}px 0 0;font-family:'object-fit:contain',inherit;vertical-align:middle;-o-object-fit:contain;object-fit:contain;" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`;
      rend = i + match.length;
      // If the matched character was followed by VS15 (for selecting text presentation), skip it.
      if (str.codePointAt(rend) === 65038) {
--- a/app/javascript/gabsocial/components/floating_action_button.js
+++ b/app/javascript/gabsocial/components/floating_action_button.js
@@ -1,4 +1,5 @@
 import { defineMessages, injectIntl } from 'react-intl'
+import { me } from '../initial_state'
 import { openModal } from '../actions/modal'
 import Button from './button'

@@ -14,6 +15,7 @@ export default
@injectIntl
@connect(null, mapDispatchToProps)
 class FloatingActionButton extends PureComponent {
+
  static propTypes = {
    intl: PropTypes.object.isRequired,
    onOpenCompose: PropTypes.func.isRequired,
@@ -26,6 +28,8 @@ class FloatingActionButton extends PureComponent {
  render() {
    const { intl, onOpenCompose } = this.props

+    if (!me) return null
+
    const message = intl.formatMessage(messages.gab)

    return (
@@ -39,4 +43,5 @@ class FloatingActionButton extends PureComponent {
      />
    )
  }
+  
 }
--- a/app/javascript/gabsocial/components/icon.js
+++ b/app/javascript/gabsocial/components/icon.js
@@ -53,6 +53,7 @@ import PencilIcon from '../assets/pencil_icon'
 import PinIcon from '../assets/pin_icon'
 import PlayIcon from '../assets/play_icon'
 import PollIcon from '../assets/poll_icon'
+import ProIcon from '../assets/pro_icon'
 import RepostIcon from '../assets/repost_icon'
 import RichTextIcon from '../assets/rich_text_icon'
 import SearchIcon from '../assets/search_icon'
@@ -127,6 +128,7 @@ const ICONS = {
  'pin': PinIcon,
  'play': PlayIcon,
  'poll': PollIcon,
+  'pro': ProIcon,
  'repost': RepostIcon,
  'rich-text': RichTextIcon,
  'search': SearchIcon,
--- a/app/javascript/gabsocial/components/logged_out_navigation_bar.js
+++ b/app/javascript/gabsocial/components/logged_out_navigation_bar.js
@@ -42,7 +42,7 @@ export default class LoggedOutNavigationBar extends PureComponent {

          <ResponsiveClassesComponent
            classNames={[_s.default, _s.flexRow, _s.py5, _s.px10, _s.width330PX, _s.mlAuto].join(' ')}
-            classNamesXS={[_s.default, _s.flexRow, _s.py5, _s.px10, _s.width100PC].join(' ')}
+            classNamesXS={[_s.default, _s.flexRow, _s.pb5, _s.px10, _s.width100PC].join(' ')}
          >

            <Button
@@ -51,7 +51,7 @@ export default class LoggedOutNavigationBar extends PureComponent {
              color='white'
              backgroundColor='none'
              href='/auth/log_in'
-              className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.py5].join(' ')}
+              className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.py7].join(' ')}
            >
              <Text color='inherit' weight='medium' align='center'>
                Log in
@@ -63,7 +63,7 @@ export default class LoggedOutNavigationBar extends PureComponent {
              color='brand'
              backgroundColor='white'
              href='/auth/sign_up'
-              className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.ml5, _s.flexGrow1, _s.py5].join(' ')}
+              className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
            >
              <Text color='inherit' weight='bold' align='center'>
                Sign up
--- a/app/javascript/gabsocial/components/modal/modal_base.js
+++ b/app/javascript/gabsocial/components/modal/modal_base.js
@@ -1,11 +1,15 @@
 import { Fragment } from 'react'
 import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'
-import classNames from 'classnames/bind'
+import { getWindowDimension } from '../../utils/is_mobile'
 import { openModal } from '../../actions/modal'
 import { cancelReplyCompose } from '../../actions/compose'
-import { BREAKPOINT_EXTRA_SMALL } from '../../constants'
+import {
+  CX,
+  BREAKPOINT_EXTRA_SMALL,
+} from '../../constants'
 import Responsive from '../../features/ui/util/responsive_component'
-import CardView from '../card_view'
+
+const initialState = getWindowDimension()

 const messages = defineMessages({
  confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -26,8 +30,6 @@ const mapDispatchToProps = (dispatch) => ({
  },
 })

-const cx = classNames.bind(_s)
-
 export default
@connect(mapStateToProps, mapDispatchToProps)
@injectIntl
@@ -42,10 +44,12 @@ class ModalBase extends PureComponent {
    composeId: PropTypes.string,
    composeText: PropTypes.string,
    type: PropTypes.string,
+    isCenteredXS: PropTypes.bool,
  }

  state = {
    revealed: !!this.props.children,
+    width: initialState.width,
  }

  activeElement = this.state.revealed ? document.activeElement : null
@@ -74,7 +78,9 @@ class ModalBase extends PureComponent {
  }

  componentDidMount() {
+    this.handleResize()
    window.addEventListener('keyup', this.handleKeyUp, false)
+    window.addEventListener('resize', this.handleResize, false)
  }

  componentWillReceiveProps(nextProps) {
@@ -104,8 +110,15 @@ class ModalBase extends PureComponent {
    }
  }

+  handleResize = () => {
+    const { width } = getWindowDimension()
+
+    this.setState({ width })
+  }
+
  componentWillUnmount() {
    window.removeEventListener('keyup', this.handleKeyUp)
+    window.removeEventListener('resize', this.handleResize, false)
  }

  getSiblings = () => {
@@ -121,11 +134,13 @@ class ModalBase extends PureComponent {
  }

  render() {
-    const { children } = this.props
+    const { children, isCenteredXS } = this.props
+    const { width } = this.state

+    const isXS = width <= BREAKPOINT_EXTRA_SMALL
    const visible = !!children

-    const containerClasses = cx({
+    const containerClasses = CX({
      default: 1,
      z4: 1,
      height100PC: visible,
@@ -133,6 +148,21 @@ class ModalBase extends PureComponent {
      displayNone: !visible,
    })

+    const dialogClasses = CX({
+      default: 1,
+      posFixed: 1,
+      alignItemsCenter: 1,
+      justifyContentCenter: !isXS || isCenteredXS,
+      justifyContentEnd: isXS && !isCenteredXS,
+      z4: 1,
+      width100PC: 1,
+      height100PC: 1,
+      top0: 1,
+      rightAuto: 1,
+      bottomAuto: 1,
+      left0: 1,
+    })
+
    return (
      <div ref={this.setRef} className={containerClasses}>
        {
@@ -142,26 +172,14 @@ class ModalBase extends PureComponent {
              role='presentation'
              className={[_s.default, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
            />
-            <Responsive min={BREAKPOINT_EXTRA_SMALL}>
-              <div
-                ref={this.setDialog}
-                role='dialog'
-                onClick={this.handleOnClose}
-                className={[_s.default, _s.posFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
-              >
-                {children}
-              </div>
-            </Responsive>
-            <Responsive max={BREAKPOINT_EXTRA_SMALL}>
-              <div
-                ref={this.setDialog}
-                role='dialog'
-                onClick={this.handleOnClose}
-                className={[_s.default, _s.posFixed, _s.alignItemsCenter, _s.justifyContentEnd, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
-              >
-                {children}
-              </div>
-            </Responsive>
+            <div
+              ref={this.setDialog}
+              role='dialog'
+              onClick={this.handleOnClose}
+              className={dialogClasses}
+            >
+              {children}
+            </div>
          </Fragment>
        }
      </div>
--- a/app/javascript/gabsocial/components/modal/modal_layout.js
+++ b/app/javascript/gabsocial/components/modal/modal_layout.js
@@ -13,6 +13,7 @@ const messages = defineMessages({
 export default
@injectIntl
 class ModalLayout extends PureComponent {
+
  static propTypes = {
    title: PropTypes.string,
    children: PropTypes.node,
@@ -20,6 +21,7 @@ class ModalLayout extends PureComponent {
    width: PropTypes.number,
    hideClose: PropTypes.bool,
    noPadding: PropTypes.bool,
+    isXS: PropTypes.bool,
  }

  static defaultProps = {
@@ -37,7 +39,8 @@ class ModalLayout extends PureComponent {
      intl,
      width,
      hideClose,
-      noPadding
+      noPadding,
+      isXS,
    } = this.props

    const childrenContainerClasses = cx({
@@ -49,14 +52,14 @@ class ModalLayout extends PureComponent {
    })

    return (
-      <div style={{width: `${width}px`}} className={_s.modal}>
+      <div style={{width: `${width}px`}} className={[_s.default, _s.modal].join(' ')}>
        <Block>
          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
            <Heading size='h2'>
              {title}
            </Heading>
            {
-              !hideClose &&
+              !hideClose && !isXS &&
              <Button
                backgroundColor='none'
                title={intl.formatMessage(messages.close)}
--- a/app/javascript/gabsocial/components/modal/modal_root.js
+++ b/app/javascript/gabsocial/components/modal/modal_root.js
@@ -107,6 +107,17 @@ MODAL_COMPONENTS[MODAL_UNAUTHORIZED] = UnauthorizedModal
 MODAL_COMPONENTS[MODAL_UNFOLLOW] = UnfollowModal
 MODAL_COMPONENTS[MODAL_VIDEO] = VideoModal

+const CENTERED_XS_MODALS = [
+  MODAL_BLOCK_ACCOUNT,
+  MODAL_BLOCK_DOMAIN,
+  MODAL_CONFIRM,
+  MODAL_GROUP_DELETE,
+  MODAL_LIST_DELETE,
+  MODAL_MUTE,
+  MODAL_UNAUTHORIZED,
+  MODAL_UNFOLLOW,
+]
+
 const mapStateToProps = (state) => ({
  type: state.getIn(['modal', 'modalType']),
  props: state.getIn(['modal', 'modalProps'], {}),
@@ -161,7 +172,11 @@ class ModalRoot extends PureComponent {
    const visible = !!type

    return (
-      <ModalBase onClose={this.onClickClose} type={type}>
+      <ModalBase 
+        onClose={this.onClickClose}
+        isCenteredXS={CENTERED_XS_MODALS.indexOf(type) > -1}
+        type={type}
+      >
        {
          visible &&
          <Bundle
--- a/app/javascript/gabsocial/components/modal/unfollow_modal.js
+++ b/app/javascript/gabsocial/components/modal/unfollow_modal.js
@@ -47,6 +47,7 @@ class UnfollowModal extends PureComponent {
  render() {
    const { account, intl } = this.props

+    // : TODO :
    // , {
    //   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),
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar.js
@@ -37,6 +37,11 @@ class NavigationBar extends ImmutablePureComponent {
    onOpenSidebar: PropTypes.func.isRequired,
  }

+  handleProfileClick = () => {
+    // : todo :
+    // open menu
+  }
+
  render() {
    const {
      title,
--- a/app/javascript/gabsocial/components/panel/pro_panel.js
+++ b/app/javascript/gabsocial/components/panel/pro_panel.js
@@ -31,15 +31,16 @@ class ProPanel extends PureComponent {
        <Button
          isBlock
          href={URL_GAB_PRO}
-          icon='arrow-up'
-          className={[_s.justifyContentCenter].join(' ')}
+          icon='bold'
+          iconSize='14px'
+          className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
        >
          <Text
            color='inherit'
            weight='medium'
            size='medium'
            align='center'
-            className={_s.ml5}
+            className={_s.ml10}
          >
            {intl.formatMessage(messages.title)}
          </Text>
--- a/app/javascript/gabsocial/components/popover/profile_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/profile_options_popover.js
@@ -14,6 +14,7 @@ import {
 import { muteAccount } from '../../actions/accounts'
 import { initReport } from '../../actions/reports'
 import { openModal } from '../../actions/modal'
+import { closePopover } from '../../actions/popover'
 import { blockDomain, unblockDomain } from '../../actions/domain_blocks'
 import { unfollowModal, autoPlayGif, me, isStaff } from '../../initial_state'
 import { makeGetAccount } from '../../selectors'
@@ -83,6 +84,8 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
  },

  onBlock(account) {
+    dispatch(closePopover())
+  
    if (account.getIn(['relationship', 'blocking'])) {
      dispatch(unblockAccount(account.get('id')));
    } else {
@@ -93,10 +96,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
  },

  onMention(account) {
+    dispatch(closePopover())
    dispatch(mentionCompose(account));
  },

  onRepostToggle(account) {
+    dispatch(closePopover())
    if (account.getIn(['relationship', 'showing_reblogs'])) {
      dispatch(followAccount(account.get('id'), false));
    } else {
@@ -105,10 +110,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
  },

  onReport(account) {
+    dispatch(closePopover())
    dispatch(initReport(account));
  },

  onMute(account) {
+    dispatch(closePopover())
    if (account.getIn(['relationship', 'muting'])) {
      dispatch(unmuteAccount(account.get('id')));
    } else {
@@ -119,16 +126,19 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
  },

  onBlockDomain(domain) {
+    dispatch(closePopover())
    dispatch(openModal('BLOCK_DOMAIN', {
      domain,
    }));
  },

  onUnblockDomain(domain) {
+    dispatch(closePopover())
    dispatch(unblockDomain(domain));
  },

  onAddToList(account) {
+    dispatch(closePopover())
    dispatch(openModal('LIST_ADDER', {
      accountId: account.get('id'),
    }));
--- a/app/javascript/gabsocial/components/popover/status_visibility_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_visibility_popover.js
@@ -94,6 +94,7 @@ class StatusVisibilityDropdown extends PureComponent {
              const iconClasses = cx({
                ml10: 1,
                mt2: 1,
+                fillPrimary: !isActive,
                fillWhite: isActive,
              })

--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/app/javascript/gabsocial/components/profile_header.js
@@ -224,19 +224,22 @@ class ProfileHeader extends ImmutablePureComponent {
                        <AccountActionButton account={account} />
                      </div>

-                      <div>
-                        <Button
-                          isOutline
-                          icon='ellipsis'
-                          iconSize='18px'
-                          iconClassName={_s.inheritFill}
-                          color='brand'
-                          backgroundColor='none'
-                          className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.px10].join(' ')}
-                          onClick={this.handleOpenMore}
-                          buttonRef={this.setOpenMoreNodeRef}
-                        />
-                      </div>
+                      {
+                        !!me &&
+                        <div>
+                          <Button
+                            isOutline
+                            icon='ellipsis'
+                            iconSize='18px'
+                            iconClassName={_s.inheritFill}
+                            color='brand'
+                            backgroundColor='none'
+                            className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.px10].join(' ')}
+                            onClick={this.handleOpenMore}
+                            buttonRef={this.setOpenMoreNodeRef}
+                          />
+                        </div>
+                      }

                    </div>
                  }
@@ -321,19 +324,22 @@ class ProfileHeader extends ImmutablePureComponent {
                    {
                      account && account.get('id') !== me &&
                      <div className={[_s.default, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
-                        <div>
-                          <Button
-                            isOutline
-                            icon='ellipsis'
-                            iconSize='18px'
-                            iconClassName={_s.inheritFill}
-                            color='brand'
-                            backgroundColor='none'
-                            className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
-                            onClick={this.handleOpenMore}
-                            buttonRef={this.setOpenMoreNodeRef}
-                          />
-                        </div>
+                        {
+                          !!me &&
+                          <div>
+                            <Button
+                              isOutline
+                              icon='ellipsis'
+                              iconSize='18px'
+                              iconClassName={_s.inheritFill}
+                              color='brand'
+                              backgroundColor='none'
+                              className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.mr10, _s.px10].join(' ')}
+                              onClick={this.handleOpenMore}
+                              buttonRef={this.setOpenMoreNodeRef}
+                            />
+                          </div>
+                        }

                        <form action='https://chat.gab.com/private-message' method='POST'>
                          <Button
--- a/app/javascript/gabsocial/components/search.js
+++ b/app/javascript/gabsocial/components/search.js
@@ -128,12 +128,13 @@ class Search extends PureComponent {
      default: 1,
      searchNavigation: (!highlighted && isInNav && theme === 'light') || (isInNav && theme !== 'light'),
      bgWhite: (highlighted && isInNav && theme === 'light'),
+      bgPrimary: !isInNav,
      flexRow: 1,
      radiusSmall: 1,
      alignItemsCenter: 1,
    })

-    const prependIconColor = highlighted ? 'brand' : 'white'
+    const prependIconColor = (highlighted || !isInNav) ? 'brand' : 'white'
    const placeholder = !me ? 'Search Gab' : 'Search for people, groups or news'
    const id = 'nav-search'
      
--- a/app/javascript/gabsocial/components/sidebar_xs.js
+++ b/app/javascript/gabsocial/components/sidebar_xs.js
@@ -13,6 +13,7 @@ import Heading from './heading'
 import Text from './text'
 import List from './list'
 import { closeSidebar } from '../actions/sidebar'
+import { openModal } from '../actions/modal'
 import { shortNumberFormat } from '../utils/numbers'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
@@ -46,6 +47,9 @@ const mapStateToProps = (state) => ({

 const mapDispatchToProps = (dispatch) => ({
  onCloseSidebar: () => dispatch(closeSidebar()),
+  onOpenDisplayModel() {
+    dispatch(openModal())
+  }
 })

 export default @connect(mapStateToProps, mapDispatchToProps)
@@ -109,7 +113,7 @@ class SidebarXS extends ImmutablePureComponent {
      },
      {
        icon: 'shop',
-        href: 'https://shop.gab.com',
+        href: 'https://shop.dissenter.com',
        onClick: this.handleSidebarClose,
        title: intl.formatMessage(messages.shop),
      },
@@ -173,6 +177,19 @@ class SidebarXS extends ImmutablePureComponent {
        onClick: this.handleSidebarClose,
        title: intl.formatMessage(messages.filters),
      },
+      {
+        // : todo :
+        icon: 'user',
+        onClick: this.handleSidebarClose, //on open display model
+        title: intl.formatMessage(messages.filters),
+      },
+      {
+        // : todo :
+        icon: 'user',
+        href: 'https://help.gab.com',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.filters),
+      },
      {
        icon: 'user',
        href: '/auth/sign_out',
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -417,6 +417,7 @@ class Status extends ImmutablePureComponent {
    })

    const containerClasses = cx({
+      default: 1,
      radiusSmall: !isChild && !compactMode,
      bgPrimary: !isChild,
      boxShadowBlock: !isChild && !compactMode,