Improvements to navbar component and notes (mainly translation support)

src/App.jsx

@@ -62,7 +62,7 @@ export default class App extends React.PureComponent {
         <ToastContainer position='bottom-right' autoClose={2500} newestOnTop={true} closeOnClick rtl={false} pauseOnFocusLoss />
         <div id='center'>
           <Search language={language.search} />
-          <Navbar mainModalOpen={() => this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} />
+          <Navbar mainModalOpen={() => this.setState({ mainModal: true })} updateModalOpen={() => this.setState({ updateModal: true })} language={language} />
           <Greeting language={language.greeting} />
           <Clock/>
           <Quote language={language.toasts}/>

src/components/Navbar.jsx

@@ -5,32 +5,32 @@ import NewReleases from '@material-ui/icons/NewReleasesRounded';
 import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Tooltip from '@material-ui/core/Tooltip';
 
-const Notes = React.lazy(() => import('./widgets/Notes'));
+const Notes = React.lazy(() => import('./widgets/Notes')); // the user probably won't use the notes feature every time so we lazy load
 const renderLoader = () => <div></div>;
 
 export default class Navbar extends React.PureComponent {
   render() {
-    let refreshHTML = <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()} />
-    const refresh = localStorage.getItem('refresh');
-    if (refresh === 'false') refreshHTML = '';
+    // toggle refresh button
+    let refreshHTML = (
+      <Tooltip title={this.props.language.navbar.tooltips.refresh}>
+        <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()} />
+      </Tooltip>
+    );
+    if (localStorage.getItem('refresh') === 'false') refreshHTML = null;
 
     return (
       <div className='navbar-container'>
         <div className='notes'>
           <NotesIcon className='topicons' />
           <React.Suspense fallback={renderLoader()}>
-            <Notes/>
+            <Notes language={this.props.language.navbar.notes} />
           </React.Suspense>
         </div>
-        <div className={refresh === 'false' ? 'navbar2' : 'navbar3'}>
-        <Tooltip title='Update Patch Notes' placement='top'>
+        <Tooltip title={this.props.language.navbar.tooltips.update} placement='top'>
           <NewReleases className='refreshicon topicons' onClick={this.props.updateModalOpen} />
         </Tooltip>
-        </div>
-        <Tooltip title='Refresh Page'>
-          {refreshHTML}
-        </Tooltip>
-        <Tooltip title='Settings' placement='top'>
+        {refreshHTML}
+        <Tooltip title={this.props.language.modals.settings} placement='top'>
           <Gear className='settings-icon topicons' onClick={this.props.mainModalOpen} />
         </Tooltip>
       </div>

src/components/widgets/Notes.jsx

@@ -18,9 +18,8 @@ export default class Notes extends React.PureComponent {
     };
 
     pin() {
-        const pinned = localStorage.getItem('notesPinned');
         document.getElementById('noteContainer').classList.toggle('visibilityshow');
-        if (pinned === 'true') localStorage.setItem('notesPinned', false);
+        if (localStorage.getItem('notesPinned') === 'true') localStorage.setItem('notesPinned', false);
         else localStorage.setItem('notesPinned', true);
     }
 
@@ -35,9 +34,9 @@ export default class Notes extends React.PureComponent {
             <span id='noteContainer' className='notescontainer'>
                 <div className='topbarnotes'>
                     <NotesIcon/>
-                    <h3>Notes</h3>
+                    <h3>{this.props.language.title}</h3>
                 </div>
-                <TextareaAutosize rowsMax={50} placeholder='Enter Notes' value={this.state.notes} onChange={this.setNotes}/>
+                <TextareaAutosize rowsMax={50} placeholder={this.props.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
                 <button onClick={this.pin} className='pinNote'><Pin/></button>
                 <button onClick={copyNotes} className='saveNote'><CopyIcon/></button>
             </span>

src/components/widgets/PhotoInformation.jsx

@@ -12,7 +12,8 @@ export default class PhotoInformation extends React.PureComponent {
         <h1 id='photographer'>Photo By</h1>
         <Info className='photoInformationHover'/>
         <div className='infoCard'>
-          <Info className='infoIcon' /><h1>Information</h1>
+          <Info className='infoIcon'/>
+          <h1>Information</h1>
           <hr/>
           <Location/>
           <span id='location'></span>

src/translations/en.json

@@ -131,5 +131,15 @@
             "button": "Take me there"
         },
         "sideload": "Sideload"
+    },
+    "navbar": {
+        "tooltips": {
+            "update": "Update Patch Notes",
+            "refresh": "Refresh Page"
+        },
+        "notes": {
+            "title": "Notes",
+            "placeholder": "Type here"
+        }
     }
 }