1 files changed, 37 insertions, 21 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>