Small updates before merge

client/package.json

@@ -20,6 +20,7 @@
     "country-code-lookup": "^0.0.20",
     "dotenv": "^16.0.1",
     "formik": "^2.2.9",
+    "framer-motion": "^10.12.10",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "notistack": "^2.0.5",

client/src/components/NavBar/NavBar.styles.js

@@ -1,4 +1,5 @@
 // * Modules
+import { motion } from 'framer-motion'
 import styled from 'styled-components'
 
 export const IconWrapper = styled.div`
@@ -30,16 +31,17 @@ export const NavWrapper = styled.div`
 `
 
 export const NavMenu = styled.nav`
-  --menu-animation-time: 0.35s;
+  --menu-animation-time: 0.2s;
   pointer-events: all;
   width: 100%;
   height: 100%;
   max-width: ${(props) => (props.active ? '270px' : '88px')};
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: linear-gradient(90.45deg, #1a1c22 62.8%, #2f3239 209.77%);
-  transition: all var(--menu-animation-time) linear;
+  background: ${(props) =>
+    props.active ? 'linear-gradient(90.45deg, #1a1c22 62.8%, #2f3239 209.77%)' : '#1A1C22'};
+  transition: all var(--menu-animation-time) ease;
   padding: 0 16px;
   padding-top: 48px;
 `

client/src/components/NavBar/NotificationsContent/NotificationsContent.js

@@ -1,5 +1,5 @@
 // assets
-import { memo } from 'react'
+import { memo, useEffect } from 'react'
 
 import Notification from '../../../assets/Sidebar/Notification'
 import { IconWrapper, NavInteractBtn } from '../NavBar.styles'
@@ -29,10 +29,13 @@ const NotificationsContent = ({
         <p>Notifications</p>
         {!!unreadMessages.length && !notificationModal && (
           <>
-            <NotificationsCount active={!sidebar} top="6px" left="28px">
-              {unreadMessages.length}
-            </NotificationsCount>
-            <NotificationsCount active={sidebar} top="auto" right="16px">
+            <NotificationsCount
+              active={!sidebar}
+              top="6px"
+              left="28px"
+              animate={{ scale: [1, 1.5, 1] }}
+              key={unreadMessages.length}
+            >
               {unreadMessages.length}
             </NotificationsCount>
           </>

client/src/components/NavBar/NotificationsContent/NotificationsContent.styles.js

@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion'
 import styled from 'styled-components'
 
 import { IconWrapper } from '../NavBar.styles'
@@ -6,10 +7,10 @@ export const StyledNotificationsContent = styled.div`
   position: relative;
 `
 
-export const NotificationsCount = styled.div`
+export const NotificationsCount = styled(motion.div)`
   position: absolute;
-  transition: opacity var(--menu-animation-time);
-  opacity: ${(props) => (props.active ? 1 : 0)};
+  /* transition: opacity var(--menu-animation-time); */
+  /* opacity: ${(props) => (props.active ? 1 : 0)}; */
   pointer-events: ${(props) => (props.active ? 'all' : 'none')};
   top: ${(props) => props.top || 'auto'};
   right: ${(props) => props.right || 'auto'};
@@ -22,7 +23,7 @@ export const NotificationsCount = styled.div`
   padding: 1.5px 3.5px;
   background: #5bd424;
   border-radius: 50%;
-  font-family: Inter;
+  /* font-family: Inter; */
   font-weight: 500;
   font-size: 11px;
   line-height: 100%;

client/src/components/NavBar/NotificationsList/NotificationsList.js

@@ -7,6 +7,8 @@ import { StyledNotificationsList } from './NotificationsList.styles'
 const NotificationsList = ({ userNotifications, setUnreadIds, closeNotificationsModal }) => {
   const listRef = useRef(null)
 
+  userNotifications.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+
   useEffect(() => {
     const observer = new IntersectionObserver((entries, observer) => {
       entries.forEach((entry) => {

client/src/components/NavBar/NotificationsList/NotificationsList.styles.js

@@ -4,7 +4,23 @@ export const StyledNotificationsList = styled.ul`
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #2f3239;
-  overflow-y: auto;
   list-style: none;
   max-height: calc(100% - 62px);
+
+  overflow-y: scroll;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  ::-webkit-scrollbar {
+    /* WebKit */
+    transition: all 0.2s;
+    width: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #5d9d0b;
+    border-radius: 10px;
+  }
 `

client/src/components/NavBar/NotificationsModal/NotificationsModal.js

@@ -43,11 +43,33 @@ const NotificationsModal = ({ userNotifications, notificationModal, setNotificat
     }
   }
 
+  const variants = {
+    open: {
+      clipPath: 'inset(0% 0% 0% 0% round 10px)',
+      transition: {
+        type: 'spring',
+        bounce: 0,
+        duration: 0.3,
+      },
+    },
+    closed: {
+      clipPath: 'inset(10% 50% 90% 50% round 10px)',
+      transition: {
+        type: 'spring',
+        bounce: 0,
+        duration: 0.2,
+      },
+    },
+  }
+
   return (
     <StyledNotificationsModal
       ref={notificationModalRef}
       active={notificationModal}
       onClick={(e) => e.stopPropagation()}
+      animate={notificationModal ? 'open' : 'closed'}
+      variants={variants}
+      initial={false}
     >
       <NotificationsHeader>
         <MarkAllBtn onClick={markAllAsRead}>

client/src/components/NavBar/NotificationsModal/NotificationsModal.styles.js

@@ -1,10 +1,9 @@
+import { motion } from 'framer-motion'
 import styled from 'styled-components'
 
 import { IconWrapper } from '../NavBar.styles'
 
-export const StyledNotificationsModal = styled.div`
-  transition: opacity 0.3s;
-  opacity: ${(props) => (props.active ? 1 : 0)};
+export const StyledNotificationsModal = styled(motion.div)`
   pointer-events: ${(props) => (props.active ? 'all' : 'none')};
   position: absolute;
   left: calc(100% + 32px);