icon focus, notes update timestamp, loading note

22 files changed, 241 insertions, 188 deletions

diff --git a/apps/Notes/Notes.module.scss b/apps/Notes/Notes.module.scss
index 2e3c68f..fba396a 100644
--- a/apps/Notes/Notes.module.scss
+++ b/apps/Notes/Notes.module.scss
@@ -29,7 +29,7 @@
     min-width: 10em;
     white-space: nowrap;
     padding-bottom: .5em;
-    cursor: pointer;
+    // cursor: pointer;
     line-height: 1.1em;
 
     &:first-of-type {
@@ -50,10 +50,12 @@
     &:first-of-type {
       width: 99%;
       display: flex;
-      padding-right: 1em;
+      margin-right: 1em;
+      // display:inline-block;
 
       & > span:nth-child(1) {
         text-overflow: ellipsis;
+        overflow: hidden;
         flex-grow: 1;
       }
 
@@ -73,7 +75,7 @@
   &:hover {
     background: #eee;
     border-radius: .5em;
-    cursor: pointer;
+    // cursor: pointer;
 
     & > td:first-of-type > span:nth-child(n+2){
       color: #666;
@@ -216,7 +218,7 @@
 
   label {
     display: inline-block;
-    cursor: pointer;
+    // cursor: pointer;
   }
 
   li {
diff --git a/apps/Notes/components/Actions.js b/apps/Notes/components/Actions.js
index 1f5d680..9591cfa 100644
--- a/apps/Notes/components/Actions.js
+++ b/apps/Notes/components/Actions.js
@@ -16,13 +16,11 @@ const Actions = ({
     )
     case 'addNote': return (
       <NoteEdit
-        action={action}
         setAction={setAction}
       />
     )
     case 'editNote': return (
       <NoteEdit
-        action={action}
         setAction={setAction}
         fetchedNote={fetchedNote}
       />
diff --git a/apps/Notes/components/Export.js b/apps/Notes/components/Export.js
index f281d1a..7232632 100644
--- a/apps/Notes/components/Export.js
+++ b/apps/Notes/components/Export.js
@@ -1,45 +1,11 @@
 import styles from '../Notes.module.scss'
 import React, {useState} from 'react'
 import useNotes from '../hooks/useNotes'
-import fetchJson from 'lib/fetchJson'
-import JSZip from 'jszip'
-import saveFile from 'helpers/saveFile'
-import filename from '../helpers/fileName'
-// import {state, color, handleImport, handleChange} from '../helpers/import'
+import {handleSelect, handleSelectAll, handleExport} from '../helpers/export'
 
 const Export = ({setAction}) => {
   const {notes} = useNotes()
   const [ids, setIds] = useState(notes.map(n => n.noteId))
-  // const [files, setFiles] = useState()
-  // const [done, setDone] = useState([])
-
-  const handleSelect = id => {
-    ids.includes(id)
-      ? setIds(ids.filter(i => i !== id))
-      : setIds([...ids, id])
-  }
-
-  const handleSelectAll = e => {
-    if (e.target.checked) {
-      setIds(notes.map(n => n.noteId))
-    } else {
-      setIds([])
-    }
-  }
-
-  const handleExport = e => {
-    e.preventDefault()
-    const zip = new JSZip()
-
-    Promise.all(ids.map(async id => {
-      const title = notes.find(n => n.noteId === id).title
-      const {content} = await fetchJson(`/api/note/${id}`)
-      zip.folder('notes').file(filename(title), content, {binary: true})
-    })).then(() => {
-      zip.generateAsync({type:"blob"})
-        .then(c => saveFile(c, 'notes.zip', 'application/zip'))
-    })
-  }
 
   if (!notes) return null
 
@@ -54,11 +20,16 @@ const Export = ({setAction}) => {
           className="window__button"
           type="submit"
           value="Export"
-          onClick={handleExport}
+          onClick={e => handleExport(e, ids, notes)}
         />
         <p>Notes to export:</p>
         <div className={`${styles.export__select}`}>
-          <input type="checkbox" name='selectAll' onChange={handleSelectAll} checked={notes.length === ids.length} />
+          <input
+            type="checkbox"
+            name='selectAll'
+            onChange={e => handleSelectAll(e, notes, setIds)}
+            checked={notes.length === ids.length}
+          />
           <label htmlFor='selectAll'>Select all</label>
         </div>
         {notes.map(note => (
@@ -68,7 +39,7 @@ const Export = ({setAction}) => {
               name={note.noteId}
               value={note.noteId}
               checked={ids.includes(note.noteId)}
-              onChange={() => handleSelect(note.noteId)}
+              onChange={() => handleSelect(note.noteId, ids, setIds)}
             />
             <label htlmfor={note.noteId}>
               {note.title}
diff --git a/apps/Notes/components/List.js b/apps/Notes/components/List.js
index 0f6221e..54f66b5 100644
--- a/apps/Notes/components/List.js
+++ b/apps/Notes/components/List.js
@@ -1,5 +1,5 @@
 import styles from '../Notes.module.scss'
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import useUser from 'lib/useUser'
 import useNotes from '../hooks/useNotes'
 import useSort from '../hooks/useSort'
@@ -10,65 +10,67 @@ import Splash from './Splash'
 const List = () => {
   const [fetchedNote, setFetchedNote] = useState()
   const [action, setAction] = useState('')
+  const [loading, setLoading] = useState(false)
   const {notes, error} = useNotes()
-  const [sortedBy, sortBy, sortFn] = useSort(2)
+  const [sortedBy, sortBy, sortFn] = useSort(3)
   const {user} = useUser({
     redirectToLogin: true,
     redirectToVerify: true,
   })
 
-  if (error) return <Splash type='connection' />
+  useEffect(() => {
+    setLoading(false)
+  }, [fetchedNote])
 
+  if (error) return <Splash type='connection' />
+  if (loading) return <Splash />
   if (!user || !user.isLoggedIn || !user.isVerified || !notes || !sortFn) {
     return <Splash />
   }
 
   return (
-    <>
-      {
-        action === '' ? (
-          <>
-            <div className='window__submenu'>
-              <div onClick={() => setAction('addNote')}>New note</div>
-              <div onClick={() => setAction('importNotes')}>Import</div>
-              <div onClick={() => setAction('exportNotes')}>Export</div>
-            </div>
-            <table className={styles.notesList}>
-              <thead>
-                <tr>
-                  <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>
-                {
-                  notes.length > 0
-                    ? (notes.sort(sortFn).map(note => (
-                      <ListItem
-                        key={note._id}
-                        note={note}
-                        setAction={setAction}
-                        setFetchedNote={setFetchedNote}
-                      />
-                    ))) : (
-                      <tr>
-                        <td>Your notes list is empty.</td>
-                      </tr>
-                    )}
-              </tbody>
-            </table>
-          </>
-        ) : (
-          <Actions
-            action={action}
-            setAction={setAction}
-            fetchedNote={fetchedNote}
-            setFetchedNote={setFetchedNote}
-          />
-        )
-      }
-    </>
+    action === '' ? (
+      <>
+        <div className='window__submenu'>
+          <div onClick={() => setAction('addNote')}>New note</div>
+          <div onClick={() => setAction('importNotes')}>Import</div>
+          <div onClick={() => setAction('exportNotes')}>Export</div>
+        </div>
+        <table className={styles.notesList}>
+          <thead>
+            <tr>
+              <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>
+            {
+              notes.length > 0
+                ? (notes.sort(sortFn).map(note => (
+                  <ListItem
+                    key={note._id}
+                    note={note}
+                    setAction={setAction}
+                    setFetchedNote={setFetchedNote}
+                    setLoading={setLoading}
+                  />
+                ))) : (
+                  <tr>
+                    <td>Your notes list is empty.</td>
+                  </tr>
+                )}
+          </tbody>
+        </table>
+      </>
+    ) : (
+      <Actions
+        action={action}
+        setAction={setAction}
+        fetchedNote={fetchedNote}
+        setFetchedNote={setFetchedNote}
+      />
+    )
   )
 }
 
diff --git a/apps/Notes/components/ListItem.js b/apps/Notes/components/ListItem.js
index caa22e9..0e34ffc 100644
--- a/apps/Notes/components/ListItem.js
+++ b/apps/Notes/components/ListItem.js
@@ -12,47 +12,37 @@ const datestring = date => {
     d.getFullYear() + " " + ("0" + d.getHours()).slice(-2) + ":" + ("0" + d.getMinutes()).slice(-2)
 };
 
-const ListItem = ({note, setAction, setFetchedNote}) => {
+const ListItem = ({note, setAction, setFetchedNote, setLoading}) => {
   const {mutateNotes} = useNotes()
   const {setPopup} = useContext(Context)
 
   const handleNoteAction = async (a, note, e) => {
     if (e) e.stopPropagation()
+    setLoading(true)
     await getNote(note, setFetchedNote, setPopup, () => setAction(a))
   }
 
   return (
-    <tr className={styles.listItem} key={note._id}>
+    <tr
+      className={styles.listItem}
+      key={note._id}
+      onClick={() => handleNoteAction('showNote', note)}
+    >
       <td
-        onClick={() => handleNoteAction('showNote', note)}
       >
         <span>{`${note.title}`}</span>
-        <span
-        onClick={e => handleNoteAction('editNote', note, e)}
-        >
+        <span onClick={e => handleNoteAction('editNote', note, e)}>
           <FontAwesomeIcon icon={faEdit} />
         </span>
-        <span
-          onClick={e => {e.stopPropagation(); exportNote(note)}}
-        >
+        <span onClick={e => {e.stopPropagation(); exportNote(note)}}>
           <FontAwesomeIcon icon={faDownload} />
         </span>
-        <span
-          onClick={e => removeNote(e, note._id, mutateNotes, setPopup, setAction)}
-        >
+        <span onClick={e => removeNote(e, note._id, mutateNotes, setPopup, setAction)}>
           <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>
+      <td>{datestring(note.created_at)}</td>
+      <td>{datestring(note.updated_at)}</td>
     </tr>
   )
 }
diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js
index 42eee46..4e91654 100644
--- a/apps/Notes/components/NoteEdit.js
+++ b/apps/Notes/components/NoteEdit.js
@@ -1,29 +1,21 @@
 import styles from '../Notes.module.scss'
-import React, {useState, useContext} from 'react'
+import React, {useContext} from 'react'
 import Context from 'context';
-import fetchJson from 'lib/fetchJson'
 import useNotes from '../hooks/useNotes'
 import {addNote, updateNote} from '../helpers/noteActions.js'
 
-const NoteEdit = ({action, setAction, fetchedNote}) => {
-  const [text, setText] = useState('')
+const NoteEdit = ({setAction, fetchedNote}) => {
   const {mutateNotes} = useNotes()
-  const [errorMsg, setErrorMsg] = useState('')
   const {setPopup} = useContext(Context)
 
   const handleSubmit = e => {
     e.preventDefault()
+
     fetchedNote
       ? updateNote(e, fetchedNote, mutateNotes, setAction, setPopup)
       : addNote(e, mutateNotes, setAction, setPopup)
   }
 
-  // if (!fetchedNote) return <p>Loading...</p>
-  // if (fetchedNote.error) {
-  //   setFetchedNote()
-  //   setAction('')
-  // }
-
   return (
     <div className={styles.noteEdit}>
       <h2>{fetchedNote ? 'Edit note:' : 'Add new note:'}</h2>
@@ -31,6 +23,7 @@ const NoteEdit = ({action, setAction, fetchedNote}) => {
         <input
           name='title'
           type='text'
+          maxlength={1000}
           placeholder='Title'
           defaultValue={fetchedNote ? fetchedNote.title : ''}
         />
@@ -54,8 +47,6 @@ const NoteEdit = ({action, setAction, fetchedNote}) => {
           />
         </div>
       </form>
-      <style jsx>{`
-      `}</style>
     </div>
   )
 }
diff --git a/apps/Notes/components/NoteView.js b/apps/Notes/components/NoteView.js
index 14ec045..29aba34 100644
--- a/apps/Notes/components/NoteView.js
+++ b/apps/Notes/components/NoteView.js
@@ -4,12 +4,13 @@ import Context from 'context';
 import useNotes from '../hooks/useNotes'
 import {removeNote, exportNote} from '../helpers/noteActions.js'
 import copyToClipboard from '../helpers/copyToClipboard.js'
+import Splash from './Splash'
 
 const NoteView = ({fetchedNote, setFetchedNote, setAction}) => {
   const {mutateNotes} = useNotes()
   const {setPopup} = useContext(Context)
 
-  if (!fetchedNote) return <p>Loading...</p>
+  if (!fetchedNote) return <Splash />
   if (fetchedNote.error) {
     setFetchedNote()
     setAction('')
diff --git a/apps/Notes/components/Splash.js b/apps/Notes/components/Splash.js
index bc52e1b..b17fa6b 100644
--- a/apps/Notes/components/Splash.js
+++ b/apps/Notes/components/Splash.js
@@ -1,7 +1,7 @@
 import styles from '../Notes.module.scss'
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBan, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
+import {faBan, faSpinner} from '@fortawesome/free-solid-svg-icons'
 
 const Splash = ({type}) => (
   <div className={type === 'connection' ? styles.connection : styles.loader}>
diff --git a/apps/Notes/helpers/export.js b/apps/Notes/helpers/export.js
new file mode 100644
index 0000000..011dc18
--- /dev/null
+++ b/apps/Notes/helpers/export.js
@@ -0,0 +1,32 @@
+import fetchJson from 'lib/fetchJson'
+import JSZip from 'jszip'
+import saveFile from 'helpers/saveFile'
+import filename from '../helpers/fileName'
+
+export const handleSelect = (id, ids, setIds) => {
+  ids.includes(id)
+    ? setIds(ids.filter(i => i !== id))
+    : setIds([...ids, id])
+}
+
+export const handleSelectAll = (e, notes, setIds) => {
+  if (e.target.checked) {
+    setIds(notes.map(n => n.noteId))
+  } else {
+    setIds([])
+  }
+}
+
+export const handleExport = (e, ids, notes) => {
+  e.preventDefault()
+  const zip = new JSZip()
+
+  Promise.all(ids.map(async id => {
+    const title = notes.find(n => n.noteId === id).title
+    const {content} = await fetchJson(`/api/note/${id}`)
+    zip.folder('notes').file(filename(title), content, {binary: true})
+  })).then(() => {
+    zip.generateAsync({type:"blob"})
+      .then(c => saveFile(c, 'notes.zip', 'application/zip'))
+  })
+}
diff --git a/apps/Notes/helpers/noteActions.js b/apps/Notes/helpers/noteActions.js
index 9588150..7b51e20 100644
--- a/apps/Notes/helpers/noteActions.js
+++ b/apps/Notes/helpers/noteActions.js
@@ -1,5 +1,6 @@
 import fetchJson from 'lib/fetchJson'
 import filename from '../helpers/fileName'
+import saveFile from 'helpers/saveFile'
 
 export const getNote = async (note, setFetchedNote, setPopup, callback) => {
   try {
diff --git a/components/App.js b/components/App.js
index f866211..a68e593 100644
--- a/components/App.js
+++ b/components/App.js
@@ -1,8 +1,5 @@
-import React, {useState, useEffect, useRef} from 'react'
-import useUser from 'lib/useUser'
-import fetchJson from 'lib/fetchJson'
+import React, {useEffect, useRef} from 'react'
 import {close, toggleMin, toggleMax, move} from 'helpers/windowActions'
-import {Layout} from 'components'
 import {faArrowUp, faExpandAlt, faTimes, faCompressAlt} from '@fortawesome/free-solid-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 
@@ -22,7 +19,8 @@ const App = ({children, app, apps, setApps}) => {
           + (app.min ? ' hidden' : '')
           + (app.max ? ' maximized' : '')
         }
-      style={app.pos.length ? {top: app.pos[1], left: app.pos[0]} : {}}
+        style={app.pos.length ? {top: app.pos[1], left: app.pos[0]} : {}}
+        tabIndex={0}
       >
         <h2 className='window__title'>Notes</h2>
         <div className='window__title-buttons'>
diff --git a/components/Header.js b/components/Header.js
index 3d1f471..a208e70 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -31,7 +31,7 @@ const Header = ({apps, setApps}) => {
                 style={app.min ? {fontWeight: 600} : {}}
                 onClick={() => toggleMin(app.name, apps, setApps)}
               >
-                {app.name}
+                <span>{app.name}</span>
               </li>
             ))
           }
@@ -59,6 +59,9 @@ const Header = ({apps, setApps}) => {
               >{user?.email}</p>
               {
                 userMenu && (
+
+                <>
+                  <div className={styles.headerOverlay} onClick={() => setUserMenu(false)} />
                   <ul className={styles.submenu}>
                     <li>
                       <span onClick={() => {}}>
@@ -71,6 +74,7 @@ const Header = ({apps, setApps}) => {
                       </a>
                     </li>
                   </ul>
+                </>
                 )
               }
             </li>
diff --git a/context/index.js b/context/index.js
index 6353dc0..a802bf6 100644
--- a/context/index.js
+++ b/context/index.js
@@ -1,3 +1,3 @@
 import React from 'react';
 
-export default React.createContext();
+export default React.createContext()
diff --git a/helpers/windowActions.js b/helpers/windowActions.js
index fda0f73..60e697c 100644
--- a/helpers/windowActions.js
+++ b/helpers/windowActions.js
@@ -21,7 +21,7 @@ export const move = (appName, winRef, apps, setApps) => {
       const shiftY = event.clientY - winRef.current.getBoundingClientRect().top
       winRef.current.classList.add('moving')
 
-      function moveAt(pageX, pageY, clientY) {
+      function moveAt(pageX, pageY) {
         const x = pageX - shiftX
         const y = pageY - shiftY - 32
         setApps([...apps.map(a => a.name === appName
@@ -31,7 +31,7 @@ export const move = (appName, winRef, apps, setApps) => {
       }
 
       const onMouseMove = (event) => {
-        moveAt(event.pageX, event.pageY, event.clientY)
+        moveAt(event.pageX, event.pageY)
       }
 
       document.addEventListener('mousemove', onMouseMove)
diff --git a/models/Note.js b/models/Note.js
index 3f94e62..4e1956e 100644
--- a/models/Note.js
+++ b/models/Note.js
@@ -26,7 +26,7 @@ noteSchema.pre('save', async function(next){
   const note = this;
 
   if (note.isModified('content')) {
-    note.content = await encrypt(note.content)
+    note.content = encrypt(note.content)
   }
 
   next()
diff --git a/models/NoteList.js b/models/NoteList.js
index 1cac218..159364f 100644
--- a/models/NoteList.js
+++ b/models/NoteList.js
@@ -1,12 +1,13 @@
 const {encrypt, decrypt} = require('lib/crypt')
 const mongoose = require("mongoose")
 
-const decryptTitles = (l) => ({notes: l.notes.map(n => ({ ...n, title: decrypt(n.title)}))})
+const decryptTitles = l => ({notes: l.notes.map(n => ({ ...n, title: decrypt(n.title)}))})
 
 const noteListSchema = new mongoose.Schema({
   notes: [{
     title: {
       type: String,
+      maxlength: 1000,
       required: true,
     },
     noteId: {
@@ -19,7 +20,6 @@ const noteListSchema = new mongoose.Schema({
   }]
 })
 
-
 noteListSchema.statics.getList = async (id) => {
   const newList = await NoteList.findById(id).lean()
 
@@ -50,9 +50,12 @@ noteListSchema.statics.removeNote = async (_id, id) => {
 
 noteListSchema.statics.updateList = async (_id, noteId, title) => {
   const noteList = await NoteList.findOneAndUpdate(
-    { _id, "notes.noteId": noteId },
-    { $set: { "notes.$.title": encrypt(title ? title : 'No title') } },
-    { new: true }
+    {_id, "notes.noteId": noteId},
+    {$set: {
+      "notes.$.title": encrypt(title ? title : 'No title'),
+      "notes.$.updated_at": Date.now(),
+    }},
+    {new: true}
   ).lean()
 
   return decryptTitles(noteList)
diff --git a/models/User.js b/models/User.js
index ecc54cd..fa3303f 100644
--- a/models/User.js
+++ b/models/User.js
@@ -98,6 +98,8 @@ userSchema.pre('save', async function(next){
     user.password = await bcrypt.hash(user.password, 8);
   }
 
+  user.updated_at = Date.now()
+
   next()
 })
 
diff --git a/pages/index.js b/pages/index.js
index 52421ea..4b420fb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
 import styles from 'styles/Main.module.scss'
-import React, { useState ,useRef } from 'react'
+import React, {useState} from 'react'
 import useUser from 'lib/useUser'
 import {Layout, App} from 'components'
 import {open} from 'helpers/windowActions'
@@ -11,12 +11,30 @@ const appList = {
 
 const Home = () => {
   const [apps, setApps] = useState([])
-  const {mutateUser} = useUser({
+  useUser({
     redirectToLogin: true,
     redirectToVerify: true,
     redirectToApps: true,
   })
 
+  const handleClick = (e, appName) => {
+    switch (e.detail) {
+      case 1:
+        e.currentTarget.focus()
+        break;
+      case 2:
+        open(appName, apps, setApps)
+        e.currentTarget.blur()
+        break;
+    }
+  };
+
+  const handleKey = (e, appName) => {
+    if (e.key === 'Enter') {
+      open(appName, apps, setApps)
+    }
+  }
+
   return (
     <Layout apps={apps} setApps={setApps}>
       <>
@@ -25,7 +43,9 @@ const Home = () => {
             <div
               key={`${appName}_icon`}
               className={styles.icon}
-              onClick={() => open(appName, apps, setApps)}
+              onClick={e => handleClick(e, appName)}
+              onKeyDown={e => handleKey(e, appName)}
+              tabIndex="0"
             >
               <img src={`./${appName.toLowerCase()}.svg`} alt={`${appName} Icon`} />
               <p>{appName}</p>
diff --git a/pages/verify.js b/pages/verify.js
index 9d92390..7161d67 100644
--- a/pages/verify.js
+++ b/pages/verify.js
@@ -1,12 +1,10 @@
 import styles from 'styles/Main.module.scss'
-import {useState, useEffect} from 'react'
-import {useRouter} from 'next/router'
+import {useState} from 'react'
 import useUser from 'lib/useUser'
 import fetchJson from 'lib/fetchJson'
 import {Layout} from 'components'
 
 const Verify = () => {
-  const router = useRouter()
   const {user, mutateUser} = useUser({
     redirectToLogin: true,
     redirectToApps: true,
diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 15be72a..082bc80 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -1,17 +1,25 @@
 .icon {
   text-decoration: none;
   display: inline-block;
-  width: 4em;
-  cursor: pointer;
+  width: 4.5em;
+  padding: .5em;
 
   img {
-    width: 4em;
+    width: 3em;
   }
 
   p {
-    padding-top: .5em;
+    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;
   }
 }
 
@@ -42,7 +50,6 @@
 
 .header {
   height: 2em;
-  padding: 0.5rem;
   background-color: rgba(255, 255, 255, 0.4);
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 
@@ -53,28 +60,54 @@
       flex-grow: 1;
       overflow: auto;
     }
-  }
 
-  li {
-    margin-left: 1em;
-    margin-right: 1em;
-    display: inline-block;
-    cursor: pointer;
-
-    & > span,
-    & > a {
-      color: #333;
-      font-weight: 600;
-      text-decoration: none;
-      align-items: center;
+    ul {
+      display: block;
+
+      & > li {
+        display: inline-block;
+
+        & > span,
+        & > a {
+          display: inline-block;
+          color: #333;
+          text-decoration: none;
+          align-items: center;
+          padding: .25em .5em;
+          margin: .25em;
+          border-radius: .5em;
+          transition: .3s background;
+
+          &:hover {
+            background-color: rgba(0,0,0,.1);
+          }
+        }
+      }
     }
   }
 }
 
+.headerOverlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  cursor: auto;
+}
+
 .user {
   font-weight: 600;
-  cursor: pointer;
+  // cursor: pointer;
   position: relative;
+  padding: .25em .5em;
+  margin: .25em;
+  border-radius: .5em;
+  transition: .3s background;
+
+  &:hover {
+    background-color: rgba(0,0,0,.1);
+  }
 
 }
 
@@ -82,20 +115,14 @@
   position: absolute;
   right: 4px;
   top: 2.1em;
-  width: 10em;
+  width: 8em;
   padding: .5em;
-  background-color: rgba(255, 255, 255, .9);
-  border: 1px solid rgba(255, 255, 255, .5);
+  background-color: rgba(255, 255, 255, 0.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: .5em;
 
-  & > li {
-    margin: 0;
-    padding:.5em;
-    width: 100%;
-    line-height: em;
-
-    &:hover {
-      background-color: #ddd;
-    }
+  & > li > span {
+    text-decoration: none;
   }
 }
 
@@ -117,7 +144,7 @@
 
   .email {
     color: blue;
-    cursor: pointer;
+    // cursor: pointer;
   }
   .error {
     color: brown;
diff --git a/styles/_reset.scss b/styles/_reset.scss
index a5f98fb..0dc1326 100755
--- a/styles/_reset.scss
+++ b/styles/_reset.scss
@@ -25,6 +25,7 @@ time, mark, audio, video {
   webkit-user-select: none;
   ms-user-select: none;
   user-select: none;
+  cursor: auto;
 }
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
diff --git a/styles/_window.scss b/styles/_window.scss
index 81fb055..a365c2e 100644
--- a/styles/_window.scss
+++ b/styles/_window.scss
@@ -23,12 +23,24 @@
   }
 
   &:not(.window--popup) {
-    top: 10vh;
-    left: 10vw;
     height: 80vh;
     width: 80vw;
+    top: 10vh;
+    left: 10vw;
+
+
+    @media (min-width: 80em) {
+      width: 64em;
+      left: calc((100vw - 64em) / 2)
+    }
+
+    @media (min-height: 80em) {
+      width: 64em;
+      left: calc((100vh - 64em) / 2)
+    }
   }
 
+
   &__title {
     position: absolute;
     background-color: rgb(151, 215, 200, .9);
@@ -58,7 +70,7 @@
     position: absolute;
     top: .5em;
     right: .5em;
-    cursor: pointer;
+    // cursor: pointer;
     z-index: 1;
 
     & > span {
@@ -99,7 +111,7 @@
     background: #eee;
 
     & > div {
-      cursor: pointer;
+      // cursor: pointer;
       display: inline-block;
       padding: .5em;
       transition: .3s background;
@@ -132,7 +144,7 @@
     border-top: 1px solid rgb(151, 215, 200, .1);
     border-bottom: 1px solid rgb(151, 215, 200, .5);
     border-radius: .5em;
-    cursor: pointer;
+    // cursor: pointer;
     transition: .3s background-color;
 
     &:hover {