option for adjusting text size, rearranged config components

src/views/acc-appearance-view.jsx

@@ -2,17 +2,17 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import CheckBox from '../widgets/checkbox.jsx';
-
 export default class AccAppearanceView extends React.PureComponent {
   constructor(props) {
     super(props);
 
     this.state = {
       colorSchema: props.colorSchema || 'light dark',
+      textSize: (props.textSize * 10) || '100',
     };
 
     this.handleColorSchemaSelected = this.handleColorSchemaSelected.bind(this);
+    this.handleTextSizeChanged = this.handleTextSizeChanged.bind(this);
   }
 
   handleColorSchemaSelected(e) {
@@ -20,6 +20,13 @@ export default class AccAppearanceView extends React.PureComponent {
     this.props.onChangeColorSchema(e.currentTarget.value);
   }
 
+  handleTextSizeChanged(e) {
+    // In %%.
+    this.setState({textSize: e.currentTarget.value});
+    // Convert %% to pt, 100% = 10pt.
+    this.props.onTextSizeChanged((e.currentTarget.value / 10) | 0);
+  }
+
   render() {
     return (
         <div id="settings-form" className="scrollable-panel">
@@ -60,6 +67,28 @@ export default class AccAppearanceView extends React.PureComponent {
               </li>
             </ul>
           </div>
+          <div className="hr" />
+          <div className="panel-form-row">
+            <label className="small">
+              <FormattedMessage id="label_text_size" defaultMessage="Text size:"
+                description="Label adjusting text size" />
+            </label>
+          </div>
+          <div className="panel-form-column">
+            <div className="panel-form-row">
+              <input type="range" id="text_size" name="text_size" min="80" max="120" step="10"
+                list="text_size_options" value={this.state.textSize} onChange={this.handleTextSizeChanged} />
+            </div>
+            <div className="panel-form-row">
+              <datalist id="text_size_options">
+                <option value="80" label="80%" />
+                <option value="90" label="90%" />
+                <option value="100" label="100%" />
+                <option value="110" label="110%" />
+                <option value="120" label="120%" />
+              </datalist>
+            </div>
+          </div>
         </div>
     );
   }

src/views/acc-notifications-view.jsx

@@ -16,8 +16,6 @@ export default class AccNotificationsView extends React.PureComponent {
       this.props.onToggleMessageSounds(checked);
     } else if (what == 'alert') {
       this.props.onTogglePushNotifications(checked);
-    } else if (what == 'incognito') {
-      this.props.onToggleIncognitoMode(checked);
     }
   }
 
@@ -47,14 +45,6 @@ export default class AccNotificationsView extends React.PureComponent {
               checked={this.props.desktopAlerts}
               onChange={this.props.desktopAlertsEnabled ? this.handleCheckboxClick : null} />
           </div>
-          <div className="panel-form-row">
-            <label htmlFor="incognito-mode">
-              <FormattedMessage id="label_incognito_mode" defaultMessage="Incognito mode:"
-                description="Label for incognito mode toggle" />
-            </label>
-            <CheckBox name="incognito" id="incognito-mode"
-              checked={this.props.incognitoMode} onChange={this.handleCheckboxClick} />
-          </div>
         </div>
     );
   }

src/views/acc-security-view.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
+import CheckBox from '../widgets/checkbox.jsx';
 import InPlaceEdit from '../widgets/in-place-edit.jsx';
 import PermissionsEditor from '../widgets/permissions-editor.jsx';
 
@@ -42,6 +43,7 @@ class AccSecurityView extends React.Component {
     this.handleHidePermissionsEditor = this.handleHidePermissionsEditor.bind(this);
     this.handlePermissionsChanged = this.handlePermissionsChanged.bind(this);
     this.handleDeleteAccount = this.handleDeleteAccount.bind(this);
+    this.handleCheckboxClick = this.handleCheckboxClick.bind(this);
   }
 
   handlePasswordUpdate(pwd) {
@@ -70,6 +72,10 @@ class AccSecurityView extends React.Component {
     this.setState(newState);
   }
 
+  handleCheckboxClick(what, checked) {
+    this.props.onToggleIncognitoMode(checked);
+  }
+
   handleDeleteAccount(e) {
     e.preventDefault();
     const {formatMessage} = this.props.intl;
@@ -109,6 +115,21 @@ class AccSecurityView extends React.Component {
             </div>
           </div>
           <div className="hr" />
+          <div className="panel-form-row">
+            <label htmlFor="incognito-mode">
+              <FormattedMessage id="label_incognito_mode" defaultMessage="Incognito mode:"
+                description="Label for incognito mode toggle" />
+            </label>
+            <CheckBox name="incognito" id="incognito-mode"
+              checked={this.props.incognitoMode} onChange={this.handleCheckboxClick} />
+          </div>
+          <div className="panel-form-row">
+            <span className="small">
+              <FormattedMessage id="incognito_mode_description" defaultMessage="Hide your online status and typing indicators."
+                description="Description for incognito mode toggle" />
+            </span>
+          </div>
+          <div className="hr" />
           <div className="panel-form-column">
             <a href="#" className="danger flat-button" onClick={(e) => {e.preventDefault(); this.props.onLogout();}}>
               <i className="material-icons">exit_to_app</i> &nbsp;<FormattedMessage id="button_logout"