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/Custom.jsx

@@ -1,25 +1,19 @@
-import variables from "modules/variables";
-import { PureComponent } from "react";
-import { toast } from "react-toastify";
-import {
-  MdCancel,
-  MdAddLink,
-  MdAddPhotoAlternate,
-  MdPersonalVideo,
-} from "react-icons/md";
-import EventBus from "modules/helpers/eventbus";
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
+import { toast } from 'react-toastify';
+import { MdCancel, MdAddLink, MdAddPhotoAlternate, MdPersonalVideo } from 'react-icons/md';
+import EventBus from 'modules/helpers/eventbus';
 
-import Checkbox from "../../Checkbox";
-import FileUpload from "../../FileUpload";
-import SettingsItem from "../../SettingsItem";
+import Checkbox from '../../Checkbox';
+import FileUpload from '../../FileUpload';
+import SettingsItem from '../../SettingsItem';
 
-import Modal from "react-modal";
+import Modal from 'react-modal';
 
-import CustomURLModal from "./CustomURLModal";
+import CustomURLModal from './CustomURLModal';
 
 export default class CustomSettings extends PureComponent {
-  getMessage = (text) =>
-    variables.language.getMessage(variables.languagecode, text);
+  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
@@ -30,12 +24,12 @@ export default class CustomSettings extends PureComponent {
   }
 
   resetCustom = () => {
-    localStorage.setItem("customBackground", "[]");
+    localStorage.setItem('customBackground', '[]');
     this.setState({
       customBackground: [],
     });
-    toast(this.getMessage("toasts.reset"));
-    EventBus.dispatch("refresh", "background");
+    toast(this.getMessage('toasts.reset'));
+    EventBus.dispatch('refresh', 'background');
   };
 
   customBackground(e, text, index) {
@@ -48,15 +42,15 @@ export default class CustomSettings extends PureComponent {
     });
     this.forceUpdate();
 
-    localStorage.setItem("customBackground", JSON.stringify(customBackground));
-    document.querySelector(".reminder-info").style.display = "flex";
-    localStorage.setItem("showReminder", true);
+    localStorage.setItem('customBackground', JSON.stringify(customBackground));
+    document.querySelector('.reminder-info').style.display = 'flex';
+    localStorage.setItem('showReminder', true);
   }
 
   modifyCustomBackground(type, index) {
     const customBackground = this.state.customBackground;
-    if (type === "add") {
-      customBackground.push("");
+    if (type === 'add') {
+      customBackground.push('');
     } else {
       customBackground.splice(index, 1);
     }
@@ -66,39 +60,33 @@ export default class CustomSettings extends PureComponent {
     });
     this.forceUpdate();
 
-    localStorage.setItem("customBackground", JSON.stringify(customBackground));
-    document.querySelector(".reminder-info").style.display = "flex";
-    localStorage.setItem("showReminder", true);
+    localStorage.setItem('customBackground', JSON.stringify(customBackground));
+    document.querySelector('.reminder-info').style.display = 'flex';
+    localStorage.setItem('showReminder', true);
   }
 
   videoCheck(url) {
     return (
-      url.startsWith("data:video/") ||
-      url.endsWith(".mp4") ||
-      url.endsWith(".webm") ||
-      url.endsWith(".ogg")
+      url.startsWith('data:video/') ||
+      url.endsWith('.mp4') ||
+      url.endsWith('.webm') ||
+      url.endsWith('.ogg')
     );
   }
 
   videoCustomSettings = () => {
-    const hasVideo = this.state.customBackground.filter((bg) =>
-      this.videoCheck(bg)
-    );
+    const hasVideo = this.state.customBackground.filter((bg) => this.videoCheck(bg));
 
     if (hasVideo.length > 0) {
       return (
         <>
           <Checkbox
             name="backgroundVideoLoop"
-            text={this.getMessage(
-              "modals.main.settings.sections.background.source.loop_video"
-            )}
+            text={this.getMessage('modals.main.settings.sections.background.source.loop_video')}
           />
           <Checkbox
             name="backgroundVideoMute"
-            text={this.getMessage(
-              "modals.main.settings.sections.background.source.mute_video"
-            )}
+            text={this.getMessage('modals.main.settings.sections.background.source.mute_video')}
           />
         </>
       );
@@ -110,19 +98,17 @@ export default class CustomSettings extends PureComponent {
   getCustom() {
     let data;
     try {
-      data = JSON.parse(localStorage.getItem("customBackground"));
+      data = JSON.parse(localStorage.getItem('customBackground'));
     } catch (e) {
-      data = [localStorage.getItem("customBackground")];
+      data = [localStorage.getItem('customBackground')];
     }
 
     return data;
   }
 
   uploadCustomBackground() {
-    document
-      .getElementById("bg-input")
-      .setAttribute("index", this.state.customBackground.length);
-    document.getElementById("bg-input").click();
+    document.getElementById('bg-input').setAttribute('index', this.state.customBackground.length);
+    document.getElementById('bg-input').click();
     // to fix loadFunction
     this.setState({
       currentBackgroundIndex: this.state.customBackground.length,
@@ -134,39 +120,27 @@ export default class CustomSettings extends PureComponent {
       customURLModal: false,
       currentBackgroundIndex: this.state.customBackground.length,
     });
-    this.customBackground(
-      { target: { value: e } },
-      true,
-      this.state.customBackground.length
-    );
+    this.customBackground({ target: { value: e } }, true, this.state.customBackground.length);
   }
 
   render() {
     return (
       <>
         {this.props.interval}
-        <div className="settingsRow" style={{ alignItems: "flex-start" }}>
+        <div className="settingsRow" style={{ alignItems: 'flex-start' }}>
           <div className="content">
             <div className="images-row">
               {this.state.customBackground.map((url, index) => (
                 <div key={index}>
                   <img
-                    alt={"Custom background " + (index || 0)}
-                    src={`${
-                      !this.videoCheck(url)
-                        ? this.state.customBackground[index]
-                        : ""
-                    }`}
+                    alt={'Custom background ' + (index || 0)}
+                    src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`}
                   />
-                  {this.videoCheck(url) ? (
-                    <MdPersonalVideo className="customvideoicon" />
-                  ) : null}
+                  {this.videoCheck(url) ? <MdPersonalVideo className="customvideoicon" /> : null}
                   {this.state.customBackground.length > 0 ? (
                     <button
                       className="iconButton"
-                      onClick={() =>
-                        this.modifyCustomBackground("remove", index)
-                      }
+                      onClick={() => this.modifyCustomBackground('remove', index)}
                     >
                       <MdCancel />
                     </button>
@@ -183,14 +157,10 @@ export default class CustomSettings extends PureComponent {
               <span className="subtitle">
                 Available formats, jpeg, png, webp, webm, gif, mp4, webm, ogg
               </span>
-              <button onClick={() => this.uploadCustomBackground()}>
-                Or Select
-              </button>
+              <button onClick={() => this.uploadCustomBackground()}>Or Select</button>
             </div>
             <button onClick={() => this.setState({ customURLModal: true })}>
-              {this.getMessage(
-                "modals.main.settings.sections.background.source.add_url"
-              )}{" "}
+              {this.getMessage('modals.main.settings.sections.background.source.add_url')}{' '}
               <MdAddLink />
             </button>
             {/*<span className='subtitle'>
@@ -204,9 +174,7 @@ export default class CustomSettings extends PureComponent {
         <FileUpload
           id="bg-input"
           accept="image/jpeg, image/png, image/webp, image/webm, image/gif, video/mp4, video/webm, video/ogg"
-          loadFunction={(e) =>
-            this.customBackground(e, false, this.state.currentBackgroundIndex)
-          }
+          loadFunction={(e) => this.customBackground(e, false, this.state.currentBackgroundIndex)}
         />
         {this.videoCustomSettings()}
         <Modal