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

@@ -1,27 +1,24 @@
-import variables from "modules/variables";
-import { PureComponent } from "react";
-import Modal from "react-modal";
-import { MenuItem } from "@mui/material";
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
+import Modal from 'react-modal';
+import { MenuItem } from '@mui/material';
 import {
   MdUpload as ImportIcon,
   MdDownload as ExportIcon,
   MdRestartAlt as ResetIcon,
-} from "react-icons/md";
+} from 'react-icons/md';
 
-import {
-  exportSettings,
-  importSettings,
-} from "modules/helpers/settings/modals";
+import { exportSettings, importSettings } from 'modules/helpers/settings/modals';
 
-import Checkbox from "../Checkbox";
-import FileUpload from "../FileUpload";
-import Text from "../Text";
-import Switch from "../Switch";
-import ResetModal from "../ResetModal";
-import Dropdown from "../Dropdown";
-import SettingsItem from "../SettingsItem";
+import Checkbox from '../Checkbox';
+import FileUpload from '../FileUpload';
+import Text from '../Text';
+import Switch from '../Switch';
+import ResetModal from '../ResetModal';
+import Dropdown from '../Dropdown';
+import SettingsItem from '../SettingsItem';
 
-const time_zones = require("components/widgets/time/timezones.json");
+const time_zones = require('components/widgets/time/timezones.json');
 
 export default class AdvancedSettings extends PureComponent {
   constructor() {
@@ -32,52 +29,41 @@ export default class AdvancedSettings extends PureComponent {
   }
 
   render() {
-    const getMessage = (text) =>
-      variables.language.getMessage(variables.languagecode, text);
+    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
     return (
       <>
         <span className="mainTitle">
-          {getMessage("modals.main.settings.sections.advanced.title")}
+          {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')}>
           <Switch
             name="offlineMode"
-            text={getMessage(
-              "modals.main.settings.sections.advanced.offline_mode"
-            )}
+            text={getMessage('modals.main.settings.sections.advanced.offline_mode')}
             element=".other"
           />
         </SettingsItem>
-        {localStorage.getItem("welcomePreview") !== "true" ? (
+        {localStorage.getItem('welcomePreview') !== 'true' ? (
           <div className="settingsRow">
             <div className="content">
               <span className="title">
-                {getMessage("modals.main.settings.sections.advanced.data")}
+                {getMessage('modals.main.settings.sections.advanced.data')}
               </span>
               <span className="subtitle">
-                {getMessage(
-                  "modals.main.settings.sections.advanced.experimental_warning"
-                )}
+                {getMessage('modals.main.settings.sections.advanced.experimental_warning')}
               </span>
             </div>
             <div className="action activityButtons">
               <button onClick={() => this.setState({ resetModal: true })}>
-                {getMessage("modals.main.settings.buttons.reset")}
+                {getMessage('modals.main.settings.buttons.reset')}
                 <ResetIcon />
               </button>
               <button onClick={() => exportSettings()}>
-                {getMessage("modals.main.settings.buttons.export")}
+                {getMessage('modals.main.settings.buttons.export')}
                 <ExportIcon />
               </button>
-              <button
-                onClick={() => document.getElementById("file-input").click()}
-              >
-                {getMessage("modals.main.settings.buttons.import")}
+              <button onClick={() => document.getElementById('file-input').click()}>
+                {getMessage('modals.main.settings.buttons.import')}
                 <ImportIcon />
               </button>
             </div>
@@ -86,16 +72,12 @@ export default class AdvancedSettings extends PureComponent {
         <SettingsItem title="This should really be in time">
           <Dropdown
             name="timezone"
-            label={getMessage(
-              "modals.main.settings.sections.advanced.timezone.title"
-            )}
+            label={getMessage('modals.main.settings.sections.advanced.timezone.title')}
             category="timezone"
             manual={true}
           >
             <MenuItem value="auto">
-              {getMessage(
-                "modals.main.settings.sections.advanced.timezone.automatic"
-              )}
+              {getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
             </MenuItem>
             {time_zones.map((timezone) => (
               <MenuItem value={timezone} key={timezone}>
@@ -104,15 +86,11 @@ 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')}>
           <Text
-            title={getMessage(
-              "modals.main.settings.sections.advanced.tab_name"
-            )}
+            title={getMessage('modals.main.settings.sections.advanced.tab_name')}
             name="tabName"
-            default={getMessage("tabname")}
+            default={getMessage('tabname')}
             category="other"
           />
         </SettingsItem>
@@ -122,15 +100,9 @@ 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')}>
           <Text
-            title={getMessage(
-              "modals.main.settings.sections.advanced.custom_css"
-            )}
+            title={getMessage('modals.main.settings.sections.advanced.custom_css')}
             name="customcss"
             textarea={true}
             category="other"
@@ -139,18 +111,16 @@ export default class AdvancedSettings extends PureComponent {
         <div className="settingsRow">
           <div className="content">
             <span className="title">
-              {getMessage("modals.main.settings.sections.experimental.title")}
+              {getMessage('modals.main.settings.sections.experimental.title')}
             </span>
             <span className="subtitle">
-              {getMessage(
-                "modals.main.settings.sections.advanced.experimental_warning"
-              )}
+              {getMessage('modals.main.settings.sections.advanced.experimental_warning')}
             </span>
           </div>
           <div className="action">
             <Switch
               name="experimental"
-              text={getMessage("modals.main.settings.enabled")}
+              text={getMessage('modals.main.settings.enabled')}
               element=".other"
             />
           </div>