Finalized filters & Tags + UI changes

src/componets/AddItem.js

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { nanoid } from 'nanoid'
-import '../styles/Modal.css';
+import '../styles/AddItem.css';
 import config from '../config.json';
 import TagSelection from './TagSelection';
 
-const AddModal = ({onExit, reFetch}) => {
+const AddItem = ({onExit, reFetch, tags}) => {
   const [name, setName] = useState('');
   const [link, setLink] = useState('');
   const [tag, setTag] = useState([]);
@@ -17,9 +17,9 @@ const AddModal = ({onExit, reFetch}) => {
     setLink(e.target.value);
   }
 
-  function SetTag(e) {
-    setTag([e.target.value]);
-    setTag(e.target.value.split(/(\s+)/).filter( e => e.trim().length > 0).map(e => e.toLowerCase()))
+  function SetTags(value) {
+    setTag(value);
+    setTag(value.map(e => e.value.toLowerCase()));
   }
 
   async function submitBookmark() {
@@ -71,29 +71,27 @@ const AddModal = ({onExit, reFetch}) => {
   }
 
   function abort(e) {
-    if (e.target.className === "overlay" || e.target.className === "cancel-btn") {
+    if (e.target.className === "add-overlay") {
       onExit();
     }
   }
 
   return (
-    <div className='overlay' onClick={abort}>
+    <>
+      <div className='add-overlay' onClick={abort}></div>
       <div className='box'>
-        <div className='modal-content'>
-          <h2>New Bookmark</h2>
+        <div className='AddItem-content'>
           <h3>Name:</h3>
-          <input onChange={SetName} className="modal-input" type="search" placeholder="e.g. Example Tutorial"/>
+          <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
           <h3>Link:</h3>
-          <input onChange={SetLink} className="modal-input" type="search" placeholder="e.g. https://example.com/"/>
+          <input onChange={SetLink} className="AddItem-input" type="search" placeholder="e.g. https://example.com/"/>
           <h3>Tags:</h3>
-          <TagSelection />
-          {/* <input onChange={SetTag} className="modal-input" type="search" placeholder="e.g. Tutorials (Seperate with spaces)"/> */}
+          <TagSelection setTags={SetTags} tags={tags} />
           <button onClick={submitBookmark} className="upload-btn">Upload &#xf093;</button>
-          <button className="cancel-btn">Cancel</button>
         </div>
       </div>
-    </div>
+    </>
   )
 }
 
-export default AddModal
+export default AddItem

src/componets/Filters.js

@@ -0,0 +1,22 @@
+import '../styles/Filters.css'
+
+const Filters = ({nameChecked, handleNameCheckbox, descriptionChecked, handleDescriptionCheckbox, tagsChecked, handleTagsCheckbox, onExit}) => {
+    function abort(e) {
+        if (e.target.className === "filter-overlay") {
+            onExit();
+        }
+    }
+
+  return (
+    <>
+        <div className='filter-overlay' onClick={abort}></div>
+        <div className='filter'>
+            <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={tagsChecked} onChange={handleTagsCheckbox} />Tags</label>
+        </div>
+    </>
+  )
+}
+
+export default Filters

src/componets/TagSelection.js

@@ -8,12 +8,6 @@ const options = [
 ];
 
 const customStyles = {
-  container: (provided) => ({
-    ...provided,
-    marginLeft: '20%',
-    marginRight: '20%',
-  }),
-
   placeholder: (provided) => ({
     ...provided,
     color: '#a9a9a9',
@@ -23,15 +17,14 @@ const customStyles = {
     ...provided,
     display: 'none',
   }),
-  
+
   menu: (provided) => ({
     ...provided,
     padding: '5px',
-    borderRadius: '10px',
     opacity: '90%',
     color: 'gray',
     background: '#273949',
-    boxShadow: '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',
+    boxShadow: 'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px',
   }),
 
   input: (provided) => ({
@@ -39,25 +32,25 @@ const customStyles = {
     color: 'white',
 }),
 
-  control: (provided) => ({
+  control: (provided, state) => ({
     ...provided,
     background: '#273949',
     border: 'none',
-    borderRadius: '10px',
-    boxShadow: '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',
+    boxShadow: state.isFocused ? 'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px' : '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',
   }),
 }
 
-export default function TagSelection() {
-  const [selectedOption, setSelectedOption] = useState(null);
+export default function TagSelection({setTags, tags}) {
+  const data = tags().map((e) => {
+      return { value: e, label: e }
+  })
 
   return (
     <CreatableSelect
         styles={customStyles}
         isMulti
-        defaultValue={selectedOption}
-        onChange={setSelectedOption}
-        options={options}
+        onChange={setTags}
+        options={data}
     />
   );
 }