From 9fddd7ab5b32fa8fad93ec8861063b4fc9cd75c4 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Mon, 6 Jun 2022 09:51:21 +0430
Subject: [PATCH] Design improvement.

---
 api/server.js             |  1 -
 src/componets/AddItem.js  |  4 ++--
 src/componets/EditItem.js |  6 +++---
 src/modules/send.js       |  7 +++----
 src/styles/App.css        |  2 +-
 src/styles/List.css       |  7 ++++++-
 src/styles/SendItem.css   | 13 ++++++++++++-
 7 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/api/server.js b/api/server.js
index 0de7171..dd1630e 100644
--- a/api/server.js
+++ b/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;
 
diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js
index 7e576f7..fc22d1a 100644
--- a/src/componets/AddItem.js
+++ b/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>
diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js
index 7a33c82..12a0728 100644
--- a/src/componets/EditItem.js
+++ b/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>
diff --git a/src/modules/send.js b/src/modules/send.js
index 54ec0d7..ee822df 100644
--- a/src/modules/send.js
+++ b/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 === '') {
-      onExit()
-      SetLoader(false)
-    } else {
+    } else if(!isValidHttpUrl(link) && link !== '') {
       SetLoader(false)
       alert('Please make sure the link is valid.\n\n(i.e. starts with "http"/"https")');
+    } else {
+      SetLoader(false)
     }
   }
 
diff --git a/src/styles/App.css b/src/styles/App.css
index 91c1952..581c090 100644
--- a/src/styles/App.css
+++ b/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{
diff --git a/src/styles/List.css b/src/styles/List.css
index df7be41..a83526b 100644
--- a/src/styles/List.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/src/styles/SendItem.css b/src/styles/SendItem.css
index 94aa190..b27a20f 100644
--- a/src/styles/SendItem.css
+++ b/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;
 }
\ No newline at end of file