Add notes feature and improved navbar

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

src/components/Navbar.jsx

@@ -1,24 +1,39 @@
 import React from 'react';
-import RefreshIcon from '@material-ui/icons/Refresh';
-import Gear from '@material-ui/icons/Settings';
-import NewReleases from '@material-ui/icons/NewReleases';
+import RefreshIcon from '@material-ui/icons/RefreshRounded';
+import Gear from '@material-ui/icons/SettingsRounded';
+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 renderLoader = () => <div></div>;
 
 export default class Navbar extends React.PureComponent {
   render() {
-    let refreshHTML = <div className='navbar2'><RefreshIcon className='refreshicon' onClick={() => window.location.reload()} /></div>;
+    let refreshHTML = <RefreshIcon className='refreshicon topicons' onClick={() => window.location.reload()} />
     const refresh = localStorage.getItem('refresh');
     if (refresh === 'false') refreshHTML = '';
 
     return (
       <div className='navbar-container'>
-        <div className='navbar1'>
-          <Gear className='settingsicon' onClick={this.props.settingsModalOpen} />
+        <div className='notes'>
+          <NotesIcon className='topicons' />
+          <React.Suspense fallback={renderLoader()}>
+            <Notes/>
+          </React.Suspense>
         </div>
-        {refreshHTML}
         <div className={refresh === 'false' ? 'navbar2' : 'navbar3'}>
-        <NewReleases className='updateicon' onClick={this.props.updateModalOpen} />
+        <Tooltip title='Update Patch Notes' placement='top'>
+          <NewReleases className='refreshicon topicons' onClick={this.props.updateModalOpen} />
+        </Tooltip>
         </div>
+        <Tooltip title='Refresh Page'>
+          {refreshHTML}
+        </Tooltip>
+        <Tooltip title='Settings' placement='top'>
+          <Gear className='settings-icon topicons' onClick={this.props.mainModalOpen} />
+        </Tooltip>
       </div>
     );
   }
-}
+}

src/components/widgets/Notes.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import TextareaAutosize from '@material-ui/core/TextareaAutosize';
+import CopyIcon from '@material-ui/icons/FileCopyRounded';
+import Pin from './icons/Pin';
+import NotesIcon from '@material-ui/icons/AssignmentRounded';
+
+export default class Notes extends React.PureComponent {
+    constructor(...args) {
+        super(...args);
+        this.state = {
+            notes: localStorage.getItem('notes')
+        };
+    }
+
+    setNotes(e) {
+        localStorage.setItem('notes', e.target.value);
+        this.setState({ notes: e.target.value });
+    };
+
+    pin() {
+        const pinned = localStorage.getItem('notesPinned');
+        document.getElementById('noteContainer').classList.toggle('visibilityshow');
+        if (pinned === 'true') localStorage.setItem('notesPinned', false);
+        else localStorage.setItem('notesPinned', true);
+    }
+
+    componentDidMount() {
+        if (localStorage.getItem('notesPinned') === 'true') document.getElementById('noteContainer').classList.toggle('visibilityshow');
+    }
+
+    render() {
+        const copyNotes = () => navigator.clipboard.writeText(this.state.notes);
+
+        return (
+            <span id='noteContainer' className='notescontainer'>
+                <div className='topbarnotes'>
+                    <NotesIcon/>
+                    <h3>Notes</h3>
+                </div>
+                <TextareaAutosize rowsMax={50} placeholder='Enter Notes' 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/icons/Pin.jsx

@@ -0,0 +1,27 @@
+// License for original pin SVG below
+/*
+   Copyright 2020 Google Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+*/
+
+import React from 'react';
+
+export default class Pin extends React.PureComponent {
+    render() {
+        return <svg xmlns='http://www.w3.org/2000/svg' enableBackground='new 0 0 24 24' viewBox='0 0 24 24' fill='black' width='18px' height='18px'>
+            <g><rect fill='none' height='24' width='24'/></g>
+            <g><path d='M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z' fillRule='evenodd'/></g>
+        </svg>;
+    }
+}