1 files changed, 3 insertions, 80 deletions
diff --git a/apps/Notes/components/NoteEdit.js b/apps/Notes/components/NoteEdit.js
index b568aa9..42eee46 100644
--- a/apps/Notes/components/NoteEdit.js
+++ b/apps/Notes/components/NoteEdit.js
@@ -1,3 +1,4 @@
+import styles from '../Notes.module.scss'
 import React, {useState, useContext} from 'react'
 import Context from 'context';
 import fetchJson from 'lib/fetchJson'
@@ -24,11 +25,10 @@ const NoteEdit = ({action, setAction, fetchedNote}) => {
   // }
 
   return (
-    <div className='note'>
+    <div className={styles.noteEdit}>
       <h2>{fetchedNote ? 'Edit note:' : 'Add new note:'}</h2>
-      <form onSubmit={handleSubmit} className='note__form'>
+      <form onSubmit={handleSubmit}>
         <input
-          className='note__title'
           name='title'
           type='text'
           placeholder='Title'
@@ -36,7 +36,6 @@ const NoteEdit = ({action, setAction, fetchedNote}) => {
         />
         <textarea
           required
-          className='note__text'
           placeholder='Note'
           name='content'
           defaultValue={fetchedNote ? fetchedNote.content : ''}
@@ -56,82 +55,6 @@ const NoteEdit = ({action, setAction, fetchedNote}) => {
         </div>
       </form>
       <style jsx>{`
-        .note {
-          display: flex;
-          flex-direction: column;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          background: white;
-          padding: 1em 1em 2em;
-          animation: fade-in .3s;
-        }
-
-        @keyframes fade-in {
-          from {opacity: 0;}
-          to {opacity: 1;}
-        }
-
-        h2 {
-          font-size: 1.2em;
-          margin-bottom: .5em;
-        }
-
-        .note__form {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          flex-grow: 1;
-        }
-
-        .note__title {
-          margin-bottom: .5rem;
-          height: 3rem;
-          border: none;
-          padding: 0.5rem;
-          font-size: 1rem;
-          // font-weight: 600;
-          border: 1px dashed #666;
-        }
-
-        .note__title:placeholder {
-          font: inherit;
-        }
-
-        .note__text {
-          font-size: 1rem;
-          flex-grow: 1;
-          resize: none;
-          height: 100%;
-          width: 100%;
-          border: none;
-          border: 1px dashed #666;
-          padding: 0.5rem;
-        }
-
-        .note__text:placeholder {
-          font: inherit;
-        }
-
-        .note__close {
-          position: absolute;
-          top: 8px;
-          right: 15px;
-          transform: rotate(45deg);
-          font-size: 26px;
-          cursor: pointer;
-          transition: .3s transform;
-        }
-
-        .note__close:hover {
-          transform: rotate(135deg);
-        }
-
-        .note__buttons {
-          text-align: right;
-        }
       `}</style>
     </div>
   )