[Appearance] grab 24h clock setting

ui/component/settingAppearance/index.js

@@ -1,8 +1,15 @@
 import { connect } from 'react-redux';
+import { SETTINGS } from 'lbry-redux';
+import { doSetClientSetting } from 'redux/actions/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
 import SettingAppearance from './view';
 
-const select = (state) => ({});
+const select = (state) => ({
+  clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
+});
 
-const perform = (dispatch) => ({});
+const perform = (dispatch) => ({
+  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
+});
 
 export default connect(select, perform)(SettingAppearance);

ui/component/settingAppearance/view.jsx

@@ -1,15 +1,22 @@
 // @flow
 import React from 'react';
+import { SETTINGS } from 'lbry-redux';
 import Card from 'component/common/card';
+import { FormField } from 'component/common/form';
 import HomepageSelector from 'component/homepageSelector';
 import SettingLanguage from 'component/settingLanguage';
 import ThemeSelector from 'component/themeSelector';
 // $FlowFixMe
 import homepages from 'homepages';
 
-type Props = {};
+type Props = {
+  clock24h: boolean,
+  setClientSetting: (string, boolean | string | number) => void,
+};
 
 export default function SettingAppearance(props: Props) {
+  const { clock24h, setClientSetting } = props;
+
   return (
     <Card
       title={__('Appearance')}
@@ -29,9 +36,18 @@ export default function SettingAppearance(props: Props) {
             <SettingLanguage />
           </div>
 
-         <SettingsRow title={__('Theme')}>
+          SettingsRow title={__('Theme')}>
             <ThemeSelector />
           </SettingsRow>
+
+          <SettingsRow title={__('24-hour clock')}>
+            <FormField
+              type="checkbox"
+              name="clock24h"
+              onChange={() => setClientSetting(SETTINGS.CLOCK_24H, !clock24h)}
+              checked={clock24h}
+            />
+          </SettingsRow>
         </>
       }
     />

ui/page/settings/index.js

@@ -19,7 +19,6 @@ const select = (state) => ({
   allowAnalytics: selectAllowAnalytics(state),
   isAuthenticated: selectUserVerifiedEmail(state),
   showNsfw: selectShowMatureContent(state),
-  clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
   autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
   autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
   hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),

ui/page/settings/view.jsx

@@ -41,7 +41,6 @@ type Props = {
   isAuthenticated: boolean,
   instantPurchaseEnabled: boolean,
   instantPurchaseMax: Price,
-  clock24h: boolean,
   autoplay: boolean,
   floatingPlayer: boolean,
   hideReposts: ?boolean,
@@ -64,10 +63,6 @@ class SettingsPage extends React.PureComponent<Props> {
     exitSettings();
   }
 
-  onClock24hChange(value: boolean) {
-    this.props.setClientSetting(SETTINGS.CLOCK_24H, value);
-  }
-
   setDaemonSetting(name: string, value: ?SetDaemonSettingArg): void {
     this.props.setDaemonSetting(name, value);
   }
@@ -82,7 +77,6 @@ class SettingsPage extends React.PureComponent<Props> {
       allowAnalytics,
       showNsfw,
       isAuthenticated,
-      clock24h,
       autoplay,
       // autoDownload,
       setDaemonSetting,
@@ -153,23 +147,6 @@ class SettingsPage extends React.PureComponent<Props> {
             />
             {/* @endif */}
 
-            <Card
-              title={__('Appearance')}
-              actions={
-                <React.Fragment>
-                  <fieldset-section>
-                    <FormField
-                      type="checkbox"
-                      name="clock24h"
-                      onChange={() => this.onClock24hChange(!clock24h)}
-                      checked={clock24h}
-                      label={__('24-hour clock')}
-                    />
-                  </fieldset-section>
-                </React.Fragment>
-              }
-            />
-
             <Card
               title={__('Content settings')}
               actions={