styles moved to scss

1 files changed, 5 insertions, 40 deletions

diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index ec19639..b9fde02 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,8 +1,8 @@
+import styles from '../Notes.module.scss'
 import React, {useState, useEffect, useRef} from 'react'
 import useUser from 'lib/useUser'
 import useNotes from '../hooks/useNotes'
 import useSort from '../hooks/useSort'
-import fetchJson from 'lib/fetchJson'
 import {Layout} from 'components'
 import ListItem from './ListItem'
 import Actions from './Actions'
@@ -33,12 +33,12 @@ const List = () => {
               <div onClick={() => setAction('import')}>Import</div>
               <div onClick={() => {}}>Export</div>
             </div>
-            <table className="list">
+            <table className={styles.notesList}>
               <thead>
                 <tr>
-                  <th className='list__title' onClick={() => sortBy(1)}>Title {sortedBy(1)}</th>
-                  <th className='list__date' onClick={() => sortBy(2)}>Created {sortedBy(2)}</th>
-                  <th className='list__date' onClick={() => sortBy(3)}>Modified {sortedBy(3)}</th>
+                  <th onClick={() => sortBy(1)}>Title {sortedBy(1)}</th>
+                  <th onClick={() => sortBy(2)}>Created {sortedBy(2)}</th>
+                  <th onClick={() => sortBy(3)}>Modified {sortedBy(3)}</th>
                 </tr>
               </thead>
               <tbody>
@@ -68,41 +68,6 @@ const List = () => {
           />
         )
       }
-      <style jsx>{`
-        table {
-          display: block;
-          overflow: auto;
-          width: 100%;
-          table-layout: fixed;
-          word-wrap: break-word;
-          height: 100%;
-          margin-top: -1em;
-          padding-top: 1em;
-        }
-
-        tbody, thead {
-          display: block;
-        }
-
-        tr {
-          display: flex;
-          padding: 0 .5em;
-        }
-
-        th {
-          font-weight: 600;
-          text-align: left;
-          min-width: 10em;
-          white-space: nowrap;
-          padding-bottom: .5em;
-          cursor: pointer;
-          line-height: 1.1em;
-        }
-
-        th:first-of-type {
-          width: 99%;
-        }
-      `}</style>
     </>
   )
 }