Add notes feature and improved navbar

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

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>;
+    }
+}