Move combobox to right | Move "Search only in language" into separate row

static/app-strings.json

@@ -1610,7 +1610,7 @@
   "None selected": "None selected",
   "Secondary Language": "Secondary Language",
   "Your other content language": "Your other content language",
-  "Search only in this language by default": "Search only in this language by default",
+  "Search only in the selected language by default": "Search only in the selected language by default",
   "This link leads to an external website.": "This link leads to an external website.",
   "No Content Found": "No Content Found",
   "No Lists Found": "No Lists Found",

ui/component/homepageSelector/view.jsx

@@ -22,12 +22,7 @@ function SelectHomepage(props: Props) {
     return null;
   }
   return (
-    <div className="section__actions--between">
-      <div>
-        <p>{__('Homepage')}</p>
-        <p className="help">{__('Tailor your experience.')}</p>
-      </div>
-
+    <React.Fragment>
       <FormField
         name="homepage_select"
         type="select"
@@ -40,7 +35,7 @@ function SelectHomepage(props: Props) {
           </option>
         ))}
       </FormField>
-    </div>
+    </React.Fragment>
   );
 }
 

ui/component/settingAppearance/index.js

@@ -6,10 +6,12 @@ import SettingAppearance from './view';
 
 const select = (state) => ({
   clock24h: makeSelectClientSetting(SETTINGS.CLOCK_24H)(state),
+  searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
 });
 
 const perform = (dispatch) => ({
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
+  setSearchInLanguage: (value) => dispatch(doSetClientSetting(SETTINGS.SEARCH_IN_LANGUAGE, value)),
 });
 
 export default connect(select, perform)(SettingAppearance);

ui/component/settingAppearance/view.jsx

@@ -5,17 +5,20 @@ import Card from 'component/common/card';
 import { FormField } from 'component/common/form';
 import HomepageSelector from 'component/homepageSelector';
 import SettingLanguage from 'component/settingLanguage';
+import SettingsRow from 'component/settingsRow';
 import ThemeSelector from 'component/themeSelector';
 // $FlowFixMe
 import homepages from 'homepages';
 
 type Props = {
   clock24h: boolean,
+  searchInLanguage: boolean,
   setClientSetting: (string, boolean | string | number) => void,
+  setSearchInLanguage: (boolean) => void,
 };
 
 export default function SettingAppearance(props: Props) {
-  const { clock24h, setClientSetting } = props;
+  const { clock24h, searchInLanguage, setClientSetting, setSearchInLanguage } = props;
 
   return (
     <Card
@@ -24,19 +27,26 @@ export default function SettingAppearance(props: Props) {
       isBodyList
       body={
         <>
-          {/* --- Homepage --- */}
           {homepages && Object.keys(homepages).length > 1 && (
-            <div className="card__main-actions">
+            <SettingsRow title={__('Homepage')} subtitle={__('Tailor your experience.')}>
               <HomepageSelector />
-            </div>
+            </SettingsRow>
           )}
 
-          {/* --- Language --- */}
-          <div className="card__main-actions">
+          <SettingsRow title={__('Language')} subtitle={__(HELP.LANGUAGE)}>
             <SettingLanguage />
-          </div>
+          </SettingsRow>
 
-          SettingsRow title={__('Theme')}>
+          <SettingsRow title={__('Search only in the selected language by default')}>
+            <FormField
+              name="search-in-language"
+              type="checkbox"
+              checked={searchInLanguage}
+              onChange={() => setSearchInLanguage(!searchInLanguage)}
+            />
+          </SettingsRow>
+
+          <SettingsRow title={__('Theme')}>
             <ThemeSelector />
           </SettingsRow>
 
@@ -53,3 +63,8 @@ export default function SettingAppearance(props: Props) {
     />
   );
 }
+
+// prettier-disable
+const HELP = {
+  LANGUAGE: 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.',
+};

ui/component/settingLanguage/index.js

@@ -1,17 +1,14 @@
 import { connect } from 'react-redux';
-import { SETTINGS } from 'lbry-redux';
-import { doSetLanguage, doSetClientSetting } from 'redux/actions/settings';
-import { makeSelectClientSetting, selectLanguage } from 'redux/selectors/settings';
+import { doSetLanguage } from 'redux/actions/settings';
+import { selectLanguage } from 'redux/selectors/settings';
 import SettingLanguage from './view';
 
-const select = state => ({
+const select = (state) => ({
   language: selectLanguage(state),
-  searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
 });
 
-const perform = dispatch => ({
-  setLanguage: value => dispatch(doSetLanguage(value)),
-  setSearchInLanguage: value => dispatch(doSetClientSetting(SETTINGS.SEARCH_IN_LANGUAGE, value)),
+const perform = (dispatch) => ({
+  setLanguage: (value) => dispatch(doSetLanguage(value)),
 });
 
 export default connect(select, perform)(SettingLanguage);

ui/component/settingLanguage/view.jsx

@@ -10,12 +10,10 @@ import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
 type Props = {
   language: string,
   setLanguage: (string) => void,
-  searchInLanguage: boolean,
-  setSearchInLanguage: (boolean) => void,
 };
 
 function SettingLanguage(props: Props) {
-  const { language, setLanguage, searchInLanguage, setSearchInLanguage } = props;
+  const { language, setLanguage } = props;
   const [previousLanguage, setPreviousLanguage] = useState(null);
 
   if (previousLanguage && language !== previousLanguage) {
@@ -37,15 +35,13 @@ function SettingLanguage(props: Props) {
 
   return (
     <React.Fragment>
+      {previousLanguage && <Spinner type="small" />}
+
       <FormField
         name="language_select"
         type="select"
-        label={__('Language')}
         onChange={onLanguageChange}
         value={language || getDefaultLanguage()}
-        helper={__(
-          'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.'
-        )}
       >
         {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
           <option key={langKey} value={langKey}>
@@ -53,14 +49,6 @@ function SettingLanguage(props: Props) {
           </option>
         ))}
       </FormField>
-      {previousLanguage && <Spinner type="small" />}
-      <FormField
-        name="search-in-language"
-        type="checkbox"
-        label={__('Search only in this language by default')}
-        checked={searchInLanguage}
-        onChange={() => setSearchInLanguage(!searchInLanguage)}
-      />
     </React.Fragment>
   );
 }