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

@@ -1,44 +1,39 @@
-import variables from "modules/variables";
-import { PureComponent } from "react";
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
 
-import Header from "../Header";
-import Checkbox from "../Checkbox";
-import Dropdown from "../Dropdown";
-import SettingsItem from "../SettingsItem";
+import Header from '../Header';
+import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
+import SettingsItem from '../SettingsItem';
 
 export default class DateSettings extends PureComponent {
   constructor() {
     super();
     this.state = {
-      dateType: localStorage.getItem("dateType") || "long",
+      dateType: localStorage.getItem('dateType') || 'long',
     };
   }
 
   render() {
-    const getMessage = (text) =>
-      variables.language.getMessage(variables.languagecode, text);
+    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
     let dateSettings;
 
     const longSettings = (
       <>
-      <Dropdown
-          label="Long Format"
-          name="longFormat"
-          category="date"
-        >
+        <Dropdown label="Long Format" name="longFormat" category="date">
           <option value="DMY">DMY</option>
           <option value="MDY">MDY</option>
           <option value="YMD">YMD</option>
         </Dropdown>
         <Checkbox
           name="dayofweek"
-          text={getMessage("modals.main.settings.sections.date.day_of_week")}
+          text={getMessage('modals.main.settings.sections.date.day_of_week')}
           category="date"
         />
         <Checkbox
           name="datenth"
-          text={getMessage("modals.main.settings.sections.date.datenth")}
+          text={getMessage('modals.main.settings.sections.date.datenth')}
           category="date"
         />
       </>
@@ -47,7 +42,7 @@ export default class DateSettings extends PureComponent {
     const shortSettings = (
       <>
         <Dropdown
-          label={getMessage("modals.main.settings.sections.date.short_format")}
+          label={getMessage('modals.main.settings.sections.date.short_format')}
           name="dateFormat"
           category="date"
         >
@@ -57,37 +52,27 @@ export default class DateSettings extends PureComponent {
         </Dropdown>
 
         <Dropdown
-          label={getMessage(
-            "modals.main.settings.sections.date.short_separator.title"
-          )}
+          label={getMessage('modals.main.settings.sections.date.short_separator.title')}
           name="shortFormat"
           category="date"
         >
           <option value="dash">
-            {getMessage(
-              "modals.main.settings.sections.date.short_separator.dash"
-            )}
+            {getMessage('modals.main.settings.sections.date.short_separator.dash')}
           </option>
           <option value="dots">
-            {getMessage(
-              "modals.main.settings.sections.date.short_separator.dots"
-            )}
+            {getMessage('modals.main.settings.sections.date.short_separator.dots')}
           </option>
           <option value="gaps">
-            {getMessage(
-              "modals.main.settings.sections.date.short_separator.gaps"
-            )}
+            {getMessage('modals.main.settings.sections.date.short_separator.gaps')}
           </option>
           <option value="slashes">
-            {getMessage(
-              "modals.main.settings.sections.date.short_separator.slashes"
-            )}
+            {getMessage('modals.main.settings.sections.date.short_separator.slashes')}
           </option>
         </Dropdown>
       </>
     );
 
-    if (this.state.dateType === "long") {
+    if (this.state.dateType === 'long') {
       dateSettings = longSettings;
     } else {
       dateSettings = shortSettings;
@@ -96,7 +81,7 @@ export default class DateSettings extends PureComponent {
     return (
       <>
         <Header
-          title={getMessage("modals.main.settings.sections.date.title")}
+          title={getMessage('modals.main.settings.sections.date.title')}
           setting="date"
           category="date"
           element=".date"
@@ -105,28 +90,28 @@ export default class DateSettings extends PureComponent {
         />
         <SettingsItem title="Date Type">
           <Dropdown
-            label={getMessage("modals.main.settings.sections.time.type")}
+            label={getMessage('modals.main.settings.sections.time.type')}
             name="dateType"
             onChange={(value) => this.setState({ dateType: value })}
             category="date"
           >
             <option value="long">
-              {getMessage("modals.main.settings.sections.date.type.long")}
+              {getMessage('modals.main.settings.sections.date.type.long')}
             </option>
             <option value="short">
-              {getMessage("modals.main.settings.sections.date.type.short")}
+              {getMessage('modals.main.settings.sections.date.type.short')}
             </option>
           </Dropdown>
         </SettingsItem>
         <SettingsItem title="Extra Options">
           <Checkbox
             name="weeknumber"
-            text={getMessage("modals.main.settings.sections.date.week_number")}
+            text={getMessage('modals.main.settings.sections.date.week_number')}
             category="date"
           />
           <Checkbox
             name="datezero"
-            text={getMessage("modals.main.settings.sections.time.digital.zero")}
+            text={getMessage('modals.main.settings.sections.time.digital.zero')}
             category="date"
           />
           {dateSettings}