color themes

3 files changed, 38 insertions, 42 deletions

diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss
index fba396a..e2dbe06 100644
--- a/apps/Notes/Notes.module.scss
+++ b/apps/Notes/Notes.module.scss
@@ -51,7 +51,6 @@
       width: 99%;
       display: flex;
       margin-right: 1em;
-      // display:inline-block;
 
       & > span:nth-child(1) {
         text-overflow: ellipsis;
@@ -73,31 +72,20 @@
   }
 
   &:hover {
-    background: #eee;
+    background: var(--color-window-menu-alt);
     border-radius: .5em;
     // cursor: pointer;
 
     & > td:first-of-type > span:nth-child(n+2){
-      color: #666;
+      color: var(--color-window-buttons);
       visibility: visible;
       opacity: 1;
     }
   }
 
-
-  & > td:first-of-type > span:nth-child(2):hover {
-    color: #333;
-    background-color: #deffde;
-  }
-
-  & > td:first-of-type > span:nth-child(3):hover {
-    background-color: #ffffde;
-    color: #333;
-  }
-
-  & > td:first-of-type > span:nth-child(4):hover {
-    background-color: #ffdede;
-    color: #333;
+  & > td:first-of-type > span:nth-child(n+2):hover {
+    color: var(--color-text-alt);
+    background-color: var(--color-glass);
   }
 }
 
@@ -107,7 +95,6 @@
     to {opacity: 1;}
   }
 
-  background: white;
   padding: 1rem;
   position: absolute;
   top: 0;
@@ -143,7 +130,6 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background: white;
   padding: 1em 1em 2em;
   animation: fade-in .3s;
 
@@ -164,13 +150,15 @@
   }
 
   input[type=text] {
+    background-color: var(--color-window-content);
+    color: var(--color-text-alt);
     margin-bottom: .5rem;
     height: 3rem;
     border: none;
     padding: 0.5rem;
     font-size: 1rem;
     // font-weight: 600;
-    border: 1px dashed #666;
+    border: 1px dashed var(--color-window-buttons);
 
     &:placeholder {
       font: inherit;
@@ -178,13 +166,15 @@
   }
 
   textarea {
+    background-color: var(--color-window-content);
+    color: var(--color-text-alt);
     font-size: 1rem;
     flex-grow: 1;
     resize: none;
     height: 100%;
     width: 100%;
     border: none;
-    border: 1px dashed #666;
+    border: 1px dashed var(--color-window-buttons);
     padding: 0.5rem;
 
     &:placeholder {
@@ -199,7 +189,6 @@
     to {opacity: 1;}
   }
 
-  background: white;
   padding: 1rem;
   position: absolute;
   top: 0;
@@ -230,7 +219,7 @@
   }
 
   .fa-check ~ span {
-    color: green;
+    color: var(--color-success);
   }
 }
 
@@ -244,9 +233,13 @@
 
   &__select {
     display: inline-block;
-    border-bottom: 1px dashed #666;
-    padding-bottom: .25em;
-    margin-bottom: .5em;
+    border-bottom: 1px dashed var(--color-decor);
+    padding-bottom: .5em;
+    margin-bottom: .25em;
+  }
+
+  input[type=checkbox] {
+    margin: .5em .5em 0 0;
   }
 }
 
diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index 7232632..e7966e4 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -6,6 +6,7 @@ import {handleSelect, handleSelectAll, handleExport} from '../helpers/export'
 const Export = ({setAction}) => {
   const {notes} = useNotes()
   const [ids, setIds] = useState(notes.map(n => n.noteId))
+  const sortFn = (a, b) => new Date(b.updated_at) - new Date(a.updated_at)
 
   if (!notes) return null
 
@@ -23,7 +24,7 @@ const Export = ({setAction}) => {
           onClick={e => handleExport(e, ids, notes)}
         />
         <p>Notes to export:</p>
-        <div className={`${styles.export__select}`}>
+        <div className={styles.export__select}>
           <input
             type="checkbox"
             name='selectAll'
@@ -32,20 +33,22 @@ const Export = ({setAction}) => {
           />
           <label htmlFor='selectAll'>Select all</label>
         </div>
-        {notes.map(note => (
-          <div 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/>
-          </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>
+          ))}
+        </ul>
       </div>
     </section>
   )
diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js
index 4e91654..ad936a4 100644
--- a/apps/Notes/components/NoteEdit.js
+++ b/apps/Notes/components/NoteEdit.js
@@ -23,7 +23,7 @@ const NoteEdit = ({setAction, fetchedNote}) => {
         <input
           name='title'
           type='text'
-          maxlength={1000}
+          maxLength={1000}
           placeholder='Title'
           defaultValue={fetchedNote ? fetchedNote.title : ''}
         />