some visual changes + bugfix

webmarker/src/componets/AddModal.js

@@ -19,7 +19,19 @@ const AddModal = ({onExit}) => {
   }
 
   async function submitBookmark() {
-    if(name != '' && link != '' && tag != '') {
+    function isValidHttpUrl(string) {
+      let url;
+      
+      try {
+        url = new URL(string);
+      } catch (_) {
+        return false;  
+      }
+    
+      return url.protocol === "http:" || url.protocol === "https:";
+    }
+
+    if(name != '' && isValidHttpUrl(link) && tag != '') {
       fetch("/post", {
         
         // Adding method type
@@ -43,7 +55,7 @@ const AddModal = ({onExit}) => {
     }
 
     else {
-      alert('Please fill all fields...');
+      alert('Please fill all fields and make sure url is valid.\n\n(i.e. starts with http/https)');
     }
   }
 

webmarker/src/componets/EditModal.js

@@ -1,9 +0,0 @@
-import React from 'react';
-
-const EditModal = ({id}) => {
-  return (
-    <div>{id}</div>
-  )
-}
-
-export default EditModal

webmarker/src/componets/List.js

@@ -26,7 +26,7 @@ const List = ({data}) => {
     <table className="table">
         <thead>
             <tr>
-                <th>#</th>
+                <th className='number'>#</th>
                 <th>Name</th>
                 <th>Title</th>
                 <th>Link</th>
@@ -38,12 +38,12 @@ const List = ({data}) => {
             try {
                 const url = new URL(e.link)
                 return <tr key={i}>
-                    <td>{i + 1}</td>
+                    <td className='number'>{i + 1}</td>
                     <td>{e.name}</td>
                     <td>{e.title}</td>
                     <td><a href={e.link}>{url.hostname}</a></td>
                     <td>{e.tag}</td>
-                    <td className="delete" onClick={() => deleteEntity(e._id)}><div>X</div></td>
+                    <td className="delete" onClick={() => deleteEntity(e._id)}><div>x</div></td>
                 </tr>
             } catch (e) {
                 console.log(e)

webmarker/src/styles/List.css

@@ -2,11 +2,13 @@
   width: 100%;
   text-align: left;
   padding-top: 20px;
+  border-spacing: 10px 10px;
 }
 
 .table td {
   font-size: 1.3rem;
-  padding: 5px;
+  padding: 10px;
+  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;
 }
 
 .table th {
@@ -16,13 +18,9 @@
 
 .table tbody tr:nth-of-type(2n-1) {
   background-color:#273949;
-}
 
-.table tbody td {
-  border-radius: 10px;
 }
 
-
 .table a {
   text-decoration: none;
   color: rgb(194, 193, 193);
@@ -34,7 +32,11 @@
 }
 
 .delete {
-  background-color: red;
+  background-color: rgb(255, 123, 123);
   color: white;
   cursor: pointer;
-}
+}
+
+.number {
+  text-align: center;
+}