From d9021b0f57eb58bad1257ae51063f2391be58eae Mon Sep 17 00:00:00 2001
From: David Ralph <davetheprogrammer2@gmail.com>
Date: Tue, 13 Oct 2020 17:50:22 +0100
Subject: [PATCH] Fixes and new text on settings modal

---
 src/components/modals/Settings.jsx          | 2 +-
 src/components/modals/settings/Checkbox.jsx | 5 ++++-
 src/components/widgets/Background.jsx       | 1 +
 src/components/widgets/Search.jsx           | 2 +-
 src/scss/modules/_settings.scss             | 5 +++++
 5 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/modals/Settings.jsx b/src/components/modals/Settings.jsx
index e4202ecb..566f1214 100644
--- a/src/components/modals/Settings.jsx
+++ b/src/components/modals/Settings.jsx
@@ -103,7 +103,7 @@ export default class Settings extends React.PureComponent {
             <Checkbox name='view' text={this.props.language.experimental.view} />
             <Checkbox name='favouriteEnabled' text={this.props.language.experimental.favourite} />
             <Checkbox name='refresh' text={this.props.language.experimental.refresh} />
-            <Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} />
+            <Checkbox name='voiceSearch' text={this.props.language.experimental.voicesearch} newFeature={true} />
           </Section>
           <LanguageSettings language={this.props.language} />
 
diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx
index 9a5ea2e1..d729fd58 100644
--- a/src/components/modals/settings/Checkbox.jsx
+++ b/src/components/modals/settings/Checkbox.jsx
@@ -17,11 +17,14 @@ export default class Checkbox extends React.PureComponent {
   }
 
   render() {
+    let text = this.props.text;
+    if (this.props.newFeature) text = <span>{this.props.text} <span className='newFeature'> NEW</span></span>;
+
     return (
       <React.Fragment>
         <FormControlLabel
           control={<CheckboxUI name='checkedB' color='primary' checked={this.state.checked} onChange={() => this.handleChange(this.props.name)} />}
-          label={this.props.text}
+          label={text}
         />
         <br/>
       </React.Fragment>
diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx
index e1037d9c..2e85c503 100644
--- a/src/components/widgets/Background.jsx
+++ b/src/components/widgets/Background.jsx
@@ -40,6 +40,7 @@ export default class Background extends React.PureComponent {
     let credit = photographer;
     if (unsplash) credit = `<a href='${url}' class='creditlink'>${photographer}</a> on <a href='https://unsplash.com/?utm_source=mue&utm_medium=referral' class='creditlink'>Unsplash</a>`;
     document.querySelector('#photographer').insertAdjacentHTML("beforeend", ` ${credit}`); // Append credit
+    document.getElementById('credit').textContent = credit;
   }
 
   doOffline() { // Handles setting the background if the user is offline
diff --git a/src/components/widgets/Search.jsx b/src/components/widgets/Search.jsx
index 5deb6be2..f91b8f74 100644
--- a/src/components/widgets/Search.jsx
+++ b/src/components/widgets/Search.jsx
@@ -54,7 +54,7 @@ export default class Search extends React.PureComponent {
     return (
       <div id='searchBar' className='searchbar'>
         <form id='searchBar' className='searchbarform' action={url}>
-        {microphone}
+            {microphone}
             <SearchIcon onClick={() => searchButton()} id='searchButton' />
             <input type='text' placeholder={this.props.language} name={query} id='searchtext' className='searchtext'/>
             <div className='blursearcbBG'/>
diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss
index 6c7ca95b..e706e458 100644
--- a/src/scss/modules/_settings.scss
+++ b/src/scss/modules/_settings.scss
@@ -264,4 +264,9 @@ select#language {
 
 .nodropdown {
   cursor: default;
+}
+
+.newFeature {
+  color: #ff4757;
+  font-size: 12px;
 }
\ No newline at end of file