3 files changed, 50 insertions, 24 deletions
diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index 4ab1d64..516c0ec 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -3,6 +3,8 @@ import React, { useState } from 'react'
 import useSettings from 'hooks/useSettings'
 import useNotes from '../hooks/useNotes'
 import { handleSelect, handleSelectAll, handleExport } from '../helpers/export'
+import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 const Export = ({ setAction }) => {
   const { notes } = useNotes()
@@ -29,29 +31,43 @@ const Export = ({ setAction }) => {
         />
         <p>{t('notes_to_export')}</p>
         <div className={styles.export__select}>
-          <input
-            type='checkbox'
-            name='selectAll'
-            onChange={e => handleSelectAll(e, notes, setIds)}
-            checked={notes.length === ids.length}
-          />
-          <label htmlFor='selectAll'>{t('select_all')}</label>
+          <label>
+            <input
+              type='checkbox'
+              name='selectAll'
+              onChange={e => handleSelectAll(e, notes, setIds)}
+              checked={notes.length === ids.length}
+              className='hidden'
+            />
+            <span style={{ color: notes.length === ids.length ? 'green' : 'brown' }}>
+              <FontAwesomeIcon icon={notes.length === ids.length ? faCheck : faTimes} />
+            </span>
+            {t('select_all')}
+          </label>
         </div>
         <ul>
-          {notes.sort(sortFn).map(note => (
-            <li key={note.noteId}>
-              <input
-                type='checkbox'
-                name={note.noteId}
-                value={note.noteId}
-                checked={ids.includes(note.noteId)}
-                onChange={() => handleSelect(note.noteId, ids, setIds)}
-              />
-              <label htlmfor={note.noteId}>
-                {note.title}
-              </label><br />
-            </li>
-          ))}
+          {notes.sort(sortFn).map(note => {
+            const checked = ids.includes(note.noteId)
+
+            return (
+              <li key={note.noteId}>
+                <label>
+                  <input
+                    type='checkbox'
+                    name={note.noteId}
+                    value={note.noteId}
+                    checked={ids.includes(note.noteId)}
+                    onChange={() => handleSelect(note.noteId, ids, setIds)}
+                    className='hidden'
+                  />
+                  <span style={{ color: checked ? 'green' : 'brown' }}>
+                    <FontAwesomeIcon icon={checked ? faCheck : faTimes} />
+                  </span>
+                  {note.title}
+                </label>
+              </li>
+            )
+          })}
         </ul>
       </div>
     </section>
diff --git a/apps/Notes/components/Import.js b/apps/Notes/components/Import.js
index 5827310..fa1fa48 100644
--- a/apps/Notes/components/Import.js
+++ b/apps/Notes/components/Import.js
@@ -13,7 +13,9 @@ const Import = ({ setAction }) => {
   return (
     <section className={styles.import}>
       <div className='window__submenu'>
-        <div onClick={() => { setAction('') }}>{t('back')}</div>
+        <div>
+          <div onClick={() => { setAction('') }}>{t('back')}</div>
+        </div>
       </div>
       <div className='window__scroll'>
         <form onSubmit={e => handleImport(e, files, mutateNotes, setDone)}>
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 0e6c8fa..7d88c8d 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,4 +1,5 @@
 import styles from '../styles/Notes.module.scss'
+import { useRouter } from 'next/router'
 import React, { useState, useEffect } from 'react'
 import useUser from 'hooks/useUser'
 import useSettings from 'hooks/useSettings'
@@ -7,8 +8,9 @@ import useSort from '../hooks/useSort'
 import ListItem from './ListItem'
 import Actions from './Actions'
 import { Splash } from 'components'
+import handleLogout from 'helpers/logout'
 
-const List = () => {
+const List = ({ logout }) => {
   const [fetchedNote, setFetchedNote] = useState()
   const [action, setAction] = useState('')
   const [loading, setLoading] = useState(false)
@@ -16,7 +18,8 @@ const List = () => {
   const { notes, error } = useNotes()
   const [sortedBy, sortBy, sortFn] = useSort(3)
   const { t } = useSettings()
-  const { user } = useUser({
+  const router = useRouter()
+  const { user, mutateUser } = useUser({
     redirectToLogin: true,
     redirectToVerify: true
   })
@@ -41,6 +44,11 @@ const List = () => {
               <div className='mobile-only' onClick={() => { setShowSort(s => !s) }}>{t('sort')}</div>
               <div onClick={() => setAction('importNotes')}>{t('import')}</div>
               <div onClick={() => setAction('exportNotes')}>{t('export')}</div>
+              {logout && (
+                <div onClick={e => handleLogout(e, router, mutateUser)}>
+                  {t('logout')}
+                </div>
+              )}
             </div>
           </div>
           <div className='window__scroll'>