color themes

8 files changed, 154 insertions, 99 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 : ''}
         />
diff --git a/components/Layout.js b/components/Layout.js
index 8b6cf87..0b8348c 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -1,3 +1,4 @@
+import styles from 'styles/Main.module.scss'
 import React, {useState} from 'react'
 import Head from 'next/head'
 import Context from '../context';
@@ -6,18 +7,21 @@ import Popup from './Popup'
 import PropTypes from 'prop-types'
 
 const Layout = ({ children, apps, setApps}) => {
+  const [options, setOptions] = useState({theme: 'dark'})
   const [popup, setPopup] = useState({})
 
   return (
     <Context.Provider value={{ setPopup }}>
-      <Head>
-        <title>Notes App</title>
-      </Head>
-      <main>
-        <div className="container">{children}</div>
-      </main>
-      <Header apps={apps} setApps={setApps} />
-      <Popup popup={popup} />
+      <section className={styles.layout+' '+options.theme}>
+        <Head>
+          <title>My Apps</title>
+        </Head>
+        <main>
+          <div className="container">{children}</div>
+        </main>
+        <Header apps={apps} setApps={setApps} />
+        <Popup popup={popup} />
+      </section>
     </Context.Provider>
   )
 }
diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 082bc80..7c3f9bc 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -1,3 +1,10 @@
+.layout {
+  color: var(--color-text);
+  height: 100vh;
+  background: var(--color-bg);
+  background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%);
+}
+
 .icon {
   text-decoration: none;
   display: inline-block;
@@ -12,14 +19,12 @@
     margin-top: .25em;
     padding: .25em;
     text-align: center;
-    color: #333;
     transition: .2s background;
     border-radius: .5em;
   }
 
   &:focus p {
-    background-color: rgba(255,255,255,.3);
-    // background-color: #0cc;
+    background-color: var(--color-glass);
   }
 }
 
@@ -38,20 +43,20 @@
   input[type=password]  {
     padding: .5em;
     margin: .5em 0;
-    border: 1px solid #ccc;
-    border-radius: .25px;
+    border: 1px dashed var(--color-decor);
+    border-radius: .5px;
   }
   .error {
     text-align: center;
-    color: brown;
+    color: var(--color-error);
     margin: 1rem 0 0;
   }
 }
 
 .header {
   height: 2em;
-  background-color: rgba(255, 255, 255, 0.4);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  background-color: var(--color-glass);
+  border-bottom: 1px solid  var(--color-window-border-bottom);
 
   nav {
     display: flex;
@@ -70,16 +75,17 @@
         & > span,
         & > a {
           display: inline-block;
-          color: #333;
+          color: var(--color-text);
           text-decoration: none;
           align-items: center;
           padding: .25em .5em;
           margin: .25em;
           border-radius: .5em;
-          transition: .3s background;
+          transition: .3s background, .3s color;
 
           &:hover {
-            background-color: rgba(0,0,0,.1);
+            background-color: var(--color-selected);
+            color: var(--color-text-alt);
           }
         }
       }
@@ -103,10 +109,11 @@
   padding: .25em .5em;
   margin: .25em;
   border-radius: .5em;
-  transition: .3s background;
+  transition: .3s background, .3s color;
 
   &:hover {
-    background-color: rgba(0,0,0,.1);
+    color: var(--color-text-alt);
+    background-color: var(--color-selected);
   }
 
 }
@@ -117,8 +124,8 @@
   top: 2.1em;
   width: 8em;
   padding: .5em;
-  background-color: rgba(255, 255, 255, 0.5);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  background-color: var(--color-window-content);
+  border-bottom: 1px solid var(--color-window-border-bottom);
   border-radius: .5em;
 
   & > li > span {
@@ -132,7 +139,6 @@
 
     & > input {
       padding: .75em;
-      border: 1px dashed #333;
       border-radius: .5em;
     }
   }
@@ -143,10 +149,10 @@
   }
 
   .email {
-    color: blue;
+    color: var(--color-link);
     // cursor: pointer;
   }
   .error {
-    color: brown;
+    color: var(--color-error);
   }
 }
diff --git a/styles/_themes.scss b/styles/_themes.scss
new file mode 100644
index 0000000..fbf63cc
--- /dev/null
+++ b/styles/_themes.scss
@@ -0,0 +1,57 @@
+.light {
+  --color-bg: #50a3a2;
+  --color-bg-alt: #53e3a6;
+  --color-text: #333;
+  --color-text-alt: #111;
+  --color-decor: #ccc;
+  --color-glass: rgb(151, 215, 200, .9);
+  --color-glass-alt: rgba(255, 255, 255, 0.5);
+  --color-error: #a00;
+  --color-success: #0a0;
+  --color-link: #006dd0;
+  --color-selected: rgba(0,0,0,.1);
+  --color-window-border-top: rgba(255,255,255,.7);
+  --color-window-border-bottom: #ccc;
+  --color-window-content: #fff;
+  --color-window-buttons: #666;
+  --color-window-buttons-alt: #222;
+  --color-window-menu: #eee;
+  --color-window-menu-alt: #ddd;
+  --color-button: #9cdbb5;
+  --color-button-alt: #a4eac0;
+  --color-button-border: #8ecca6;
+  --color-popup-bg: #fff;
+  --color-popup-error-bg: #ffe1e1;
+  --color-popup-error-button: #ffbebe;
+  --color-popup-error-button-alt: #ffa1a1;
+  --color-popup-error-border: #ffb6b6;
+}
+
+.dark {
+  --color-bg: #000;
+  --color-bg-alt: #222;
+  --color-text: #eee;
+  --color-text-alt: #fff;
+  --color-decor: #ccc;
+  --color-glass: rgb(20, 20, 20, .9);
+  --color-glass-alt: rgba(255, 255, 255, 0.3);
+  --color-error: #a00;
+  --color-success: #0a0;
+  --color-link: #006dd0;
+  --color-selected: rgba(0,0,0, .5);
+  --color-window-border-top: rgba(255,255,255,.3);
+  --color-window-border-bottom: #444;
+  --color-window-content: #222;
+  --color-window-buttons: #ccc;
+  --color-window-buttons-alt: #fff;
+  --color-window-menu: #282828;
+  --color-window-menu-alt: #111;
+  --color-button: #555;
+  --color-button-alt: #444;
+  --color-button-border: #666;
+  --color-popup-bg: #666;
+  --color-popup-error-bg: #6f0b0b;
+  --color-popup-error-button: #934e4e;
+  --color-popup-error-button-alt: #a21010;
+  --color-popup-error-border: #ffd6d6;
+}
diff --git a/styles/_window.scss b/styles/_window.scss
index a365c2e..5ce6e71 100644
--- a/styles/_window.scss
+++ b/styles/_window.scss
@@ -5,6 +5,7 @@
   transition-property: opacity, visibility, transform, width, height, top, left;
   transition-duration: .3s;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  color: var(--color-text);
 
   &.moving {
     transition: none
@@ -12,7 +13,7 @@
 
   &--popup {
     padding: 1em;
-    background: white;
+    background: var(--color-popup-bg);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -43,7 +44,7 @@
 
   &__title {
     position: absolute;
-    background-color: rgb(151, 215, 200, .9);
+    background-color: var(--color-glass);
     top: 0;
     left: 0;
     right: 0;
@@ -51,8 +52,8 @@
     text-align: center;
     padding: .5em;
     width: 100%;
-    border-bottom: 1px solid #bbb;
-    border-top: 1px solid rgba(255,255,255,.7);
+    border-bottom: 1px solid var(--color-window-border-bottom);
+    border-top: 1px solid var(--color-window-border-top);
     border-top-left-radius: .5em;
     border-top-right-radius: .5em;
   }
@@ -77,12 +78,12 @@
       padding: .5em;
       transition: .3s background, .3s color;
       border-radius: .5em;
-      color: #666;
+      color: var(--color-window-buttons);
       font-size: 0.8em;
 
       &:hover {
-        background-color: rgba(0,0,0,.1);
-        color: #222;
+        background-color: var(--color-selected);
+        color: var(--color-window-buttons-alt);
       }
     }
   }
@@ -90,7 +91,7 @@
   &__content {
     position: absolute;
     overflow: hidden;
-    background-color: #fff;
+    background-color: var(--color-window-content);
     top: 2em;
     right: 0;
     bottom: 0;
@@ -108,7 +109,7 @@
     display: block;
     margin: -1em -1em 1em;
     height: 2em;
-    background: #eee;
+    background: var(--color-window-menu);
 
     & > div {
       // cursor: pointer;
@@ -117,7 +118,7 @@
       transition: .3s background;
 
       &:hover {
-        background-color: #ddd;
+        background-color: var(--color-window-menu-alt);
       }
     }
   }
@@ -134,38 +135,34 @@
   }
 
   &__button {
-    color: #333;
+    color: var(--color-text);
     margin: 1em 1em 0;
     font-size: 1em;
     padding: .5em 1em;
-    background-color: rgb(151, 215, 200, .3);
+    background-color: var(--color-button);
     border-left: 0;
     border-right: 0;
-    border-top: 1px solid rgb(151, 215, 200, .1);
-    border-bottom: 1px solid rgb(151, 215, 200, .5);
+    border-top: 1px solid var(--color-button-border);
+    border-bottom: 1px solid var(--color-button-border);
     border-radius: .5em;
     // cursor: pointer;
     transition: .3s background-color;
 
     &:hover {
-      background-color: rgb(151, 215, 200, .5);
+      background-color:  var(--color-button-alt);
     }
   }
 
   &--error {
-    background: #ffefef;
-
-    & > .window__title {
-      background: rgba(255, 131, 131, 0.9);
-    }
+    background: var(--color-popup-error-bg);
 
     .window__button {
-      background: rgba(255, 131, 131, 0.3);
-      border-top: 1px solid rgba(255, 131, 131, 0.1);
-      border-bottom: 1px solid rgba(255, 131, 131, 0.5);
+      background-color: var(--color-popup-error-button);
+      border-top: 1px solid var(--color-popup-error-border);
+      border-bottom: 1px solid  var(--color-popup-error-border);
 
       &:hover {
-        background: rgba(255, 131, 131, 0.5)
+        background-color: var(--color-popup-error-button-alt);
       }
     }
   }
diff --git a/styles/global.scss b/styles/global.scss
index 222bc44..11d23d3 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -1,4 +1,5 @@
 @import "reset";
+@import "themes";
 @import "window";
 
 main {
@@ -11,16 +12,9 @@ main {
 
 body {
   margin: 0;
-  color: #222;
   height: 100vh;
   overflow: hidden;
 
-  background: #50a3a2;
-  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-  background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-  background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
-  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
-
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
     'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@@ -37,3 +31,4 @@ textarea, input {
   padding-left: 2rem;
   padding-right: 2rem;
 }
+