l-min-components 1.0.262 → 1.0.266

package/package.json

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

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

@@ -26,6 +26,9 @@ export const CenterLayout = styled.div`
   /* max-width: 900px; */
   margin: ${({ isOpen }) =>
     isOpen ? "0px 252px 0 336px" : "0px 252px 0 145px"};
+  @media screen and (max-width: 1023px) {
+    margin-right: 0;
+  }
   overflow-y: scroll;
   transition: all 0.3s;
   scrollbar-width: thin;
@@ -53,6 +56,9 @@ export const RightLayout = styled.div`
   max-height: 609px;
   height: 609px;
   right: 20px;
+  @media screen and (max-width: 1023px) {
+    display: none;
+  }
   > div {
     width: 100%;
   }

package/src/components/header/account-dropdown.jsx

@@ -35,8 +35,15 @@ const AccountDropdown = (props) => {
             ? ".localhost"
             : ".learngual.com"
         }; path=/; expires=${date.toUTCString()};`;
+      props?.setGeneralData((generalData) => ({
+        ...generalData,
+        accounts: props?.userAccountsDetail?.data,
+        user: props?.userDetails?.data,
+        selectedAccount: props?.selectedAccount,
+      }));
     }
   }, [props?.selectedAccount]);
+  console.log(props?.selectedAccount, "selected");
   return (
     <>
       <AccountDropdownLayout>
@@ -55,7 +62,8 @@ const AccountDropdown = (props) => {
                 props?.activeAccountName}
             </h1>
             <h2 style={{ textTransform: "capitalize" }}>
-              {props?.selectedAccount?.type || props.activeAccountType}{" "}
+              {props?.selectedAccount?.type?.toLowerCase() ||
+                props.activeAccountType}{" "}
             </h2>
           </div>
         </AccountDropdownHeader>
@@ -94,10 +102,12 @@ const AccountDropdown = (props) => {
           )} */}
           {props?.developerAccountData.length > 0 && (
             <div>
-              <h3>Developer account</h3>
+              <h3 style={{ marginBottom: 10 }}>Developer account</h3>
               {props?.developerAccountData?.map((developerItem, idx) => (
                 <div
-                  className="account-info"
+                  className={`account-info ${
+                    developerItem === props?.selectedAccount ? "activated" : ""
+                  }`}
                   onClick={() => {
                     props?.setSelectedAccount(developerItem);
 
@@ -134,7 +144,9 @@ const AccountDropdown = (props) => {
               <h3>Instructor account</h3>
               {props?.instructorAccountData?.map((instructorItem, idx) => (
                 <div
-                  className="account-info"
+                  className={`account-info ${
+                    instructorItem === props?.selectedAccount ? "activated" : ""
+                  }`}
                   onClick={() => {
                     props?.setSelectedAccount(instructorItem);
                     if (window.location.port) {
@@ -167,7 +179,9 @@ const AccountDropdown = (props) => {
               <h3>Enterprise account</h3>
               {props?.enterpriseAccountData?.map((enterpriseItem, idx) => (
                 <div
-                  className="account-info"
+                  className={`account-info ${
+                    enterpriseItem === props?.selectedAccount ? "activated" : ""
+                  }`}
                   onClick={() => {
                     props?.setSelectedAccount(enterpriseItem);
                     if (window.location.port) {

package/src/components/header/index.jsx

@@ -22,7 +22,7 @@ import {
 import useHeader from "./getHeaderDetails";
 import { OutletContext } from "..";
 import { useLocation } from "react-router-dom";
-import usFlag from "../../assets/images/18165.jpg";
+import usFlag from "../../assets/images/usFlag.png";
 /**
  * @param {{
  *  type: string,
@@ -61,6 +61,7 @@ const HeaderComponent = (props) => {
         ...generalData,
         accounts: userAccountsDetail?.data,
         user: userDetails?.data,
+        selectedAccount,
       }));
       const cookies = document.cookie;
       const cookieArray = cookies.split(";");
@@ -198,6 +199,7 @@ const HeaderComponent = (props) => {
               window.location.href =
                 "https://developer-staging-01.learngual.com/settings/";
             }}
+            style={{ cursor: "pointer" }}
           >
             <SettingIcon /> Settings
           </a>
@@ -307,6 +309,9 @@ const HeaderComponent = (props) => {
           setInstructorAccountData={setInstructorAccountData}
           enterpriseAccountData={enterpriseAccountData}
           setEnterpriseAccountData={setEnterpriseAccountData}
+          setGeneralData={setGeneralData}
+          userAccountsDetail={userAccountsDetail}
+          userDetails={userDetails}
         />
       )}
     </Navbar>

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

@@ -16,6 +16,14 @@ export const NavGroup = styled.div`
   width: 44%;
   display: flex;
   justify-content: end;
+  align-items: center;
+  @media screen and (max-width: 1530px) {
+    width: fit-content;
+    margin-left: auto;
+  }
+  @media screen and (max-width: 1023px) {
+    display: none;
+  }
   .language_dropdown {
     display: flex;
     align-items: center;
@@ -68,6 +76,9 @@ export const Nav = styled.ul`
   margin: 0 10px;
   padding: 0 5px;
   width: 57%;
+  @media screen and (max-width: 1530px) {
+    width: 40%;
+  }
   & li {
     display: flex;
     align-items: center;
@@ -118,6 +129,14 @@ export const SearchInputGroup = styled.div`
   padding: 9px;
   margin: 0 15px;
   position: relative;
+  @media screen and (max-width: 1530px) {
+    width: 200px;
+    padding: 9px;
+    height: fit-content;
+    input {
+      width: 100%;
+    }
+  }
   &:focus {
     width: 130px;
   }
@@ -191,6 +210,9 @@ export const UserProfile = styled.div`
     color: rgba(49, 51, 51, 1);
     font-size: 16px;
     font-weight: 700;
+    @media screen and (max-width: 1530px) {
+      font-size: 12px;
+    }
   }
 
   & h6 {
@@ -270,7 +292,7 @@ export const AccountDropdownLayout = styled.div`
   background-color: #ffffff;
   font-family: "Nunito";
   width: 286px;
-  min-height: 300px;
+  max-height: 530px;
   box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.08);
   border-radius: 30px;
   display: flex;
@@ -370,6 +392,9 @@ export const AccountDropdownBody = styled.div`
       }
     }
   }
+  & .activated {
+    background-color: rgba(239, 248, 248, 1);
+  }
 
   & .account-details {
     margin-left: 10px;

package/src/components/header/login-header.jsx

@@ -5,7 +5,7 @@ import { Navbar2, NavGroup2, Nav2, CountryFlagGroup2 } from "./index.styled";
 import { ArrowDownIcon } from "./assets/svg/arrow-down";
 import ButtonComponent from "../button";
 import { useLocation, useNavigate } from "react-router-dom";
-import usFlag from "../../assets/images/18165.jpg";
+import usFlag from "../../assets/images/usFlag.png";
 
 /**
  * @param {{

package/src/components/sideBar/sideMenu/index.jsx

@@ -33,8 +33,28 @@ const SideMenu = ({
 
   const renderNavigationItem = (route, index) => {
     const { icon, text, notifications, path } = route;
-    const active = window.location.pathname === route.path;
-    console.log(active);
+    const handlePathCheck = () => {
+      let statusText;
+      console.log(window.location.pathname, "pathname");
+      if (
+        (window.location.pathname.includes("api") && path === "/") ||
+        (window.location.pathname === "/" && path === "/")
+      ) {
+        return (statusText = true);
+      }
+      if (
+        window.location.pathname.includes("documentation") &&
+        path === "/documentation"
+      ) {
+        return (statusText = true);
+      }
+      if (window.location.pathname.includes("report") && path === "/report") {
+        return (statusText = true);
+      } else {
+        return (statusText = false);
+      }
+    };
+    const active = handlePathCheck();
 
     return (
       <NavigationItemContainer

package/src/components/sideBar/userCard/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import {
   UserCardContainer,
@@ -10,15 +10,41 @@ import {
 import useHeader from "../../header/getHeaderDetails";
 import Loader from "../../loader";
 import avatar from "../../../assets/images/avatar.png";
+import { OutletContext } from "../../AppMainLayout";
 
 const UserCard = ({ user, isOpen }) => {
   const { handleGetUserDetails, userDetails } = useHeader();
+  const [organizationName, setOrganizationName] = useState();
+  const { generalData } = useContext(OutletContext);
   useEffect(() => {
     handleGetUserDetails();
-  }, []);
+    if (generalData?.accounts) {
+      const cookies = document.cookie;
+      const cookieArray = cookies.split(";");
+      let activeDeveloperAccount;
+      for (let i = 0; i < cookieArray.length; i++) {
+        const cookie = cookieArray[i].trim();
+        if (cookie.startsWith("activeDeveloperAccount=")) {
+          activeDeveloperAccount = cookie.substring(
+            "activeDeveloperAccount=".length,
+            cookie.length
+          );
+          break;
+        }
+      }
+
+      generalData?.accounts?.results?.map((account, idx) => {
+        if (account?.id === activeDeveloperAccount) {
+          return setOrganizationName(account?.metadata?.organization_name);
+        }
+      });
+    }
+  }, [generalData]);
+  console.log(generalData, "data");
+
   return (
     <UserCardContainer isOpen={isOpen}>
-      {userDetails?.loading ? (
+      {userDetails?.loading && !organizationName ? (
         <Loader zoom={0.3} />
       ) : (
         <>
@@ -27,12 +53,14 @@ const UserCard = ({ user, isOpen }) => {
             isOpen={isOpen}
           />
           <UserDetail isOpen={isOpen}>
-            <UserName>
-              {userDetails?.data?.first_name +
-                " " +
-                userDetails?.data?.last_name}
-            </UserName>
-            <Handle>{`@ ${userDetails?.data?.username}`}</Handle>
+            <UserName>Hello</UserName>
+            <Handle
+              style={{
+                textTransform: "capitalize",
+                fontWeight: 700,
+                fontSize: 15,
+              }}
+            >{`${organizationName}.`}</Handle>
           </UserDetail>
         </>
       )}