Bug fix + UI improvements.

src/componets/EditItem.js

@@ -64,10 +64,12 @@ const EditItem = ({
       <div className="add-overlay" onClick={abort}></div>
       <div className="send-box">
         <div className="box">
-          <h2>Edit bookmark</h2>
+          <div className="title-delete-group">
+          <h2 className="edit-title">Edit bookmark</h2>
           <button className="delete" onClick={deleteItem}>
             &#xf2ed;
           </button>
+          </div>
           <div className="AddItem-content">
             <h3>
               Link:{" "}

src/componets/SideBar.js

@@ -7,7 +7,8 @@ import {
   MenuItem,
   SubMenu,
 } from "react-pro-sidebar";
-import "react-pro-sidebar/dist/css/styles.css";
+// import "react-pro-sidebar/dist/css/styles.css";
+import "../styles/SideBar_S.scss";
 import "../styles/SideBar.css";
 import { Link } from "react-router-dom";
 
@@ -44,20 +45,23 @@ const SideBar = ({ tags, collections, handleToggleSidebar, toggle }) => {
       </SidebarHeader>
       <SidebarContent className="sidebar-content">
         <Menu iconShape="circle">
-          <MenuItem icon={<h2 className="sidebar-icon">&#xf015;</h2>}>
+          <MenuItem icon={<h2 className="sidebar-icon">&#xf49e;</h2>}>
             <Link to="/">
               <div className="menu-item">All</div>
             </Link>
           </MenuItem>
 
+          <MenuItem icon={<h2 className="sidebar-icon">&#xf01c;</h2>}>
+            <Link to="/collections/Unsorted">
+              <div className="menu-item">Unsorted</div>
+            </Link>
+          </MenuItem>
+
           <SubMenu
             icon={<h2 className="sidebar-icon">&#xf5fd;</h2>}
-            suffix={<span className="badge">{sortedCollections.length + 1}</span>}
+            suffix={<span className="badge">{sortedCollections.length}</span>}
             title={<div className="menu-item">Collections</div>}
           >
-            <MenuItem prefix={<div className="sidebar-item-prefix">&#xf07b;</div>}>
-              <Link className="sidebar-entity" to="/collections/Unsorted">Unsorted</Link>
-            </MenuItem>
             {sortedCollections.map((e, i) => {
               const path = `/collections/${e}`;
               return (

src/routes/Tags.js

@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import List from "../componets/List";
 
-const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
+const Tags = ({ data, tags, collections, SetLoader, lightMode, reFetch }) => {
   const { tagId } = useParams();
   const dataWithMatchingTag = data.filter((e) => {
     return e.tag.includes(tagId);
@@ -13,7 +13,7 @@ const Tags = ({ data, tags, lists, SetLoader, lightMode, reFetch }) => {
         lightMode={lightMode}
         data={dataWithMatchingTag}
         tags={tags}
-        lists={lists}
+        collections={collections}
         SetLoader={SetLoader}
         reFetch={reFetch}
       />

src/styles/List.css

@@ -172,9 +172,9 @@
 }
 
 .delete {
-  margin: 20px 20px 20px 0px;
-  background-color: #273949;
-  float: right;
+  margin-top: 20px;
+  margin-left: 10px;
+  display: inline;
   font-size: 1.1rem;
   width: 40px;
   height: 40px;
@@ -188,17 +188,13 @@
   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;
-  background-color: #273949;
+  background-color: rgba(255, 75, 75, 0.8);
+  color: white;
   border: none;
-  transition: background-color 0.1s;
+  transition: box-shadow 0.1s;
 }
 
 .delete:hover {
-  background-color: rgba(255, 75, 75, 0.8);
-  color: #d8d8d8;
-}
-
-.delete:active {
   box-shadow: 0px 0px 10px rgb(255, 83, 140);
 }
 
@@ -216,4 +212,12 @@
   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;
   margin-top: 10px;
+}
+
+.edit-title {
+  display: inline;
+}
+
+.title-delete-group {
+  text-align: center;
 }

src/styles/SideBar.css

@@ -17,18 +17,11 @@
   text-decoration: underline;
 }
 
-.pro-sidebar-layout {
-  background: #384952;
-  text-shadow: none;
-  color: white;
-}
-
 .badge {
   padding: 3px 10px;
   font-size: 0.8rem;
   letter-spacing: 1px;
   border-radius: 14px;
-  background-color: rgb(52, 121, 181);
 }
 
 .sidebar-icon {
@@ -55,3 +48,8 @@
 .sidebar-item-prefix {
   font-family: "Font Awesome 5 Free";
 }
+
+.pro-sidebar-layout * {
+  color: white;
+  text-shadow: none;
+}

src/styles/SideBar_S.scss

@@ -0,0 +1,4 @@
+$sidebar-bg-color: #373737;
+$submenu-bg-color: #373737;
+
+@import '~react-pro-sidebar/dist/scss/styles.scss';

src/styles/index.css

@@ -23,11 +23,6 @@ body {
   content: "";
 }
 
-.delete {
-  background-color: #1f2c38;
-  color: #ffffffb6;
-}
-
 .no-results {
   background-color: #1f2c38;
 }
@@ -111,11 +106,6 @@ body {
   color: gray;
 }
 
-.light .delete {
-  background-color: lightyellow;
-  color: rgb(176, 176, 176);
-}
-
 .light input {
   background-color: lightyellow;
   color: black;