Progress

2020-04-30 00:34:50 -04:00 · 2020-04-30 00:34:50 -04:00 · 8673eb8975
parent 03de4c4fea
commit 8673eb8975
26 changed files with 406 additions and 164 deletions
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@ -99,7 +99,7 @@ class ApplicationController < ActionController::Base
  end

  def current_theme
-    return Setting.theme unless Themes.instance.names.include? current_user&.setting_theme
+    return Setting.theme
    current_user.setting_theme
  end

--- a/app/javascript/gabsocial/actions/tenor.js
+++ b/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'
--- a/app/javascript/gabsocial/components/error_boundary.js
+++ b/app/javascript/gabsocial/components/error_boundary.js
@ -1,3 +1,5 @@
+import Layout from '../layouts/layout'
+
 export default class ErrorBoundary extends PureComponent {

  static propTypes = {
--- a/app/javascript/gabsocial/components/modal/display_options_modal.js
+++ b/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> 
    )
  }
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/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>
    )
  }

--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/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',
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/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'

--- a/app/javascript/gabsocial/constants.js
+++ b/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'
--- a/app/javascript/gabsocial/containers/display.js
+++ b/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
+  }
+
+}
--- a/app/javascript/gabsocial/containers/gabsocial.js
+++ b/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>
-    );
+    )
  }

 }
--- a/app/javascript/gabsocial/features/compose/compose.js
+++ b/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>
--- a/app/javascript/gabsocial/initial_state.js
+++ b/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;
--- a/app/javascript/gabsocial/layouts/group_layout.js
+++ b/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}
--- a/app/javascript/gabsocial/layouts/profile_layout.js
+++ b/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,
--- a/app/javascript/gabsocial/pages/notifications_page.js
+++ b/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)}
--- a/app/javascript/gabsocial/pages/search_page.js
+++ b/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'
      },
    ]
--- a/app/javascript/gabsocial/reducers/settings.js
+++ b/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,
--- a/app/javascript/images/logo.svg
+++ b/app/javascript/images/logo.svg
@ -1 +1,19 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.4144 232.00976"><path d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="#3088d4"/><path d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="#fff"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Created with Inkscape (http://www.inkscape.org/) by Marsupilami -->
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg20762"
+   width="1024"
+   height="625"
+   viewBox="-8.6929917 -8.6929917 503.3613834 307.1523734">
+  <defs
+     id="defs20764" />
+  <path
+     id="gab"
+     d="m 110.3872,73.5915 45.9946,0 0,126.4853 c 0,60.6555 -33.0586,89.6896 -82.7904,89.6896 -22.7098,0 -42.8325,-7.7616 -55.1936,-18.3979 l 18.3979,-34.496 c 10.6363,7.1867 20.6976,11.4987 34.2085,11.4987 24.4347,0 39.383,-17.5355 39.383,-42.8325 l 0,-7.7616 C 100.0384,210.1381 85.3776,216.1749 69.2794,216.1749 29.8965,216.1749 0,183.4037 0,142.5835 0,101.7632 29.8965,68.992 69.2794,68.992 c 16.0982,0 30.759,6.0368 41.1078,18.3979 l 0,-13.7984 z M 78.1909,174.7797 c 17.5355,0 32.1963,-14.6608 32.1963,-32.1962 0,-17.5355 -14.6608,-32.1963 -32.1963,-32.1963 -17.5355,0 -32.1963,14.6608 -32.1963,32.1963 0,17.5354 14.6608,32.1962 32.1963,32.1962 z m 228.0395,36.7958 -45.9947,0 0,-11.4987 c -8.9115,10.0613 -21.2725,16.0981 -37.3707,16.0981 -32.1962,0 -50.0192,-22.4224 -50.0192,-48.0069 0,-37.9456 46.5696,-52.0315 86.815,-39.9579 -0.8624,-12.361 -8.624,-21.2725 -24.7222,-21.2725 -11.2112,0 -24.1472,4.312 -32.1962,8.9115 L 188.944,82.7904 c 10.6362,-6.8992 30.184,-13.7984 52.8938,-13.7984 33.6336,0 64.3926,18.9728 64.3926,70.7168 l 0,71.8667 z m -45.9947,-54.6187 c -21.56,-6.8992 -41.3952,-3.1621 -41.3952,12.0736 0,8.9115 7.4741,14.9483 16.3856,14.9483 10.6363,0 22.7099,-8.624 25.0096,-27.0219 z M 375.5882,0 l 0,87.3899 C 385.937,75.0288 400.5978,68.992 416.696,68.992 c 39.3829,0 69.2794,32.7712 69.2794,73.5915 0,40.8202 -29.8965,73.5914 -69.2794,73.5914 -16.0982,0 -30.759,-6.0368 -41.1078,-18.3978 l 0,13.7984 -45.9946,0 0,-211.5755 45.9946,0 z m 32.1963,174.7797 c 17.5355,0 32.1963,-14.6608 32.1963,-32.1962 0,-17.5355 -14.6608,-32.1963 -32.1963,-32.1963 -17.5355,0 -32.1963,14.6608 -32.1963,32.1963 0,17.5354 14.6608,32.1962 32.1963,32.1962 z"
+     style="fill:#00d178" />
+</svg>
+<!-- version: 20171223, original size: 485.9754 289.76639, border: 3% -->
--- a/app/javascript/images/logo_full.svg
+++ b/app/javascript/images/logo_full.svg
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@ -1,17 +1,4 @@
 :root {
-  --radius-small: 8px;
-  --radius-circle: 9999px;
-
-  /* Default Font Sizes */
-
-  --font_size_extra_small: 12px;
-  --font_size_small: 13px;
-  --font_size_normal: 14px;
-  --font_size_medium: 15px;
-  --font_size_large: 16px;
-  --font_size_extra_large: 19px;
-  --font_size_extra_extra_large: 24px;
-
  --color_brand-dark: #378e61;
  --color_brand-light: #63DA9D;
  --color_brand-light-opaque: rgb(54, 233, 145, .125);
@ -25,7 +12,26 @@
  --color_red: #de2960;
  --color_red-dark: #c72c5b;

-  /* LIGHT THEME */
+  --fs_xs: 0.8571428571rem;
+  --fs_s: 0.9285714286rem;
+  --fs_n: 1rem;
+  --fs_m: 1.0714285714rem;
+  --fs_l: 1.1428571429rem;
+  --fs_xl: 1.3571428571rem;
+  --fs_xxl: 1.7142857143;
+}
+
+:root {
+  --radius-small: 0;
+  --radius-circle: 0;
+}
+
+:root[rounded] {
+  --radius-small: 8px;
+  --radius-circle: 9999px;
+}
+
+:root[theme='light'] {
  --solid_color_primary: #fff;
  --solid_color_primary-opaque:rgba(255, 255, 255,.6);
  --solid_color_secondary: #e2e8ec;
@ -38,9 +44,10 @@
  --text_color_tertiary: #777;

  --border_color_secondary: #ececed;
+}

-  /* MUTED THEME */
-  /* --solid_color_primary: #222;
+:root[theme='muted'] {
+  --solid_color_primary: #222;
  --solid_color_primary-opaque:rgba(34, 34, 34, .6);
  --solid_color_secondary: #4f5050;
  --solid_color_secondary-dark: #424343;
@ -51,10 +58,11 @@
  --text_color_secondary: #7b7b7b;
  --text_color_tertiary: #656565;

-  --border_color_secondary: #424141; */
+  --border_color_secondary: #424141;
+}

-  /* BLACK THEME */
-  /* --solid_color_primary: #13171b;
+:root[theme='black'] {
+  --solid_color_primary: #13171b;
  --solid_color_primary-opaque:rgba(19, 23, 27, .6);
  --solid_color_secondary: #4f5050;
  --solid_color_secondary-dark: #424343;
@ -65,7 +73,7 @@
  --text_color_secondary: #61686E;
  --text_color_tertiary: #656565;

-  --border_color_secondary: #212020; */
+  --border_color_secondary: #212020;
 }

 html,
@ -90,10 +98,10 @@ body {
 .statusContent * {
  margin-top: 0;
  margin-bottom: 0;
-  font-size: var(--font_size_medium);
+  font-size: var(--fs_m);
  overflow-wrap: break-word;
  color: var(--text_color_primary);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, "Helvetica Neue", sans-serif;
 }

 .statusContent p {
@ -114,7 +122,7 @@ body {
 }

 .statusContent h1 {
-  font-size: var(--font_size_extra_large);
+  font-size: var(--fs_xl);
  font-weight: 700;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
@ -131,7 +139,7 @@ body {
 .dangerousContent * {
  margin-top: 0;
  margin-bottom: 0;
-  font-size: var(--font_size_normal);
+  font-size: var(--fs_n);
  overflow-wrap: break-word;
  color: var(--text_color_primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
@ -533,13 +541,13 @@ body {
 .textAlignLeft { text-align: left; }
 .textAlignCenter { text-align: center; }

-.fs24PX { font-size: var(--font_size_extra_extra_large); }
-.fs19PX { font-size: var(--font_size_extra_large); }
-.fs16PX { font-size: var(--font_size_large); }
-.fs15PX { font-size: var(--font_size_medium); }
-.fs14PX { font-size: var(--font_size_normal); }
-.fs13PX { font-size: var(--font_size_small); }
-.fs12PX { font-size: var(--font_size_extra_small); }
+.fs24PX { font-size: var(--fs_xxl); }
+.fs19PX { font-size: var(--fs_xl); }
+.fs16PX { font-size: var(--fs_l); }
+.fs15PX { font-size: var(--fs_m); }
+.fs14PX { font-size: var(--fs_n); }
+.fs13PX { font-size: var(--fs_s); }
+.fs12PX { font-size: var(--fs_xs); }
 .fs0 { font-size: 0; }

 .fontWeightNormal { font-weight: 400; }
@ -711,7 +719,7 @@ body {
 .select {
  height: 42px;
  line-height: 42px;
-  font-size: var(--font_size_extra_large);
+  font-size: var(--fs_xl);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
@ -765,7 +773,7 @@ body {

 /* :global(.public-DraftEditorPlaceholder-inner) {
  font-weight: 400;
-  font-size: var(--font_size_large);
+  font-size: var(--fs_l);
 } */

 :global(.RichEditor-blockquote) {
@ -779,7 +787,7 @@ body {
 :global(.public-DraftStyleDefault-pre) {
  background-color: rgba(0,0,0,.05);
  font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
-  font-size: var(--font_size_large);
+  font-size: var(--fs_l);
  padding: 10px 20px;
 }

--- a/app/lib/themes.rb
+++ b/app/lib/themes.rb
@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-require 'singleton'
-require 'yaml'
-
-class Themes
-  include Singleton
-
-  def initialize
-    @conf = YAML.load_file(Rails.root.join('config', 'themes.yml'))
-  end
-
-  def names
-    @conf.keys
-  end
-end
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@ -39,7 +39,6 @@ class InitialStateSerializer < ActiveModel::Serializer
      store[:unread_count]       = unread_count object.current_account
      store[:monthly_expenses_complete] = Redis.current.get("monthly_funding_amount") || 0
      store[:favourites_count]   = object.current_account.favourites.count.to_s
-      store[:tenorkey]           = "QHFJ0C5EWGBH"
    end

    store
--- a/app/views/admin/settings/edit.html.haml
+++ b/app/views/admin/settings/edit.html.haml
@ -8,8 +8,6 @@
    = f.input :site_title, wrapper: :with_label, label: t('admin.settings.site_title')

  .fields-row
-    .fields-row__column.fields-row__column-6.fields-group
-      = f.input :theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false
    .fields-row__column.fields-row__column-6.fields-group
      = f.input :registrations_mode, collection: %w(open approved none), wrapper: :with_label, label: t('admin.settings.registrations_mode.title'), include_blank: false, label_method: lambda { |mode| I18n.t("admin.settings.registrations_mode.modes.#{mode}") }

--- a/app/views/react/react.html.haml
+++ b/app/views/react/react.html.haml
@ -10,7 +10,7 @@

 #gabsocial{ data: { props: Oj.dump(default_props) } }
  %noscript
-    = image_pack_tag 'logo.png', alt: 'Gab Social'
-
-    %div
-      = t('errors.noscript_html', apps_path: 'https://gab.com/apps')
+    %div{ :style => "padding: 60px; max-width: 560px;" }
+      = image_pack_tag 'logo.svg', alt: 'Gab Social', width: '100px'
+      %div{ :style => "margin-top: 20px; line-height: 2rem; font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;" }
+        = t('errors.noscript_html', apps_path: 'https://apps.gab.com')
--- a/app/views/settings/preferences/show.html.haml
+++ b/app/views/settings/preferences/show.html.haml
@ -41,8 +41,6 @@
  %hr#settings_web/

  .fields-row
-    .fields-group.fields-row__column.fields-row__column-6
-      = f.input :setting_theme, collection: Themes.instance.names, label_method: lambda { |theme| I18n.t("themes.#{theme}", default: theme) }, wrapper: :with_label, include_blank: false, hint: false
    .fields-group.fields-row__column.fields-row__column-6
      = f.input :setting_display_media, collection: ['default', 'show_all', 'hide_all'], wrapper: :with_label, include_blank: false, label_method: lambda { |item| t("simple_form.hints.defaults.setting_display_media_#{item}") }, hint: false

--- a/config/themes.yml
+++ b/config/themes.yml
@ -1 +0,0 @@
-default: styles/base.scss