Design improvement.

api/server.js

@@ -6,7 +6,6 @@ const config = require('../src/config.js');
 const getData = require('./modules/getData.js');
 const fs = require('fs');
 const fetch = require('cross-fetch');
-const { dirname } = require('path');
 
 const port = config.API.PORT;
 

src/componets/AddItem.js

@@ -40,9 +40,9 @@ const AddItem = ({onExit, reFetch, tags, SetLoader}) => {
         <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>
+          <h3>Name: <span className='optional'>(Optional)</span></h3>
           <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
-          <h3>Tags:</h3>
+          <h3>Tags: <span className='optional'>(Optional)</span></h3>
           <TagSelection setTags={SetTags} tags={tags} />
           <button onClick={newItem} className="send-btn">Add &#xf067;</button>
         </div>

src/componets/EditItem.js

@@ -43,11 +43,11 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch}) => {
         <button className="edit-btn delete" onClick={deleteItem}>&#xf2ed;</button>
         <div className='AddItem-content'>
         <h3>Link: <a target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
-        <h3>{item.title}</h3>
+        <h3 className='title'><b>{item.title}</b></h3>
         
-          <h3>Name:</h3>
+          <h3>Name: <span className='optional'>(Optional)</span></h3>
           <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
-          <h3>Tags:</h3>
+          <h3>Tags: <span className='optional'>(Optional)</span></h3>
           <TagSelection setTags={SetTags} tags={tags} tag={tag} />
           <button onClick={EditItem} className="send-btn">Update &#xf303;</button>
         </div>

src/modules/send.js

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

src/styles/App.css

@@ -48,7 +48,7 @@
 }
 
 .btn:active {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  box-shadow: 0px 0px 10px rgb(83, 143, 255);
 }
 
 textarea:focus, input:focus{

src/styles/List.css

@@ -87,7 +87,7 @@
 }
 
 .edit-btn:active {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+  box-shadow: 0px 0px 10px rgb(83, 143, 255);
 }
 
 .row-name {
@@ -123,6 +123,7 @@
 }
 
 .delete {
+  background-color:#273949;
   float: right;
   font-size: 1.1rem;
   width: 40px;
@@ -131,4 +132,8 @@
 
 .delete:hover {
   background-color: rgba(255, 65, 65, 0.8);
+}
+
+.delete:active {
+  box-shadow: 0px 0px 10px rgb(255, 83, 140);
 }

src/styles/SendItem.css

@@ -72,10 +72,21 @@
 }
 
 .send-btn:active {
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+    box-shadow: 0px 0px 10px rgb(83, 143, 255);
 }
 
 @keyframes fadein {
     from { opacity: 0%; }
     to   {  }
+}
+
+.optional {
+    color: gray;
+    font-size: 0.8em;
+    float: right;
+}
+
+.title {
+    color: darkgray;
+    font-size: 0.9em;
 }