Added 404 page + Improvements.

src/componets/AddItem.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import '../styles/AddItem.css';
+import '../styles/SendItem.css';
 import TagSelection from './TagSelection';
 import addItem from '../modules/send';
 
@@ -38,13 +38,13 @@ const AddItem = ({onExit, reFetch, tags, SetLoader}) => {
       <fieldset className='box'>
         <legend >New bookmark</legend>
         <div className='AddItem-content'>
+          <h3><span style={{color:"red"}}>* </span>Link:</h3>
+          <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Name:</h3>
           <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
-          <h3>Link:</h3>
-          <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Tags:</h3>
           <TagSelection setTags={SetTags} tags={tags} />
-          <button onClick={newItem} className="upload-btn">Upload &#xf093;</button>
+          <button onClick={newItem} className="send-btn">Add &#xf067;</button>
         </div>
       </fieldset>
     </>

src/componets/EditItem.js

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import deleteEntity from '../modules/deleteEntity';
-import '../styles/AddItem.css';
+import '../styles/SendItem.css';
 import TagSelection from './TagSelection';
 import editItem from '../modules/send';
 
@@ -49,7 +49,7 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch}) => {
           <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
           <h3>Tags:</h3>
           <TagSelection setTags={SetTags} tags={tags} tag={tag} />
-          <button onClick={EditItem} className="upload-btn">Update &#xf093;</button>
+          <button onClick={EditItem} className="send-btn">Update &#xf303;</button>
         </div>
       </fieldset>
     </>

src/modules/send.js

@@ -34,6 +34,9 @@ const addItem = async (name, link, tag, reFetch, onExit, SetLoader, method, id=n
       .then(() => {SetLoader(false)});
 
       onExit();
+    } else if(name === '' && link === '') {
+      onExit()
+      SetLoader(false)
     } else {
       SetLoader(false)
       alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")');

src/styles/SendItem.css

@@ -51,10 +51,10 @@
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
-.upload-btn {
+.send-btn {
     font-family: 'Font Awesome 5 Free';
-    font-size: 1.1rem;
-    padding: 5px;
+    font-size: 1.2rem;
+    padding: 10px;
     cursor: pointer;
     box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
     color: #ffffffb6;
@@ -67,11 +67,11 @@
     transition: background-color 0.1s;
 }
 
-.upload-btn:hover {
+.send-btn:hover {
     background-color: rgb(76, 117, 170);
 }
 
-.upload-btn:active {
+.send-btn:active {
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }