Added Dark/Light mode feature.

src/componets/AddItem.js

@@ -3,7 +3,7 @@ import '../styles/SendItem.css';
 import TagSelection from './TagSelection';
 import addItem from '../modules/send';
 
-const AddItem = ({onExit, reFetch, tags, SetLoader}) => {
+const AddItem = ({onExit, reFetch, tags, SetLoader, lightMode}) => {
   const [name, setName] = useState('');
   const [link, setLink] = useState('');
   const [tag, setTag] = useState([]);
@@ -43,7 +43,7 @@ const AddItem = ({onExit, reFetch, tags, SetLoader}) => {
           <h3>Name: <span className='optional'>(Optional)</span></h3>
           <input onChange={SetName} className="AddItem-input" type="search" placeholder="e.g. Example Tutorial"/>
           <h3>Tags: <span className='optional'>(Optional)</span></h3>
-          <TagSelection setTags={SetTags} tags={tags} />
+          <TagSelection setTags={SetTags} tags={tags} lightMode={lightMode} />
           <button onClick={newItem} className="send-btn">Add &#xf067;</button>
         </div>
       </fieldset>

src/componets/EditItem.js

@@ -4,7 +4,7 @@ import '../styles/SendItem.css';
 import TagSelection from './TagSelection';
 import editItem from '../modules/send';
 
-const EditItem = ({tags, item, onExit, SetLoader, reFetch}) => {
+const EditItem = ({tags, item, onExit, SetLoader, reFetch, lightMode }) => {
   const [name, setName] = useState(item.name);
   const [tag, setTag] = useState(item.tag);
 
@@ -40,7 +40,7 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch}) => {
       <div className='add-overlay' onClick={abort}></div>
       <fieldset className='box'>
         <legend >Edit bookmark</legend>
-        <button className="edit-btn delete" onClick={deleteItem}>&#xf2ed;</button>
+        <button className="delete" onClick={deleteItem}>&#xf2ed;</button>
         <div className='AddItem-content'>
         <h3>Link: <a target="_blank" rel="noreferrer" href={item.link}>{url.hostname}</a></h3>
         <h3 className='title'><b>{item.title}</b></h3>
@@ -48,7 +48,7 @@ const EditItem = ({tags, item, onExit, SetLoader, reFetch}) => {
           <h3>Name: <span className='optional'>(Optional)</span></h3>
           <input onChange={SetName} className="AddItem-input" type="search" value={name} placeholder={"e.g. Example Tutorial"} />
           <h3>Tags: <span className='optional'>(Optional)</span></h3>
-          <TagSelection setTags={SetTags} tags={tags} tag={tag} />
+          <TagSelection setTags={SetTags} tags={tags} tag={tag} lightMode={lightMode} />
           <button onClick={EditItem} className="send-btn">Update &#xf303;</button>
         </div>
       </fieldset>

src/componets/List.js

@@ -4,7 +4,7 @@ import ViewArchived from './ViewArchived';
 import EditItem from './EditItem';
 import { useState } from 'react'
 
-const List = ({data, tags, reFetch, SetLoader}) => {
+const List = ({data, tags, reFetch, SetLoader, lightMode}) => {
     const [editBox, setEditBox] = useState(false)
     const [editIndex, setEditIndex] = useState(0)
 
@@ -42,7 +42,7 @@ const List = ({data, tags, reFetch, SetLoader}) => {
                             </div>
                             <div className='etc'>
                                 <ViewArchived className='view-archived' id={e._id} />
-                                <button className="edit-btn" onClick={() => edit(i)}>&#xf303;</button>
+                                <button className="edit-btn btn" onClick={() => edit(i)}>&#xf303;</button>
                             </div>
                         </div>
                     </LazyLoad>)
@@ -50,7 +50,7 @@ const List = ({data, tags, reFetch, SetLoader}) => {
                     console.log(e);
                 }
             })}
-            {editBox ? <EditItem tags={() => tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
+            {editBox ? <EditItem lightMode={lightMode} tags={() => tags} onExit={exitEditing} SetLoader={SetLoader} reFetch={reFetch} item={data[editIndex]} /> : null}
         </div>
     )
 }

src/componets/Loader.js

@@ -2,10 +2,10 @@ import '../styles/Loader.css';
 import { InfinitySpin } from  'react-loader-spinner'
 
 
-const Loader = () => {
+const Loader = ({ lightMode }) => {
   return (
     <div className='loader'>
-      <InfinitySpin color="white" />
+      <InfinitySpin color={lightMode ? "Black" : "White"} />
     </div>
   )
 }

src/componets/TagSelection.js

@@ -1,48 +1,49 @@
 import CreatableSelect from "react-select/creatable";
 
-const customStyles = {
-  placeholder: (provided) => ({
-    ...provided,
-    color: '#a9a9a9',
+// lightMode ? "Black" : "White"
+export default function TagSelection({setTags, tags, tag=[], lightMode}) {
+  const customStyles = {
+    placeholder: (provided) => ({
+      ...provided,
+      color: '#a9a9a9',
+    }),
+  
+    multiValueRemove: (provided) => ({
+      ...provided,
+      color: 'gray',
+    }),
+  
+    indicatorSeparator: (provided) => ({
+      ...provided,
+      display: 'none',
+    }),
+  
+    menu: (provided) => ({
+      ...provided,
+      border: 'solid',
+      borderWidth: '1px',
+      borderRadius: '0px',
+      borderColor: 'rgb(141, 141, 141)',
+      opacity: '90%',
+      color: 'gray',
+      background: lightMode ? "lightyellow" : "#273949",
+      boxShadow: 'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px',
+    }),
+  
+    input: (provided) => ({
+      ...provided,
+      color: lightMode ? "rgb(64, 64, 64)" : "white",
   }),
+  
+    control: (provided, state) => ({
+      ...provided,
+      background: lightMode ? "lightyellow" : "#273949",
+      border: 'none',
+      borderRadius: '0px',
+      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',
+    }),
+  }
 
-  multiValueRemove: (provided) => ({
-    ...provided,
-    color: 'gray',
-  }),
-
-  indicatorSeparator: (provided) => ({
-    ...provided,
-    display: 'none',
-  }),
-
-  menu: (provided) => ({
-    ...provided,
-    border: 'solid',
-    borderWidth: '1px',
-    borderRadius: '0px',
-    borderColor: 'rgb(141, 141, 141)',
-    opacity: '90%',
-    color: 'gray',
-    background: '#273949',
-    boxShadow: 'rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px',
-  }),
-
-  input: (provided) => ({
-    ...provided,
-    color: 'white',
-}),
-
-  control: (provided, state) => ({
-    ...provided,
-    background: '#273949',
-    border: 'none',
-    borderRadius: '0px',
-    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({setTags, tags, tag=[]}) {
   const data = tags().map((e) => {
       return { value: e, label: e }
   })