l-min-components 1.0.311 → 1.0.315

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, createContext, useRef, useContext } from "react";
+import React, {
+  useState,
+  useEffect,
+  createContext,
+  useRef,
+  useContext,
+} from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import {
   Layout,
@@ -23,6 +29,10 @@ const AppMainLayout = () => {
   const [rightComponent, setRightComponent] = useState();
   const [generalData, setGeneralData] = useState({});
   const [coming, setComing] = useState();
+  const [hasLayoutBackgroundImage, setHasLayoutBackgroundImage] =
+    useState(false);
+  const [sideMenuLayout, setSideMenuLayout] = useState(true);
+
   useEffect(() => {
     if (window.location.host.includes("coming")) {
       setComing(true);
@@ -33,21 +43,37 @@ const AppMainLayout = () => {
 
   return (
     <OutletContext.Provider
-      value={{ setRightComponent, setRightLayout, generalData, setGeneralData, coming }}
+      value={{
+        setRightComponent,
+        setRightLayout,
+        generalData,
+        setGeneralData,
+        coming,
+        hasLayoutBackgroundImage,
+        setHasLayoutBackgroundImage,
+        setSideMenuLayout,
+      }}
     >
-      <Layout coming={coming}>
+      <Layout
+        coming={coming}
+        hasLayoutBackgroundImage={hasLayoutBackgroundImage}
+      >
         <HeaderComponent />
         <MainLayout coming={coming}>
           <LeftLayout>
             <SideBar routes={leftNavMenu} />
             {!coming && (
-              <SideMenu
-                user={user}
-                routes={sideMenuOptions}
-                userType={"developer"}
-                isOpen={isOpen}
-                setIsOpen={setIsOpen}
-              />
+              <>
+                {sideMenuLayout && (
+                  <SideMenu
+                    user={user}
+                    routes={sideMenuOptions}
+                    userType={"developer"}
+                    isOpen={isOpen}
+                    setIsOpen={setIsOpen}
+                  />
+                )}
+              </>
             )}
           </LeftLayout>
           <CenterLayout isOpen={isOpen}>

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

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

package/src/components/messageAddon/messages/index.jsx

@@ -3,12 +3,12 @@ import React, { createContext } from "react";
 import MessagesContext, { useMessagesContext } from "../hooks/messagesContext";
 import Messages from "./messages";
 
-const MessagesAddon = () => {
+const MessagesAddon = ({ close }) => {
   const messagesContextData = useMessagesContext();
 
   return (
     <MessagesContext.Provider value={messagesContextData}>
-      <Messages />
+      <Messages close={close} />
     </MessagesContext.Provider>
   );
 };

package/src/components/messageAddon/messages/index.styled.js

@@ -10,8 +10,8 @@ export const MessagesWrapper = styled.div`
   background-color: rgba(0, 194, 194, 1);
 
   .message_by_wrapper {
-    border-top-left-radius: 30px;
-    border-top-right-radius: 30px;
+    border-radius: ${({ isFullHeight }) =>
+      isFullHeight ? "30px 30px 0 0" : "30px"};
     display: flex;
     align-items: center;
     background-color: rgba(0, 194, 194, 1);
@@ -51,6 +51,8 @@ export const MessagesContainer = styled.div`
   overflow-y: auto;
   background-color: #ffffff;
   border-radius: 30px;
+  height: ${({ isFullHeight }) => (isFullHeight ? "" : "0px")};
+
   h1 {
     margin-top: 0px;
     margin-bottom: 20px;
@@ -854,7 +856,7 @@ export const TextMessagePanel = styled.div`
     border-radius: 15px;
     /* overflow-x: hidden; */
     &.text-mode {
-      padding: 16px 0;
+      padding: 3px 0;
     }
     svg {
       cursor: pointer;
@@ -863,7 +865,7 @@ export const TextMessagePanel = styled.div`
     .icon-box {
       display: flex;
       align-items: center;
-      padding: 0 27px;
+      padding: 0 5px 0 10px;
       gap: 25px;
       span {
         display: flex;

package/src/components/messageAddon/messages/messages.jsx

@@ -32,7 +32,7 @@ import { BsFunnel } from "react-icons/bs";
 import { BsChevronDown } from "react-icons/bs";
 import { MdOutlineClose } from "react-icons/md";
 
-const Messages = (props) => {
+const Messages = ({ close }) => {
   const [showEmoji, setShowEmoji] = useState(false);
   const [chatOptions, setChatOptions] = useState(false);
   const [modalIsOpen, setIsOpen] = useState(false);
@@ -62,6 +62,7 @@ const Messages = (props) => {
   const [roomID, setRoomID] = useState("");
   const [userID, setUserID] = useState("");
   const [userChatList, setUserChatList] = useState([]);
+  const [isFullHeight, setIsFullHeight] = useState(true);
 
   const {
     handleRoomMessage,
@@ -248,15 +249,15 @@ const Messages = (props) => {
           <p className="mbw_name"> Message By Julius </p>
 
           <div className="icon-box">
-            <span>
+            <span onClick={() => setIsFullHeight(!isFullHeight)}>
               <BsChevronDown />
             </span>
-            <span>
+            <span onClick={close}>
               <MdOutlineClose />
             </span>
           </div>
         </div>
-        <MessagesContainer>
+        <MessagesContainer isFullHeight={isFullHeight}>
           <CardContainer>
             <>
               <ChatHeader