1 files changed, 26 insertions, 89 deletions
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index 42d67c0..5d3b91f 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -1,3 +1,4 @@
+import styles from '../Notes.module.scss'
 import React, { useContext } from 'react'
 import fetchJson from 'lib/fetchJson'
 import {getNote, removeNote} from '../helpers/noteActions.js'
@@ -22,97 +23,33 @@ const ListItem = ({note, setAction, setFetchedNote}) => {
   }
 
   return (
-    <>
-      <tr key={note._id}>
-        <td
-          onClick={() => handleNoteAction('showNote', note)}
+    <tr className={styles.listItem} key={note._id}>
+      <td
+        onClick={() => handleNoteAction('showNote', note)}
+      >
+        <span>{`${note.title}`}</span>
+        <span
+        onClick={e => handleNoteAction('editNote', note, e)}
         >
-          <span>{`${note.title}`}</span>
-          <span
-          onClick={e => handleNoteAction('editNote', note, e)}
-          >
-            <FontAwesomeIcon icon={faEdit} />
-          </span>
-          <span
-            onClick={(e) => removeNote(e, note._id, mutateNotes, setPopup, setAction)}
-          >
-            <FontAwesomeIcon icon={faTrash} />
-          </span>
-        </td>
-        <td
-          onClick={() => handleNoteAction('showNote', note)}
+          <FontAwesomeIcon icon={faEdit} />
+        </span>
+        <span
+          onClick={(e) => removeNote(e, note._id, mutateNotes, setPopup, setAction)}
         >
-          {datestring(note.created_at)}
-        </td>
-        <td
-          onClick={() => handleNoteAction('showNote', note)}
-        >
-          {datestring(note.updated_at)}
-        </td>
-      </tr>
-      <style jsx>{`
-        tr {
-          display: flex;
-          padding: .5em;
-        }
-
-        td {
-          min-width: 10em;
-          white-space: nowrap;
-        }
-
-        td:first-of-type {
-          width: 99%;
-          display: flex;
-          padding-right: 1em;
-        }
-
-        td:first-of-type > span:nth-child(2),
-        td:first-of-type > span:nth-child(3) {
-          margin-left: .5em;
-          padding: .15em .5em;
-          line-height: 1em;
-          border-radius: 50%;
-          visibility: hidden;
-          opacity: 0;
-          font-size: 80%;
-          transition: .3s opacity linear .3s;
-        }
-
-        td:first-of-type > span:nth-child(1) {
-          text-overflow: ellipsis;
-          flex-grow: 1;
-        }
-
-        // td:first-of-type > span:nth-child(2) {
-          // margin-left: 1.25em;
-        // }
-
-        tr:hover {
-          background: #eee;
-          border-radius: .5em;
-          cursor: pointer;
-        }
-
-        tr:hover > td:first-of-type > span:nth-child(2),
-        tr:hover > td:first-of-type > span:nth-child(3) {
-          color: #666;
-          visibility: visible;
-          opacity: 1;
-        }
-
-        tr > td:first-of-type > span:nth-child(2):hover {
-          color: #333;
-          background-color: #deffde;
-        }
-
-        tr > td:first-of-type > span:nth-child(3):hover {
-          background-color: #ffdede;
-          color: #333;
-        }
-
-      `}</style>
-    </>
+          <FontAwesomeIcon icon={faTrash} />
+        </span>
+      </td>
+      <td
+        onClick={() => handleNoteAction('showNote', note)}
+      >
+        {datestring(note.created_at)}
+      </td>
+      <td
+        onClick={() => handleNoteAction('showNote', note)}
+      >
+        {datestring(note.updated_at)}
+      </td>
+    </tr>
   )
 }