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/helpers/autocomplete/Autocomplete.jsx

@@ -12,20 +12,22 @@ export default class Autocomplete extends PureComponent {
     this.state = {
       filtered: [],
       input: '',
-      autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true')
+      autocompleteDisabled: localStorage.getItem('autocomplete') !== 'true',
     };
   }
 
   onChange = (e) => {
     if (this.state.autocompleteDisabled) {
       return this.setState({
-        input: e.target.value
+        input: e.target.value,
       });
     }
 
     this.setState({
-      filtered: this.props.suggestions.filter((suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1),
-      input: e.target.value
+      filtered: this.props.suggestions.filter(
+        (suggestion) => suggestion.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1,
+      ),
+      input: e.target.value,
     });
 
     this.props.onChange(e.target.value);
@@ -34,14 +36,14 @@ export default class Autocomplete extends PureComponent {
   onClick = (e) => {
     this.setState({
       filtered: [],
-      input: e.target.innerText
+      input: e.target.innerText,
     });
 
     this.props.onClick({
       preventDefault: () => e.preventDefault(),
       target: {
-        value: e.target.innerText
-      }
+        value: e.target.innerText,
+      },
     });
   };
 
@@ -49,7 +51,7 @@ export default class Autocomplete extends PureComponent {
     EventBus.on('refresh', (data) => {
       if (data === 'search') {
         this.setState({
-          autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true')
+          autocompleteDisabled: localStorage.getItem('autocomplete') !== 'true',
         });
       }
     });
@@ -65,7 +67,7 @@ export default class Autocomplete extends PureComponent {
     // length will only be > 0 if enabled
     if (this.state.filtered.length > 0 && this.state.input.length > 0) {
       autocomplete = (
-        <div className='suggestions'>
+        <div className="suggestions">
           {this.state.filtered.map((suggestion) => (
             <div key={suggestion} onClick={this.onClick}>
               {suggestion}
@@ -76,8 +78,16 @@ export default class Autocomplete extends PureComponent {
     }
 
     return (
-      <div style={{display: 'flex', flexFlow: 'column'}}>
-        <input type='text' onChange={this.onChange} value={this.state.input} placeholder={this.props.placeholder || ''} autoComplete='off' spellCheck={false} id={this.props.id || ''} />
+      <div style={{ display: 'flex', flexFlow: 'column' }}>
+        <input
+          type="text"
+          onChange={this.onChange}
+          value={this.state.input}
+          placeholder={this.props.placeholder || ''}
+          autoComplete="off"
+          spellCheck={false}
+          id={this.props.id || ''}
+        />
         {autocomplete}
       </div>
     );

src/components/helpers/preview/Preview.jsx

@@ -6,9 +6,9 @@ export default function Preview(props) {
   const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
 
   return (
-    <div className='preview-mode'>
-      <span className='title'>{getMessage('modals.main.settings.reminder.title')}</span>
-      <span className='subtitle'>{getMessage('modals.welcome.preview.description')}</span>
+    <div className="preview-mode">
+      <span className="title">{getMessage('modals.main.settings.reminder.title')}</span>
+      <span className="subtitle">{getMessage('modals.welcome.preview.description')}</span>
       <button onClick={() => props.setup()}>{getMessage('modals.welcome.preview.continue')}</button>
     </div>
   );

src/components/helpers/sharemodal/sharemodal.scss

@@ -1,59 +1,58 @@
 @import '../../../scss/variables';
 
 .shareModal {
-    @extend %tabText;
+  @extend %tabText;
+  display: flex;
+  flex-flow: column;
+  gap: 15px;
+  padding: 15px;
+  @include themed() {
+    background: t($modal-background);
+  }
+  .buttons {
+    justify-content: space-between;
     display: flex;
-    flex-flow: column;
     gap: 15px;
-    padding: 15px;
+  }
+  button {
+    place-items: center;
+    display: grid;
+    @include basicIconButton(11px, 1.3rem, modal);
+  }
+  .copy {
+    display: flex;
+    flex-flow: row;
+    gap: 15px;
+  }
+  input[type='text'] {
     @include themed() {
-      background: t($modal-background);
+      background: t($modal-sidebar);
+      border-radius: t($borderRadius);
+      box-shadow: 0 0 0 4px t($modal-sidebarActive);
+      padding: 11px;
+      flex: 1;
+      color: t($color);
     }
-    .buttons {
-      justify-content: space-between;
-      display: flex;
-      gap: 15px;
-    }
-    button {
-      place-items: center;
-      display: grid;
-      @include basicIconButton(11px, 1.3rem, modal);
-    }
-    .copy {
-      display: flex;
-      flex-flow: row;
-      gap: 15px;
-    }
-    input[type='text'] {
+    border: none;
+    outline: none;
+  }
+  .close {
+    padding: 15px;
+    place-items: center;
+    display: grid;
+    cursor: pointer;
+    &:hover {
       @include themed() {
         background: t($modal-sidebar);
         border-radius: t($borderRadius);
-        box-shadow: 0 0 0 4px t($modal-sidebarActive);
-        padding: 11px;
-        flex: 1;
-        color: t($color);
-      }
-      border: none;
-      outline: none;
-    }
-    .close {
-      padding: 15px;
-      place-items: center;
-      display: grid;
-      cursor: pointer;
-      &:hover {
-        @include themed() {
-          background: t($modal-sidebar);
-          border-radius: t($borderRadius);
-        }
       }
     }
   }
-  
-  .shareHeader {
-    display: flex;
-    flex-flow: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
+}
+
+.shareHeader {
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+}

src/components/helpers/tooltip/Tooltip.jsx

@@ -1,11 +1,11 @@
-import { useState } from "react";
-import { useFloating, flip, offset, shift } from "@floating-ui/react-dom";
-import "./tooltip.scss";
+import { useState } from 'react';
+import { useFloating, flip, offset, shift } from '@floating-ui/react-dom';
+import './tooltip.scss';
 
 export default function Tooltip({ children, title, style, placement }) {
   const [showTooltip, setShowTooltip] = useState(false);
   const { x, y, reference, floating, strategy } = useFloating({
-    placement: placement || "bottom",
+    placement: placement || 'bottom',
     middleware: [flip(), offset(15), shift()],
   });
 
@@ -25,8 +25,8 @@ export default function Tooltip({ children, title, style, placement }) {
           ref={floating}
           style={{
             position: strategy,
-            top: y ?? "",
-            left: x ?? "",
+            top: y ?? '',
+            left: x ?? '',
           }}
           className="tooltipTitle"
         >