l-min-components 1.0.705 → 1.0.708

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

@@ -1,10 +1,9 @@
 import styled from "styled-components";
 import { FaArrowRight } from "react-icons/fa";
-import BannerImg from "../assets/Vector19.png"
+import BannerImg from "../assets/Vector19.png";
 import InstructorBanner from "../assets/newLanguage.png";
 import UpgradeIcon from "../assets/Feature.png";
 
-
 export const InstructorContainer = styled.div`
   background: #fff;
   max-width: 232px;
@@ -15,11 +14,30 @@ export const InstructorContainer = styled.div`
   padding: 10px 0px;
   border-radius: 30px;
 
-  .library_img{
+  .library_img {
     padding: 10px;
     margin-top: 20px;
   }
 
+  /* GRACE PERIOD AND DEACTIVATED */
+
+  &.grace_period {
+    border-radius: 30.913px;
+    border: 0.773px solid var(--Neutral-20, #dfe5e5);
+    background: var(--Neutral-20, #dfe5e5);
+
+    > div {
+      border-radius: 30.913px;
+      border: 0.773px solid var(--Neutral-20, #dfe5e5);
+      background: var(--Neutral-20, #dfe5e5);
+
+      > button {
+        border-radius: 12px;
+        background: var(--Neutral-50, #949999);
+        box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
+      }
+    }
+  }
 `;
 
 export const Container = styled.div`
@@ -30,12 +48,11 @@ export const Container = styled.div`
   text-align: center;
   flex-direction: column;
   padding: 10px;
-  border-radius: 30px; 
+  border-radius: 30px;
 
-  &.user_banner{
+  &.user_banner {
     background-color: #fff;
   }
-
 `;
 
 export const BannerWrapper = styled.div`
@@ -43,8 +60,8 @@ export const BannerWrapper = styled.div`
   max-width: 232px;
   padding: 15px 16px 21px;
   overflow: hidden;
- border-radius: 30px;
-  background: #FFF;
+  border-radius: 30px;
+  background: #fff;
   display: flex;
   flex-direction: column;
   /* justify-content: center; */
@@ -55,13 +72,13 @@ export const BannerWrapper = styled.div`
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: contain;
-  border:  none;
+  border: none;
   margin-bottom: 20px;
   width: 100%;
 
-  .head_instructor{
+  .head_instructor {
     width: 100%;
-    h3{
+    h3 {
       color: var(--Neutral-90, #313333);
       font-family: Nunito;
       font-size: 13.911px;
@@ -70,13 +87,13 @@ export const BannerWrapper = styled.div`
       line-height: 15.457px; /* 111.111% */
       letter-spacing: 0.278px;
 
-      &.personal_head{
+      &.personal_head {
         text-align: left;
       }
     }
   }
 
-  .head_enterprise{
+  .head_enterprise {
     text-align: left;
     color: var(--Neutral-90, #313333);
     font-family: Nunito;
@@ -86,7 +103,7 @@ export const BannerWrapper = styled.div`
     line-height: 15.457px; /* 111.111% */
     letter-spacing: 0.278px;
 
-    h3{
+    h3 {
       color: var(--Neutral-90, #313333);
       font-family: Nunito;
       font-size: 13.911px;
@@ -97,12 +114,12 @@ export const BannerWrapper = styled.div`
     }
   }
 
-  .head{
+  .head {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
 
-    h3{
+    h3 {
       color: var(--neutral-70, #636666);
       font-family: Nunito;
       font-size: 16px;
@@ -112,7 +129,7 @@ export const BannerWrapper = styled.div`
       letter-spacing: 0.32px;
       margin-right: 10px;
     }
-    p{
+    p {
       color: var(--neutral-50, #949999);
       font-family: Nunito;
       font-size: 12px;
@@ -122,7 +139,6 @@ export const BannerWrapper = styled.div`
       letter-spacing: 0.24px;
     }
   }
-
 `;
 
 export const BannerTitle = styled.h1`
@@ -130,14 +146,13 @@ export const BannerTitle = styled.h1`
   margin: 0;
   font-weight: 800;
   line-height: 42px;
-  color: #00C2C2;
-
+  color: #00c2c2;
 `;
 
 export const BannerSubtitle = styled.p`
   font-size: 18px;
   margin: 29px 0;
-  color: #00C2C2;
+  color: #00c2c2;
   font-weight: 600;
 `;
 
@@ -146,9 +161,9 @@ export const BannerImage = styled.img`
   max-width: 800px;
   margin-bottom: -15px;
   margin-top: -10px;
-  opacity: 2; 
-   display: block;
-   opacity: 1.0;
+  opacity: 2;
+  display: block;
+  opacity: 1;
 `;
 
 export const BannerCTA = styled.button`
@@ -162,7 +177,7 @@ export const BannerCTA = styled.button`
   align-items: center;
   transition: all 0.2s ease-in-out;
   margin: auto 0 10px;
-  opacity: 1.0;
+  opacity: 1;
 
   &:hover {
     background-color: #0062cc;
@@ -182,103 +197,119 @@ export const AbsoluteSVG = styled.svg`
   height: auto;
 `;
 
-
 export const Upgrade = styled.div`
-padding: 10px;
-margin-top: 20px;
-
-.container{
-  /* background-color: #fff; */
-  border-radius: 23.185px; 
-  background: var(--Neutral-10, #F5F7F7);
-  width: 100%;
-   max-width: 232px;
-  padding: 10px 0px;
- /* border-radius: 30px; */
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 20px;
-
- img{
-   object-fit: cover;
-    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;
+  padding: 10px;
+  margin-top: 20px;
 
-  p{
-    color: var(--Neutral-90, #313333);
-    text-align: center;
-    font-family: Nunito;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
+  .container {
+    /* background-color: #fff; */
+    border-radius: 23.185px;
+    background: var(--Neutral-10, #f5f7f7);
     width: 100%;
+    max-width: 232px;
+    padding: 10px 0px;
+    /* border-radius: 30px; */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+
+    img {
+      object-fit: cover;
+      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;
+      font-family: Nunito;
+      font-size: 11.592px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+      letter-spacing: 0.773px;
+      width: 70%;
+      text-align: center;
+      margin-top: 0px;
 
+      span {
+        color: var(--primary-color-main, #febf10);
+        font-family: Nunito;
+        font-size: 11.592px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        letter-spacing: 0.773px;
+      }
+    }
   }
- }
 
- .reminder{
-  color: var(--Neutral-70, #636666);
-  text-align: center;
-  font-family: Nunito;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  width: 100%;
- }
+  &.deactivated {
+    .container {
+      border-radius: 23.185px;
+      background: var(--Neutral-30, #c6cccc);
 
- p{
-  color: var(--neutral-80, #4A4D4D);
-  text-align: center;
-  font-family: Nunito;
-  font-size: 11.592px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
-  letter-spacing: 0.773px;
-  width: 70%;
-  text-align: center;
-  margin-top: 0px;
+      .upgrade_text {
+        border-radius: 23.185px;
+        background: var(--Neutral-30, #c6cccc);
+      }
 
-  span{
-    color: var(--primary-color-main, #FEBF10);
-    font-family: Nunito;
-    font-size: 11.592px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    letter-spacing: 0.773px;
+      > button {
+        border-radius: 12px;
+        background: var(--Neutral-50, #949999);
+        box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
+      }
+    }
   }
- }
-}
 `;
 
 export const Users = styled.div`
   border-radius: 20px;
-  background: #F5F7F7;
+  background: #f5f7f7;
   padding: 20px;
   width: 100%;
 
-  .top{
+  .top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
 
-    h4{
+    h4 {
       color: var(--neutral-70, #636666);
       font-size: 14px;
       font-style: normal;
@@ -286,8 +317,8 @@ export const Users = styled.div`
       line-height: 40px; /* 285.714% */
       letter-spacing: 0.28px;
     }
-    p{
-      color: var(--secondary-color-main, #00C2C2);
+    p {
+      color: var(--secondary-color-main, #00c2c2);
       font-family: Nunito;
       font-size: 14px;
       font-style: normal;
@@ -296,61 +327,57 @@ export const Users = styled.div`
     }
   }
 
-  .table{
+  .table {
     display: flex;
     flex-direction: column;
 
-    .user{
+    .user {
       display: flex;
       /* align-items: center; */
       margin-top: 10px;
       justify-content: space-between;
-      img{
+      img {
         margin-right: 10px;
       }
 
-      .text{
+      .text {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         justify-content: start;
         margin-right: 10px;
-       
-
-        h3{
-        color: var(--neutral-90, #313333);
-        font-size: 13px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: normal;
-        letter-spacing: 0.28px;
-      }
 
-      P{
-        color: var(--neutral-90, #313333);
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: normal;
-        letter-spacing: 0.24px;
-      }
+        h3 {
+          color: var(--neutral-90, #313333);
+          font-size: 13px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: normal;
+          letter-spacing: 0.28px;
+        }
+
+        P {
+          color: var(--neutral-90, #313333);
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0.24px;
+        }
       }
-
-      
     }
   }
-
 `;
 
 export const UploadProgressContainer = styled.div`
   border-radius: 30px;
-  background: var(--white, #FFF);
+  background: var(--white, #fff);
   padding: 10px;
   width: 100%;
   margin-bottom: 20px;
-  .upload_icon{
+  .upload_icon {
     margin-bottom: 10px;
-    p{
+    p {
       color: var(--neutral-70, #636666);
       font-size: 16px;
       font-style: normal;
@@ -359,19 +386,18 @@ export const UploadProgressContainer = styled.div`
       letter-spacing: 0.32px;
     }
 
-    img{
+    img {
       width: 69px;
-      height: 53px; 
+      height: 53px;
     }
   }
-  
-  .progress{
 
-    .text{
+  .progress {
+    .text {
       display: flex;
       justify-content: space-between;
 
-      h5{
+      h5 {
         color: var(--neutral-70, #636666);
         font-family: Nunito;
         font-size: 12px;
@@ -380,7 +406,7 @@ export const UploadProgressContainer = styled.div`
         line-height: 40px; /* 333.333% */
         letter-spacing: 0.24px;
       }
-      p{
+      p {
         color: var(--neutral-70, #636666);
         font-family: Nunito;
         font-size: 12px;
@@ -391,12 +417,11 @@ export const UploadProgressContainer = styled.div`
       }
     }
   }
-
-`
+`;
 
 export const NewLanguage = styled.div`
   background-image: url(${InstructorBanner});
-  background-size: cover; 
+  background-size: cover;
   background-repeat: no-repeat;
   margin-top: 10px;
   width: 100%;
@@ -407,38 +432,36 @@ export const NewLanguage = styled.div`
   gap: 60px;
   padding: 10px;
   margin-bottom: 10px;
-  border-radius: 18.548px; 
-  
-  .top_section{
+  border-radius: 18.548px;
+
+  .top_section {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    
 
-    .lession_cont{
+    .lession_cont {
       display: flex;
       align-items: center;
       border-radius: 6.183px;
       background: rgba(12, 13, 13, 0.1);
       padding: 3px;
 
-      p{
-        color: var(--white, #FFF);
+      p {
+        color: var(--white, #fff);
         font-family: Nunito;
         font-size: 10.82px;
         font-style: normal;
         font-weight: 700;
         line-height: 17.002px; /* 157.143% */
         letter-spacing: 0.216px;
-        
       }
 
-      svg{
-        margin-right: 4px;;
+      svg {
+        margin-right: 4px;
       }
     }
 
-    .flag_cont{
+    .flag_cont {
       border-radius: 6.183px;
       background: rgba(12, 13, 13, 0.1);
       padding: 3px;
@@ -448,12 +471,12 @@ export const NewLanguage = styled.div`
     }
   }
 
-  .buttom_section{
+  .buttom_section {
     display: flex;
     justify-content: start;
 
-    p{
-      color: var(--white, #FFF); 
+    p {
+      color: var(--white, #fff);
       font-family: Nunito;
       font-size: 14.911px;
       font-style: normal;
@@ -463,7 +486,7 @@ export const NewLanguage = styled.div`
     }
   }
 
-  &.courses_personal{
+  &.courses_personal {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -473,125 +496,120 @@ export const NewLanguage = styled.div`
     /* height: 140px; */
     /* width: 90%; */
 
-    h3{
-      color: var(--white, #FFF);
+    h3 {
+      color: var(--white, #fff);
       font-family: Nunito;
       font-size: 20.313px;
       font-style: normal;
       font-weight: 700;
       line-height: 16.313px; /* 100% */
       letter-spacing: 0.326px;
-       text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     }
-    .line{
+    .line {
       display: flex;
       align-items: center;
       width: 90%;
 
-      span{
-       color: var(--neutral-80, #fff);
-          text-align: center;
-          font-family: Nunito;
-          font-size: 13px;
-          font-style: normal;
-          font-weight: 700;
-          line-height: 24px; /* 150% */
-          letter-spacing: 0.32px;
-          margin-left: 10px;
-      }
-      
-
-    }
-  }
-`
-
-export const RecentAdded = styled.div`
-display: flex;
-flex-direction: column;
-padding: 10px 20px;
-margin-top: -30px;
-
-&.personal_added{
-  margin-bottom: 30px;
-}
-&.courses{
-  margin-top: 30px;
-}
-&.personal_courses{
-  margin-top: 5px;
-  margin-bottom: 20px;
-}
-    .top_area{
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 10px;
-
-      h5{
-        color: var(--Neutral-90, #313333);
+      span {
+        color: var(--neutral-80, #fff);
+        text-align: center;
         font-family: Nunito;
-        font-size: 13.911px;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 15.457px; /* 111.111% */
-        letter-spacing: 0.278px;
-        /* cursor: pointer; */
-      }
-
-      p{
-        color: var(--Primary-color-main, #FEBF10);
-        font-family: Nunito;
-        font-size: 12px;
+        font-size: 13px;
         font-style: normal;
         font-weight: 700;
-        line-height: 15.457px; /* 128.804% */
-        letter-spacing: 0.24px;
-        cursor: pointer;
+        line-height: 24px; /* 150% */
+        letter-spacing: 0.32px;
+        margin-left: 10px;
       }
     }
-    .users_list {
+  }
+`;
+
+export const RecentAdded = styled.div`
   display: flex;
-  gap: 12px;
-}
+  flex-direction: column;
+  padding: 10px 20px;
+  margin-top: -30px;
 
-.course_list{
-  display: grid;
-  justify-content: center;
-  align-items: center;
+  &.personal_added {
+    margin-bottom: 30px;
+  }
+  &.courses {
+    margin-top: 30px;
+  }
+  &.personal_courses {
+    margin-top: 5px;
+    margin-bottom: 20px;
+  }
+  .top_area {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
 
-  .course{
+    h5 {
+      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;
+      /* cursor: pointer; */
+    }
 
+    p {
+      color: var(--Primary-color-main, #febf10);
+      font-family: Nunito;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 15.457px; /* 128.804% */
+      letter-spacing: 0.24px;
+      cursor: pointer;
+    }
+  }
+  .users_list {
+    display: flex;
+    gap: 12px;
   }
-}
 
-.user {
-  position: relative; /* Make the parent container relative */
-  width: 40px;
-  height: 40px;
-}
+  .course_list {
+    display: grid;
+    justify-content: center;
+    align-items: center;
 
-.user::before {
-  content: "";
-  position: absolute;
-  width: 8px;
-  height: 8px; 
-  background-color: #30D468;
-  border-radius: 50%; 
-  bottom: 0;
-  right: 0;
-}
+    .course {
+    }
+  }
 
-.user:nth-child(2)::before {
-  background-color: #F39B33;
-}
+  .user {
+    position: relative; /* Make the parent container relative */
+    width: 40px;
+    height: 40px;
+  }
 
-.user:nth-child(3)::before {
-  background-color: #30D468; 
-}
+  .user::before {
+    content: "";
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background-color: #30d468;
+    border-radius: 50%;
+    bottom: 0;
+    right: 0;
+  }
 
-.user:nth-child(4)::before {
-  background-color: #C6CCCC;
-}
+  .user:nth-child(2)::before {
+    background-color: #f39b33;
+  }
 
+  .user:nth-child(3)::before {
+    background-color: #30d468;
+  }
 
-`;
+  .user:nth-child(4)::before {
+    background-color: #c6cccc;
+  }
+`;