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/welcome/WelcomeSections.jsx

@@ -1,33 +1,27 @@
-import variables from "modules/variables";
-import { PureComponent } from "react";
-import {
-  MdCloudUpload,
-  MdAutoAwesome,
-  MdLightMode,
-  MdDarkMode,
-} from "react-icons/md";
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
+import { MdCloudUpload, MdAutoAwesome, MdLightMode, MdDarkMode } from 'react-icons/md';
 
-import Radio from "../main/settings/Radio";
-import Checkbox from "../main/settings/Checkbox";
-import FileUpload from "../main/settings/FileUpload";
+import Radio from '../main/settings/Radio';
+import Checkbox from '../main/settings/Checkbox';
+import FileUpload from '../main/settings/FileUpload';
 
-import { loadSettings } from "modules/helpers/settings";
-import { importSettings } from "modules/helpers/settings/modals";
+import { loadSettings } from 'modules/helpers/settings';
+import { importSettings } from 'modules/helpers/settings/modals';
 
-const languages = require("modules/languages.json");
-const default_settings = require("modules/default_settings.json");
+const languages = require('modules/languages.json');
+const default_settings = require('modules/default_settings.json');
 
 export default class WelcomeSections extends PureComponent {
-  getMessage = (text) =>
-    variables.language.getMessage(variables.languagecode, text);
+  getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   constructor() {
     super();
     this.state = {
       // themes
-      autoClass: "toggle auto active",
-      lightClass: "toggle lightTheme",
-      darkClass: "toggle darkTheme",
+      autoClass: 'toggle auto active',
+      lightClass: 'toggle lightTheme',
+      darkClass: 'toggle darkTheme',
       // welcome
       welcomeImage: 0,
       // final
@@ -39,22 +33,17 @@ export default class WelcomeSections extends PureComponent {
 
   changeTheme(type) {
     this.setState({
-      autoClass: type === "auto" ? "toggle auto active" : "toggle auto",
-      lightClass:
-        type === "light" ? "toggle lightTheme active" : "toggle lightTheme",
-      darkClass:
-        type === "dark" ? "toggle darkTheme active" : "toggle darkTheme",
+      autoClass: type === 'auto' ? 'toggle auto active' : 'toggle auto',
+      lightClass: type === 'light' ? 'toggle lightTheme active' : 'toggle lightTheme',
+      darkClass: type === 'dark' ? 'toggle darkTheme active' : 'toggle darkTheme',
     });
 
-    localStorage.setItem("theme", type);
+    localStorage.setItem('theme', type);
     loadSettings(true);
   }
 
   getSetting(name) {
-    const value = localStorage
-      .getItem(name)
-      .replace("false", "Off")
-      .replace("true", "On");
+    const value = localStorage.getItem(name).replace('false', 'Off').replace('true', 'On');
     return value.charAt(0).toUpperCase() + value.slice(1);
   }
 
@@ -66,11 +55,11 @@ export default class WelcomeSections extends PureComponent {
     Object.keys(data).forEach((setting) => {
       // language and theme already shown, the others are only used internally
       if (
-        setting === "language" ||
-        setting === "theme" ||
-        setting === "firstRun" ||
-        setting === "showWelcome" ||
-        setting === "showReminder"
+        setting === 'language' ||
+        setting === 'theme' ||
+        setting === 'firstRun' ||
+        setting === 'showWelcome' ||
+        setting === 'showReminder'
       ) {
         return;
       }
@@ -131,10 +120,8 @@ export default class WelcomeSections extends PureComponent {
   render() {
     const intro = (
       <>
-        <span className="mainTitle">
-          {this.getMessage("modals.welcome.sections.intro.title")}
-        </span>
-        <p>{this.getMessage("modals.welcome.sections.intro.description")}</p>
+        <span className="mainTitle">{this.getMessage('modals.welcome.sections.intro.title')}</span>
+        <p>{this.getMessage('modals.welcome.sections.intro.description')}</p>
         <h3 className="quicktip">#shareyourmue</h3>
         <div className="examples">
           <img
@@ -149,10 +136,10 @@ export default class WelcomeSections extends PureComponent {
     const chooseLanguage = (
       <>
         <span className="mainTitle">
-          {this.getMessage("modals.welcome.sections.language.title")}
+          {this.getMessage('modals.welcome.sections.language.title')}
         </span>
         <p>
-          {this.getMessage("modals.welcome.sections.language.description")}{" "}
+          {this.getMessage('modals.welcome.sections.language.description')}{' '}
           <a
             href={variables.constants.TRANSLATIONS_URL}
             className="resetLink"
@@ -169,48 +156,25 @@ export default class WelcomeSections extends PureComponent {
 
     const theme = (
       <>
-        <span className="mainTitle">
-          {this.getMessage("modals.welcome.sections.theme.title")}
-        </span>
-        <p>{this.getMessage("modals.welcome.sections.theme.description")}</p>
+        <span className="mainTitle">{this.getMessage('modals.welcome.sections.theme.title')}</span>
+        <p>{this.getMessage('modals.welcome.sections.theme.description')}</p>
         <div className="themesToggleArea">
-          <div
-            className={this.state.autoClass}
-            onClick={() => this.changeTheme("auto")}
-          >
+          <div className={this.state.autoClass} onClick={() => this.changeTheme('auto')}>
             <MdAutoAwesome />
-            <span>
-              {this.getMessage(
-                "modals.main.settings.sections.appearance.theme.auto"
-              )}
-            </span>
+            <span>{this.getMessage('modals.main.settings.sections.appearance.theme.auto')}</span>
           </div>
           <div className="options">
-            <div
-              className={this.state.lightClass}
-              onClick={() => this.changeTheme("light")}
-            >
+            <div className={this.state.lightClass} onClick={() => this.changeTheme('light')}>
               <MdLightMode />
-              <span>
-                {this.getMessage(
-                  "modals.main.settings.sections.appearance.theme.light"
-                )}
-              </span>
+              <span>{this.getMessage('modals.main.settings.sections.appearance.theme.light')}</span>
             </div>
-            <div
-              className={this.state.darkClass}
-              onClick={() => this.changeTheme("dark")}
-            >
+            <div className={this.state.darkClass} onClick={() => this.changeTheme('dark')}>
               <MdDarkMode />
-              <span>
-                {this.getMessage(
-                  "modals.main.settings.sections.appearance.theme.dark"
-                )}
-              </span>
+              <span>{this.getMessage('modals.main.settings.sections.appearance.theme.dark')}</span>
             </div>
           </div>
-          <h3 className="quicktip">{this.getMessage("modals.welcome.tip")}</h3>
-          <p>{this.getMessage("modals.welcome.sections.theme.tip")}</p>
+          <h3 className="quicktip">{this.getMessage('modals.welcome.tip')}</h3>
+          <p>{this.getMessage('modals.welcome.sections.theme.tip')}</p>
         </div>
       </>
     );
@@ -218,16 +182,13 @@ export default class WelcomeSections extends PureComponent {
     const settings = (
       <>
         <span className="mainTitle">
-          {this.getMessage("modals.welcome.sections.settings.title")}
+          {this.getMessage('modals.welcome.sections.settings.title')}
         </span>
-        <p>{this.getMessage("modals.welcome.sections.settings.description")}</p>
-        <button
-          className="upload"
-          onClick={() => document.getElementById("file-input").click()}
-        >
+        <p>{this.getMessage('modals.welcome.sections.settings.description')}</p>
+        <button className="upload" onClick={() => document.getElementById('file-input').click()}>
           <MdCloudUpload />
           <br />
-          <span>{this.getMessage("modals.main.settings.buttons.import")}</span>
+          <span>{this.getMessage('modals.main.settings.buttons.import')}</span>
         </button>
         <FileUpload
           id="file-input"
@@ -235,58 +196,44 @@ export default class WelcomeSections extends PureComponent {
           type="settings"
           loadFunction={(e) => this.importSettings(e)}
         />
-        <h3 className="quicktip">{this.getMessage("modals.welcome.tip")}</h3>
-        <p>{this.getMessage("modals.welcome.sections.settings.tip")}</p>
+        <h3 className="quicktip">{this.getMessage('modals.welcome.tip')}</h3>
+        <p>{this.getMessage('modals.welcome.sections.settings.tip')}</p>
       </>
     );
 
     const privacy = (
       <>
         <span className="mainTitle">
-          {this.getMessage("modals.welcome.sections.privacy.title")}
+          {this.getMessage('modals.welcome.sections.privacy.title')}
         </span>
-        <p>{this.getMessage("modals.welcome.sections.privacy.description")}</p>
+        <p>{this.getMessage('modals.welcome.sections.privacy.description')}</p>
         <Checkbox
           name="offlineMode"
-          text={this.getMessage(
-            "modals.main.settings.sections.advanced.offline_mode"
-          )}
+          text={this.getMessage('modals.main.settings.sections.advanced.offline_mode')}
           element=".other"
         />
-        <p>
-          {this.getMessage(
-            "modals.welcome.sections.privacy.offline_mode_description"
-          )}
-        </p>
+        <p>{this.getMessage('modals.welcome.sections.privacy.offline_mode_description')}</p>
         <Checkbox
           name="quicklinksddgProxy"
           text={
-            this.getMessage(
-              "modals.main.settings.sections.background.ddg_image_proxy"
-            ) +
-            " (" +
-            this.getMessage("modals.main.settings.sections.quicklinks.title") +
-            ")"
+            this.getMessage('modals.main.settings.sections.background.ddg_image_proxy') +
+            ' (' +
+            this.getMessage('modals.main.settings.sections.quicklinks.title') +
+            ')'
           }
         />
         <Checkbox
           name="ddgProxy"
           text={
-            this.getMessage(
-              "modals.main.settings.sections.background.ddg_image_proxy"
-            ) +
-            " (" +
-            this.getMessage("modals.main.settings.sections.background.title") +
-            ")"
+            this.getMessage('modals.main.settings.sections.background.ddg_image_proxy') +
+            ' (' +
+            this.getMessage('modals.main.settings.sections.background.title') +
+            ')'
           }
         />
-        <p>
-          {this.getMessage(
-            "modals.welcome.sections.privacy.ddg_proxy_description"
-          )}
-        </p>
+        <p>{this.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}</p>
         <h3 className="quicktip">
-          {this.getMessage("modals.welcome.sections.privacy.links.title")}
+          {this.getMessage('modals.welcome.sections.privacy.links.title')}
         </h3>
         <a
           className="privacy"
@@ -294,59 +241,45 @@ export default class WelcomeSections extends PureComponent {
           target="_blank"
           rel="noopener noreferrer"
         >
-          {this.getMessage(
-            "modals.welcome.sections.privacy.links.privacy_policy"
-          )}
+          {this.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
         </a>
         <br />
         <br />
         <a
           className="privacy"
-          href={"https://github.com/" + variables.constants.ORG_NAME}
+          href={'https://github.com/' + variables.constants.ORG_NAME}
           target="_blank"
           rel="noopener noreferrer"
         >
-          {this.getMessage("modals.welcome.sections.privacy.links.source_code")}
+          {this.getMessage('modals.welcome.sections.privacy.links.source_code')}
         </a>
       </>
     );
 
     const final = (
       <>
-        <span className="mainTitle">
-          {this.getMessage("modals.welcome.sections.final.title")}
-        </span>
-        <p>{this.getMessage("modals.welcome.sections.final.description")}</p>
-        <h3 className="quicktip">
-          {this.getMessage("modals.welcome.sections.final.changes")}
-        </h3>
-        <p>
-          {this.getMessage("modals.welcome.sections.final.changes_description")}
-        </p>
+        <span className="mainTitle">{this.getMessage('modals.welcome.sections.final.title')}</span>
+        <p>{this.getMessage('modals.welcome.sections.final.description')}</p>
+        <h3 className="quicktip">{this.getMessage('modals.welcome.sections.final.changes')}</h3>
+        <p>{this.getMessage('modals.welcome.sections.final.changes_description')}</p>
         <div className="themesToggleArea">
           <div className="toggle" onClick={() => this.props.switchTab(1)}>
             <span>
-              {this.getMessage("modals.main.settings.sections.language.title")}:{" "}
-              {
-                languages.find(
-                  (i) => i.value === localStorage.getItem("language")
-                ).name
-              }
+              {this.getMessage('modals.main.settings.sections.language.title')}:{' '}
+              {languages.find((i) => i.value === localStorage.getItem('language')).name}
             </span>
           </div>
           <div className="toggle" onClick={() => this.props.switchTab(3)}>
             <span>
-              {this.getMessage(
-                "modals.main.settings.sections.appearance.theme.title"
-              )}
-              : {this.getSetting("theme")}
+              {this.getMessage('modals.main.settings.sections.appearance.theme.title')}:{' '}
+              {this.getSetting('theme')}
             </span>
           </div>
           {this.state.importedSettings.length !== 0 ? (
             <div className="toggle" onClick={() => this.props.switchTab(2)}>
-              {this.getMessage("modals.main.settings.sections.final.imported", {
+              {this.getMessage('modals.main.settings.sections.final.imported', {
                 amount: this.state.importedSettings.length,
-              })}{" "}
+              })}{' '}
               {this.state.importedSettings.length}
             </div>
           ) : null}