UI improvements.

src/componets/AddItem.js

@@ -36,8 +36,8 @@ const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => {
     <>
       <div className="add-overlay" onClick={abort}></div>
       <div className="send-box">
-        <fieldset className="box">
-          <legend>New bookmark</legend>
+        <div className="box">
+          <h2>New bookmark</h2>
           <div className="AddItem-content">
             <h3>
               <span style={{ color: "red" }}>* </span>Link:
@@ -65,7 +65,7 @@ const AddItem = ({ onExit, reFetch, tags, SetLoader, lightMode }) => {
               Add &#xf067;
             </button>
           </div>
-        </fieldset>
+        </div>
       </div>
     </>
   );

src/componets/EditItem.js

@@ -49,8 +49,8 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
     <>
       <div className="add-overlay" onClick={abort}></div>
       <div className="send-box">
-        <fieldset className="box">
-          <legend>Edit bookmark</legend>
+        <div className="box">
+          <h2>Edit bookmark</h2>
           <button className="delete" onClick={deleteItem}>
             &#xf2ed;
           </button>
@@ -93,7 +93,7 @@ const EditItem = ({ tags, item, onExit, SetLoader, reFetch, lightMode }) => {
               Update &#xf303;
             </button>
           </div>
-        </fieldset>
+        </div>
       </div>
     </>
   );

src/componets/Filters.js

@@ -32,12 +32,12 @@ const Filters = ({
     <>
       <div className="filter-overlay" onClick={abort}></div>
       <div className="filter-box">
-        <fieldset className="filter">
-          <legend>Filter search</legend>
+        <div className="filter">
+          <h2>Filter search</h2>
 
           <div className="filter-groups">
             <div className="section">
-              <h4>Sort by</h4>
+              <h3>Sort by</h3>
               <label>
                 <input
                   name="sort"
@@ -101,7 +101,7 @@ const Filters = ({
             </div>
 
             <div className="section">
-              <h4>Include/Exclude</h4>
+              <h3>Include/Exclude</h3>
               <label>
                 <input
                   type="checkbox"
@@ -132,7 +132,7 @@ const Filters = ({
           <button className="apply-btn" onClick={applyChanges}>
             Apply
           </button>
-        </fieldset>
+        </div>
       </div>
     </>
   );

src/styles/Filters.css

@@ -51,8 +51,14 @@
   z-index: 2;
 }
 
-.filter legend {
-  font-weight: 600;
+.filter h2 {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 400;
+}
+
+.filter h3 {
+  font-weight: 300;
 }
 
 .section > label {

src/styles/SendItem.css

@@ -42,8 +42,10 @@
   overflow-y: auto;
 }
 
-.box legend {
-  font-weight: 600;
+.box h2 {
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 400;
 }
 
 .box h3 {