refactor: language cleanup and css fix

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/components/widgets/Widgets.jsx

@@ -27,16 +27,15 @@ export default class Widgets extends React.PureComponent {
   }
 
   render() {
-    const { language, languagecode } = this.props;
     const enabled = this.enabled;
 
     return (
       <React.Fragment>
-        {enabled('searchBar') ? <Search language={language.widgets.search} /> : null}
-        {enabled('greeting') ? <Greeting language={language.widgets.greeting} /> : null}
+        {enabled('searchBar') ? <Search/> : null}
+        {enabled('greeting') ? <Greeting/> : null}
         {enabled('time') ? <Clock/> : null}
         {enabled('date') ? <Date/> : null}
-        {enabled('quote') ? <Quote language={language.toasts} languagecode={languagecode} /> : null}
+        {enabled('quote') ? <Quote/> : null}
         {enabled('view') ? <Maximise/> : null}
         {enabled('favouriteEnabled') ? <Favourite/> : null}
       </React.Fragment>

src/components/widgets/background/PhotoInformation.jsx

@@ -6,13 +6,15 @@ import Resolution from '@material-ui/icons/Crop';
 import Photographer from '@material-ui/icons/Person';
 
 export default function PhotoInformation(props) {
+  const language = window.language.widgets.background;
+
   return (
     <div className='photoInformation'>
-      <h1 id='photographer'>{props.language.credit}</h1>
+      <h1 id='photographer'>{language.credit}</h1>
       <Info className='photoInformationHover'/>
       <div className={props.className || 'infoCard'}>
         <Info className='infoIcon'/>
-        <h1>{props.language.information}</h1>
+        <h1>{language.information}</h1>
         <hr/>
         <Location/>
         <span id='location'/>

src/components/widgets/greeting/Greeting.jsx

@@ -8,6 +8,7 @@ export default class Greeting extends React.PureComponent {
     this.state = {
       greeting: ''
     };
+    this.language = window.language.widgets.greeting;
   }
 
   doEvents(time, message) {
@@ -21,13 +22,13 @@ export default class Greeting extends React.PureComponent {
 
     // If it's December 25th, set the greeting string to "Merry Christmas"
     if (month === 11 && date === 25) {
-      message = this.props.language.christmas;
+      message = this.language.christmas;
     // If the date is January 1st, set the greeting string to "Happy new year"
     } else if (month === 0 && date === 1) {
-      message = this.props.language.newyear;
+      message = this.language.newyear;
     // If it's October 31st, set the greeting string to "Happy Halloween"
     } else if (month === 9 && date === 31) {
-      message = this.props.language.halloween;
+      message = this.language.halloween;
     }
 
     return message;
@@ -38,13 +39,13 @@ export default class Greeting extends React.PureComponent {
     const hour = now.getHours();
 
     // Set the default greeting string to "Good evening"
-    let message = this.props.language.evening;
+    let message = this.language.evening;
     // If it's before 12am, set the greeting string to "Good morning"
     if (hour < 12) {
-      message = this.props.language.morning;
+      message = this.language.morning;
     // If it's before 6pm, set the greeting string to "Good afternoon"
     } else if (hour < 18) {
-      message = this.props.language.afternoon;
+      message = this.language.afternoon;
     }
 
     // Events
@@ -72,7 +73,7 @@ export default class Greeting extends React.PureComponent {
     // Birthday
     const birth = new Date(localStorage.getItem('birthday'));
     if (localStorage.getItem('birthdayenabled') === 'true' && birth.getDate() === now.getDate() && birth.getMonth() === now.getMonth()) {
-      message = this.props.language.birthday;
+      message = this.language.birthday;
     }
 
     // Set the state to the greeting string

src/components/widgets/navbar/Navbar.jsx

@@ -15,13 +15,15 @@ const Notes = React.lazy(() => import('./Notes'));
 const renderLoader = () => <div></div>;
 
 export default function Navbar(props) {
+  const language = window.language;
+
   return (
     <div className='navbar-container'>
       {(localStorage.getItem('notesEnabled') === 'true') ?
         <div className='notes'>
           <NotesIcon className='topicons'/>
           <React.Suspense fallback={renderLoader()}>
-            <Notes language={props.language.widgets.navbar.notes}/>
+            <Notes/>
           </React.Suspense>
         </div>
       :null}
@@ -33,12 +35,12 @@ export default function Navbar(props) {
       :null}
 
       {(localStorage.getItem('refresh') === 'true') ?
-        <Tooltip title={props.language.widgets.navbar.tooltips.refresh}>
+        <Tooltip title={language.widgets.navbar.tooltips.refresh}>
           <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()}/>
         </Tooltip>
       :null}
 
-      <Tooltip title={props.language.modals.main.navbar.settings} placement='top'>
+      <Tooltip title={language.modals.main.navbar.settings} placement='top'>
         <Gear className='settings-icon topicons' onClick={() => props.openModal('mainModal')}/>
       </Tooltip>
     </div>

src/components/widgets/navbar/Notes.jsx

@@ -12,6 +12,7 @@ export default class Notes extends React.PureComponent {
     this.state = {
       notes: localStorage.getItem('notes') || ''
     };
+    this.language = window.language.widgets.navbar.notes
   }
 
   setNotes = (e) => {
@@ -47,9 +48,9 @@ export default class Notes extends React.PureComponent {
       <span id='noteContainer' className={classList}>
         <div className='topbarnotes'>
           <NotesIcon/>
-          <h3>{this.props.language.title}</h3>
+          <h3>{this.language.title}</h3>
         </div>
-        <TextareaAutosize rowsMax={50} placeholder={this.props.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
+        <TextareaAutosize rowsMax={50} placeholder={this.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
         <button onClick={this.pin} className='pinNote'><Pin/></button>
         <button onClick={() => navigator.clipboard.writeText(this.state.notes)} className='saveNote'><CopyIcon/></button>
       </span>

src/components/widgets/quote/Quote.jsx

@@ -22,6 +22,9 @@ export default class Quote extends React.PureComponent {
       tweet: <TwitterIcon className='copyButton' onClick={() => this.tweetQuote()} />,
       copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />
     };
+  
+    this.language = window.language.widgets.quote;
+    this.languagecode = window.languagecode;
   }
 
   doOffline() {
@@ -98,7 +101,7 @@ export default class Quote extends React.PureComponent {
         return this.doOffline();
       }
 
-      let authorlink = `https://${this.props.languagecode.split('-')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
+      let authorlink = `https://${this.languagecode.split('-')[0]}.wikipedia.org/wiki/${data.author.split(' ').join('_')}`;
       if (localStorage.getItem('authorLink') === 'false') {
         authorLink = null;
       }
@@ -116,7 +119,7 @@ export default class Quote extends React.PureComponent {
 
   copyQuote() {
     navigator.clipboard.writeText(`${this.state.quote} - ${this.state.author}`);
-    toast(this.props.language.quote);
+    toast(this.language.quote);
   }
 
   tweetQuote() {

src/components/widgets/search/Search.jsx

@@ -15,6 +15,7 @@ export default class Search extends React.PureComponent {
       query: '',
       microphone: null
     };
+    this.language = window.language.widgets.search;
   }
 
   startSpeechRecognition() {
@@ -73,7 +74,7 @@ export default class Search extends React.PureComponent {
         <form action={this.state.url}>
           {this.state.microphone}
           <SearchIcon onClick={() => this.searchButton()} id='searchButton'/>
-          <input type='text' placeholder={this.props.language} name={this.state.query} id='searchtext'/>
+          <input type='text' placeholder={this.language} name={this.state.query} id='searchtext'/>
         </form>
       </div>
     );