l-min-components 1.0.279 → 1.0.283

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.279",
+  "version": "1.0.283",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/AppMainLayout/index.jsx

@@ -16,7 +16,7 @@ import {
 import { leftNavMenu, user, sideMenuOptions } from "../../hooks/leftNavMenu";
 // import SideMenu from "../sideBar/sideMenu";
 
-const AppMainLayout = () => {
+const AppMainLayout = ({coming}) => {
   const [isOpen, setIsOpen] = useState(true);
   const location = useLocation();
   const [rightLayout, setRightLayout] = useState(true);
@@ -27,9 +27,9 @@ const AppMainLayout = () => {
     <OutletContext.Provider
       value={{ setRightComponent, setRightLayout, generalData, setGeneralData }}
     >
-      <Layout>
+      <Layout coming={coming}>
         <HeaderComponent />
-        <MainLayout>
+        <MainLayout coming={coming}>
           <LeftLayout>
             <SideBar routes={leftNavMenu} />
             {!window.location.host.includes("coming") && (

package/src/components/AppMainLayout/index.styled.js

@@ -1,14 +1,16 @@
 import styled from "styled-components";
+import Pattern from "../../assets/images/pattern.png";
 
 /* styles for main layout component */
 export const Layout = styled.div`
-  background-color: #e5e5e5;
+  background-color: ${({coming}) => coming ? "#FEBF10" : "#e5e5e5"};
+  background-image: ${({coming}) => coming ? `url(${Pattern})` : "none"};
   min-height: 100vh;
   width: 100%;
 `;
 
 export const MainLayout = styled.div`
-  background-color: #e5e5e5;
+  background-color: ${({coming}) => coming ? "none" : "#e5e5e5"};
   display: flex;
   justify-content: space-between;
   width: 100%;

package/src/components/header/index.jsx

@@ -183,7 +183,7 @@ const HeaderComponent = (props) => {
             <BookIcon /> Learning
           </a>
         </li>
-        {/* <li>
+        <li>
           <a href="#">
             <PeopleIcon /> Friends
           </a>
@@ -192,7 +192,7 @@ const HeaderComponent = (props) => {
           <a href="#">
             <MessageIcon /> Messages
           </a>
-        </li> */}
+        </li>
         <li>
           <a
             onClick={() => {
@@ -204,11 +204,11 @@ const HeaderComponent = (props) => {
             <SettingIcon /> Settings
           </a>
         </li>
-        {/* <li>
+        <li>
           <a href="#">
             <NotificationIcon /> Notifications
           </a>
-        </li> */}
+        </li>
       </Nav>
 
       <NavGroup

package/src/components/header/index.styled.js

@@ -103,15 +103,32 @@ export const Nav = styled.ul`
     text-decoration: none;
     display: flex;
     align-items: center;
-    font-size: 16px;
-    color: rgba(74, 77, 77, 1);
+    color: #4A4D4D;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal; 
+    position: relative;
+
+    
+    &:hover:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: -9px;
+      width: 40px;
+      height: 4px; 
+      background-color: rgba(0, 194, 194, 1);
+      transition: width 0.3s ease-in-out;
+    }
 
     & svg {
       margin-right: 12px;
     }
 
     &:hover {
-      color: rgba(0, 2, 2, 1);
+      color: rgba(0, 194, 194, 1);
+      // border-bottom: 2px solid rgba(0, 194, 194, 1);
       & svg path {
         stroke: rgba(0, 194, 194, 1);
       }