From 3a6950c1ba10ac8cd597464e698be279b9840a66 Mon Sep 17 00:00:00 2001
From: David Ralph <me@davidjcralph.co.uk>
Date: Wed, 27 Apr 2022 16:30:54 +0100
Subject: [PATCH] fix: various modal tab fixes and changes, reorder some
 settings, fix marketplace

---
 .../modals/main/marketplace/Items.jsx         |   4 +-
 .../main/marketplace/sections/Create.jsx      | 118 +-----------------
 .../main/marketplace/sections/Sideload.jsx    |   9 +-
 .../modals/main/scss/marketplace/_main.scss   |  18 +--
 .../modals/main/settings/SettingsItem.jsx     |   4 -
 .../modals/main/settings/sections/About.jsx   |   4 +-
 .../main/settings/sections/Advanced.jsx       |  10 +-
 .../main/settings/sections/Appearance.jsx     |   2 +-
 .../modals/main/settings/sections/Date.jsx    |  14 ++-
 .../main/settings/sections/Greeting.jsx       |  10 +-
 .../modals/main/settings/sections/Navbar.jsx  |   2 +-
 .../main/settings/sections/QuickLinks.jsx     |   2 +-
 .../modals/main/settings/sections/Quote.jsx   |  29 ++---
 .../modals/main/settings/sections/Search.jsx  |   4 +-
 .../modals/main/settings/sections/Stats.jsx   |   1 +
 .../modals/main/settings/sections/Time.jsx    |   7 +-
 .../sections/background/Background.jsx        |  55 ++++----
 src/modules/helpers/marketplace.js            |  12 +-
 18 files changed, 95 insertions(+), 210 deletions(-)

diff --git a/src/components/modals/main/marketplace/Items.jsx b/src/components/modals/main/marketplace/Items.jsx
index d28fd520..9c9ab604 100644
--- a/src/components/modals/main/marketplace/Items.jsx
+++ b/src/components/modals/main/marketplace/Items.jsx
@@ -1,5 +1,5 @@
 import variables from 'modules/variables';
-import { MdOpenInNew, MdAutoFixHigh } from 'react-icons/md';
+import { MdAutoFixHigh } from 'react-icons/md';
 
 export default function Items({
   type,
@@ -41,7 +41,7 @@ export default function Items({
           </div>
         ))}
       </div>
-      {type === 'all' ? (
+      {type === 'all' && !onCollection ? (
         <div className="createYourOwn">
           <MdAutoFixHigh />
           <span className="title">Can't find what you're looking for?</span>
diff --git a/src/components/modals/main/marketplace/sections/Create.jsx b/src/components/modals/main/marketplace/sections/Create.jsx
index bcf4f4dd..87f1a008 100644
--- a/src/components/modals/main/marketplace/sections/Create.jsx
+++ b/src/components/modals/main/marketplace/sections/Create.jsx
@@ -1,7 +1,3 @@
-// warning: this file is even worse than Background.jsx
-// if anyone wants to rewrite it to be actually decent, feel free
-// otherwise it will be cleaned up probably when alex asks me to add something here :(
-// - david
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import {
@@ -22,7 +18,6 @@ import { saveFile } from 'modules/helpers/settings/modals';
 import Tooltip from '../../../../helpers/tooltip/Tooltip';
 
 import FileUpload from '../../settings/FileUpload';
-import Dropdown from '../../settings/Dropdown';
 
 import '../../../welcome/welcome.scss';
 
@@ -53,7 +48,7 @@ export default class Create extends PureComponent {
       return this.setState({
         currentTab: tab,
         addonMetadata: {
-          type: type,
+          type
         },
       });
     } else {
@@ -96,47 +91,6 @@ export default class Create extends PureComponent {
     toast(variables.language.getMessage(variables.languagecode, 'toasts.imported'));
   }
 
-  updateQuotePackType(type) {
-    const addonMetadata = {
-      type,
-      name: this.state.addonMetadata.name,
-      description: this.state.addonMetadata.description,
-      version: this.state.addonMetadata.version,
-      author: this.state.addonMetadata.author,
-      icon_url: this.state.addonMetadata.icon_url,
-      screenshot_url: this.state.addonMetadata.screenshot_url,
-    };
-    if (type === 'quotePack') {
-      this.setState({
-        addonMetadata: {
-          addonMetadata,
-          quotes: [],
-        },
-      });
-    } else {
-      this.setState({
-        addonMetadata: {
-          addonMetadata,
-        },
-        addonData: {
-          url: '',
-          name: '',
-          author: '',
-        },
-      });
-    }
-  }
-
-  updateQuotePackAPI(type, data) {
-    this.setState({
-      addonData: {
-        url: type === 'url' ? data : this.state.addonData.url || '',
-        name: type === 'name' ? data : this.state.addonData.name || '',
-        author: type === 'author' ? data : this.state.addonData.author || '',
-      },
-    });
-  }
-
   importQuotes() {
     this.setState({
       addonData: JSON.parse(localStorage.getItem('customQuote')) || [],
@@ -175,7 +129,7 @@ export default class Create extends PureComponent {
         name: this.state.addonMetadata.name,
         description: this.state.addonMetadata.description,
         type:
-          this.state.addonMetadata.type === 'quote_api' ? 'quotes' : this.state.addonMetadata.type,
+          this.state.addonMetadata.type,
         version: this.state.addonMetadata.version,
         author: this.state.addonMetadata.author,
         icon_url: this.state.addonMetadata.icon_url,
@@ -264,7 +218,6 @@ export default class Create extends PureComponent {
         </div>
         <SettingsItem title={getMessage('modals.main.addons.create.metadata.name')}>
           <TextField
-            label={getMessage('modals.main.addons.create.metadata.name')}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.name}
@@ -273,7 +226,6 @@ export default class Create extends PureComponent {
         </SettingsItem>
         <SettingsItem title={getMessage('modals.main.marketplace.product.version')}>
           <TextField
-            label={getMessage('modals.main.marketplace.product.version')}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.version}
@@ -282,7 +234,6 @@ export default class Create extends PureComponent {
         </SettingsItem>
         <SettingsItem title={getMessage('modals.main.marketplace.product.author')}>
           <TextField
-            label={getMessage('modals.main.marketplace.product.author')}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.author}
@@ -291,7 +242,6 @@ export default class Create extends PureComponent {
         </SettingsItem>
         <SettingsItem title={getMessage('modals.main.addons.create.metadata.icon_url')}>
           <TextField
-            label={getMessage('modals.main.addons.create.metadata.icon_url')}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.icon_url}
@@ -300,7 +250,6 @@ export default class Create extends PureComponent {
         </SettingsItem>
         <SettingsItem title={getMessage('modals.main.addons.create.metadata.screenshot_url')}>
           <TextField
-            label={getMessage('modals.main.addons.create.metadata.screenshot_url')}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             value={this.state.addonMetadata.screenshot_url}
@@ -312,7 +261,6 @@ export default class Create extends PureComponent {
           final={true}
         >
           <TextField
-            label={getMessage('modals.main.addons.create.metadata.description')}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
             multiline
@@ -381,55 +329,11 @@ export default class Create extends PureComponent {
 
     // quotes
     const nextQuotesDisabled = !(
-      (this.state.addonMetadata.type === 'quote_api' &&
-        this.state.addonData.url !== '' &&
-        this.state.addonData.name !== '' &&
-        this.state.addonData.author !== '') ||
       (this.state.addonMetadata.type === 'quotes' && this.state.addonData.quotes !== '')
     );
     const addQuotes = (
       <>
-        <SettingsItem final={true} title={getMessage('modals.main.addons.create.quotes.title')}>
-          <Dropdown
-            label={getMessage('modals.main.settings.sections.time.type')}
-            noSetting
-            onChange={(e) => this.updateQuotePackType(e)}
-          >
-            <option value="quotes">
-              {getMessage('modals.main.addons.create.quotes.local.title')}
-            </option>
-            <option value="quote_api">
-              {getMessage('modals.main.addons.create.quotes.api.title')}
-            </option>
-          </Dropdown>
-        </SettingsItem>
-        {this.state.addonMetadata.type === 'quote_api' ? (
-          <>
-            <TextField
-              label={getMessage('modals.main.addons.create.quotes.api.url')}
-              varient="outlined"
-              InputLabelProps={{ shrink: true }}
-              value={this.state.addonData.url}
-              onInput={(e) => this.updateQuotePack(e.target.value, 'url')}
-            />
-            <TextField
-              label={getMessage('modals.main.addons.create.quotes.api.name')}
-              varient="outlined"
-              InputLabelProps={{ shrink: true }}
-              value={this.state.addonData.name}
-              onInput={(e) => this.updateQuotePack(e.target.value, 'name')}
-            />
-            <TextField
-              label={getMessage('modals.main.addons.create.quotes.api.author')}
-              varient="outlined"
-              InputLabelProps={{ shrink: true }}
-              value={this.state.addonData.author}
-              onInput={(e) => this.updateQuotePack(e.target.value, 'author')}
-            />
-            <br />
-            <br />
-          </>
-        ) : (
+        <SettingsItem final={true} title={getMessage('modals.main.addons.create.quotes.title')}/>
           <SettingsItem
             final={true}
             title={getMessage('modals.main.addons.create.settings.current')}
@@ -447,7 +351,6 @@ export default class Create extends PureComponent {
               </div>
             </div>
           </SettingsItem>
-        )}
         <div className="createButtons">
           <button onClick={() => this.changeTab(2)}>
             {getMessage('modals.welcome.buttons.previous')}
@@ -529,9 +432,7 @@ export default class Create extends PureComponent {
           <button
             onClick={() =>
               this.changeTab(
-                this.state.addonMetadata.type === 'quote_api'
-                  ? 'quotes'
-                  : this.state.addonMetadata.type,
+                this.state.addonMetadata.type,
               )
             }
             disabled={nextDescriptionDisabled}
@@ -539,17 +440,6 @@ export default class Create extends PureComponent {
             {getMessage('modals.welcome.buttons.previous')}
           </button>
         </div>
-        {/*<button
-          onClick={() =>
-            this.changeTab(
-              this.state.addonMetadata.type === 'quote_api'
-                ? 'quotes'
-                : this.state.addonMetadata.type,
-            )
-          }
-        >
-          {getMessage('modals.welcome.buttons.previous')}
-        </button>*/}
       </>
     );
 
diff --git a/src/components/modals/main/marketplace/sections/Sideload.jsx b/src/components/modals/main/marketplace/sections/Sideload.jsx
index 3d67bef0..6e124185 100644
--- a/src/components/modals/main/marketplace/sections/Sideload.jsx
+++ b/src/components/modals/main/marketplace/sections/Sideload.jsx
@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdIntegrationInstructions } from 'react-icons/md';
+import { MdIntegrationInstructions, MdOutlineFileUpload } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import Modal from 'react-modal';
 
@@ -70,14 +70,13 @@ export default class Sideload extends PureComponent {
             accept="application/json"
             loadFunction={(e) => this.installAddon(JSON.parse(e.target.result))}
           />
-          <MdIntegrationInstructions />
+          <MdIntegrationInstructions className='sideloadIcon'/>
           <span className="title">{this.getMessage('modals.main.addons.sideload.title')}</span>
-          <span className="subtitle">idk something about it</span>
+          <span className="subtitle">Install a Mue addon not on the marketplace from your computer</span>
           <button
-            className="addToMue sideload"
             onClick={() => document.getElementById('file-input').click()}
           >
-            {this.getMessage('modals.main.settings.sections.background.source.upload')}
+            <MdOutlineFileUpload />{this.getMessage('modals.main.settings.sections.background.source.upload')}
           </button>
         </div>
         <Modal
diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss
index e5d21bd4..4689bbef 100644
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@@ -195,22 +195,26 @@
 }
 
 .emptyMessage {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  gap: 15px;
-  min-width: 100px;
+  display: grid;
+  place-items: center;
+  grid-gap: 5px;
+  width: 200px;
+  height: 200px;
+  padding: 50px;
 
   @include themed() {
-    padding: 45px;
     border-radius: t($borderRadius);
     background: t($modal-sidebar);
     box-shadow: 0 0 0 4px t($modal-sidebarActive);
 
-    svg {
+    .sideloadIcon {
       font-size: 50px;
       color: t($subColor);
     }
+    button {
+      display: flex;
+      flex-flow: row;
+    }
   }
 }
 
diff --git a/src/components/modals/main/settings/SettingsItem.jsx b/src/components/modals/main/settings/SettingsItem.jsx
index 351133d8..ad2870ce 100644
--- a/src/components/modals/main/settings/SettingsItem.jsx
+++ b/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>
diff --git a/src/components/modals/main/settings/sections/About.jsx b/src/components/modals/main/settings/sections/About.jsx
index f9b6c0a9..e9c83eee 100644
--- a/src/components/modals/main/settings/sections/About.jsx
+++ b/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>
diff --git a/src/components/modals/main/settings/sections/Advanced.jsx b/src/components/modals/main/settings/sections/Advanced.jsx
index 276278c2..1c050e8a 100644
--- a/src/components/modals/main/settings/sections/Advanced.jsx
+++ b/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"
diff --git a/src/components/modals/main/settings/sections/Appearance.jsx b/src/components/modals/main/settings/sections/Appearance.jsx
index c893923c..e9cb048c 100644
--- a/src/components/modals/main/settings/sections/Appearance.jsx
+++ b/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
diff --git a/src/components/modals/main/settings/sections/Date.jsx b/src/components/modals/main/settings/sections/Date.jsx
index 625ce6cf..626be879 100644
--- a/src/components/modals/main/settings/sections/Date.jsx
+++ b/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>
       </>
     );
diff --git a/src/components/modals/main/settings/sections/Greeting.jsx b/src/components/modals/main/settings/sections/Greeting.jsx
index 676fade0..8a9825c6 100644
--- a/src/components/modals/main/settings/sections/Greeting.jsx
+++ b/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/>*/}
       </>
     );
   }
diff --git a/src/components/modals/main/settings/sections/Navbar.jsx b/src/components/modals/main/settings/sections/Navbar.jsx
index c67a0ce8..97746065 100644
--- a/src/components/modals/main/settings/sections/Navbar.jsx
+++ b/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')}
diff --git a/src/components/modals/main/settings/sections/QuickLinks.jsx b/src/components/modals/main/settings/sections/QuickLinks.jsx
index 52ce1de2..bf1821a2 100644
--- a/src/components/modals/main/settings/sections/QuickLinks.jsx
+++ b/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')}
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index afee33cd..28d095de 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/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"
diff --git a/src/components/modals/main/settings/sections/Search.jsx b/src/components/modals/main/settings/sections/Search.jsx
index ed4d534f..f0fb6b91 100644
--- a/src/components/modals/main/settings/sections/Search.jsx
+++ b/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>
diff --git a/src/components/modals/main/settings/sections/Stats.jsx b/src/components/modals/main/settings/sections/Stats.jsx
index a0514b6b..cc4fccc8 100644
--- a/src/components/modals/main/settings/sections/Stats.jsx
+++ b/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"
diff --git a/src/components/modals/main/settings/sections/Time.jsx b/src/components/modals/main/settings/sections/Time.jsx
index 83fbf853..af0a49dd 100644
--- a/src/components/modals/main/settings/sections/Time.jsx
+++ b/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"
diff --git a/src/components/modals/main/settings/sections/background/Background.jsx b/src/components/modals/main/settings/sections/background/Background.jsx
index a3ec2378..aebce72a 100644
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/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')}
diff --git a/src/modules/helpers/marketplace.js b/src/modules/helpers/marketplace.js
index 3dedf402..404298c4 100644
--- a/src/modules/helpers/marketplace.js
+++ b/src/modules/helpers/marketplace.js
@@ -38,7 +38,9 @@ export function install(type, input, sideload) {
         currentPhotos.push(photo);
       });
       localStorage.setItem('photo_packs', JSON.stringify(currentPhotos));
-      localStorage.setItem('oldBackgroundType', localStorage.getItem('backgroundType'));
+      if (localStorage.getItem('backgroundType') !== 'photo_pack') {
+        localStorage.setItem('oldBackgroundType', localStorage.getItem('backgroundType'));
+      }
       localStorage.setItem('backgroundType', 'photo_pack');
       EventBus.dispatch('refresh', 'background');
       break;
@@ -49,7 +51,9 @@ export function install(type, input, sideload) {
       }
 
       localStorage.setItem('quote_packs', JSON.stringify(input.quotes));
-      localStorage.setItem('oldQuoteType', localStorage.getItem('quoteType'));
+      if (localStorage.getItem('quoteType') !== 'quote_pack') {
+        localStorage.setItem('oldQuoteType', localStorage.getItem('quoteType'));
+      }
       localStorage.setItem('quoteType', 'quote_pack');
       EventBus.dispatch('refresh', 'quote');
       break;
@@ -88,7 +92,7 @@ export function uninstall(type, name) {
     case 'quotes':
       localStorage.removeItem('quote_packs');
       localStorage.removeItem('quoteAPI');
-      localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType'));
+      localStorage.setItem('quoteType', localStorage.getItem('oldQuoteType') || 'api');
       localStorage.removeItem('oldQuoteType');
       EventBus.dispatch('refresh', 'marketplacequoteuninstall');
       break;
@@ -106,7 +110,7 @@ export function uninstall(type, name) {
         }
       });
       localStorage.setItem('photo_packs', JSON.stringify(installedContents));
-      localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType'));
+      localStorage.setItem('backgroundType', localStorage.getItem('oldBackgroundType') || 'api');
       localStorage.removeItem('oldBackgroundType');
       EventBus.dispatch('refresh', 'marketplacebackgrounduninstall');
       break;