Added sort button

src/App.js

@@ -4,11 +4,13 @@ import List from './componets/List';
 import AddItem from './componets/AddItem';
 import config from './config.json';
 import Filters from './componets/Filters';
+import Sort from './componets/Sort';
 
 function App() {
   const [data, setData] = useState([]);
-  const [isAdding, setIsAdding] = useState(false);
+  const [newBox, setNewBox] = useState(false);
-  const [isFiltering, setIsFiltering] = useState(false);
+  const [filterBox, setFilterBox] = useState(false);
+  const [sortBox, setSortBox] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [numberOfResults, setNumberOfResults] = useState(0);
   const [nameChecked, setNameChecked] = useState(true);
@@ -28,11 +30,15 @@ function App() {
   }
 
   function exitAdding() {
-    setIsAdding(!isAdding);
+    setNewBox(!newBox);
   }
 
   function exitFilter() {
-    setIsFiltering(!isFiltering);
+    setFilterBox(!filterBox);
+  }
+
+  function exitSorting() {
+    setSortBox(!sortBox);
   }
 
   function search(e) {
@@ -78,8 +84,6 @@ function App() {
     return tags;
   }
 
-  
-
   useEffect(() => {
     fetchData();
   }, []);
@@ -92,13 +96,21 @@ function App() {
     <div className="App">
       <div className="head">
         <input className="search" type="search" placeholder="&#xf002; Search" onChange={search}/>
-        <button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
+        <button className="btn" onClick={() => setNewBox(true)}>&#xf067;</button>
       </div>
 
       <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'No bookmarks found.'}</p>
 
-      <button className='filter-button' onClick={() => setIsFiltering(true)}>&#xf0b0;</button>
+      <button className='btn' onClick={() => setFilterBox(true)}>&#xf0b0;</button>
-      {isFiltering ? <Filters 
+      <button className='btn' onClick={() => setSortBox(true)}>&#xf0dc;</button>
+      <List data={filteredData} reFetch={fetchData} />
+
+      {sortBox ? <Sort 
+        onExit={exitSorting} 
+        reFetch={fetchData}
+      /> : null}
+
+      {filterBox ? <Filters 
         nameChecked={nameChecked}
         handleNameCheckbox={handleNameCheckbox}
         descriptionChecked={descriptionChecked}
@@ -108,9 +120,11 @@ function App() {
         onExit={exitFilter}
        /> : null}
 
-      <List data={filteredData} reFetch={fetchData} />
+      {newBox ? <AddItem 
-
+        onExit={exitAdding} 
-      {isAdding ? <AddItem onExit={exitAdding} reFetch={fetchData} tags={concatTags} /> : null}
+        reFetch={fetchData} 
+        tags={concatTags} 
+      /> : null}
     </div>
   );
 }

src/componets/AddItem.js

@@ -79,7 +79,8 @@ const AddItem = ({onExit, reFetch, tags}) => {
   return (
     <>
       <div className='add-overlay' onClick={abort}></div>
-      <div className='box'>
+      <fieldset className='box'>
+        <legend >New Bookmark</legend>
         <div className='AddItem-content'>
           <h3>Name:</h3>
           <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
@@ -89,7 +90,7 @@ const AddItem = ({onExit, reFetch, tags}) => {
           <TagSelection setTags={SetTags} tags={tags} />
           <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
         </div>
-      </div>
+      </fieldset>
     </>
   )
 }

src/componets/Filters.js

@@ -10,11 +10,12 @@ const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDes
   return (
     <>  
         <div className='filter-overlay' onClick={abort}></div>
-        <div className='filter'>
+        <fieldset className='filter'>
+            <legend >Filter Results</legend>
             <label><input type="checkbox" checked={nameChecked} onChange={handleNameCheckbox} />Name</label>
-            <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Title/Description</label>
+            <label><input type="checkbox" checked={descriptionChecked} onChange={handleDescriptionCheckbox} />Title</label>
             <label><input type="checkbox" checked={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
-        </div>
+        </fieldset>
     </>
   )
 }

src/componets/Sort.js

@@ -0,0 +1,24 @@
+import '../styles/Sort.css'
+
+const Sort = ({ onExit }) => {
+    function abort(e) {
+        if (e.target.className === "sort-overlay") {
+            onExit();
+        }
+    }
+
+  return (
+    <>
+        <div className='sort-overlay' onClick={abort}></div>
+        <fieldset className='sort'>
+            <legend>Sort List</legend>
+            <label><input name="sort" type="radio" />Date</label>
+            <label><input name="sort" type="radio" />Name</label>
+            <label><input name="sort" type="radio" />Title</label>
+            <label><input name="sort" type="radio" />Tags</label>
+        </fieldset>
+    </>
+  )
+}
+
+export default Sort

src/styles/AddItem.css

@@ -1,4 +1,6 @@
 .add-overlay {
+    background-color: black;
+    opacity: 10%;
     position: fixed;
     top: 0;
     left: 0;
@@ -9,18 +11,23 @@
 .box {
     border: solid;
     border-width: 1px;
-    border-color: rgb(80, 80, 80);
+    border-color: rgb(141, 141, 141);
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
     position: absolute;
     z-index: 2;
-    top: 70px;
+    top: 63px;
     right: 20px;
     background-color: #1f2c38;
-    width: 40%;
+    width: 50%;
+    max-width: 500px;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
+.box legend {
+    font-weight: 600;
+}
+
 .box h3 {
     font-weight: 300;
 }

src/styles/App.css

@@ -22,20 +22,18 @@
   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;
 }
 
-.settings-btn:active, .add-btn:active {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-}
-
 .search:focus {
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }
 
-.add-btn {
+.btn {
   border-radius: 100%;
   margin: 20px 20px 0px auto;
   font-family: 'Font Awesome 5 Free';
+  width: 40px;
+  height: 40px;
   padding: 10px;
-  font-size: 1.5rem;
+  font-size: 1.1rem;
   cursor: pointer;
   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;
   color: #ffffffb6;
@@ -44,10 +42,14 @@
   transition: background-color 0.1s;
 }
 
-.add-btn:hover {
+.btn:hover {
   background-color: rgb(76, 117, 170);
 }
 
+.btn:active {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
 textarea:focus, input:focus{
   outline: none;
 }
@@ -56,24 +58,3 @@ textarea:focus, input:focus{
   margin: 20px 20px 0px 30px;
   display: inline-block;
 }
-
-.filter-button {
-  border-radius: 100%;
-  font-family: 'Font Awesome 5 Free';
-  padding: 10px;
-  font-size: 1rem;
-  cursor: pointer;
-  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;
-  color: #ffffffb6;
-  background-color:#273949;
-  border: none;
-  transition: background-color 0.1s;
-}
-
-.filter-button:active {
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-}
-
-.filter-button:hover {
-  background-color: rgb(76, 117, 170);
-}

src/styles/Filters.css

@@ -2,14 +2,14 @@
     border: solid;
     border-width: 1px;
     font-weight: 300;
-    border-color: rgb(80, 80, 80);
+    border-color: rgb(141, 141, 141);
     display: flex;
     flex-direction: column;
     box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
-    z-index: 2;
     background-color: #273949;
     padding: 5px;
-    left: 200px;
+    top: 120px;
+    left: 195px;
     position: absolute;
     margin-top: 4px;
     -moz-user-select: none;
@@ -17,11 +17,17 @@
     user-select: none;
 }
 
+.filter legend {
+    font-weight: 600;
+}
+
 .filter label {
     margin: 5px;
 }
 
 .filter-overlay {
+    background-color: black;
+    opacity: 10%;
     position: fixed;
     top: 0;
     left: 0;

src/styles/Sort.css

@@ -0,0 +1,36 @@
+.sort-overlay {
+    background-color: black;
+    opacity: 10%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+}
+
+.sort {
+    border: solid;
+    border-width: 1px;
+    font-weight: 300;
+    border-color: rgb(141, 141, 141);
+    display: flex;
+    flex-direction: column;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+    background-color: #273949;
+    padding: 5px;
+    top: 120px;
+    left: 250px;
+    position: absolute;
+    margin-top: 4px;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.sort legend {
+    font-weight: 600;
+}
+
+.sort label {
+    margin: 5px;
+}