Progress

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
 

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}?' },
+  message: { id: 'display_options.message', defaultMessage: 'Display settings affect your Gab account on this browser. These settings are only visible to you.' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  title: { id: 'display_options', defaultMessage: 'Customize your view' },
-  title: { id: 'display_options', defaultMessage: 'Display Options' },
 })
 
 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,
-  }
+    onChange: PropTypes.func.isRequired,
-
+    settings: ImmutablePropTypes.map.isRequired,
-  componentDidMount() {
-    this.button.focus()
   }
 
   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
+      <Button
-        noClasses
+        to={to}
+        href={href}
         color='white'
         className={classes}
+        noClasses
       >
         <Icon className={iconClasses} id={icon} size={iconSize} />
+        {
+          !!title &&
+          <Text color='white'>
             {title}
-      </button>
+          </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 { Provider } from 'react-redux'
-import configureStore from '../store/configureStore';
+import configureStore from '../store/configureStore'
-import { INTRODUCTION_VERSION } from '../actions/onboarding';
+import { INTRODUCTION_VERSION } from '../actions/onboarding'
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Route } from 'react-router-dom'
-import { ScrollContext } from 'react-router-scroll-4';
+import { ScrollContext } from 'react-router-scroll-4'
-import { IntlProvider, addLocaleData } from 'react-intl';
+import { IntlProvider, addLocaleData } from 'react-intl'
-import { fetchCustomEmojis } from '../actions/custom_emojis';
+import { fetchCustomEmojis } from '../actions/custom_emojis'
-import { hydrateStore } from '../actions/store';
+import { hydrateStore } from '../actions/store'
 import {
   connectUserStream,
   connectStatusUpdateStream,
-} from '../actions/streaming';
+} from '../actions/streaming'
-import { getLocale } from '../locales';
+import { getLocale } from '../locales'
-import initialState from '../initial_state';
+import initialState from '../initial_state'
-import { me } from '../initial_state';
+import { me } from '../initial_state'
-import UI from '../features/ui';
+import UI from '../features/ui'
-// import Introduction from '../features/introduction';
+// import Introduction from '../features/introduction'
-import ErrorBoundary from '../components/error_boundary';
+import ErrorBoundary from '../components/error_boundary'
+import Display from './display'
 
-const { localeData, messages } = getLocale();
+const { localeData, messages } = getLocale()
-addLocaleData(localeData);
+addLocaleData(localeData)
 
-export const store = configureStore();
+export const store = configureStore()
-const hydrateAction = hydrateStore(initialState);
+const hydrateAction = hydrateStore(initialState)
 
-store.dispatch(hydrateAction);
+store.dispatch(hydrateAction)
-store.dispatch(fetchCustomEmojis());
+store.dispatch(fetchCustomEmojis())
 
 const mapStateToProps = (state) => {
-  const account = state.getIn(['accounts', me]);
+  const account = state.getIn(['accounts', me])
-  const showIntroduction = account ? state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION : false;
+  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());
+      this.disconnect = store.dispatch(connectUserStream())
-      store.dispatch(connectStatusUpdateStream());
+      store.dispatch(connectStatusUpdateStream())
     }
   }
 
   componentWillUnmount () {
     if (this.disconnect) {
-      this.disconnect();
+      this.disconnect()
-      this.disconnect = null;
+      this.disconnect = null
     }
   }
 
   render () {
-    const { locale } = this.props;
+    const { locale } = this.props
 
     return (
       <IntlProvider locale={locale} messages={messages}>
         <Provider store={store}>
+          <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 {
+    const { intl, children } = this.props
-      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',
+        title: intl.formatMessage(messages.hashtags),
-        to: '/search/trends'
-      },
-      {
-        title: '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,

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% -->

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 */
+:root[theme='muted'] {
-  /* --solid_color_primary: #222;
+  --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 */
+:root[theme='black'] {
-  /* --solid_color_primary: #13171b;
+  --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); }
+.fs24PX { font-size: var(--fs_xxl); }
-.fs19PX { font-size: var(--font_size_extra_large); }
+.fs19PX { font-size: var(--fs_xl); }
-.fs16PX { font-size: var(--font_size_large); }
+.fs16PX { font-size: var(--fs_l); }
-.fs15PX { font-size: var(--font_size_medium); }
+.fs15PX { font-size: var(--fs_m); }
-.fs14PX { font-size: var(--font_size_normal); }
+.fs14PX { font-size: var(--fs_n); }
-.fs13PX { font-size: var(--font_size_small); }
+.fs13PX { font-size: var(--fs_s); }
-.fs12PX { font-size: var(--font_size_extra_small); }
+.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;
 }
 

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

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

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}") }
 

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{ :style => "padding: 60px; max-width: 560px;" }
-
+      = image_pack_tag 'logo.svg', alt: 'Gab Social', width: '100px'
-    %div
+      %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://gab.com/apps')
+        = t('errors.noscript_html', apps_path: 'https://apps.gab.com')

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
 

config/themes.yml

@@ -1 +0,0 @@
-default: styles/base.scss