Progress

app/javascript/gabsocial/components/floating_action_button.js

@@ -1,4 +1,3 @@
-import Icon from './icon'
 import Button from './button'
 
 export default class FloatingActionButton extends PureComponent {
@@ -21,13 +20,12 @@ export default class FloatingActionButton extends PureComponent {
       <Button
         onClick={onClick}
         color='white'
-        className={[_s.positionFixed, _s.z4, _s.bottom0, _s.right0].join(' ')}
+        backgroundColor='brand'
+        className={[_s.positionFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom0, _s.right0].join(' ')}
         title={message}
         aria-label={message}
-      >
-        <Icon id='compose' />
-        [...]
-      </Button>
+        icon='pencil'
+      />
     )
   }
 }

app/javascript/gabsocial/components/icon.js

@@ -44,6 +44,7 @@ import MoreIcon from '../assets/more_icon'
 import NotificationsIcon from '../assets/notifications_icon'
 import OLListIcon from '../assets/ol_list_icon'
 import PauseIcon from '../assets/pause_icon'
+import PencilIcon from '../assets/pencil_icon'
 import PinIcon from '../assets/pin_icon'
 import PlayIcon from '../assets/play_icon'
 import PollIcon from '../assets/poll_icon'
@@ -111,6 +112,7 @@ const ICONS = {
   'notifications': NotificationsIcon,
   'ol-list': OLListIcon,
   'pause': PauseIcon,
+  'pencil': PencilIcon,
   'pin': PinIcon,
   'play': PlayIcon,
   'poll': PollIcon,

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

@@ -1,7 +1,7 @@
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import { changeSetting, saveSettings } from '../../actions/settings'
+import { setFilter } from '../../actions/notifications'
 import PanelLayout from './panel_layout'
 import SettingSwitch from '../setting_switch'
 
@@ -12,14 +12,13 @@ const messages = defineMessages({
 })
 
 const mapStateToProps = state => ({
-  settings: state.getIn(['settings', 'notifications']),
+  settings: state.getIn(['notifications', 'filter']),
 })
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    onChange(key, checked) {
-      dispatch(changeSetting(['notifications', ...key], checked))
-      dispatch(saveSettings())
+    onChange(path, value) {
+      dispatch(setFilter(path, value))
     },
   }
 }
@@ -43,7 +42,7 @@ class NotificationFilterPanel extends ImmutablePureComponent {
         <SettingSwitch
           prefix='notification'
           settings={settings}
-          settingPath={['quickFilter', 'onlyVerifed']}
+          settingPath={'onlyVerified'}
           onChange={onChange}
           label={intl.formatMessage(messages.onlyVerified)}
         />
@@ -51,7 +50,7 @@ class NotificationFilterPanel extends ImmutablePureComponent {
         <SettingSwitch
           prefix='notification'
           settings={settings}
-          settingPath={['quickFilter', 'onlyFollowing']}
+          settingPath={'onlyFollowing'}
           onChange={onChange}
           label={intl.formatMessage(messages.onlyFollowing)}
         />

app/javascript/gabsocial/components/setting_switch.js

@@ -7,7 +7,10 @@ export default class SettingSwitch extends ImmutablePureComponent {
   static propTypes = {
     prefix: PropTypes.string,
     settings: ImmutablePropTypes.map.isRequired,
-    settingPath: PropTypes.array.isRequired,
+    settingPath: PropTypes.oneOfType([
+      PropTypes.array,
+      PropTypes.string,
+    ]).isRequired,
     description: PropTypes.string,
     label: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
@@ -26,14 +29,17 @@ export default class SettingSwitch extends ImmutablePureComponent {
       description
     } = this.props
 
-    const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-')
-
+    const isArray = Array.isArray(settingPath)
+    const checked = isArray ? settings.getIn(settingPath) : settings.get(settingPath)
+    const idVal = isArray ? settingPath.join('-') : settingPath
+    const id = ['setting-toggle', prefix, idVal].filter(Boolean).join('-')
+  
     return (
       <Switch
         description={description}
         label={label}
         id={id}
-        checked={settings.getIn(settingPath)}
+        checked={checked}
         onChange={this.onChange}
         onKeyDown={this.onKeyDown}
       />

app/javascript/gabsocial/components/sidebar.js

@@ -1,12 +1,14 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'
+import * as Constants from '../constants'
 import Button from './button'
 import { closeSidebar } from '../actions/sidebar'
 import { openModal } from '../actions/modal'
 import { openPopover } from '../actions/popover'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
+import Responsive from '../features/ui/util/responsive_component'
 import SidebarSectionTitle from './sidebar_section_title'
 import SidebarSectionItem from './sidebar_section_item'
 import SidebarHeader from './sidebar_header'
@@ -197,7 +199,7 @@ class Sidebar extends ImmutablePureComponent {
       <header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}>
         <div className={[_s.default, _s.width240PX].join(' ')}>
           <div className={[_s.default, _s.positionFixed, _s.top0, _s.height100PC].join(' ')}>
-            <div className={[_s.default, _s.height100PC, _s.width240PX, _s.pr15, _s.py10, _s.overflowYScroll].join(' ')}>
+            <div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.overflowYScroll].join(' ')}>
 
               <SidebarHeader />
 
@@ -226,13 +228,23 @@ class Sidebar extends ImmutablePureComponent {
                 }
               </nav>
 
-              <Button
-                block
-                onClick={this.handleOpenComposeModal}
-                className={[_s.py15, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
-              >
-                Gab
-              </Button>
+              <Responsive min={Constants.BREAKPOINT_SMALL}>
+                <Button
+                  block
+                  onClick={this.handleOpenComposeModal}
+                  className={[_s.py15, _s.fontSize15PX, _s.fontWeightBold].join(' ')}
+                >
+                  Gab
+                </Button>
+              </Responsive>
+
+              <Responsive max={Constants.BREAKPOINT_SMALL}>
+                <Button
+                  onClick={this.handleOpenComposeModal}
+                  className={_s.py15}
+                  icon='pencil'
+                />
+              </Responsive>
 
             </div>
           </div>

app/javascript/gabsocial/components/status/status.js

@@ -387,6 +387,7 @@ class Status extends ImmutablePureComponent {
 
     const containerClasses = cx({
       default: 1,
+      radiusSmall: !borderless && !isChild,
       mb15: !borderless && !isChild,
       backgroundColorPrimary: 1,
       pb15: featured,

app/javascript/gabsocial/components/tab_bar_item.js

@@ -57,6 +57,7 @@ class TabBarItem extends PureComponent {
       justifyContentCenter: 1,
       borderBottom2PX: 1,
       py5: 1,
+      outlineNone: 1,
       cursorPointer: 1,
       backgroundTransparent: 1,
       borderColorTransparent: !isActive,