From 27ddf1c54ee8677d1a77fd26a30b25df7ec13161 Mon Sep 17 00:00:00 2001
From: Daniel <daniel31x13@gmail.com>
Date: Thu, 23 Jun 2022 08:28:55 +0430
Subject: [PATCH] UI improvements.

---
 src/componets/SideBar.js | 18 +++++++++---------
 src/styles/SideBar.css   | 10 +++++++++-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/componets/SideBar.js b/src/componets/SideBar.js
index cb6bcc5c..4e3a3a19 100644
--- a/src/componets/SideBar.js
+++ b/src/componets/SideBar.js
@@ -40,26 +40,26 @@ const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => {
       className="sidebar"
     >
       <SidebarHeader>
-        <h1>LinkWarden</h1>
+        <h3>LinkWarden</h3>
       </SidebarHeader>
       <SidebarContent className="sidebar-content">
         <Menu iconShape="circle">
           <MenuItem icon={<h2 className="sidebar-icon">&#xf015;</h2>}>
             <Link to="/">
-              <h3 className="menu-item">All</h3>
+              <div className="menu-item">All</div>
             </Link>
           </MenuItem>
 
           <SubMenu
-            icon={<h2 className="sidebar-icon">&#xf02c;</h2>}
+            icon={<h2 className="sidebar-icon">&#xf5fd;</h2>}
             suffix={<span className="badge">{sortedTags.length}</span>}
-            title={<h3 className="menu-item">Lists</h3>}
+            title={<div className="menu-item">Lists</div>}
           >
             {sortedLists.map((e, i) => {
               const path = `/lists/${e}`;
               return (
-                <MenuItem prefix={"#"} key={i}>
-                  <Link to={path}>{e}</Link>
+                <MenuItem prefix={<div className="sidebar-item-prefix">&#xf07b;</div>} key={i}>
+                  <Link className="sidebar-entity" to={path}>{e}</Link>
                 </MenuItem>
               );
             })}
@@ -68,13 +68,13 @@ const SideBar = ({ tags, lists, handleToggleSidebar, toggle }) => {
           <SubMenu
             icon={<h2 className="sidebar-icon">&#xf02c;</h2>}
             suffix={<span className="badge">{sortedTags.length}</span>}
-            title={<h3 className="menu-item">Tags</h3>}
+            title={<div className="menu-item">Tags</div>}
           >
             {sortedTags.map((e, i) => {
               const path = `/tags/${e}`;
               return (
-                <MenuItem prefix={"#"} key={i}>
-                  <Link to={path}>{e}</Link>
+                <MenuItem prefix={<div className="sidebar-item-prefix">&#x23;</div>} key={i}>
+                  <Link className="sidebar-entity" to={path}>{e}</Link>
                 </MenuItem>
               );
             })}
diff --git a/src/styles/SideBar.css b/src/styles/SideBar.css
index 5e9dd4d7..f5e01c34 100644
--- a/src/styles/SideBar.css
+++ b/src/styles/SideBar.css
@@ -3,7 +3,7 @@
   position: fixed;
 }
 
-.sidebar h1 {
+.sidebar h3 {
   text-align: center;
 }
 
@@ -47,3 +47,11 @@
 .pro-inner-item {
   margin-bottom: 10px;
 }
+
+.sidebar-entity {
+  font-size: 1.2rem;
+}
+
+.sidebar-item-prefix {
+  font-family: "Font Awesome 5 Free";
+}
\ No newline at end of file