UI Redesign!

src/componets/AddItem.js

@@ -3,6 +3,8 @@ import "../styles/SendItem.css";
 import TagSelection from "./TagSelection";
 import addItem from "../modules/send";
 import CollectionSelection from "./CollectionSelection";
+import { AwesomeButton } from "react-awesome-button";
+import "react-awesome-button/dist/themes/theme-blue.css";
 
 const AddItem = ({
   onExit,
@@ -81,9 +83,20 @@ const AddItem = ({
               collections={collections}
               lightMode={lightMode}
             />
-            <button onClick={newItem} className="send-btn">
-              Add &#xf067;
-            </button>
+            <div>
+              <AwesomeButton
+                size="medium"
+                action={newItem}
+                style={{
+                  marginTop: "20px",
+                  display: "block",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                }}
+              >
+                Add &#xf067;
+              </AwesomeButton>
+            </div>
           </div>
         </div>
       </div>

src/componets/CollectionSelection.js

@@ -33,7 +33,7 @@ export default function CollectionSelection({
       borderColor: "rgb(141, 141, 141)",
       opacity: "90%",
       color: "gray",
-      background: lightMode ? "lightyellow" : "#273949",
+      background: lightMode ? "#e0e0e0" : "#273949",
       boxShadow:
         "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
     }),
@@ -55,7 +55,7 @@ export default function CollectionSelection({
 
     control: (provided, state) => ({
       ...provided,
-      background: lightMode ? "lightyellow" : "#273949",
+      background: lightMode ? "#e0e0e0" : "#273949",
       border: "none",
       borderRadius: "0px",
       boxShadow: state.isFocused

src/componets/EditItem.js

@@ -4,6 +4,8 @@ import "../styles/SendItem.css";
 import TagSelection from "./TagSelection";
 import editItem from "../modules/send";
 import CollectionSelection from "./CollectionSelection";
+import { AwesomeButton } from "react-awesome-button";
+import "react-awesome-button/dist/themes/theme-blue.css";
 
 const EditItem = ({
   tags,
@@ -66,10 +68,15 @@ const EditItem = ({
       <div className="send-box">
         <div className="box">
           <div className="title-delete-group">
-          <h2 className="edit-title">Edit Link</h2>
-          <button className="delete" onClick={deleteItem}>
-            &#xf2ed;
-          </button>
+            <h2 className="edit-title">Edit Link</h2>
+            <AwesomeButton
+              className="delete"
+              size="icon"
+              action={deleteItem}
+              style={{ marginLeft: "10px" }}
+            >
+              &#xf2ed;
+            </AwesomeButton>
           </div>
           <div className="AddItem-content">
             <h3>
@@ -107,7 +114,7 @@ const EditItem = ({
               lightMode={lightMode}
             />
             <h3>
-             Collection: <span className="optional">(Optional)</span>
+              Collection: <span className="optional">(Optional)</span>
             </h3>
             <CollectionSelection
               setCollection={SetCollection}
@@ -115,9 +122,18 @@ const EditItem = ({
               collection={collection}
               lightMode={lightMode}
             />
-            <button onClick={EditItem} className="send-btn">
+            <AwesomeButton
+              size="medium"
+              action={EditItem}
+              style={{
+                marginTop: "20px",
+                display: "block",
+                marginLeft: "auto",
+                marginRight: "auto",
+              }}
+            >
               Update &#xf303;
-            </button>
+            </AwesomeButton>
           </div>
         </div>
       </div>

src/componets/Filters.js

@@ -1,5 +1,7 @@
 import "../styles/Filters.css";
 import { useState } from "react";
+import { AwesomeButton } from "react-awesome-button";
+import "react-awesome-button/dist/themes/theme-blue.css";
 
 const Filters = ({
   filterCheckbox,
@@ -41,7 +43,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '1'}
+                  checked={radio.toString() === "1"}
                   onChange={handleRadio}
                   type="radio"
                   value={1}
@@ -51,7 +53,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '2'}
+                  checked={radio.toString() === "2"}
                   onChange={handleRadio}
                   type="radio"
                   value={2}
@@ -61,7 +63,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '3'}
+                  checked={radio.toString() === "3"}
                   onChange={handleRadio}
                   type="radio"
                   value={3}
@@ -71,7 +73,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '4'}
+                  checked={radio.toString() === "4"}
                   onChange={handleRadio}
                   type="radio"
                   value={4}
@@ -81,7 +83,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '5'}
+                  checked={radio.toString() === "5"}
                   onChange={handleRadio}
                   type="radio"
                   value={5}
@@ -91,7 +93,7 @@ const Filters = ({
               <label>
                 <input
                   name="sort"
-                  checked={radio.toString() === '6'}
+                  checked={radio.toString() === "6"}
                   onChange={handleRadio}
                   type="radio"
                   value={6}
@@ -129,9 +131,18 @@ const Filters = ({
             </div>
           </div>
 
-          <button className="apply-btn" onClick={applyChanges}>
-            Apply
-          </button>
+          <AwesomeButton
+            size="medium"
+            action={applyChanges}
+            style={{
+              marginTop: "20px",
+              display: "block",
+              marginLeft: "auto",
+              marginRight: "auto",
+            }}
+          >
+            Apply &#xf00c;
+          </AwesomeButton>
         </div>
       </div>
     </>

src/componets/List.js

@@ -5,6 +5,10 @@ import EditItem from "./EditItem";
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import NoResults from "./NoResults";
+import {
+  AwesomeButton
+} from 'react-awesome-button';
+import 'react-awesome-button/dist/themes/theme-blue.css';
 
 const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode }) => {
   const [editBox, setEditBox] = useState(false),
@@ -62,7 +66,7 @@ const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode
             "https://www.google.com/s2/favicons?domain=" + url.hostname;
           return (
             <LazyLoad key={i} height={200} offset={200}>
-              <div className="list-row">
+              <div className="list-row neomorphisim">
                 <div className="img-content-grp">
                   <img alt="" src={favicon} />
                   <div className="list-entity-content">
@@ -101,9 +105,13 @@ const List = ({ SetPath, data, tags, collections, reFetch, SetLoader, lightMode
                 </div>
                 <div className="etc">
                   <ViewArchived className="view-archived" id={e._id} />
-                  <button className="btn edit-btn" onClick={() => edit(i)}>
+                  <AwesomeButton
+                    size="icon"
+                    action={() => edit(i)}
+                    style={{ margin: "20px 20px 20px 0px" }}
+                  >
                     &#xf303;
-                  </button>
+                  </AwesomeButton>
                 </div>
               </div>
             </LazyLoad>

src/componets/NoResults.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const NoResults = () => {
   return (
-    <div className="no-results">
+    <div className="no-results neomorphisim">
       <h1>¯\_(ツ)_/¯</h1>
       <p>Nothing found.</p>
     </div>

src/componets/TagSelection.js

@@ -33,7 +33,7 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
       borderColor: "rgb(141, 141, 141)",
       opacity: "90%",
       color: "gray",
-      background: lightMode ? "lightyellow" : "#273949",
+      background: lightMode ? "#e0e0e0" : "#273949",
       boxShadow:
         "rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
     }),
@@ -53,7 +53,7 @@ export default function TagSelection({ setTags, tags, tag = [], lightMode }) {
 
     control: (provided, state) => ({
       ...provided,
-      background: lightMode ? "lightyellow" : "#273949",
+      background: lightMode ? "#e0e0e0" : "#273949",
       border: "none",
       borderRadius: "0px",
       boxShadow: state.isFocused