From 662d2deaf27621efde3288b1c099e6a51046f15b Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Wed, 22 Jun 2022 11:25:23 +0430
Subject: [PATCH] UI improvements.

---
 src/componets/AddItem.js  |  6 +++---
 src/componets/EditItem.js |  6 +++---
 src/componets/Filters.js  | 10 +++++-----
 src/styles/Filters.css    | 10 ++++++++--
 src/styles/SendItem.css   |  6 ++++--
 5 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/componets/AddItem.js b/src/componets/AddItem.js
index 6ec4e22..24a489f 100644
--- a/src/componets/AddItem.js
+++ b/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>
     </>
   );
diff --git a/src/componets/EditItem.js b/src/componets/EditItem.js
index 38c35da..78c0a76 100644
--- a/src/componets/EditItem.js
+++ b/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>
     </>
   );
diff --git a/src/componets/Filters.js b/src/componets/Filters.js
index 3c63e78..cc74181 100644
--- a/src/componets/Filters.js
+++ b/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>
     </>
   );
diff --git a/src/styles/Filters.css b/src/styles/Filters.css
index abc43da..fb94dd6 100644
--- a/src/styles/Filters.css
+++ b/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 {
diff --git a/src/styles/SendItem.css b/src/styles/SendItem.css
index bcc6902..e9d4fd9 100644
--- a/src/styles/SendItem.css
+++ b/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 {