From e38ba9cfcf074f0a1047a5469a9acf6cbee0cebd Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Thu, 5 Aug 2021 17:18:16 +0800
Subject: [PATCH] [Appearance] grab language and homepage

Also applied new Settings Page styling.
---
 ui/component/homepageSelector/view.jsx  | 15 ++++++-----
 ui/component/settingAppearance/index.js |  8 ++++++
 ui/component/settingAppearance/view.jsx | 34 +++++++++++++++++++++++++
 ui/page/settings/index.js               |  8 +-----
 ui/page/settings/view.jsx               | 12 ++-------
 5 files changed, 54 insertions(+), 23 deletions(-)
 create mode 100644 ui/component/settingAppearance/index.js
 create mode 100644 ui/component/settingAppearance/view.jsx

diff --git a/ui/component/homepageSelector/view.jsx b/ui/component/homepageSelector/view.jsx
index 514cb2f94..ce7e15e48 100644
--- a/ui/component/homepageSelector/view.jsx
+++ b/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>
   );
 }
 
diff --git a/ui/component/settingAppearance/index.js b/ui/component/settingAppearance/index.js
new file mode 100644
index 000000000..30230b578
--- /dev/null
+++ b/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);
diff --git a/ui/component/settingAppearance/view.jsx b/ui/component/settingAppearance/view.jsx
new file mode 100644
index 000000000..1daab7f0e
--- /dev/null
+++ b/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>
+          )}
+        </>
+      }
+    />
+  );
+}
diff --git a/ui/page/settings/index.js b/ui/page/settings/index.js
index e69225a82..5e0e13d0b 100644
--- a/ui/page/settings/index.js
+++ b/ui/page/settings/index.js
@@ -10,12 +10,7 @@ import {
   doExitSettingsPage,
 } from 'redux/actions/settings';
 import { doSetPlayingUri } from 'redux/actions/content';
-import {
-  makeSelectClientSetting,
-  selectDaemonSettings,
-  selectLanguage,
-  selectShowMatureContent,
-} from 'redux/selectors/settings';
+import { makeSelectClientSetting, selectDaemonSettings, 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),
 });
diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx
index a5662a828..bf18344f1 100644
--- a/ui/page/settings/view.jsx
+++ b/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';
 
@@ -64,7 +61,6 @@ type Props = {
   darkModeTimes: DarkModeTimes,
   setDarkTime: (string, {}) => void,
   openModal: (string) => void,
-  language?: string,
   enterSettings: () => void,
   exitSettings: () => void,
   myChannelUrls: ?Array<string>,
@@ -165,6 +161,7 @@ class SettingsPage extends React.PureComponent<Props> {
 
     return newStyle ? (
       <Page noFooter noSideNavigation backout={{ title: __('Settings'), backLabel: __('Done') }} className="card-stack">
+        <SettingAppearance />
         <SettingAccount />
         <SettingSystem />
       </Page>
@@ -216,11 +213,6 @@ class SettingsPage extends React.PureComponent<Props> {
         )}
         {/* @endif */}
 
-        <Card title={__('Language')} actions={<SettingLanguage />} />
-        {homepages && Object.keys(homepages).length > 1 && (
-          <Card title={__('Homepage')} actions={<HomepageSelector />} />
-        )}
-
         {!isAuthenticated && IS_WEB && (
           <div className="main--empty">
             <Yrbl