fix: author loading before quote

- Make author div not load if quote is empty
- photoinformation taking too much of the screen
- more transitions and consistent transitions
- running prettier across all files

Co-authored-by: David Ralph <me@davidcralph.co.uk>

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

@@ -1,38 +1,37 @@
-import variables from "modules/variables";
-import { PureComponent } from "react";
-import { MenuItem } from "@mui/material";
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
+import { MenuItem } from '@mui/material';
 
-import Header from "../../Header";
-import Checkbox from "../../Checkbox";
-import Dropdown from "../../Dropdown";
-import Slider from "../../Slider";
-import Radio from "../../Radio";
-import SettingsItem from "../../SettingsItem";
+import Header from '../../Header';
+import Checkbox from '../../Checkbox';
+import Dropdown from '../../Dropdown';
+import Slider from '../../Slider';
+import Radio from '../../Radio';
+import SettingsItem from '../../SettingsItem';
 
-import ColourSettings from "./Colour";
-import CustomSettings from "./Custom";
+import ColourSettings from './Colour';
+import CustomSettings from './Custom';
 
-import { values } from "modules/helpers/settings/modals";
+import { values } from 'modules/helpers/settings/modals';
 
 export default class BackgroundSettings extends PureComponent {
-  getMessage = (text) =>
-    variables.language.getMessage(variables.languagecode, text);
+  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
     this.state = {
-      backgroundType: localStorage.getItem("backgroundType") || "api",
-      backgroundFilter: localStorage.getItem("backgroundFilter") || "none",
-      backgroundCategories: [this.getMessage("modals.main.loading")],
-      backgroundAPI: localStorage.getItem("backgroundAPI") || "mue",
-      marketplaceEnabled: localStorage.getItem("photo_packs"),
+      backgroundType: localStorage.getItem('backgroundType') || 'api',
+      backgroundFilter: localStorage.getItem('backgroundFilter') || 'none',
+      backgroundCategories: [this.getMessage('modals.main.loading')],
+      backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
+      marketplaceEnabled: localStorage.getItem('photo_packs'),
     };
     this.controller = new AbortController();
   }
 
   async getBackgroundCategories() {
     const data = await (
-      await fetch(variables.constants.API_URL + "/images/categories", {
+      await fetch(variables.constants.API_URL + '/images/categories', {
         signal: this.controller.signal,
       })
     ).json();
@@ -47,12 +46,9 @@ export default class BackgroundSettings extends PureComponent {
   }
 
   componentDidMount() {
-    if (
-      navigator.onLine === false ||
-      localStorage.getItem("offlineMode") === "true"
-    ) {
+    if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return this.setState({
-        backgroundCategories: [this.getMessage("modals.update.offline.title")],
+        backgroundCategories: [this.getMessage('modals.update.offline.title')],
       });
     }
 
@@ -71,53 +67,41 @@ export default class BackgroundSettings extends PureComponent {
 
     const apiOptions = [
       {
-        name: "Mue",
-        value: "mue",
+        name: 'Mue',
+        value: 'mue',
       },
       {
-        name: "Unsplash",
-        value: "unsplash",
+        name: 'Unsplash',
+        value: 'unsplash',
       },
       {
-        name: "Pexels",
-        value: "pexels",
+        name: 'Pexels',
+        value: 'pexels',
       },
     ];
 
     const interval = (
       <SettingsItem>
         <Dropdown
-          label={getMessage(
-            "modals.main.settings.sections.background.interval.title"
-          )}
+          label={getMessage('modals.main.settings.sections.background.interval.title')}
           name="backgroundchange"
         >
-          <option value="refresh">{getMessage("tabname")}</option>
+          <option value="refresh">{getMessage('tabname')}</option>
           <option value="60000">
-            {getMessage(
-              "modals.main.settings.sections.background.interval.minute"
-            )}
+            {getMessage('modals.main.settings.sections.background.interval.minute')}
           </option>
           <option value="1800000">
-            {getMessage(
-              "modals.main.settings.sections.background.interval.half_hour"
-            )}
+            {getMessage('modals.main.settings.sections.background.interval.half_hour')}
           </option>
           <option value="3600000">
-            {getMessage(
-              "modals.main.settings.sections.background.interval.hour"
-            )}
+            {getMessage('modals.main.settings.sections.background.interval.hour')}
           </option>
           <option value="86400000">
-            {getMessage(
-              "modals.main.settings.sections.background.interval.day"
-            )}
+            {getMessage('modals.main.settings.sections.background.interval.day')}
           </option>
-          <option value="604800000">{getMessage("widgets.date.week")}</option>
+          <option value="604800000">{getMessage('widgets.date.week')}</option>
           <option value="2628000000">
-            {getMessage(
-              "modals.main.settings.sections.background.interval.month"
-            )}
+            {getMessage('modals.main.settings.sections.background.interval.month')}
           </option>
         </Dropdown>
       </SettingsItem>
@@ -127,37 +111,30 @@ export default class BackgroundSettings extends PureComponent {
       <>
         <SettingsItem>
           <Radio
-            title={getMessage(
-              "modals.main.settings.sections.background.source.api"
-            )}
+            title={getMessage('modals.main.settings.sections.background.source.api')}
             options={apiOptions}
             name="backgroundAPI"
             category="background"
             element="#backgroundImage"
             onChange={(e) => this.setState({ backgroundAPI: e })}
           />
-          {this.state.backgroundCategories[0] ===
-          getMessage("modals.main.loading") ? (
+          {this.state.backgroundCategories[0] === getMessage('modals.main.loading') ? (
             <>
               <Dropdown
-                label={getMessage(
-                  "modals.main.settings.sections.background.category"
-                )}
+                label={getMessage('modals.main.settings.sections.background.category')}
                 name="apiCategory"
               >
                 <MenuItem value="loading" key="loading">
-                  {getMessage("modals.main.loading")}
+                  {getMessage('modals.main.loading')}
                 </MenuItem>
                 <MenuItem value="loading" key="loading">
-                  {getMessage("modals.main.loading")}
+                  {getMessage('modals.main.loading')}
                 </MenuItem>
               </Dropdown>
             </>
           ) : (
             <Dropdown
-              label={getMessage(
-                "modals.main.settings.sections.background.category"
-              )}
+              label={getMessage('modals.main.settings.sections.background.category')}
               name="apiCategory"
             >
               {this.state.backgroundCategories.map((category) => (
@@ -168,31 +145,21 @@ export default class BackgroundSettings extends PureComponent {
             </Dropdown>
           )}
           <Dropdown
-            label={getMessage(
-              "modals.main.settings.sections.background.source.quality.title"
-            )}
+            label={getMessage('modals.main.settings.sections.background.source.quality.title')}
             name="apiQuality"
             element=".other"
           >
             <option value="original">
-              {getMessage(
-                "modals.main.settings.sections.background.source.quality.original"
-              )}
+              {getMessage('modals.main.settings.sections.background.source.quality.original')}
             </option>
             <option value="high">
-              {getMessage(
-                "modals.main.settings.sections.background.source.quality.high"
-              )}
+              {getMessage('modals.main.settings.sections.background.source.quality.high')}
             </option>
             <option value="normal">
-              {getMessage(
-                "modals.main.settings.sections.background.source.quality.normal"
-              )}
+              {getMessage('modals.main.settings.sections.background.source.quality.normal')}
             </option>
             <option value="datasaver">
-              {getMessage(
-                "modals.main.settings.sections.background.source.quality.datasaver"
-              )}
+              {getMessage('modals.main.settings.sections.background.source.quality.datasaver')}
             </option>
           </Dropdown>
         </SettingsItem>
@@ -201,16 +168,16 @@ export default class BackgroundSettings extends PureComponent {
     );
 
     switch (this.state.backgroundType) {
-      case "custom":
+      case 'custom':
         backgroundSettings = <CustomSettings interval={interval} />;
         break;
-      case "colour":
+      case 'colour':
         backgroundSettings = <ColourSettings />;
         break;
-      case "random_colour":
+      case 'random_colour':
         backgroundSettings = <></>;
         break;
-      case "random_gradient":
+      case 'random_gradient':
         backgroundSettings = <></>;
         break;
       default:
@@ -219,23 +186,23 @@ export default class BackgroundSettings extends PureComponent {
     }
 
     if (
-      localStorage.getItem("photo_packs") &&
-      this.state.backgroundType !== "custom" &&
-      this.state.backgroundType !== "colour" &&
-      this.state.backgroundType !== "api"
+      localStorage.getItem('photo_packs') &&
+      this.state.backgroundType !== 'custom' &&
+      this.state.backgroundType !== 'colour' &&
+      this.state.backgroundType !== 'api'
     ) {
       backgroundSettings = null;
     }
 
     const usingImage =
-      this.state.backgroundType !== "colour" &&
-      this.state.backgroundType !== "random_colour" &&
-      this.state.backgroundType !== "random_gradient";
+      this.state.backgroundType !== 'colour' &&
+      this.state.backgroundType !== 'random_colour' &&
+      this.state.backgroundType !== 'random_gradient';
 
     return (
       <>
         <Header
-          title={getMessage("modals.main.settings.sections.background.title")}
+          title={getMessage('modals.main.settings.sections.background.title')}
           setting="background"
           category="background"
           element="#backgroundImage"
@@ -243,171 +210,130 @@ export default class BackgroundSettings extends PureComponent {
         <SettingsItem title="cheese" subtitle="cheese">
           <Checkbox
             name="ddgProxy"
-            text={getMessage(
-              "modals.main.settings.sections.background.ddg_image_proxy"
-            )}
+            text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
             element=".other"
             disabled={!usingImage}
           />
           <Checkbox
             name="bgtransition"
-            text={getMessage(
-              "modals.main.settings.sections.background.transition"
-            )}
+            text={getMessage('modals.main.settings.sections.background.transition')}
             element=".other"
             disabled={!usingImage}
           />
           <Checkbox
             name="photoInformation"
-            text={getMessage(
-              "modals.main.settings.sections.background.photo_information"
-            )}
+            text={getMessage('modals.main.settings.sections.background.photo_information')}
             element=".other"
             disabled={
-              this.state.backgroundType !== "api" &&
-              this.state.backgroundType !== "marketplace"
+              this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'
             }
           />
           <Checkbox
             name="photoMap"
-            text={getMessage(
-              "modals.main.settings.sections.background.show_map"
-            )}
+            text={getMessage('modals.main.settings.sections.background.show_map')}
             element=".other"
-            disabled={this.state.backgroundAPI !== "unsplash"}
+            disabled={this.state.backgroundAPI !== 'unsplash'}
           />
         </SettingsItem>
         <SettingsItem
-          title={getMessage(
-            "modals.main.settings.sections.background.source.title"
-          )}
+          title={getMessage('modals.main.settings.sections.background.source.title')}
           subtitle="mucho gracias"
         >
           <Dropdown
-            label={getMessage(
-              "modals.main.settings.sections.background.type.title"
-            )}
+            label={getMessage('modals.main.settings.sections.background.type.title')}
             name="backgroundType"
             onChange={(value) => this.setState({ backgroundType: value })}
             category="background"
           >
             {this.state.marketplaceEnabled ? (
               <option value="photo_pack">
-                {this.getMessage("modals.main.navbar.marketplace")}
+                {this.getMessage('modals.main.navbar.marketplace')}
               </option>
             ) : null}
             <option value="api">
-              {getMessage("modals.main.settings.sections.background.type.api")}
+              {getMessage('modals.main.settings.sections.background.type.api')}
             </option>
             <option value="custom">
-              {getMessage(
-                "modals.main.settings.sections.background.type.custom_image"
-              )}
+              {getMessage('modals.main.settings.sections.background.type.custom_image')}
             </option>
             <option value="colour">
-              {getMessage(
-                "modals.main.settings.sections.background.type.custom_colour"
-              )}
+              {getMessage('modals.main.settings.sections.background.type.custom_colour')}
             </option>
             <option value="random_colour">
-              {getMessage(
-                "modals.main.settings.sections.background.type.random_colour"
-              )}
+              {getMessage('modals.main.settings.sections.background.type.random_colour')}
             </option>
             <option value="random_gradient">
-              {getMessage(
-                "modals.main.settings.sections.background.type.random_gradient"
-              )}
+              {getMessage('modals.main.settings.sections.background.type.random_gradient')}
             </option>
           </Dropdown>
         </SettingsItem>
         {backgroundSettings}
-        {this.state.backgroundType === "api" ||
-        this.state.backgroundType === "custom" ||
+        {this.state.backgroundType === 'api' ||
+        this.state.backgroundType === 'custom' ||
         this.state.marketplaceEnabled ? (
           <SettingsItem
-            title={getMessage(
-              "modals.main.settings.sections.background.effects.title"
-            )}
+            title={getMessage('modals.main.settings.sections.background.effects.title')}
             subtitle="cheese"
           >
             <Slider
-              title={getMessage(
-                "modals.main.settings.sections.background.effects.blur"
-              )}
+              title={getMessage('modals.main.settings.sections.background.effects.blur')}
               name="blur"
               min="0"
               max="100"
               default="0"
               display="%"
-              marks={values("background")}
+              marks={values('background')}
               category="background"
               element="#backgroundImage"
             />
             <Slider
-              title={getMessage(
-                "modals.main.settings.sections.background.effects.brightness"
-              )}
+              title={getMessage('modals.main.settings.sections.background.effects.brightness')}
               name="brightness"
               min="0"
               max="100"
               default="90"
               display="%"
-              marks={values("background")}
+              marks={values('background')}
               category="background"
               element="#backgroundImage"
             />
             <Dropdown
-              label={getMessage(
-                "modals.main.settings.sections.background.effects.filters.title"
-              )}
+              label={getMessage('modals.main.settings.sections.background.effects.filters.title')}
               name="backgroundFilter"
               onChange={(value) => this.setState({ backgroundFilter: value })}
               category="background"
               element="#backgroundImage"
             >
               <option value="none">
-                {getMessage(
-                  "modals.main.settings.sections.appearance.navbar.refresh_options.none"
-                )}
+                {getMessage('modals.main.settings.sections.appearance.navbar.refresh_options.none')}
               </option>
               <option value="grayscale">
-                {getMessage(
-                  "modals.main.settings.sections.background.effects.filters.grayscale"
-                )}
+                {getMessage('modals.main.settings.sections.background.effects.filters.grayscale')}
               </option>
               <option value="sepia">
-                {getMessage(
-                  "modals.main.settings.sections.background.effects.filters.sepia"
-                )}
+                {getMessage('modals.main.settings.sections.background.effects.filters.sepia')}
               </option>
               <option value="invert">
-                {getMessage(
-                  "modals.main.settings.sections.background.effects.filters.invert"
-                )}
+                {getMessage('modals.main.settings.sections.background.effects.filters.invert')}
               </option>
               <option value="saturate">
-                {getMessage(
-                  "modals.main.settings.sections.background.effects.filters.saturate"
-                )}
+                {getMessage('modals.main.settings.sections.background.effects.filters.saturate')}
               </option>
               <option value="contrast">
-                {getMessage(
-                  "modals.main.settings.sections.background.effects.filters.contrast"
-                )}
+                {getMessage('modals.main.settings.sections.background.effects.filters.contrast')}
               </option>
             </Dropdown>
-            {this.state.backgroundFilter !== "none" ? (
+            {this.state.backgroundFilter !== 'none' ? (
               <Slider
                 title={getMessage(
-                  "modals.main.settings.sections.background.effects.filters.amount"
+                  'modals.main.settings.sections.background.effects.filters.amount',
                 )}
                 name="backgroundFilterAmount"
                 min="0"
                 max="100"
                 default="0"
                 display="%"
-                marks={values("background")}
+                marks={values('background')}
                 category="background"
                 element="#backgroundImage"
               />