chore: update left nav icons

src/routes/chat/ChannelChat/LoadMore.js

@@ -1,8 +1,9 @@
-// import { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import styled from "styled-components";
 import { Waveform } from "@uiball/loaders";
 
 const Styled = styled.div`
+  margin-top: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -10,35 +11,35 @@ const Styled = styled.div`
   padding: 30px 0;
   /* background-color: #eee; */
 `;
-export default function LoadMore() {
-  // const ref = useRef(undefined);
-  // useEffect(() => {
-  //   const observer = new IntersectionObserver(
-  //     (entries) => {
-  //       entries.forEach((entry) => {
-  //         const intersecting = entry.isIntersecting;
-  //         //   const currEle = entry.target;
-  //         if (intersecting && loadMore) {
-  //           // load more
-  //           console.log("inview");
-  //           loadMore();
-  //         }
-  //       });
-  //     },
-  //     { threshold: 0 }
-  //   );
-  //   const currEle = ref?.current;
-  //   if (currEle) {
-  //     observer.observe(ref.current);
-  //   }
-  //   return () => {
-  //     if (currEle) {
-  //       observer.unobserve(currEle);
-  //     }
-  //   };
-  // }, [ref]);
+export default function LoadMore({ pullDown = null }) {
+  const ref = useRef(undefined);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const intersecting = entry.isIntersecting;
+          //   const currEle = entry.target;
+          if (intersecting && pullDown) {
+            // load more
+            console.log("inview");
+            pullDown();
+          }
+        });
+      },
+      { threshold: 0 }
+    );
+    const currEle = ref?.current;
+    if (currEle) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (currEle) {
+        observer.unobserve(currEle);
+      }
+    };
+  }, [ref, pullDown]);
   return (
-    <Styled>
+    <Styled ref={ref}>
       <Waveform
         className="loading"
         size={24}

src/routes/home/index.js

@@ -76,7 +76,7 @@ export default function HomePage() {
             </NavLink>
             <NavLink className="link" to={"/favs"}>
               <Tooltip tip="Favorites">
-                <FavIcon className="fav" />
+                <FavIcon />
               </Tooltip>
             </NavLink>
             <NavLink className="link" to={"/files"}>
@@ -85,7 +85,7 @@ export default function HomePage() {
               </Tooltip>
             </NavLink>
           </nav>
-          <div className="divider"></div>
+          {/* <div className="divider"></div> */}
           <Menu />
         </div>
         <div className="col right">

src/routes/home/styled.js

@@ -32,27 +32,25 @@ const StyledWrapper = styled.div`
       display: flex;
       flex-direction: column;
       gap: 4px;
-      padding: 24px 8px 10px 8px;
+      padding: 24px 12px;
       .link {
         display: flex;
         align-items: center;
         gap: 10px;
         text-decoration: none;
-        padding: 8px;
+        padding: 8px 12px;
         font-weight: 600;
         font-size: 14px;
         line-height: 20px;
         color: #4b5563;
         border-radius: 8px;
-        svg.fav path {
-          fill: #344054;
-        }
         &:hover {
           background-color: rgba(0, 0, 0, 0.08);
         }
         &.active {
+          background-color: #55c7ec;
           svg path {
-            fill: #55c7ec;
+            fill: #fff;
           }
         }
       }