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

@@ -1,25 +1,22 @@
-import variables from "modules/variables";
-import { useState } from "react";
-import Checkbox from "../Checkbox";
-import Slider from "../Slider";
-import { TextField } from "@mui/material";
+import variables from 'modules/variables';
+import { useState } from 'react';
+import Checkbox from '../Checkbox';
+import Slider from '../Slider';
+import { TextField } from '@mui/material';
 
-import EventBus from "modules/helpers/eventbus";
-import { values } from "modules/helpers/settings/modals";
+import EventBus from 'modules/helpers/eventbus';
+import { values } from 'modules/helpers/settings/modals';
 
 export default function ExperimentalSettings() {
-  const getMessage = (text) =>
-    variables.language.getMessage(variables.languagecode, text);
+  const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
   const [eventType, setEventType] = useState();
   const [eventName, setEventName] = useState();
 
   return (
     <>
-      <h2>{getMessage("modals.main.settings.sections.experimental.title")}</h2>
-      <p>{getMessage("modals.main.settings.sections.experimental.warning")}</p>
-      <h3>
-        {getMessage("modals.main.settings.sections.experimental.developer")}
-      </h3>
+      <h2>{getMessage('modals.main.settings.sections.experimental.title')}</h2>
+      <p>{getMessage('modals.main.settings.sections.experimental.warning')}</p>
+      <h3>{getMessage('modals.main.settings.sections.experimental.developer')}</h3>
       <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
       <Slider
         title="Debug timeout"
@@ -28,12 +25,12 @@ export default function ExperimentalSettings() {
         max="5000"
         default="0"
         step="100"
-        marks={values("experimental")}
+        marks={values('experimental')}
         element=".other"
       />
       <p>Send Event</p>
       <TextField
-        label={"Type"}
+        label={'Type'}
         value={eventType}
         onChange={(e) => setEventType(e.target.value)}
         spellCheck={false}
@@ -41,7 +38,7 @@ export default function ExperimentalSettings() {
         InputLabelProps={{ shrink: true }}
       />
       <TextField
-        label={"Name"}
+        label={'Name'}
         value={eventName}
         onChange={(e) => setEventName(e.target.value)}
         spellCheck={false}
@@ -49,19 +46,12 @@ export default function ExperimentalSettings() {
         InputLabelProps={{ shrink: true }}
       />
       <br />
-      <button
-        className="uploadbg"
-        onClick={() => EventBus.dispatch(eventType, eventName)}
-      >
+      <button className="uploadbg" onClick={() => EventBus.dispatch(eventType, eventName)}>
         Send
       </button>
       <br />
       <br />
-      <button
-        className="reset"
-        style={{ marginLeft: "0px" }}
-        onClick={() => localStorage.clear()}
-      >
+      <button className="reset" style={{ marginLeft: '0px' }} onClick={() => localStorage.clear()}>
         Clear LocalStorage
       </button>
     </>