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

@@ -9,13 +9,13 @@ export default class Text extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
-      value: localStorage.getItem(this.props.name) || ''
+      value: localStorage.getItem(this.props.name) || '',
     };
   }
 
   handleChange = (e) => {
     let { value } = e.target;
-  
+
     // Alex wanted font to work with montserrat and Montserrat, so I made it work
     if (this.props.upperCaseFirst === true) {
       value = value.charAt(0).toUpperCase() + value.slice(1);
@@ -23,7 +23,7 @@ export default class Text extends PureComponent {
 
     localStorage.setItem(this.props.name, value);
     this.setState({
-      value
+      value,
     });
 
     if (this.props.element) {
@@ -34,25 +34,47 @@ export default class Text extends PureComponent {
     }
 
     EventBus.dispatch('refresh', this.props.category);
-  }
+  };
 
   resetItem = () => {
     this.handleChange({
       target: {
-        value: this.props.default || ''
-      }
+        value: this.props.default || '',
+      },
     });
     toast(variables.language.getMessage(variables.languagecode, 'toasts.reset'));
-  }
+  };
 
   render() {
     return (
       <>
-        {(this.props.textarea === true) ?
-          <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' multiline spellCheck={false} minRows={4} maxRows={10} InputLabelProps={{ shrink: true }} />
-          : <TextField label={this.props.title} value={this.state.value} onChange={this.handleChange} varient='outlined' InputLabelProps={{ shrink: true }} />
-        }
-        <span className='link' onClick={this.resetItem}>{variables.language.getMessage(variables.languagecode, 'modals.main.settings.buttons.reset')}</span>
+        {this.props.textarea === true ? (
+          <TextField
+            label={this.props.title}
+            value={this.state.value}
+            onChange={this.handleChange}
+            varient="outlined"
+            multiline
+            spellCheck={false}
+            minRows={4}
+            maxRows={10}
+            InputLabelProps={{ shrink: true }}
+          />
+        ) : (
+          <TextField
+            label={this.props.title}
+            value={this.state.value}
+            onChange={this.handleChange}
+            varient="outlined"
+            InputLabelProps={{ shrink: true }}
+          />
+        )}
+        <span className="link" onClick={this.resetItem}>
+          {variables.language.getMessage(
+            variables.languagecode,
+            'modals.main.settings.buttons.reset',
+          )}
+        </span>
       </>
     );
   }