Fixes and new text on settings modal

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} />
 

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>

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

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'/>

src/scss/modules/_settings.scss

@@ -264,4 +264,9 @@ select#language {
 
 .nodropdown {
   cursor: default;
+}
+
+.newFeature {
+  color: #ff4757;
+  font-size: 12px;
 }