fix: various modal tab fixes and changes, reorder some settings, fix marketplace

src/components/modals/main/settings/SettingsItem.jsx

@@ -1,13 +1,9 @@
-import variables from 'modules/variables';
-
 export default function SettingsItem(props) {
-  /*const getMessage = (text) => variables.language.getMessage(variables.languageCode, text);*/
   return (
     <div className={props.final ? 'settingsRow settingsNoBorder' : 'settingsRow'}>
       <div className="content">
         <span className="title">{props.title}</span>
         <span className="subtitle">{props.subtitle}</span>
-        {/*<span className='link'>{getMessage('modals.main.settings.buttons.reset')}</span>*/}
       </div>
       <div className="action">{props.children}</div>
     </div>

src/components/modals/main/settings/sections/About.jsx

@@ -268,7 +268,7 @@ export default class About extends PureComponent {
           </div>
         </div>
 
-        <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
+        <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start',  minHeight: '70px'}}>
           <span className="title">
             {this.getMessage('modals.main.settings.sections.about.resources_used.title')}
           </span>
@@ -351,7 +351,7 @@ export default class About extends PureComponent {
             })}
           </div>
         </div>
-        <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start' }}>
+        <div className="settingsRow" style={{ flexFlow: 'column', alignItems: 'flex-start',  minHeight: '10px', borderBottom: '0' }}>
           <span className="title">
             {this.getMessage('modals.main.settings.sections.about.photographers')}
           </span>

src/components/modals/main/settings/sections/Advanced.jsx

@@ -35,10 +35,9 @@ export default class AdvancedSettings extends PureComponent {
         <span className="mainTitle">
           {getMessage('modals.main.settings.sections.advanced.title')}
         </span>
-        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.offline_mode')}>
+        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.offline_mode')} subtitle="When enabled, all requests to online services will be disabled.">
           <Switch
             name="offlineMode"
-            text={getMessage('modals.main.settings.sections.advanced.offline_mode')}
             element=".other"
           />
         </SettingsItem>
@@ -49,7 +48,7 @@ export default class AdvancedSettings extends PureComponent {
                 {getMessage('modals.main.settings.sections.advanced.data')}
               </span>
               <span className="subtitle">
-                {getMessage('modals.main.settings.sections.advanced.experimental_warning')}
+                Choose whether to export your Mue settings to your computer, import an existing settings file, or reset your settings to their default values.
               </span>
             </div>
             <div className="action activityButtons">
@@ -83,7 +82,7 @@ export default class AdvancedSettings extends PureComponent {
             ))}
           </Dropdown>
         </SettingsItem>
-        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.tab_name')}>
+        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.tab_name')} subtitle="Change the name of the tab that appears in your browser.">
           <Text name="tabName" default={getMessage('tabname')} category="other" />
         </SettingsItem>
         <FileUpload
@@ -92,9 +91,8 @@ export default class AdvancedSettings extends PureComponent {
           type="settings"
           loadFunction={(e) => importSettings(e)}
         />
-        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.custom_css')}>
+        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.custom_css')} subtitle="Make Mue's styling customised to you with Cascading Style Sheets (CSS).">
           <Text
-            title={getMessage('modals.main.settings.sections.advanced.custom_css')}
             name="customcss"
             textarea={true}
             category="other"

src/components/modals/main/settings/sections/Appearance.jsx

@@ -139,7 +139,7 @@ export default function AppearanceSettings() {
   display={' ' + getMessage('modals.main.settings.sections.appearance.accessibility.milliseconds')} />*/}
       <SettingsItem
         title={getMessage('modals.main.settings.sections.appearance.accessibility.title')}
-        subtitle="subtitle"
+        subtitle="Accessibility settings for Mue"
         final={true}
       >
         <Dropdown

src/components/modals/main/settings/sections/Date.jsx

@@ -80,7 +80,7 @@ export default class DateSettings extends PureComponent {
           zoomSetting="zoomDate"
           switch={true}
         />
-        <SettingsItem title={getMessage('modals.main.settings.sections.time.type')}>
+        <SettingsItem title={getMessage('modals.main.settings.sections.time.type')} subtitle="Whether to display the date in long form or short form">
           <Dropdown
             name="dateType"
             onChange={(value) => this.setState({ dateType: value })}
@@ -94,7 +94,16 @@ export default class DateSettings extends PureComponent {
             </option>
           </Dropdown>
         </SettingsItem>
-        <SettingsItem title="Extra Options" final={true}>
+        <SettingsItem
+          title={
+            this.state.dateType === 'long'
+              ? getMessage('modals.main.settings.sections.date.type.long')
+              : getMessage('modals.main.settings.sections.date.type.short')
+          }
+          subtitle="Display settings and format for the selected date type"
+          final={true}
+        >
+          {this.state.dateType === 'long' ? longSettings : shortSettings}
           <Checkbox
             name="weeknumber"
             text={getMessage('modals.main.settings.sections.date.week_number')}
@@ -105,7 +114,6 @@ export default class DateSettings extends PureComponent {
             text={getMessage('modals.main.settings.sections.time.digital.zero')}
             category="date"
           />
-          {(this.state.dateType === 'long') ? longSettings : shortSettings}
         </SettingsItem>
       </>
     );

src/components/modals/main/settings/sections/Greeting.jsx

@@ -38,7 +38,7 @@ export default class GreetingSettings extends PureComponent {
         />
         <SettingsItem
           title="Additional Settings"
-          subtitle={getMessage('modals.main.settings.enabled')}
+          subtitle="Settings for the greeting display"
         >
           <Checkbox
             name="events"
@@ -58,7 +58,7 @@ export default class GreetingSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={getMessage('modals.main.settings.sections.greeting.birthday')}
-          subtitle={getMessage('modals.main.settings.enabled')}
+          subtitle="Show a Happy Birthday message when it is your birthday"
           final={true}
         >
           <Switch
@@ -79,12 +79,6 @@ export default class GreetingSettings extends PureComponent {
             required
           />
         </SettingsItem>
-        {/*<h3>{getMessage('modals.main.settings.sections.greeting.birthday')}</h3>
-        <Switch name='birthdayenabled' text={getMessage('modals.main.settings.enabled')} category='greeting'/>
-        <br/>
-        <Checkbox name='birthdayage' text={getMessage('modals.main.settings.sections.greeting.birthday_age')} category='greeting'/>
-        <p>{getMessage('modals.main.settings.sections.greeting.birthday_date')}</p>
-    <input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)} required/>*/}
       </>
     );
   }

src/components/modals/main/settings/sections/Navbar.jsx

@@ -23,7 +23,7 @@ export default function Navbar() {
         zoomSetting="zoomNavbar"
         zoomCategory="navbar"
       />
-      <SettingsItem title="Extra Options" subtitle="subtitle" final={!showRefreshOptions}>
+      <SettingsItem title="Extra Options" subtitle="Modify navbar style and which buttons you want to display" final={!showRefreshOptions}>
         <Checkbox
           name="navbarHover"
           text={getMessage('modals.main.settings.sections.appearance.navbar.hover')}

src/components/modals/main/settings/sections/QuickLinks.jsx

@@ -20,7 +20,7 @@ export default function QuickLinks() {
         zoomSetting="zoomQuicklinks"
         switch={true}
       />
-      <SettingsItem title="Extra Options" subtitle="subtitle">
+      <SettingsItem title="Extra Options" subtitle="Additional settings for quick links display and functions" final={true}>
         <Checkbox
           name="quicklinksText"
           text={getMessage('modals.main.settings.sections.quicklinks.text_only')}

src/components/modals/main/settings/sections/Quote.jsx

@@ -98,7 +98,8 @@ export default class QuoteSettings extends PureComponent {
         <>
           <SettingsItem
             title={this.getMessage('modals.main.settings.sections.quote.custom')}
-            subtitle="subtitle"
+            subtitle="Set your own custom quotes"
+            final={true}
           >
             <button onClick={() => this.modifyCustomQuote('add')}>
               {this.getMessage('modals.main.settings.sections.quote.add')} <MdAdd />
@@ -148,7 +149,7 @@ export default class QuoteSettings extends PureComponent {
     } else {
       // api
       customSettings = (
-        <SettingsItem title="Additional Options">
+        <SettingsItem title="Additional Options" subtitle="Other settings to customise the style of the quote widget" final={true}>
           <Dropdown
             label={this.getMessage('modals.main.settings.sections.background.interval.title')}
             name="quotechange"
@@ -171,6 +172,12 @@ export default class QuoteSettings extends PureComponent {
               {this.getMessage('modals.main.settings.sections.background.interval.month')}
             </option>
           </Dropdown>
+          <Checkbox
+            name="authorLink"
+            text={this.getMessage('modals.main.settings.sections.quote.author_link')}
+            element=".other"
+          />
+          <Checkbox name="authorImg" text="Show author image" element=".other" />
         </SettingsItem>
       );
     }
@@ -187,7 +194,7 @@ export default class QuoteSettings extends PureComponent {
         />
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.quote.buttons.title')}
-          subtitle="subtitle"
+          subtitle="Choose which buttons to show on the quote"
         >
           <Checkbox
             name="copyButton"
@@ -204,22 +211,6 @@ export default class QuoteSettings extends PureComponent {
             text={this.getMessage('modals.main.settings.sections.quote.buttons.favourite')}
             category="quote"
           />
-          <Checkbox
-            name="authorLink"
-            text={this.getMessage('modals.main.settings.sections.quote.author_link')}
-            element=".other"
-          />
-          <Checkbox
-            name="authorImg"
-            text='Show author image'
-            element=".other"
-          />
-        </SettingsItem>
-        <SettingsItem
-          title={this.getMessage('modals.main.settings.sections.background.type.title')}
-          subtitle="subtitle"
-        >
-          <Checkbox name="quoteModern" text="Use modern style" />
         </SettingsItem>
         <SettingsItem
           title="Source"

src/components/modals/main/settings/sections/Search.jsx

@@ -80,7 +80,7 @@ export default class SearchSettings extends PureComponent {
           category="widgets"
           switch={true}
         />
-        <SettingsItem title="Extra Options" subtitle="eeeee">
+        <SettingsItem title="Extra Options" subtitle="Additional options for search widget display and functionality">
           {/* not supported on firefox */}
           {navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined' ? (
             <Checkbox
@@ -126,7 +126,6 @@ export default class SearchSettings extends PureComponent {
           subtitle="Choose search engine to use in the search bar"
         >
           <Dropdown
-            label={this.getMessage('modals.main.settings.sections.search.search_engine')}
             name="searchEngine"
             onChange={(value) => this.setSearchEngine(value)}
             manual={true}
@@ -144,6 +143,7 @@ export default class SearchSettings extends PureComponent {
         <SettingsItem
           title={this.getMessage('modals.main.settings.sections.search.autocomplete_provider')}
           subtitle="Search engine to use for autocomplete dropdown results"
+          final={true}
         >
           <Radio options={autocompleteProviders} name="autocompleteProvider" category="search" />
         </SettingsItem>

src/components/modals/main/settings/sections/Stats.jsx

@@ -45,6 +45,7 @@ export default class Stats extends PureComponent {
           <SettingsItem
             title={getMessage('modals.main.settings.reminder.title')}
             subtitle={getMessage('modals.main.settings.sections.stats.warning')}
+            final={true}
           >
             <Switch
               name="stats"

src/components/modals/main/settings/sections/Time.jsx

@@ -28,7 +28,7 @@ export default class TimeSettings extends PureComponent {
     const digitalSettings = (
       <SettingsItem
         title={getMessage('modals.main.settings.sections.time.digital.title')}
-        subtitle={getMessage('modals.main.settings.sections.time.format')}
+        subtitle="Change how the digital clock looks"
       >
         <Radio
           name="timeformat"
@@ -61,7 +61,7 @@ export default class TimeSettings extends PureComponent {
     const analogSettings = (
       <SettingsItem
         title={getMessage('modals.main.settings.sections.time.analogue.title')}
-        subtitle="subtitle"
+        subtitle="Change how the analogue clock looks"
       >
         <Checkbox
           name="secondHand"
@@ -109,10 +109,9 @@ export default class TimeSettings extends PureComponent {
         />
         <SettingsItem
           title={getMessage('modals.main.settings.sections.time.type')}
-          subtitle="subtitle"
+          subtitle="Choose whether to display the time in digital or analogue format, or a percentage completion of the day"
         >
           <Dropdown
-            label={getMessage('modals.main.settings.sections.time.type')}
             name="timeType"
             onChange={(value) => this.setState({ timeType: value })}
             category="clock"

src/components/modals/main/settings/sections/background/Background.jsx

@@ -64,24 +64,8 @@ export default class BackgroundSettings extends PureComponent {
     const { getMessage } = this;
 
     let backgroundSettings;
-
-    const apiOptions = [
-      {
-        name: 'Mue',
-        value: 'mue',
-      },
-      {
-        name: 'Unsplash',
-        value: 'unsplash',
-      },
-      {
-        name: 'Pexels',
-        value: 'pexels',
-      },
-    ];
-
     const interval = (
-      <SettingsItem>
+      <SettingsItem title="Interval" subtitle="Change how often the background is updated">
         <Dropdown
           label={getMessage('modals.main.settings.sections.background.interval.title')}
           name="backgroundchange"
@@ -109,15 +93,10 @@ export default class BackgroundSettings extends PureComponent {
 
     const APISettings = (
       <>
-        <SettingsItem>
-          <Radio
-            title={getMessage('modals.main.settings.sections.background.source.api')}
-            options={apiOptions}
-            name="backgroundAPI"
-            category="background"
-            element="#backgroundImage"
-            onChange={(e) => this.setState({ backgroundAPI: e })}
-          />
+        <SettingsItem
+          title="API Settings"
+          subtitle="Options for the getting an image from an external service (API)"
+        >
           {this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
             <>
               <Dropdown
@@ -162,6 +141,27 @@ export default class BackgroundSettings extends PureComponent {
               {getMessage('modals.main.settings.sections.background.source.quality.datasaver')}
             </option>
           </Dropdown>
+          <Radio
+            title="API"
+            options={[
+              {
+                name: 'Mue',
+                value: 'mue',
+              },
+              {
+                name: 'Unsplash',
+                value: 'unsplash',
+              },
+              {
+                name: 'Pexels',
+                value: 'pexels',
+              },
+            ]}
+            name="backgroundAPI"
+            category="background"
+            element="#backgroundImage"
+            onChange={(e) => this.setState({ backgroundAPI: e })}
+          />
         </SettingsItem>
         {interval}
       </>
@@ -240,7 +240,7 @@ export default class BackgroundSettings extends PureComponent {
         </SettingsItem>
         <SettingsItem
           title={getMessage('modals.main.settings.sections.background.source.title')}
-          subtitle="Source of background images"
+          subtitle="Select where to get background images from"
         >
           <Dropdown
             label={getMessage('modals.main.settings.sections.background.type.title')}
@@ -277,6 +277,7 @@ export default class BackgroundSettings extends PureComponent {
           <SettingsItem
             title={getMessage('modals.main.settings.sections.background.effects.title')}
             subtitle="Add effects to the background image"
+            final={true}
           >
             <Slider
               title={getMessage('modals.main.settings.sections.background.effects.blur')}