Update v0.2.0

Artezi0 · Jun 22, 2022 · 938e75c · 938e75c · vercel · Jun 22, 2022
1 parent 01076e0
commit 938e75c
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -31,4 +31,16 @@ Tired of seeing your notes scattered around and untidy?  Organize your notes wit
     - `Ctrl + Alt + W` &nbsp; Split edit window
     - `Ctrl + Alt + R` &nbsp; Read-only
 
-
+## **Made with**
+- react-colorful": "^5.5.1",
+- react-markdown": "^8.0.3",
+- react-syntax-highlighter": "^15.50",
+- react-tabs": "^5.1.0",
+- react-textarea-autosize": "^8.3.4",
+- react-toastify": "^9.0.5",
+- react-uuid": "^1.0.2",
+- rehype-katex": "^6.0.2",
+- rehype-raw": "^6.1.1",
+- remark-gfm": "^3.0.1",
+- remark-math": "^5.1.1",
+- remark-rehype": "^10.1.0",
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-tabs": "^5.1.0",
     "react-textarea-autosize": "^8.3.4",
+    "react-toastify": "^9.0.5",
     "react-uuid": "^1.0.2",
     "rehype-katex": "^6.0.2",
     "rehype-raw": "^6.1.1",

diff --git a/src/components/Body.jsx b/src/components/Body.jsx
@@ -10,6 +10,8 @@ export default function Body({ onAdd, onUpdate, onDelete, active, split, read })
   const [ status, isStatus ] = useState(false)
   const [ modal, isModal ] = useState(false)
   const [ input, isInput ] = useState(false)
+  const [ info, setInfo ] = useState('')
+  const [ notif, isNotif ] = useState(false)
 
   function onEdit(field, value) {
     onUpdate({
@@ -27,6 +29,14 @@ export default function Body({ onAdd, onUpdate, onDelete, active, split, read })
     })
   }
 
+  const Notification = () => {
+    return (
+      <div className="body__notif">
+        <div className="body__notif-text">{info}</div>
+      </div>
+    )
+  }
+
   const Modal = () => {
     async function handleImage(e) {
       const file = e.target.files[0]
@@ -37,14 +47,18 @@ export default function Body({ onAdd, onUpdate, onDelete, active, split, read })
       data.append('cloud_name', 'artezi0')
 
       if(file.size > 5000000) {
-        alert('File too big')
+        alert('File is too big')
       }
       if(file.size < 5000000) {
+        isNotif(true)
+        setInfo('Uploading...')        
         let resp = await fetch('https://api.cloudinary.com/v1_1/artezi0/image/upload', {
           method: 'POST',
           body: data
         })
 
+        setInfo('Image uploaded')  
+        setTimeout(function() { isNotif(false) }, 3000)
         let res = await resp.json() 
         let img = res.url
         onUpdate({
@@ -225,6 +239,7 @@ export default function Body({ onAdd, onUpdate, onDelete, active, split, read })
       {!active && <Warn />}
       {active &&
         <>
+          {notif && <Notification />}
           <div className="body__header">
             {active.cover.isCover && <Cover />}
             <div className="body__header-info">

diff --git a/src/styles/body.scss b/src/styles/body.scss
@@ -10,6 +10,23 @@
         width: 0;
     }
 
+    &__notif {
+        z-index: 10;
+        bottom: 3em;
+        left: 50%;
+        position: fixed;
+        padding: .4em 1em;
+        transform: translateX(-50%);
+        background: #202020;
+        color: $main_light;
+        border-radius: 4px;
+
+        &-text {
+            font-size: 14px;
+            font-weight: 500;
+        }
+    }
+
     &__msg {
         width: 100%;
         height: 100%;
@@ -222,17 +239,16 @@
                 bottom: 20px;
                 right: 20px;
 
-                button, label {
+                button {
                     height: 100%;
                     padding: 0 .5em;
                     font-weight: 500;
                     font-size: 13px;
                     color: $text_innactive;
-                    transition: .3s;
+                }
 
-                    &:hover {
-                        color: $text_active;
-                    }
+                &:hover {
+                    background: $main_mid;
                 }
             }
 
@@ -243,9 +259,7 @@
                 transform: translate(-50%, -50%);
                 position: absolute;
                 width: 100%;
-            }
-
-
+            }            
         }
 
         &-info {
@@ -307,7 +321,7 @@
                 display: flex;
                 align-items: center;
                 gap: .5em;
-                padding: .1em .4em;
+                padding: .2em .4em;
                 height: fit-content;
                 color: inherit;
                 font-weight: 600;