[Appearance] grab language and homepage

Also applied new Settings Page styling.

ui/component/homepageSelector/view.jsx

@@ -8,7 +8,7 @@ import { getDefaultHomepageKey } from 'util/default-languages';
 
 type Props = {
   homepage: string,
-  setHomepage: string => void,
+  setHomepage: (string) => void,
 };
 
 function SelectHomepage(props: Props) {
@@ -22,22 +22,25 @@ function SelectHomepage(props: Props) {
     return null;
   }
   return (
-    <React.Fragment>
+    <div className="section__actions--between">
+      <div>
+        <p>{__('Homepage')}</p>
+        <p className="help">{__('Tailor your experience.')}</p>
+      </div>
+
       <FormField
         name="homepage_select"
         type="select"
-        label={__('Homepage')}
         onChange={handleSetHomepage}
         value={homepage || getDefaultHomepageKey()}
-        helper={__('Tailor your experience.')}
       >
-        {Object.keys(homepages).map(hp => (
+        {Object.keys(homepages).map((hp) => (
           <option key={'hp' + hp} value={hp}>
             {`${LANGUAGES[hp][1]}`}
           </option>
         ))}
       </FormField>
-    </React.Fragment>
+    </div>
   );
 }
 

ui/component/settingAppearance/index.js

@@ -0,0 +1,8 @@
+import { connect } from 'react-redux';
+import SettingAppearance from './view';
+
+const select = (state) => ({});
+
+const perform = (dispatch) => ({});
+
+export default connect(select, perform)(SettingAppearance);

ui/component/settingAppearance/view.jsx

@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import Card from 'component/common/card';
+import HomepageSelector from 'component/homepageSelector';
+import SettingLanguage from 'component/settingLanguage';
+// $FlowFixMe
+import homepages from 'homepages';
+
+type Props = {};
+
+export default function SettingAppearance(props: Props) {
+  return (
+    <Card
+      title={__('Appearance')}
+      subtitle=""
+      isBodyList
+      body={
+        <>
+          {/* --- Language --- */}
+          <div className="card__main-actions">
+            <SettingLanguage />
+          </div>
+
+          {/* --- Homepage --- */}
+          {homepages && Object.keys(homepages).length > 1 && (
+            <div className="card__main-actions">
+              <HomepageSelector />
+            </div>
+          )}
+        </>
+      }
+    />
+  );
+}

ui/page/settings/index.js

@@ -10,12 +10,7 @@ import {
   doExitSettingsPage,
 } from 'redux/actions/settings';
 import { doSetPlayingUri } from 'redux/actions/content';
-import {
+import { makeSelectClientSetting, selectDaemonSettings, selectShowMatureContent } from 'redux/selectors/settings';
-  makeSelectClientSetting,
-  selectDaemonSettings,
-  selectLanguage,
-  selectShowMatureContent,
-} from 'redux/selectors/settings';
 import { selectMyChannelUrls, SETTINGS } from 'lbry-redux';
 import SettingsPage from './view';
 import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
@@ -35,7 +30,6 @@ const select = (state) => ({
   floatingPlayer: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
   hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
   darkModeTimes: makeSelectClientSetting(SETTINGS.DARK_MODE_TIMES)(state),
-  language: selectLanguage(state),
   myChannelUrls: selectMyChannelUrls(state),
   user: selectUser(state),
 });

ui/page/settings/view.jsx

@@ -8,15 +8,12 @@ import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import Page from 'component/page';
 import SettingAccount from 'component/settingAccount';
-import SettingLanguage from 'component/settingLanguage';
+import SettingAppearance from 'component/settingAppearance';
 import SettingSystem from 'component/settingSystem';
 import FileSelector from 'component/common/file-selector';
-import HomepageSelector from 'component/homepageSelector';
 import Card from 'component/common/card';
 import classnames from 'classnames';
 import { SIMPLE_SITE } from 'config';
-// $FlowFixMe
-import homepages from 'homepages';
 import { Lbryio } from 'lbryinc';
 import Yrbl from 'component/yrbl';
 import { getStripeEnvironment } from 'util/stripe';
@@ -65,7 +62,6 @@ type Props = {
   darkModeTimes: DarkModeTimes,
   setDarkTime: (string, {}) => void,
   openModal: (string) => void,
-  language?: string,
   enterSettings: () => void,
   exitSettings: () => void,
   myChannelUrls: ?Array<string>,
@@ -166,6 +162,7 @@ class SettingsPage extends React.PureComponent<Props> {
 
     return newStyle ? (
       <Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
+        <SettingAppearance />
         <SettingAccount />
         <SettingSystem />
       </Page>
@@ -179,11 +176,6 @@ class SettingsPage extends React.PureComponent<Props> {
         }}
         className="card-stack"
       >
-        <Card title={__('Language')} actions={<SettingLanguage />} />
-        {homepages && Object.keys(homepages).length > 1 && (
-          <Card title={__('Homepage')} actions={<HomepageSelector />} />
-        )}
-
         {!isAuthenticated && IS_WEB && (
           <div className="main--empty">
             <Yrbl