Progress

app/javascript/gabsocial/actions/tenor.js

@@ -1,5 +1,5 @@
 import api from '../api';
-import { me, tenorkey } from '../initial_state'
+import { me } from '../initial_state'
 
 export const GIFS_CLEAR_RESULTS = 'GIFS_CLEAR_RESULTS'
 export const GIF_SET_SELECTED = 'GIF_SET_SELECTED'

app/javascript/gabsocial/components/error_boundary.js

@@ -1,3 +1,5 @@
+import Layout from '../layouts/layout'
+
 export default class ErrorBoundary extends PureComponent {
 
   static propTypes = {

app/javascript/gabsocial/components/modal/display_options_modal.js

@@ -1,24 +1,30 @@
 import { injectIntl, defineMessages } from 'react-intl'
-import { muteAccount } from '../../actions/accounts'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import Text from '../text'
+import SettingSwitch from '../setting_switch'
 
 const messages = defineMessages({
-  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  title: { id: 'display_options', defaultMessage: 'Display Options' },
+  message: { id: 'display_options.message', defaultMessage: 'Display settings affect your Gab account on this browser. These settings are only visible to you.' },
+  title: { id: 'display_options', defaultMessage: 'Customize your view' },
 })
 
 const mapStateToProps = (state) => ({
-  
+  settings: state.getIn(['notifications', 'filter']),
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  
+  onChange(path, value) {
+    dispatch(setFilter(path, value))
+  },
 })
 
 export default
 @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
-class DisplayOptionsModal extends PureComponent {
+class DisplayOptionsModal extends ImmutablePureComponent {
 
   static propTypes = {
     isSubmitting: PropTypes.bool.isRequired,
@@ -26,10 +32,8 @@ class DisplayOptionsModal extends PureComponent {
     onConfirm: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  }
-
-  componentDidMount() {
-    this.button.focus()
+    onChange: PropTypes.func.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
   }
 
   handleClick = () => {
@@ -37,20 +41,107 @@ class DisplayOptionsModal extends PureComponent {
     this.props.onConfirm(this.props.account, this.props.notifications)
   }
 
-  handleCancel = () => {
-    this.props.onClose()
-  }
-
   // document.documentElement.style.setProperty("--color-surface", "black");
   
   render() {
-    const { account, intl } = this.props
+    const {
+      account,
+      intl,
+      settings,
+      onChange,
+      onClose,
+    } = this.props
+
+    // theme - light, muted, dark
+    // text size - extra small, small, normal, medium, large, extra large
+    // rounded borders
 
     return (
       <ModalLayout
-        width={320}
+        onClose={onClose}
+        width={520}
         title={intl.formatMessage(messages.title)}
       >
+
+        <div className={[_s.default, _s.mb15].join(' ')}>
+          <Text>
+            {intl.formatMessage(messages.message)}
+          </Text>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' color='secondary'>
+            Font Size
+          </Text>
+          <div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
+            test
+          </div>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' 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'}
+            />
+
+            <SettingSwitch
+              prefix='notification'
+              settings={settings}
+              settingPath={'onlyVerified'}
+              onChange={onChange}
+              label={'Circle Radius'}
+            />
+          </div>
+        </div>
+
+        <div className={[_s.default, _s.mb10].join(' ')}>
+          <Text weight='bold' 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.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Light
+                </Text>
+              </div>
+            </div>
+
+            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Muted
+                </Text>
+              </div>
+            </div>
+
+            <div className={[_s.default, _s.py10, _s.px10, _s.flexGrow1].join(' ')}>
+              <div className={[_s.default, _s.bgPrimary, _s.radiusSmall]}>
+                <Text>
+                  Black
+                </Text>
+              </div>
+            </div>
+
+          </div>
+        </div>
+        
+        <div className={[_s.mlAuto, _s.mrAuto].join(' ')}>
+          <Button>
+            <Text size='medium' color='inherit'>
+              Done
+            </Text>
+          </Button>
+        </div>
+
       </ModalLayout> 
     )
   }

app/javascript/gabsocial/components/navigation_bar.js

@@ -1,14 +1,15 @@
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import { NavLink } from 'react-router-dom'
 import { BREAKPOINT_EXTRA_SMALL } from '../constants'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
 import Responsive from '../features/ui/util/responsive_component'
 import { CX } from '../constants'
-import Search from './search'
 import Avatar from './avatar'
+import Button from './button'
 import Icon from './icon'
+import Search from './search'
+import Text from './text'
 
 const mapStateToProps = (state) => ({
   account: makeGetAccount()(state, me),
@@ -48,9 +49,9 @@ class NavigationBar extends ImmutablePureComponent {
             <div className={[_s.default, _s.flexRow].join(' ')}>
 
               <h1 className={[_s.default, _s.mr15].join(' ')}>
-                <NavLink to='/' aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
+                <Button to='/' aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
                   <Icon id='gab-logo' className={_s.fillWhite} />
-                </NavLink>
+                </Button>
               </h1>
 
               <Responsive min={BREAKPOINT_EXTRA_SMALL}>
@@ -68,12 +69,12 @@ class NavigationBar extends ImmutablePureComponent {
                 <NavigationBarButtonDivider />
 
                 <NavigationBarButton icon='notifications' to='/notifications' />
-                <NavigationBarButton icon='cog' to='/notifications' />
+                <NavigationBarButton icon='cog' href='/settings/preferences' />
 
                 <NavigationBarButtonDivider />
 
                 <button onClick={this.handleProfileClick} className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')}>
-                  <Avatar account={account} size={32} />
+                  <Avatar account={account} size={32} noHover />
                 </button>
               </div>
             </div>
@@ -103,7 +104,7 @@ class NavigationBarButton extends PureComponent {
     title: PropTypes.string,
     icon: PropTypes.string,
     to: PropTypes.string,
-    onClick: PropTypes.func,
+    href: PropTypes.string,
   }
 
   render() {
@@ -111,7 +112,7 @@ class NavigationBarButton extends PureComponent {
       title,
       icon,
       to,
-      onClick,
+      href,
     } = this.props
 
     const active = false
@@ -131,6 +132,7 @@ class NavigationBarButton extends PureComponent {
       fs13PX: !!title,
       fontWeightNormal: !!title,
       textUppercase: !!title,
+      noUnderline: 1,
     })
 
     const iconClasses = CX({
@@ -142,14 +144,21 @@ class NavigationBarButton extends PureComponent {
     const iconSize = !!title ? 16 : 18
 
     return (
-      <button
-        noClasses
+      <Button
+        to={to}
+        href={href}
         color='white'
         className={classes}
+        noClasses
       >
         <Icon className={iconClasses} id={icon} size={iconSize} />
-        {title}
-      </button>
+        {
+          !!title &&
+          <Text color='white'>
+            {title}
+          </Text>
+        }
+      </Button>
     )
   }
 

app/javascript/gabsocial/components/sidebar.js

@@ -153,11 +153,6 @@ class Sidebar extends ImmutablePureComponent {
         icon: 'list',
         to: '/lists',
       },
-      {
-        title: 'Chat',
-        icon: 'chat',
-        href: 'https://chat.gab.com',
-      },
       {
         title: 'More',
         icon: 'more',
@@ -183,6 +178,11 @@ class Sidebar extends ImmutablePureComponent {
     ]
 
     const exploreItems = [
+      {
+        title: 'Chat',
+        icon: 'chat',
+        href: 'https://chat.gab.com',
+      },
       {
         title: 'Apps',
         icon: 'apps',

app/javascript/gabsocial/components/sidebar_section_item.js

@@ -52,7 +52,7 @@ export default class SidebarSectionItem extends PureComponent {
     const { hovering } = this.state
 
     const iconSize = '16px'
-    const currentPathname = this.context.router.route.location.pathname
+    const currentPathname = this.context.router ? this.context.router.route.location.pathname : undefined
     const shouldShowActive = hovering || active || currentPathname === to || currentPathname === href
     const isNotifications = to === '/notifications'
 

app/javascript/gabsocial/constants.js

@@ -60,3 +60,27 @@ export const MODAL_STATUS_REVISIONS = 'STATUS_REVISIONS'
 export const MODAL_UNAUTHORIZED = 'UNAUTHORIZED'
 export const MODAL_UNFOLLOW = 'UNFOLLOW'
 export const MODAL_VIDEO = 'VIDEO'
+
+export const FONT_SIZES_EXTRA_SMALL = '12px'
+export const FONT_SIZES_SMALL = '13px'
+export const FONT_SIZES_NORMAL = '14px'
+export const FONT_SIZES_MEDIUM = '15px'
+export const FONT_SIZES_LARGE = '16px'
+export const FONT_SIZES_EXTRA_LARGE = '17px'
+
+export const FONT_SIZES = {
+  'extra-small': FONT_SIZES_EXTRA_SMALL,
+  small: FONT_SIZES_SMALL,
+  normal: FONT_SIZES_NORMAL,
+  medium: FONT_SIZES_MEDIUM,
+  large: FONT_SIZES_LARGE,
+  'extra-large': FONT_SIZES_EXTRA_LARGE,
+}
+export const THEMES = [
+  'light',
+  'muted',
+  'black',
+]
+
+export const DEFAULT_THEME = 'light'
+export const DEFAULT_FONT_SIZE = 'normal'

app/javascript/gabsocial/containers/display.js

@@ -0,0 +1,92 @@
+import {
+  FONT_SIZES,
+  THEMES,
+  DEFAULT_THEME,
+  DEFAULT_FONT_SIZE,
+} from '../constants'
+
+export default class Display extends PureComponent {
+
+  static propTypes = {
+    theme: PropTypes.string.isRequired,
+    rounded: PropTypes.bool.isRequired,
+    fontSize: PropTypes.string.isRequired,
+  }
+
+  state = {
+    theme: this.props.theme,
+    rounded: this.props.rounded,
+    fontSize: this.props.fontSize,
+  }
+
+  static defaultProps = {
+    theme: 'BLACK',
+    rounded: false,
+    fontSize: 'normal',
+  }
+
+  componentDidMount() {
+    this.updateTheme(this.state.theme)
+    this.updateRounded(this.state.rounded)
+    this.updateFontSizes(this.state.fontSize)
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.theme !== prevState.theme ||
+      nextProps.rounded !== prevState.rounded ||
+      nextProps.fontSize !== prevState.fontSize) {
+      return {
+        theme: nextProps.theme,
+        rounded: nextProps.rounded,
+        fontSize: nextProps.fontSize,
+      }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.theme !== this.state.theme) {
+      this.updateTheme(this.state.theme)
+    }
+
+    if (prevState.rounded !== this.state.rounded) {
+      this.updateRounded(this.state.rounded)
+    }
+    
+    if (prevState.fontSize !== this.state.fontSize) {
+      this.updateFontSizes(this.state.fontSize)
+    }
+  }
+
+  updateRounded(rounded) {
+    if (rounded) {
+      document.documentElement.removeAttribute('rounded')
+    } else {
+      document.documentElement.setAttribute('rounded', '')
+    }
+  }
+
+  updateFontSizes(fontSize) {
+    let correctedFontSize = fontSize.toUpperCase()
+    if (!FONT_SIZES.hasOwnProperty(correctedFontSize)) {
+      correctedFontSize = DEFAULT_FONT_SIZE
+    }
+
+    document.documentElement.style.setProperty('font-size', FONT_SIZES[correctedFontSize]);
+  }
+
+  updateTheme(theme) {
+    let correctedTheme = theme.toLowerCase()
+    if (!THEMES.hasOwnProperty(correctedTheme)) {
+      correctedTheme = DEFAULT_THEME
+    }
+
+    document.documentElement.setAttribute('theme', correctedTheme);
+  }
+
+  render() {
+    return this.props.children
+  }
+
+}

app/javascript/gabsocial/containers/gabsocial.js

@@ -1,55 +1,60 @@
-'use strict';
+'use strict'
 
-import { Provider } from 'react-redux';
-import configureStore from '../store/configureStore';
-import { INTRODUCTION_VERSION } from '../actions/onboarding';
-import { BrowserRouter, Route } from 'react-router-dom';
-import { ScrollContext } from 'react-router-scroll-4';
-import { IntlProvider, addLocaleData } from 'react-intl';
-import { fetchCustomEmojis } from '../actions/custom_emojis';
-import { hydrateStore } from '../actions/store';
+import { Provider } from 'react-redux'
+import configureStore from '../store/configureStore'
+import { INTRODUCTION_VERSION } from '../actions/onboarding'
+import { BrowserRouter, Route } from 'react-router-dom'
+import { ScrollContext } from 'react-router-scroll-4'
+import { IntlProvider, addLocaleData } from 'react-intl'
+import { fetchCustomEmojis } from '../actions/custom_emojis'
+import { hydrateStore } from '../actions/store'
 import {
   connectUserStream,
   connectStatusUpdateStream,
-} from '../actions/streaming';
-import { getLocale } from '../locales';
-import initialState from '../initial_state';
-import { me } from '../initial_state';
-import UI from '../features/ui';
-// import Introduction from '../features/introduction';
-import ErrorBoundary from '../components/error_boundary';
+} from '../actions/streaming'
+import { getLocale } from '../locales'
+import initialState from '../initial_state'
+import { me } from '../initial_state'
+import UI from '../features/ui'
+// import Introduction from '../features/introduction'
+import ErrorBoundary from '../components/error_boundary'
+import Display from './display'
 
-const { localeData, messages } = getLocale();
-addLocaleData(localeData);
+const { localeData, messages } = getLocale()
+addLocaleData(localeData)
 
-export const store = configureStore();
-const hydrateAction = hydrateStore(initialState);
+export const store = configureStore()
+const hydrateAction = hydrateStore(initialState)
 
-store.dispatch(hydrateAction);
-store.dispatch(fetchCustomEmojis());
+store.dispatch(hydrateAction)
+store.dispatch(fetchCustomEmojis())
 
 const mapStateToProps = (state) => {
-  const account = state.getIn(['accounts', me]);
-  const showIntroduction = account ? state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION : false;
+  const account = state.getIn(['accounts', me])
+  const showIntroduction = account ? state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION : false
 
   return {
     showIntroduction,
-  };
-};
+  }
+}
 
 @connect(mapStateToProps)
 class GabSocialMount extends PureComponent {
 
   static propTypes = {
     showIntroduction: PropTypes.bool,
-  };
+  }
+
+  componentDidMount() {
+
+  }
 
   render () {
     // Disabling introduction for launch
-    // const { showIntroduction } = this.props;
+    // const { showIntroduction } = this.props
     //
     // if (showIntroduction) {
-    //   return <Introduction />;
+    //   return <Introduction />
     // }
 
     return (
@@ -58,7 +63,7 @@ class GabSocialMount extends PureComponent {
           <Route path='/' component={UI} />
         </ScrollContext>
       </BrowserRouter>
-    );
+    )
   }
 
 }
@@ -67,34 +72,36 @@ export default class GabSocial extends PureComponent {
 
   static propTypes = {
     locale: PropTypes.string.isRequired,
-  };
+  }
 
   componentDidMount() {
     if (!!me) {
-      this.disconnect = store.dispatch(connectUserStream());
-      store.dispatch(connectStatusUpdateStream());
+      this.disconnect = store.dispatch(connectUserStream())
+      store.dispatch(connectStatusUpdateStream())
     }
   }
 
   componentWillUnmount () {
     if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
+      this.disconnect()
+      this.disconnect = null
     }
   }
 
   render () {
-    const { locale } = this.props;
+    const { locale } = this.props
 
     return (
       <IntlProvider locale={locale} messages={messages}>
         <Provider store={store}>
-          <ErrorBoundary>
-            <GabSocialMount />
-          </ErrorBoundary>
+          <Display>
+            <ErrorBoundary>
+              <GabSocialMount />
+            </ErrorBoundary>
+          </Display>
         </Provider>
       </IntlProvider>
-    );
+    )
   }
 
 }

app/javascript/gabsocial/features/compose/compose.js

@@ -7,7 +7,6 @@ import {
   mountCompose,
   unmountCompose,
 } from '../../actions/compose';
-import { mascot } from '../../initial_state';
 import Motion from '../ui/util/optional_motion';
 import ComposeFormContainer from './containers/compose_form_container';
 import NavigationBar from './components/navigation_bar';
@@ -83,9 +82,6 @@ class Compose extends ImmutablePureComponent {
 
             <ComposeFormContainer />
 
-            <div className='drawer__inner__gabsocial'>
-              <img alt='' draggable='false' src={mascot || elephantUIPlane} />
-            </div>
           </div>}
         </div>
       </div>

app/javascript/gabsocial/initial_state.js

@@ -19,7 +19,6 @@ export const invitesEnabled = getMeta('invites_enabled');
 export const repository = getMeta('repository');
 export const source_url = getMeta('source_url');
 export const version = getMeta('version');
-export const mascot = getMeta('mascot');
 export const profile_directory = getMeta('profile_directory');
 export const isStaff = getMeta('is_staff');
 export const forceSingleColumn = !getMeta('advanced_layout');
@@ -27,6 +26,5 @@ export const promotions = initialState && initialState.promotions;
 export const unreadCount = getMeta('unread_count');
 export const monthlyExpensesComplete = getMeta('monthly_expenses_complete');
 export const favouritesCount = getMeta('favourites_count');
-export const tenorkey = getMeta('tenorkey');
 
 export default initialState;

app/javascript/gabsocial/layouts/group_layout.js

@@ -32,18 +32,18 @@ export default class GroupLayout extends ImmutablePureComponent {
         actions={actions}
         showBackBtn={showBackBtn}
       >
-        <div className={[_s.default, _s.width100PC].join(' ')}>
+        <div className={[_s.default, _s.width100PC, _s.pl15].join(' ')}>
 
           <GroupHeader group={group} relationships={relationships} />
 
-          <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentSpaceBetween].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.width100PC, _s.justifyContentEnd].join(' ')}>
             <div className={[_s.default, _s.width645PX, _s.z1].join(' ')}>
               <div className={_s.default}>
                 {children}
               </div>
             </div>
 
-            <div className={[_s.default, _s.width340PX].join(' ')}>
+            <div className={[_s.default, _s.ml15, _s.width340PX].join(' ')}>
               <Sticky top={73} enabled>
                 <div className={[_s.default, _s.width340PX].join(' ')}>
                   {layout}

app/javascript/gabsocial/layouts/profile_layout.js

@@ -5,6 +5,7 @@ import ProfileHeader from '../components/profile_header'
 import NavigationBar from '../components/navigation_bar'
 
 export default class ProfileLayout extends ImmutablePureComponent {
+
   static propTypes = {
     children: PropTypes.node.isRequired,
     account: ImmutablePropTypes.map,

app/javascript/gabsocial/pages/notifications_page.js

@@ -96,8 +96,6 @@ class NotificationsPage extends PureComponent {
       active: selectedFilter.toLowerCase() === filter.toLowerCase(),
     }))
 
-    console.log("selectedFilter, filter: ", tabs, selectedFilter)
-
     return (
       <DefaultLayout
         title={intl.formatMessage(messages.notifications)}

app/javascript/gabsocial/pages/search_page.js

@@ -7,6 +7,10 @@ import Layout from '../layouts/layout'
 
 const messages = defineMessages({
   search: { id: 'search', defaultMessage: 'Search' },
+  top: { id: 'top', defaultMessage: 'Top' },
+  people: { id: 'people', defaultMessage: 'People' },
+  groups: { id: 'groups', defaultMessage: 'Groups' },
+  hashtags: { id: 'hashtags', defaultMessage: 'Hashtags' },
 })
 
 export default
@@ -19,31 +23,24 @@ class SearchPage extends PureComponent {
   }
 
   render() {
-    const {
-      intl,
-      children,
-    } = this.props
+    const { intl, children } = this.props
 
     const title = intl.formatMessage(messages.search)
     const tabs = [
       {
-        title: 'Top',
+        title: intl.formatMessage(messages.top),
         to: '/search'
       },
       {
-        title: 'People',
+        title: intl.formatMessage(messages.people),
         to: '/search/people'
       },
       {
-        title: 'Groups',
+        title: intl.formatMessage(messages.groups),
         to: '/search/groups'
       },
       {
-        title: 'Trends',
-        to: '/search/trends'
-      },
-      {
-        title: 'Hashtags',
+        title: intl.formatMessage(messages.hashtags),
         to: '/search/hashtags'
       },
     ]

app/javascript/gabsocial/reducers/settings.js

@@ -7,11 +7,16 @@ import uuid from '../utils/uuid';
 
 const initialState = ImmutableMap({
   saved: true,
-
   onboarded: false,
-
   skinTone: 1,
 
+  // displayOptions: ImmutableMap({
+  //   fontSize: 'normal',
+  //   radiusSmallEnabled: true,
+  //   radiusCircleEnabled: true,
+  //   theme: 'light',
+  // }),
+
   home: ImmutableMap({
     shows: ImmutableMap({
       photos: true,