Progress

app/javascript/gabsocial/actions/sidebar.js

@@ -1,14 +1,14 @@
-export const SIDEBAR_OPEN  = 'SIDEBAR_OPEN';
+export const SIDEBAR_OPEN  = 'SIDEBAR_OPEN'
-export const SIDEBAR_CLOSE = 'SIDEBAR_CLOSE';
+export const SIDEBAR_CLOSE = 'SIDEBAR_CLOSE'
 
 export function openSidebar() {
   return {
     type: SIDEBAR_OPEN,
-  };
+  }
-};
+}
 
 export function closeSidebar() {
   return {
     type: SIDEBAR_CLOSE,
-  };
+  }
-};
+}

app/javascript/gabsocial/components/comment_header.js

@@ -60,7 +60,7 @@ class CommentHeader extends ImmutablePureComponent {
     return (
       <div className={[_s.default, _s.alignItemsStart, _s.py2, _s.maxWidth100PC, _s.flexGrow1].join(' ')}>
 
-        <div className={[_s.default, _s.flexRow, _s.overflowHidden, _s.width100PC, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
+        <div className={[_s.default, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.width100PC, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}>
           <NavLink
             className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')}
             to={`/${status.getIn(['account', 'acct'])}`}

app/javascript/gabsocial/components/composer.js

@@ -196,6 +196,7 @@ class Composer extends PureComponent {
       default: 1,
       cursorText: 1,
       text: 1,
+      colorPrimary: 1,
       fs16PX: !small,
       fs14PX: small,
       pt15: !small,

app/javascript/gabsocial/components/logged_out_navigation_bar.js

@@ -35,7 +35,7 @@ export default class LoggedOutNavigationBar extends PureComponent {
             />
 
             <div className={[_s.default, _s.flexGrow1, _s.mr10].join(' ')}>
-              <Search />
+              <Search isInNav />
             </div>
 
           </ResponsiveClassesComponent>

app/javascript/gabsocial/components/navigation_bar.js

@@ -1,10 +1,10 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
+import { openSidebar } from '../actions/sidebar'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
 import Responsive from '../features/ui/util/responsive_component'
-import ResponsiveClassesComponent from '../features/ui/util/responsive_classes_component'
 import { CX } from '../constants'
 import Avatar from './avatar'
 import BackButton from './back_button'
@@ -18,8 +18,14 @@ const mapStateToProps = (state) => ({
   account: makeGetAccount()(state, me),
 })
 
+const mapDispatchToProps = (dispatch) => ({
+  onOpenSidebar() {
+    dispatch(openSidebar())
+  }
+})
+
 export default
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 class NavigationBar extends ImmutablePureComponent {
 
   static propTypes = {
@@ -28,10 +34,7 @@ class NavigationBar extends ImmutablePureComponent {
     tabs: PropTypes.array,
     title: PropTypes.string,
     showBackBtn: PropTypes.bool,
-  }
+    onOpenSidebar: PropTypes.func.isRequired,
-
-  handleProfileClick = () => {
-
   }
 
   render() {
@@ -41,6 +44,7 @@ class NavigationBar extends ImmutablePureComponent {
       actions,
       tabs,
       account,
+      onOpenSidebar,
     } = this.props
 
 
@@ -70,7 +74,7 @@ class NavigationBar extends ImmutablePureComponent {
                 </h1>
 
                 <div className={[_s.default, _s.width340PX].join(' ')}>
-                  <Search />
+                  <Search isInNav />
                 </div>
 
               </div>
@@ -109,7 +113,7 @@ class NavigationBar extends ImmutablePureComponent {
                   !!account && !showBackBtn &&
                   <button
                     title={account.get('display_name')}
-                    onClick={this.handleProfileClick}
+                    onClick={onOpenSidebar}
                     className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter].join(' ')}
                   >
                     <Avatar account={account} size={32} noHover />
@@ -135,11 +139,9 @@ class NavigationBar extends ImmutablePureComponent {
               </div>
 
               <div className={[_s.default, _s.width84PX, _s.pr15].join(' ')}>
-                {
-                  !!actions &&
                 <div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}>
                   {
-                      actions.map((action, i) => (
+                    actions && actions.map((action, i) => (
                       <Button
                         isNarrow
                         backgroundColor='none'
@@ -153,8 +155,18 @@ class NavigationBar extends ImmutablePureComponent {
                       />
                     ))
                   }
+                  <Button
+                    isNarrow
+                    backgroundColor='none'
+                    color='primary'
+                    to='/search'
+                    key={`action-btn-search`}
+                    className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')}
+                    icon='search'
+                    iconClassName={_s.fillNavigation}
+                    iconSize='18px'
+                  />
                 </div>
-                }
               </div>
               
             </Responsive>

app/javascript/gabsocial/components/notification.js

@@ -147,6 +147,7 @@ class Notification extends ImmutablePureComponent {
                     contextType='notification'
                     id={statusId}
                     isChild
+                    isNotification
                   />
                 </div>
               }

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

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

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

@@ -0,0 +1,51 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { URL_GAB_PRO } from '../../constants'
+import PanelLayout from './panel_layout';
+import Button from '../button'
+import Text from '../text'
+
+const messages = defineMessages({
+  title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+  text: { id: 'pro_upgrade_modal.text_sm', defaultMessage: 'Please consider supporting us on our mission to defend free expression online for all people.' },
+})
+
+export default
+@injectIntl
+class ProPanel extends PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    isPro: PropTypes.bool.isRequired,
+  }
+
+  render() {
+    const { intl, isPro } = this.props
+
+    // if (isPro) return null
+
+    return (
+      <PanelLayout
+        title={intl.formatMessage(messages.title)}
+        subtitle={intl.formatMessage(messages.text)}
+      >
+        <Button
+          isBlock
+          href={URL_GAB_PRO}
+          icon='arrow-up'
+          className={[_s.justifyContentCenter].join(' ')}
+        >
+          <Text
+            color='inherit'
+            weight='medium'
+            size='medium'
+            align='center'
+            className={_s.ml5}
+          >
+            {intl.formatMessage(messages.title)}
+          </Text>
+        </Button>
+      </PanelLayout>
+    )
+  }
+
+}

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

@@ -93,19 +93,19 @@ class ProfileInfoPanel extends ImmutablePureComponent {
                 { 
                   isPro &&
                   <div className={[_s.mr5, _s.radiusSmall, _s.bgPro, _s.py2, _s.px5].join(' ')}>
-                    <Text weight='bold' size='small' color='white' isBadge>PRO</Text>
+                    <Text weight='bold' size='small' className={_s.colorBGPrimary} isBadge>PRO</Text>
                   </div>
                 }
                 {
                   isInvestor && 
                   <div className={[_s.mr5, _s.radiusSmall, _s.bgInvestor, _s.py2, _s.px5].join(' ')}>
-                    <Text weight='bold' size='small' color='white' isBadge>INVESTOR</Text>
+                    <Text weight='bold' size='small' className={_s.colorBGPrimary} isBadge>INVESTOR</Text>
                   </div>
                 }
                 {
                   isDonor &&
                   <div className={[_s.mr5, _s.radiusSmall, _s.bgDonor, _s.py2, _s.px5].join(' ')}>
-                    <Text weight='bold' size='small' color='white' isBadge>DONOR</Text>
+                    <Text weight='bold' size='small' className={_s.colorBGPrimary} isBadge>DONOR</Text>
                   </div>
                 }
               </div>

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

@@ -24,7 +24,7 @@ export default class PopoverLayout extends PureComponent {
 
     if (isXS) {
       return (
-        <div className={[_s.default, _s.bgPrimary, _s.overflowHidden, _s.modal, _s.topRightRadiusSmall, _s.topLeftRadiusSmall].join(' ')}>
+        <div className={[_s.default, _s.bgPrimary, _s.modal, _s.topRightRadiusSmall, _s.topLeftRadiusSmall].join(' ')}>
           {
             !!title &&
             <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
@@ -33,7 +33,7 @@ export default class PopoverLayout extends PureComponent {
               </Heading>
             </div>
           }
-          <div className={[_s.default, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
+          <div className={[_s.default, _s.heightMax80VH, _s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.overflowYScroll].join(' ')}>
             {children}
           </div>
         </div>

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

@@ -79,6 +79,17 @@ class PopoverRoot extends PureComponent {
     window.removeEventListener('resize', this.handleResize, false)
   }
 
+  componentDidUpdate() {
+    const { type } = this.props
+    const { width } = this.state
+
+    if (width <= BREAKPOINT_EXTRA_SMALL && !!type) {
+      document.body.classList.add(_s.overflowYHidden)
+    } else {
+      document.body.classList.remove(_s.overflowYHidden)
+    }
+  }
+
   handleResize = () => {
     const { width } = getWindowDimension()
 

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

@@ -55,7 +55,7 @@ class SidebarMorePopover extends PureComponent {
             },
             {
               title: intl.formatMessage(messages.settings),
-              href: '/settings',
+              href: '/settings/preferences',
             },
             {
               title: intl.formatMessage(messages.logout),

app/javascript/gabsocial/components/search.js

@@ -13,6 +13,7 @@ import Button from './button'
 const mapStateToProps = (state) => ({
   value: state.getIn(['search', 'value']),
   submitted: state.getIn(['search', 'submitted']),
+  theme: state.getIn(['settings', 'displayOptions', 'theme']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
@@ -39,6 +40,8 @@ class Search extends PureComponent {
     withOverlay: PropTypes.bool,
     onClear: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
+    isInNav: PropTypes.bool.isRequired,
+    theme: PropTypes.string,
   }
 
   state = {
@@ -99,6 +102,8 @@ class Search extends PureComponent {
       value,
       submitted,
       onClear,
+      isInNav,
+      theme,
     } = this.props
     const { focused } = this.state
     const highlighted = focused || `${value}`.length > 0
@@ -110,7 +115,7 @@ class Search extends PureComponent {
       lineHeight125: 1,
       displayBlock: 1,
       py7: 1,
-      bgTransparent: !highlighted,
+      bgTransparent: 1,
       colorPrimary: 1,
       fs14PX: 1,
       flexGrow1: 1,
@@ -121,8 +126,8 @@ class Search extends PureComponent {
 
     const containerClasses = CX({
       default: 1,
-      bgBrandLight: !highlighted,
+      searchNavigation: (!highlighted && isInNav && theme === 'light') || (isInNav && theme !== 'light'),
-      bgWhite: highlighted,
+      bgWhite: (highlighted && isInNav && theme === 'light'),
       flexRow: 1,
       radiusSmall: 1,
       alignItemsCenter: 1,
@@ -159,7 +164,7 @@ class Search extends PureComponent {
             color={prependIconColor}
             onClick={this.handleSubmit}
             icon='search'
-            iconClassName={_s.inheritFill}
+            iconClassName={_s.fillInherit}
             iconSize='16px'
           />
         </div>

app/javascript/gabsocial/components/sidebar_xs.js

@@ -0,0 +1,265 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { Link, NavLink } from 'react-router-dom'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { injectIntl, defineMessages } from 'react-intl'
+import { CX } from '../constants'
+import Avatar from './avatar'
+import DisplayName from './display_name'
+import Button from './button'
+import Heading from './heading'
+import Text from './text'
+import List from './list'
+import { closeSidebar } from '../actions/sidebar'
+import { shortNumberFormat } from '../utils/numbers'
+import { me } from '../initial_state'
+import { makeGetAccount } from '../selectors'
+import ProgressPanel from './panel/progress_panel'
+
+const messages = defineMessages({
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' },
+  profile: { id: 'account.profile', defaultMessage: 'Profile' },
+  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
+  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
+  domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
+  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
+  filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
+  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
+  lists: { id: 'column.lists', defaultMessage: 'Lists', },
+  apps: { id: 'tabs_bar.apps', defaultMessage: 'Apps' },
+  more: { id: 'sidebar.more', defaultMessage: 'More' },
+  pro: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+  trends: { id: 'promo.trends', defaultMessage: 'Trends' },
+  search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
+  shop: { id: 'tabs_bar.shop', defaultMessage: 'Store - Buy Merch' },
+  chat: { id: 'tabs_bar.chat', defaultMessage: 'Chat' },
+})
+
+const mapStateToProps = (state) => ({
+  account: makeGetAccount()(state, me),
+  sidebarOpen: state.get('sidebar').open,
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onCloseSidebar: () => dispatch(closeSidebar()),
+})
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class SidebarXS extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    account: ImmutablePropTypes.map,
+    sidebarOpen: PropTypes.bool,
+    onCloseSidebar: PropTypes.func.isRequired,
+  }
+
+  state = {
+    moreOpen: false,
+  }
+
+  componentDidUpdate () {
+    if (!me) return
+
+    if (this.props.sidebarOpen) {
+      document.body.classList.add(_s.overflowYHidden)
+    } else {
+      document.body.classList.remove(_s.overflowYHidden)
+    }
+  }
+
+  toggleMore = () => {
+    this.setState({ moreOpen: !this.state.moreOpen })
+  }
+
+  handleSidebarClose = () => {
+    this.props.onCloseSidebar()
+    this.setState({ moreOpen: false })
+  }
+
+  render () {
+    const { sidebarOpen, intl, account } = this.props
+    const { moreOpen } = this.state
+
+    if (!me || !account) return null
+
+    const acct = account.get('acct')
+    const isPro = account.get('is_pro')
+
+    const moreIcon = moreOpen ? 'minus' : 'plus'
+    const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
+
+    const mainItems = [
+      {
+        icon: 'user',
+        to: `/${acct}`,
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.profile),
+      },
+      {
+        icon: 'arrow-up',
+        href: 'https://pro.gab.com',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.pro),
+      },
+      {
+        icon: 'shop',
+        href: 'https://shop.gab.com',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.shop),
+      },
+      {
+        icon: 'trends',
+        href: 'https://trends.gab.com',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.trends),
+      },
+      {
+        icon: 'chat',
+        href: 'https://chat.gab.com',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.chat),
+      },
+      {
+        icon: 'search',
+        to: '/search',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.search),
+      },
+      {
+        icon: 'cog',
+        href: '/settings/preferences',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.preferences),
+      },
+      {
+        icon: 'list',
+        to: '/lists',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.lists),
+      },
+      {
+        icon: 'user',
+        to: '/follow_requests',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.follow_requests),
+      },
+      {
+        icon: 'user',
+        to: '/blocks',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.blocks),
+      },
+      {
+        icon: 'user',
+        to: '/domain_blocks',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.domain_blocks),
+      },
+      {
+        icon: 'user',
+        to: '/mutes',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.mutes),
+      },
+      {
+        icon: 'user',
+        to: '/filters',
+        onClick: this.handleSidebarClose,
+        title: intl.formatMessage(messages.filters),
+      },
+      {
+        icon: 'user',
+        href: '/auth/sign_out',
+        title: intl.formatMessage(messages.logout),
+      },
+    ]
+
+    const containerClasses = CX({
+      default: 1,
+      posFixed: 1,
+      top0: 1,
+      left0: 1,
+      right0: 1,
+      bottom0: 1,
+      z5: 1,
+      displayNone: !sidebarOpen,
+    })
+        
+    return (
+      <div className={containerClasses}>
+        <div className={[_s.default, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
+        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.width330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxWidth80PC].join(' ')}>
+
+          <div className={[_s.default, _s.flexRow, _s.px15, _s.height53PX, _s.width100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+            <Heading size='h2'>Account Info</Heading>
+            <Button
+              title='close'
+              color='secondary'
+              backgroundColor='none'
+              onClick={this.handleSidebarClose}
+              icon='close'
+              iconSize='12px'
+              className={_s.mlAuto}
+            />
+          </div>
+
+          <div className={[_s.default, _s.width100PC, _s.overflowYScroll, _s.heightCalc53PX].join(' ')}>
+
+            <div className={[_s.default, _s.width100PC, _s.px15, _s.py10].join(' ')}>
+              <div className={[_s.default, _s.mt5].join(' ')}>
+                <Link
+                  to={`/${acct}`}
+                  title={acct}
+                  onClick={this.handleSidebarClose}
+                >
+                  <Avatar account={account} size={60} />
+                </Link>
+              </div>
+              <div className={[_s.default, _s.my10, _s.width100PC].join(' ')}>
+                <DisplayName account={account} isMultiline />
+              </div>
+
+              <div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
+                <NavLink
+                  to={`/${acct}/followers`}
+                  onClick={this.handleSidebarClose}
+                  title={intl.formatNumber(account.get('followers_count'))}
+                  className={[_s.text, _s.noUnderline, _s.underline_onHover, _s.mr15].join(' ')}
+                >
+                  <Text weight='bold'>{shortNumberFormat(account.get('followers_count'))}&nbsp;</Text>
+                  <Text>{intl.formatMessage(messages.followers)}</Text>
+                </NavLink>
+                <NavLink
+                  to={`/${acct}/following`}
+                  onClick={this.handleSidebarClose}
+                  title={intl.formatNumber(account.get('following_count'))}
+                  className={[_s.text, _s.noUnderline, _s.underline_onHover].join(' ')}
+                >
+                  <Text weight='bold'>{shortNumberFormat(account.get('following_count'))}&nbsp;</Text>
+                  <Text>{intl.formatMessage(messages.follows)}</Text>
+                </NavLink>
+              </div>
+
+            </div>
+
+            <div className={[_s.default, _s.my10, _s.px15].join(' ')}>
+              <ProgressPanel />
+            </div>
+
+            <div className={[_s.default, _s.mb15, _s.boxShadowNone].join(' ')}>
+              <List items={mainItems} />
+            </div>
+
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+}

app/javascript/gabsocial/components/status.js

@@ -66,6 +66,7 @@ class Status extends ImmutablePureComponent {
     status: ImmutablePropTypes.map,
     descendantsIds: ImmutablePropTypes.list,
     ancestorStatus: ImmutablePropTypes.map,
+    isNotification: PropTypes.bool,
     isChild: PropTypes.bool,
     isPromoted: PropTypes.bool,
     isFeatured: PropTypes.bool,
@@ -247,6 +248,8 @@ class Status extends ImmutablePureComponent {
   }
 
   handleClick = () => {
+    // : todo : if clicked on isNotification statusactionbaritem do not go to new page
+
     if (this.props.onClick) {
       this.props.onClick()
       return
@@ -363,6 +366,7 @@ class Status extends ImmutablePureComponent {
       isPromoted,
       isChild,
       isHidden,
+      isNotification,
       descendantsIds,
       commentsLimited,
       ancestorStatus,
@@ -437,8 +441,8 @@ class Status extends ImmutablePureComponent {
       radiusSmall: isChild,
       borderColorSecondary: isChild,
       border1PX: isChild,
-      pb10: isChild && status.get('media_attachments').size === 0,
+      pb10: isChild && status.get('media_attachments').size === 0 && !isNotification,
-      pb5: isChild && status.get('media_attachments').size > 1,
+      pb5: isChild && status.get('media_attachments').size > 1 && !isNotification,
       cursorPointer: isChild,
       bgSubtle_onHover: isChild,
     })
@@ -521,7 +525,7 @@ class Status extends ImmutablePureComponent {
                   }
 
                   {
-                    !isChild &&
+                    (!isChild || isNotification) &&
                     <StatusActionBar
                       status={status}
                       onFavorite={this.props.onFavorite}

app/javascript/gabsocial/components/textarea.js

@@ -42,6 +42,7 @@ export default class Textarea extends PureComponent {
       flexGrow1: 1,
       heightMax100VH: 1,
       resizeVertical: 1,
+      colorPrimary: 1,
       px5: !!prependIcon,
       pl15: !prependIcon,
     })

app/javascript/gabsocial/constants.js

@@ -15,6 +15,7 @@ export const ALLOWED_AROUND_SHORT_CODE = '><\u0085\u0020\u00a0\u1680\u2000\u2001
 export const MAX_POST_CHARACTER_COUNT = 3000
 
 export const URL_DISSENTER_SHOP = 'https://shop.dissenter.com'
+export const URL_GAB_PRO = 'https://pro.gab.com'
 
 export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'
 

app/javascript/gabsocial/features/account_gallery.js

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

app/javascript/gabsocial/features/ui/ui.js

@@ -145,6 +145,8 @@ class SwitchingArea extends PureComponent {
         <Redirect from='/' to='/home' exact />
         <WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
 
+        <WrappedRoute path='/compose' exact page={CommunityPage} component={CommunityTimeline} content={children} />
+
         <WrappedRoute path='/timeline/all' exact page={CommunityPage} component={CommunityTimeline} content={children} componentParams={{ title: 'Community Feed' }} />
 
         <WrappedRoute path='/groups' exact page={GroupsPage} component={GroupsCollection} content={children} componentParams={{ activeTab: 'featured' }} />

app/javascript/gabsocial/layouts/layout.js

@@ -1,7 +1,8 @@
 import Sticky from 'react-stickynode'
-import Sidebar from '../components/sidebar'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import { me } from '../initial_state'
+import Sidebar from '../components/sidebar'
+import SidebarXS from '../components/sidebar_xs'
 import NavigationBar from '../components/navigation_bar'
 import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
 import FooterBar from '../components/footer_bar'
@@ -40,6 +41,10 @@ export default class Layout extends PureComponent {
     return (
       <div className={[_s.default, _s.width100PC, _s.heightMin100VH, _s.bgTertiary].join(' ')}>
 
+        <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          <SidebarXS />
+        </Responsive>
+
         {
           me &&
           <NavigationBar

app/javascript/gabsocial/layouts/profile_layout.js

@@ -10,6 +10,7 @@ import MediaGalleryPanel from '../components/panel/media_gallery_panel'
 import NavigationBar from '../components/navigation_bar'
 import FooterBar from '../components/footer_bar'
 import ProfileHeader from '../components/profile_header'
+import FloatingActionButton from '../components/floating_action_button'
 import ProfileNavigationBar from '../components/profile_navigation_bar'
 import LoggedOutNavigationBar from '../components/logged_out_navigation_bar'
 import Responsive from '../features/ui/util/responsive_component';
@@ -71,11 +72,12 @@ export default class ProfileLayout extends ImmutablePureComponent {
 
             </div>
 
+            <FloatingActionButton />
+
           </main>
 
-          <Responsive max={BREAKPOINT_EXTRA_SMALL}>
           <FooterBar />
-          </Responsive>
+
         </Responsive>
 
         <Responsive min={BREAKPOINT_EXTRA_SMALL}>

app/javascript/gabsocial/pages/home_page.js

@@ -2,6 +2,7 @@ import { Fragment } from 'react'
 import { openModal } from '../actions/modal'
 import { defineMessages, injectIntl } from 'react-intl'
 import { MODAL_HOME_TIMELINE_SETTINGS } from '../constants'
+import { me } from '../initial_state'
 // import IntersectionObserverArticle from '../components/intersection_observer_article'
 // import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
 import PageTitle from '../features/ui/util/page_title'
@@ -10,6 +11,7 @@ import ListsPanel from '../components/panel/lists_panel'
 import LinkFooter from '../components/link_footer'
 import WhoToFollowPanel from '../components/panel/who_to_follow_panel'
 import ProgressPanel from '../components/panel/progress_panel'
+import ProPanel from '../components/panel/pro_panel'
 import UserPanel from '../components/panel/user_panel'
 import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
@@ -23,6 +25,7 @@ const messages = defineMessages({
 
 const mapStateToProps = (state) => ({
   totalQueuedItemsCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
+  isPro: state.getIn(['accounts', me, 'is_pro']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
@@ -41,6 +44,7 @@ class HomePage extends PureComponent {
     intl: PropTypes.object.isRequired,
     onOpenHomePageSettingsModal: PropTypes.func.isRequired,
     totalQueuedItemsCount: PropTypes.number.isRequired,
+    isPro: PropTypes.bool,
   }
 
   // intersectionObserverWrapper = new IntersectionObserverWrapper()
@@ -67,6 +71,7 @@ class HomePage extends PureComponent {
       children,
       totalQueuedItemsCount,
       onOpenHomePageSettingsModal,
+      isPro,
     } = this.props
 
     return (
@@ -77,15 +82,12 @@ class HomePage extends PureComponent {
             icon: 'ellipsis',
             onClick: onOpenHomePageSettingsModal,
           },
-          {
-            icon: 'search',
-            onClick: onOpenHomePageSettingsModal,
-          },
         ]}
         layout={(
           <Fragment>
             <UserPanel />
             <ProgressPanel />
+            <ProPanel isPro={isPro} />
             <TrendsPanel />
             <ListsPanel />
             <WhoToFollowPanel />

app/javascript/gabsocial/pages/search_page.js

@@ -66,7 +66,9 @@ class SearchPage extends PureComponent {
         <PageTitle path={title} />
         
         <Responsive max={BREAKPOINT_EXTRA_SMALL}>
+          <div className={[_s.default, _s.px10].join(' ')}>
             <Search />
+          </div>
         </Responsive>
 
         {children}

app/javascript/gabsocial/reducers/sidebar.js

@@ -1,12 +1,19 @@
-import { SIDEBAR_OPEN, SIDEBAR_CLOSE } from '../actions/sidebar';
+import {
+  SIDEBAR_OPEN,
+  SIDEBAR_CLOSE,
+} from '../actions/sidebar'
 
-export default function sidebar(state={}, action) {
+const initialState = {
+  open: false,
+}
+
+export default function sidebar(state = initialState, action) {
   switch(action.type) {
   case SIDEBAR_OPEN:
-    return { sidebarOpen: true };
+    return { open: true }
   case SIDEBAR_CLOSE:
-    return { sidebarOpen: false };
+    return { open: false }
   default:
-    return state;
+    return state
+  }
 }
-};

app/javascript/packs/public.js

@@ -97,7 +97,7 @@ function main ( ) {
           scrollToDetailedStatus();
         })
         .catch(error => {
-          console.error("hello larry-1", error);
+          console.error(error);
           scrollToDetailedStatus();
         });
     } else {
@@ -227,7 +227,7 @@ function main ( ) {
         }, 700);
       }
     } catch (err) {
-      console.error("hello larry-2", err);
+      console.error(err);
     }
 
     input.readonly = oldReadOnly;
@@ -235,5 +235,5 @@ function main ( ) {
 }
 
 loadPolyfills().then(main).catch(error => {
-  console.error("hello larry-3", error);
+  console.error(error);
 });

app/javascript/styles/global.css

@@ -43,6 +43,7 @@
   --navigation_blend: var(--color_brand-dark);
   --navigation_primary: var(--color_white);
   --navigation_brand: var(--color_white);
+  --navigation_search: var(--color_brand-light);
 }
 
 ::selection {
@@ -80,6 +81,7 @@
   --navigation_blend: var(--text_color_secondary) !important;
   --navigation_primary: var(--text_color_primary) !important;
   --navigation_brand: var(--color_brand) !important;
+  --navigation_search: var(--solid_color_tertiary) !important;
 }
 
 :root[theme='black'] {
@@ -101,6 +103,7 @@
   --navigation_blend: var(--text_color_secondary) !important;
   --navigation_primary: var(--text_color_primary) !important;
   --navigation_brand: var(--color_brand) !important;
+  --navigation_search: var(--solid_color_block) !important;
 }
 
 html,
@@ -399,6 +402,8 @@ body {
 .colorBrand { color: var(--color_brand); }
 .colorGabPro { color: var(--color_gold); }
 
+.colorBGPrimary { color: var(--solid_color_primary); }
+
 /*  */
 
 .fillPrimary { fill: var(--text_color_primary); }
@@ -486,6 +491,7 @@ body {
 .heightAuto { height: auto; }
 
 .maxWidth100PC { max-width: 100%; }
+.maxWidth80PC { max-width: 80%; }
 .maxWidth640PX { max-width: 640px; }
 .maxWidth180PX { max-width: 180px; }
 .maxWidth100PC42PX { max-width: calc(100% - 42px); }
@@ -678,6 +684,7 @@ body {
 .z2 { z-index: 2; }
 .z3 { z-index: 3; }
 .z4 { z-index: 4; }
+.z5 { z-index: 5; }
 
 .my10 {
   margin-top: 10px;
@@ -934,6 +941,10 @@ body {
   fill: var(--navigation_brand);
 }
 
+.searchNavigation {
+  background-color: var(--navigation_search);
+}
+
 /**
  * Rich Text Editor
  */