l-min-components 1.0.374 → 1.0.377

package/package.json

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

package/src/components/fileRightBar/enterpriseRightBar/index.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import {
+  BannerWrapper,
+  InstructorContainer,
+  NewLanguage,
+  RecentAdded,
+  Container,
+  Upgrade,
+  Users,
+  UploadProgressContainer
+} from "../styles";
+import Button from "../../button";
+import CircularProgressBar from "../components/progressBar";
+import UpgradeIcon from "../assets/Feature.png";
+import { UploadProgress } from "../assets/uploadProgressIcon";
+import ProgressBar from "../../progressBar";
+import UpgradeComponent from "./upgrade";
+import LessonIcon from "../assets/lession";
+import LessonFlag from "../assets/lessonflag";
+import Ellipse from "../assets/Ellipse.png";
+import Ellipse2 from "../assets/Ellipse2.png";
+import Ellipse3 from "../assets/Ellipse3.png";
+import Ellipse4 from "../assets/Ellipse4.png";
+import SliderIcon from "../assets/slider";
+
+/**
+ * @param {{
+*  CourseClick: function,
+*  UpgradeClick: function,
+* }} props - properties of graph Component
+*
+*/
+
+const EnterpriseRightBar = ({UpgradeClick, CourseClick}) => {
+
+  return (
+    <InstructorContainer>   
+    <BannerWrapper>
+      <div className="head_instructor head_enterprise">
+        <h3>Best Course</h3>
+      </div>
+      <NewLanguage>
+        <div className="top_section">
+          <div className="lession_cont">
+            <LessonIcon />
+            <p> 9 lessions</p>
+          </div>
+          <div className="flag_cont">
+            <LessonFlag />
+
+          </div>
+        </div>
+
+        <div className="buttom_section">
+          <p>French for Beginners</p>
+        </div>
+      </NewLanguage>
+      <SliderIcon />
+    </BannerWrapper>
+    <RecentAdded>
+      <div className="top_area">
+        <h5>Recently added</h5>
+        <p>See all</p>
+      </div>
+      <div className="users_list">
+      <div className="user">
+       <img src={Ellipse} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse2} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse3} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse4} alt="user" />
+      </div>
+      </div>
+      <Button
+        type="primary"
+        text="Create Course"
+        styles={{
+          marginTop: "29px",
+          fontSize: "16px",
+          width: "203px",
+          gap: "8px",
+          padding: "20px 6px", 
+          height: "40px",
+          boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)", 
+        }}
+        onClick={CourseClick}
+      />
+    </RecentAdded>
+    
+    <UpgradeComponent UpgradeClick={UpgradeClick} />
+    
+  </InstructorContainer>
+  );
+};
+
+export default EnterpriseRightBar;

package/src/components/fileRightBar/enterpriseRightBar/upgrade.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {
+  Upgrade,
+} from "../styles";
+import Button from "../../button";
+import UpgradeIcon from "../assets/Feature.png";
+import EnterpriseUpgrade from "../assets/enterpriseUpgrade.png"
+
+
+const UpgradeComponent = ({UpgradeClick}) => {
+
+  return (
+    
+    <Upgrade>
+      <div className="container">
+       <img src={EnterpriseUpgrade} alt="upgrad box" />
+       <div className="upgrade_text">
+          <p>You are running out of slot?</p>
+       </div>
+       <p className="reminder">
+         45 slots remaining out of 50 slots for bronze package
+       </p>
+       <Button
+        type="primary"
+        text="Upgrade"
+        styles={{
+          marginTop: "12px",
+          fontSize: "16px",
+          width: "171px",
+          height: "38.641px",
+          gap: "8px",
+          padding: "15.457px 30.913px",
+        }}
+        onClick={UpgradeClick}
+      />
+
+      </div>
+       
+    </Upgrade>
+  );
+};
+
+export default UpgradeComponent;

package/src/components/fileRightBar/styles/index.jsx

@@ -67,6 +67,27 @@ export const BannerWrapper = styled.div`
     }
   }
 
+  .head_enterprise{
+    text-align: left;
+    color: var(--Neutral-90, #313333);
+    font-family: Nunito;
+    font-size: 13.911px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 15.457px; /* 111.111% */
+    letter-spacing: 0.278px;
+
+    h3{
+      color: var(--Neutral-90, #313333);
+      font-family: Nunito;
+      font-size: 13.911px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 15.457px; /* 111.111% */
+      letter-spacing: 0.278px;
+    }
+  }
+
   .head{
     display: flex;
     align-items: center;
@@ -176,6 +197,40 @@ margin-top: 20px;
     margin-top: -27%;
  }
 
+ .upgrade_text{
+  background: rgba(0,194,194,0.1);
+  border-radius: 5px;
+  padding: 5px;
+  height: 32px; 
+  width: 100%; 
+  margin-bottom: 10px;
+  margin-top: -10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  p{
+    color: var(--Neutral-90, #313333);
+    text-align: center;
+    font-family: Nunito;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    width: 100%;
+
+  }
+ }
+
+ .reminder{
+  color: var(--Neutral-70, #636666);
+  text-align: center;
+  font-family: Nunito;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  width: 100%;
+ }
+
  p{
   color: var(--neutral-80, #4A4D4D);
   text-align: center;

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

@@ -9,6 +9,7 @@ export const MessagesWrapper = styled.div`
   right: 0;
   border-radius: 30px;
   background-color: rgba(0, 194, 194, 1);
+  z-index: 99;
 
   .message_by_wrapper {
     border-radius: ${({ isFullHeight }) =>