l-min-components 1.0.230 → 1.0.234

package/package.json

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

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

@@ -24,7 +24,7 @@ export const BannerWrapper = styled.div`
 `;
 
 export const BannerTitle = styled.h1`
-  font-size: 32px;
+  font-size: 30px;
   margin: 0;
   font-weight: 800;
   line-height: 42px;
@@ -42,8 +42,8 @@ export const BannerSubtitle = styled.p`
 export const BannerImage = styled.img`
   width: 100%;
   max-width: 800px;
-  margin-bottom: -5px;
-  margin-top: 22px;
+  margin-bottom: -15px;
+  margin-top: -10px;
   opacity: 2; 
    display: block;
    opacity: 1.0;
@@ -59,7 +59,7 @@ export const BannerCTA = styled.button`
   display: flex;
   align-items: center;
   transition: all 0.2s ease-in-out;
-  margin: auto 0 30px;
+  margin: auto 0 10px;
   opacity: 1.0;
 
   &:hover {

package/src/components/checkBoxes/checkbox/index.jsx

@@ -3,16 +3,16 @@ import { BsCheck } from "react-icons/bs";
 import { PropTypes } from 'prop-types';
 import { CheckboxControl, CheckboxInput, CheckboxLabel, CheckboxWrapper } from "./styles";
 
-
 const Checkbox = ({
   label,
   color,
   defaultValue,
   onChange,
   size,
+  checked,
   ...props
 }) => {
-  const [checked, setChecked] = useState(defaultValue);
+  // const [checked, setChecked] = useState(defaultValue);
 
   const handleChange = (event) => {
     const newValue = event.target.checked;
@@ -22,7 +22,8 @@ const Checkbox = ({
 
   return (
     <CheckboxWrapper {...props}>
-      <CheckboxInput checked={checked} onChange={handleChange} />
+      {/* <CheckboxInput checked={checked} onChange={handleChange} /> */}
+      <CheckboxInput checked={checked} onChange={onChange} />
       <CheckboxControl 
           checked={checked} 
           color={color}  

package/src/components/checkBoxes/checkbox/index2.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { BsCheck } from "react-icons/bs";
+import { PropTypes } from 'prop-types';
+import { CheckboxControl, CheckboxInput, CheckboxLabel, CheckboxWrapper } from "./styles";
+
+
+const Checkbox = ({
+  label,
+  color,
+  defaultValue,
+  onChange,
+  size,
+  ...props
+}) => {
+  const [checked, setChecked] = useState(defaultValue);
+
+  const handleChange = (event) => {
+    const newValue = event.target.checked;
+    setChecked(newValue);
+    onChange && onChange(newValue);
+  };
+
+  return (
+    <CheckboxWrapper {...props}>
+      <CheckboxInput checked={checked} onChange={handleChange} />
+      <CheckboxControl 
+          checked={checked} 
+          color={color}  
+          size={size}
+          >
+        <BsCheck />
+      </CheckboxControl>
+      <CheckboxLabel checked={checked} color={color}>
+        {label}
+      </CheckboxLabel>
+    </CheckboxWrapper>
+  );
+};
+
+Checkbox.propTypes = {
+  label: PropTypes.string,
+  color: PropTypes.string,
+  size: PropTypes.string,
+  onChange: PropTypes.func,
+  defaultValue: PropTypes.bool,
+
+};
+
+Checkbox.defaultProps = {
+  defaultValue: false,
+};
+
+export default Checkbox;

package/src/components/checkBoxes/checkboxGroup/index.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Checkbox from "../checkbox";
+import Checkbox from "../checkbox/index2";
 import { Container } from "./styles";
 
 const CheckboxGroup = ({ color, options, selectedValues, onChange, size, }) => {

package/src/components/datePicker/index.jsx

@@ -7,6 +7,7 @@ import { DatePickerWrapper, DateCont  } from "./style";
 
 const DatePickerCalender = ({
     borderColor,
+    opacity,
     ...props
 }) => {
     const [dateRange, setDateRange] = useState({
@@ -16,7 +17,7 @@ const DatePickerCalender = ({
 
     return(
         <DatePickerWrapper {...props}>
-           <DateCont className="datepicker__wrapper" borderColor={borderColor}>
+           <DateCont className="datepicker__wrapper" borderColor={borderColor} opacity={opacity} >
             <DatePicker
             selected={dateRange.endDate}
             endDate={dateRange.endDate}

package/src/components/datePicker/style.jsx

@@ -4,6 +4,7 @@ export const DatePickerWrapper = styled.div`
 `;
 
 export const DateCont = styled.div`
+
       display: flex;
       align-items: center;
       width: 120px;
@@ -27,6 +28,18 @@ export const DateCont = styled.div`
         border: none;
         
       }
+
+      .react-datepicker__input-container{
+        margin-left: 12px;
+        // margin-left: 50px;
+        opacity: ${(props) => (props.opacity ? props.opacity : 0.7)};
+        
+        input{
+          border: none;
+         width: 78px;
+        }
+      }
+
       .react-datepicker__current-month{
         display: flex;
         justify-content: space-between;

package/src/components/header/index.jsx

@@ -181,7 +181,9 @@ const HeaderComponent = (props) => {
 
         <CountryFlagGroup>
           <ReactFlagsSelect
-            disabled
+            // disabled
+            // countries={["US", "GB", "FR", "DE", "IT"]}
+            countries={["US",]}
             selected={"US"}
             onSelect={(code) => setSelected(code)}
             showOptionLabel={true}

package/src/components/index.js

@@ -5,7 +5,7 @@ export { default as SideNav } from "./sideNav";
 export { default as SideMenu } from "./sideBar/sideMenu";
 export { default as ProgressBar } from "./progressBar";
 export { default as Radio } from "./radio";
-export { default as Checkbox } from "./checkBoxes/checkbox";
+export { default as Checkbox } from "./checkBoxes/checkbox/index2";
 export { default as CheckboxGroup } from "./checkBoxes/checkboxGroup";
 export { default as RequestList } from "./friendRequest/friendRequestList";
 export { default as CourseList } from "./course/courseList";

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

@@ -5,7 +5,7 @@ export const SideMenuContainer = styled.div`
   position: fixed;
 
   width: ${({ isOpen }) => (isOpen ? "239px" : "48px")};
-  height: 609px;
+  height: 60vh;
   max-height: 609px;
   display: flex;
   flex-direction: column;

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

@@ -5,6 +5,7 @@ export const NavWrapper = styled.nav`
   background-color: #ffffff;
   width: 57px;
   position: fixed;
+  height: 60vh;
   /* top: 10%; */
   left: 0;
   overflow-x: hidden;