@bytebrand/fe-ui-core 4.2.250 → 4.3.0

package/source/components/_common/Badge/Badge.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 import styles from './Badge.styl';
 
-export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red' | 'lightBlue';
+export type TBadgeType = 'white' | 'gray' | 'green' | 'blue' | 'red';
 
 export interface IBadgeProps {
   children: any;

package/source/components/_common/Button/Button.tsx

@@ -15,7 +15,6 @@ export interface IButtonProps {
   color?: variantColor;
   children?: any;
   variant?: variantType;
-  getRef?: (ref: HTMLButtonElement) => void;
 
   disabled?: boolean;
   loading?: boolean;
@@ -26,7 +25,8 @@ export interface IButtonProps {
   onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-const Button: React.FC<IButtonProps> = ({ getRef, className, color, onClick, onMouseEnter, onMouseLeave, variant, loading, disabled, children  }: IButtonProps) => {
+const Button: React.FC<IButtonProps> = ({ className, color = 'primary', onClick, onMouseEnter, onMouseLeave, variant, loading, disabled, children  }: IButtonProps) => {
+
   const onHandlerClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
@@ -53,7 +53,6 @@ const Button: React.FC<IButtonProps> = ({ getRef, className, color, onClick, onM
     onClick: onHandlerClick,
     onMouseEnter: onHandlerMouseEnter,
     onMouseLeave: onHandlerMouseLeave,
-    ref:getRef,
     disabled: disabled || loading
   };
 
@@ -64,14 +63,14 @@ const Button: React.FC<IButtonProps> = ({ getRef, className, color, onClick, onM
 
 Button.defaultProps = {
   className: '',
-  color: 'primary',
+
   disabled: false,
   loading: false,
   variant: 'contained',
   buttonType: 'button',
 
   onClick: () => { },
-  getRef: () => { },
+
   onMouseEnter: () => { },
   onMouseLeave: () => { }
 };

package/source/components/_common/Checkbox/FormCheckbox.tsx

@@ -21,7 +21,7 @@ interface IFormCheckboxState {
     checked?: boolean;
     error?: boolean;
     disabled?: boolean
-  };
+  }
 }
 
 class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxState> {
@@ -68,11 +68,11 @@ class FormCheckbox extends React.Component<IFormCheckboxProps, IFormCheckboxStat
       checked,
       name,
       disabled,
+      onChange: this.handleChange,
+      error: customError,
       label,
       checkboxClassName,
-      labelClassName,
-      onChange: this.handleChange,
-      error: customError
+      labelClassName
     };
 
     return (

package/source/components/_common/CheckboxMaterial/CheckboxMaterial.tsx

@@ -26,7 +26,7 @@ export interface ICheckboxProps {
   checkedIcon?: any;
   className?: string;
   type?: string;
-  content?: string | JSX.Element;
+  content?: string;
   radio?: boolean;
   formControlClassName?: string;
   contentType?: string;

package/source/components/_common/Chip/Chip.tsx

@@ -7,12 +7,13 @@ export interface IChip {
 }
 
 export interface IChipProps {
+  className?: string;
   chip: IChip;
   onClick?: (event: React.MouseEvent, chip: IChip) => void;
   onDelete?: (event: React.MouseEvent, chip: IChip) => void;
 }
 
-const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, onClick, onDelete }) => {
+const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, className, onClick, onDelete }) => {
   const { key, value } = chip;
   const onDeleteHandler = (event: any) => { event.stopPropagation(); onDelete(event, chip); };
   const onClickHandler = (event: any) => { event.stopPropagation(); onClick(event, chip); };
@@ -30,6 +31,7 @@ const ChipLanding: React.FunctionComponent<IChipProps> = ({ chip, onClick, onDel
 };
 
 ChipLanding.defaultProps = {
+  className: '',
   chip: { key: '', value: '' },
   onClick: () => {},
   onDelete: () => {}

package/source/components/_common/ExpansionPanel/ExpansionPanel.tsx

@@ -8,10 +8,10 @@ import { ThemeProvider } from '@mui/material/styles';
 import { Theme } from './ExpansionPanel.styled';
 
 export interface IExpansionPanelProps {
-  title?: string;
+  title?: string | JSX.Element;
   subTitle?: string;
   defaultExpanded?: boolean;
-  onChange?: any; // TODO: understand how this onchange works and where it is used and write the correct types
+  onChange?: (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => void;
   className?: string;
   children?: any;
   reactScrollName?: string; // property "name" for "Element" component of "react-scroll" library
@@ -71,7 +71,7 @@ class ExpansionPanel extends React.Component<IExpansionPanelProps> {
           <Accordion
             defaultExpanded={defaultExpanded}
             onChange={isCompare ? onChange : onChange && onChange(reactScrollName)}
-            expanded={(isCompare && typeof expanded === 'boolean') ? expanded : expanded && (expanded === reactScrollName)}
+            expanded={isCompare ? expanded : expanded && (expanded === reactScrollName)}
             className={accordionClassName}
           >
             <AccordionSummary

package/source/components/_common/IconSVG/IconSVGConfig.tsx

@@ -236,7 +236,6 @@ import Easy from './SVG/slider/Easy';
 import Safe from './SVG/slider/Safe';
 import ZoomIn from './SVG/slider/ZoomIn';
 import ZoomOut from './SVG/slider/ZoomOut';
-import YoutubeButton from './SVG/slider/YoutubeButton'
 
 // social
 import SharingInterface from './SVG/social/SharingInterface';
@@ -548,7 +547,6 @@ const components: IComponentsProp = {
   safe: Safe,
   zoomIn: ZoomIn,
   zoomOut: ZoomOut,
-  youtubeButton:YoutubeButton,
 
   // social
   sharingInterface: SharingInterface,

package/source/components/_common/IconSVG/SVG/flags/SK.tsx

@@ -1,4 +1,5 @@
 /* tslint:disable */
+import { fill } from "lodash";
 import * as React from "react";
 
 const SK = (props: any) => (

package/source/components/_common/IconSVG/SVG/slider/360New.tsx

@@ -10,7 +10,7 @@ const Svg360New = (props: any) => (
   >
     <path fillRule="evenodd" clipRule="evenodd" d="M19.2731 12.0024C19.2854 11.774 19.2917 11.5352 19.2917 11.2855C19.2917 11.1381 19.2896 10.9914 19.2854 10.8455C20.9575 11.7695 21.9814 13.0117 21.9814 14.3777C21.9814 16.8116 18.7309 18.8525 14.3546 19.4004V18.3921C16.0124 18.1721 17.47 17.7275 18.5982 17.1434C20.2857 16.2698 20.9814 15.24 20.9814 14.3777C20.9814 13.6409 20.4735 12.7818 19.2731 12.0024ZM8.73484 18.2452V16.9993C8.73484 16.8454 8.90151 16.7491 9.03484 16.8261L12.3089 18.7164C12.4422 18.7934 12.4422 18.9858 12.3089 19.0628L9.03484 20.9531C8.90151 21.03 8.73484 20.9338 8.73484 20.7799V19.2622C4.82573 18.562 2.01855 16.6395 2.01855 14.3777C2.01855 13.0115 3.04264 11.7692 4.71506 10.8452C4.71086 10.9912 4.70874 11.138 4.70874 11.2855C4.70874 11.5353 4.71462 11.7743 4.72619 12.0028C3.52623 12.7822 3.01855 13.641 3.01855 14.3777C3.01855 15.24 3.71425 16.2698 5.40178 17.1434C6.31839 17.618 7.45254 18.0005 8.73484 18.2452Z" fill="#636578"/>
     <path fillRule="evenodd" clipRule="evenodd" d="M12.5852 4.01221H11.371H8.76601C8.17317 4.01221 7.93534 4.05632 7.82485 4.10914L7.82398 4.10955C7.78226 4.12949 7.739 4.15017 7.66339 4.36463L6.90141 7.76114L6.89787 7.77689L6.89333 7.79238C6.36163 9.60562 6.44052 12.1325 6.61804 13.7916C6.65081 14.0978 6.91756 14.3404 7.25825 14.3404H7.51156C7.75013 14.3404 7.94353 14.147 7.94353 13.9084C7.94353 13.5663 8.22089 13.289 8.56302 13.289L11.3769 13.289L12.6228 13.289C12.6231 13.289 12.6234 13.289 12.6238 13.289H13.9287H15.3304C15.6726 13.289 15.9499 13.5663 15.9499 13.9084C15.9499 14.147 16.1433 14.3404 16.3819 14.3404H16.6927C17.0621 14.3404 17.3517 14.0778 17.3866 13.7448C17.5607 12.0842 17.633 9.5881 17.1064 7.79238L17.1018 7.77689L17.0983 7.76114L16.3363 4.36463C16.2607 4.15017 16.2175 4.12949 16.1757 4.10955L16.1749 4.10914C16.0644 4.05632 15.8265 4.01221 15.2337 4.01221H12.5852ZM12.6228 14.289L13.9287 14.289H15.001C15.1677 14.8951 15.7228 15.3404 16.3819 15.3404H16.6927C17.539 15.3404 18.2893 14.7252 18.3812 13.8491C18.5576 12.1668 18.6497 9.51711 18.0706 7.52675L17.3059 4.11822L17.3 4.09191L17.2913 4.06638C17.1801 3.7402 17.0155 3.40262 16.6062 3.20696C16.2639 3.04331 15.8059 3.01221 15.2337 3.01221H12.5852H11.371H8.76601C8.19381 3.01221 7.73577 3.04331 7.3935 3.20696C6.98426 3.40262 6.81959 3.7402 6.70842 4.06638L6.69972 4.09191L6.69381 4.11822L5.92913 7.52675C5.3446 9.5359 5.44389 12.2173 5.62372 13.898C5.71431 14.7446 6.43952 15.3404 7.25825 15.3404H7.51156C8.17066 15.3404 8.72577 14.8951 8.89243 14.289H11.3759C11.3763 14.289 11.3766 14.289 11.3769 14.289L12.6228 14.289Z" fill="#636578"/>
-    <path d="M17.5619 7.56836V7.56836C13.9305 8.65377 10.0509 8.65178 6.41895 7.56836V7.56836" stroke="#636578" strokeLinecap="round"/>
+    <path d="M17.5619 7.56836V7.56836C13.9305 8.65377 10.0509 8.65178 6.41895 7.56836V7.56836" stroke="#636578" stroke-linecap="round"/>
     <circle cx="8.15374" cy="10.3359" r="0.768972" fill="#636578"/>
     <circle cx="15.8442" cy="10.4555" r="0.768972" fill="#636578"/>
   </svg>

package/source/components/_common/MaterialAccordion/MaterialAccordion.tsx

@@ -3,7 +3,8 @@ import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import IconSVG from '../IconSVG/IconSVG';
 import {
   ThemeProvider,
-  createTheme
+  createTheme,
+  experimental_sx as sx
 } from '@mui/material/styles';
 
 export interface IItem {
@@ -17,9 +18,7 @@ export interface IAccordionProps {
 
   defaultOpened?: number;
 
-  variant?: any;
-
-  expandedDefault?: string;
+  variant?: string;
 }
 
 declare module '@mui/material/AccordionSummary' {
@@ -47,9 +46,10 @@ const MaterialAccordion = (
   const theme = createTheme({
     components: {
       MuiAccordion: {
-        styleOverrides: {
-          root: () => ({
-            ...(variant === 'searchDetailed' && {
+        variants: [
+          {
+            props: { variant: 'searchDetailed' },
+            style: {
               margin: 0,
               '&.Mui-expanded': {
                 margin: 0
@@ -57,8 +57,11 @@ const MaterialAccordion = (
               '&.MuiAccordion-root:before': {
                 opacity: 0
               }
-            }),
-            ...(variant === 'searchDetailedSmall' && {
+            }
+          },
+          {
+            props: { variant: 'searchDetailedSmall' },
+            style: {
               margin: 0,
               boxShadow: 'none',
               '&.Mui-expanded': {
@@ -67,28 +70,32 @@ const MaterialAccordion = (
               '&.MuiAccordion-root:before': {
                 opacity: 0
               }
-            })
-          })
-        }
+            }
+          }
+        ]
       },
       MuiAccordionSummary: {
-        styleOverrides: {
-          root: () => ({
-            ...(variant === 'searchDetailed' && {
+        variants: [
+          {
+            props: { variant: 'searchDetailed' },
+            style: {
               color: '#005ccb',
               fontWeight: 'bold',
               fontSize: 14,
               '&.Mui-expanded': {
                 borderBottom: '1px solid #e8e8e8'
               }
-            }),
-            ...(variant === 'searchDetailedSmall' && {
+            }
+          },
+          {
+            props: { variant: 'searchDetailedSmall' },
+            style: {
               color: '1f1f1f',
               fontWeight: 'bold',
               fontSize: 14
-            })
-          })
-        }
+            }
+          }
+        ]
       }
     }
   });
@@ -97,10 +104,10 @@ const MaterialAccordion = (
     const [expanded, setExpanded] = useState(expandedDefault || false);
 
     const handleChange =
-      (panel: string) => (_: React.SyntheticEvent, isExpanded: boolean) => {
+      (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
         setExpanded(isExpanded ? panel : false);
       };
-    return items.map((item: { title: string, content: any }, index: number) => {
+    return items.map((item: any, index: number) => {
       return (
         <ThemeProvider theme={theme}>
           <Accordion
@@ -113,6 +120,7 @@ const MaterialAccordion = (
               expandIcon={<IconSVG name={'arrowSelect'} customDimensions />}
               aria-controls={item.title}
               id={item.title}
+              variant={variant}
               sx={{
                 borderBottom: '1px solid #e8e8e8',
                 borderImageWidth: 0

package/source/components/_common/MaterialAutocomplete/MaterialAutocomplete.styled.tsx

@@ -21,7 +21,7 @@ export const Theme = createTheme({
           },
           ['&.Mui-focused + [data-popper-placement*="bottom"] .MuiOutlinedInput-notchedOutline']: {
             ...(ownerState.name === 'mobileSearch' && { // tslint:disable-line
-              borderTop: isMobileOnly ? '2px solid #005CCB' : 0
+              borderTop: isMobileOnly ? '2px solid #1976d2' : 0
             })
           },
           ['&.Mui-focused .MuiInputLabel-root']: {
@@ -38,9 +38,9 @@ export const Theme = createTheme({
           ['&.Mui-focused + [data-popper-placement*="top"] > .MuiPaper-root']: {
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
-            borderLeft: '2px solid #005CCB',
-            borderRight: '2px solid #005CCB',
-            borderTop: '2px solid #005CCB',
+            borderLeft: '2px solid #1976d2',
+            borderRight: '2px solid #1976d2',
+            borderTop: '2px solid #1976d2',
             ...(ownerState.error && { // tslint:disable-line
               borderColor: '#d32f2f'
             })
@@ -48,15 +48,15 @@ export const Theme = createTheme({
           ['&.Mui-focused + [data-popper-placement*="bottom"] > .MuiPaper-root']: {
             borderTopLeftRadius: 0,
             borderTopRightRadius: 0,
-            borderLeft: '2px solid #005CCB',
-            borderRight: '2px solid #005CCB',
-            borderBottom: '2px solid #005CCB',
+            borderLeft: '2px solid #1976d2',
+            borderRight: '2px solid #1976d2',
+            borderBottom: '2px solid #1976d2',
             ...(ownerState.error && { // tslint:disable-line
               borderColor: '#d32f2f'
             }),
             marginTop: '-3px',
             ...(ownerState.name === 'mobileSearch' && { // tslint:disable-line
-              borderTop: isMobileOnly ? '2px solid #005CCB' : 0,
+              borderTop: isMobileOnly ? '2px solid #1976d2' : 0,
               marginTop: 0,
               borderTopRightRadius: 4,
               borderTopLeftRadius: 4

package/source/components/_common/MaterialDatePicker/MaterialDatePicker.styled.tsx

@@ -6,6 +6,7 @@ export const Theme = createTheme({
       styleOverrides: {
         input: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
           ...(size === 'smaller' && {
+            // tslint:disable-line
             height: 28,
             boxSizing: 'border-box'
           }),

package/source/components/_common/MaterialSelect/MaterialSelect.styled.tsx

@@ -1,6 +1,6 @@
 import { createTheme } from '@mui/material/styles';
 import { IconButton } from '@mui/material';
-import { styled } from '@mui/system';
+import { padding, styled } from '@mui/system';
 import IconSVG from '../IconSVG/IconSVG';
 import { isMobileOnly } from 'react-device-detect';
 
@@ -15,9 +15,9 @@ export const Theme = createTheme({
     },
     MuiInputLabel: {
       styleOverrides: {
-        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
+        root: ({ ownerState }) => ({
           maxWidth: 'calc(100% - 38px)',
-          ...(size === 'custom' && {
+          ...(ownerState.size === 'custom' && { // tslint:disable-line
             marginTop: isMobileOnly ? '0px' :'-4px',
             ['&.MuiInputLabel-shrink, &.Mui-focused']: {
               marginTop: 0
@@ -37,8 +37,8 @@ export const Theme = createTheme({
           borderTopLeftRadius: 0,
           borderTopRightRadius: 0,
           transformOrigin: '0 0 !important',
-          boxShadow: 'inset 2px 0px 0px 0px #005CCB, inset -2px 0px 0px 0px #005CCB',
-          borderBottom: '2px solid #005CCB',
+          boxShadow: 'inset 2px 0px 0px 0px #1976d2, inset -2px 0px 0px 0px #1976d2',
+          borderBottom: '2px solid #1976d2',
           ['& > .MuiList-root']: {
             paddingRight: '0 !important',
             width: '100% !important'
@@ -48,12 +48,12 @@ export const Theme = createTheme({
           },
           ['::-webkit-scrollbar-track']: {
             background: '#fff',
-            borderRight: '2px solid #005CCB',
+            borderRight: '2px solid #1976d2',
             boxShadow: 'inset -4px 0 0 0 #fff'
           },
           ['::-webkit-scrollbar-thumb']: {
             backgroundColor: '#e8e8e8',
-            borderRight: '2px solid #005CCB',
+            borderRight: '2px solid #1976d2',
             boxShadow: 'inset -4px 0 0 0 #fff'
           },
           ['::-webkit-scrollbar-thumb:hover']: {
@@ -64,19 +64,22 @@ export const Theme = createTheme({
     },
     MuiOutlinedInput: {
       styleOverrides: {
-        root: ({ ownerState: { size } }: { ownerState: { size?: 'smaller' | 'custom' | 'normal' | 'small' | 'medium' } }) => ({
-          ...(size === 'small' && {
+        root: ({ ownerState }) => ({
+          ...(ownerState.size === 'small' && {
             paddingRight: '0 !important',
-            flexWrap: 'nowrap !important'
+            flexWrap: 'nowrap !important',
+            ['.Mui-disabled']: {
+              // backgroundColor: '#e8e8e8'
+            }
           }),
-          ...(size === 'custom' && {
+          ...(ownerState.size === 'custom' && {
             height: isMobileOnly ? 56 : 48,
             boxSizing: 'border-box'
           }),
           ['&.Mui-disabled svg']: {
             opacity:'0.38'
           }
-        } as any)
+        })
       }
     },
     MuiListItemText: {

package/source/components/_common/MaterialSelect/MaterialSelect.tsx

@@ -9,7 +9,7 @@ import { isMobileOnly } from 'react-device-detect';
 
 export interface IItems {
   value: string | number;
-  label: string | JSX.Element;
+  label: string;
   isDisabled?: boolean;
   isSeries?: boolean;
 }
@@ -32,7 +32,7 @@ export interface IVehicleModalProps {
   icon?: string;
   children?: JSX.Element | JSX.Element[];
   onChange: (value: any) => void;
-  items?: IItems[];
+  items: IItems[];
   selectClassName?: string;
   amountOfItems?: number;
   customDimensionsIcon?: boolean;
@@ -99,7 +99,7 @@ const MaterialSelect: React.FC<IVehicleModalProps> = ({
     onChange('' as string);
   };
 
-  const getLabel = (label: string | JSX.Element, disabled: boolean) => disabled ? <span>{(label as string).toUpperCase()}</span> : label;
+  const getLabel = (label: string, disabled: boolean) => disabled ? <span>{label.toUpperCase()}</span> : label;
 
   const IconClassNames = classnames(
     classNameIcon

package/source/components/_common/MaterialSwitch/MaterialSwitch.tsx

@@ -7,11 +7,10 @@ interface IMaterialSwitch {
   disabled?: boolean;
   onChange: (value: boolean) => void;
   label?: any;
-  sx?: any;
   labelPlacement?: 'bottom' | 'end' | 'start' | 'top';
 }
 
-const MaterialSwitch = ({ disabled, label, onChange, value = false, sx, labelPlacement }: IMaterialSwitch) => {
+const MaterialSwitch = ({ disabled, label, onChange, value = false, labelPlacement }: IMaterialSwitch) => {
   const [checked, setChecked] = useState(value);
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setChecked(event.target.checked);
@@ -20,7 +19,6 @@ const MaterialSwitch = ({ disabled, label, onChange, value = false, sx, labelPla
   return (
     <FormControlLabel
       label={label}
-      sx={sx}
       labelPlacement={labelPlacement}
       control={
         <Switch

package/source/components/_common/MaterialTooltip/MaterialTooltip.styled.tsx

@@ -8,7 +8,7 @@ export const IconSvgWrapper = styled(IconSVG)(props => ({
   height: '10px'
 }));
 
-export const TooltipWrapper = styled('div')(() => ({
+export const TooltipWrapper = styled('div')(props => ({
   // zIndex: props.zindex ? props.zindex : 9996,
   display: 'inline-block'
 }));

package/source/components/_common/MaterialTooltip/MaterialTooltip.tsx

@@ -17,8 +17,8 @@ interface IMaterialTooltip {
 
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
   <Tooltip {...props} classes={{ popper: className }} />
-))(({ zindex }: { zindex: number }) => ({
-  zIndex: zindex ? zindex : 9996,
+))(props => ({
+  zIndex: props.zindex ? props.zindex : 9996,
   [`& .${tooltipClasses.tooltip}`]: {
     backgroundColor: '#fff',
     color: '#4C4E64AD',
@@ -46,7 +46,7 @@ const MaterialTooltip = ({ text, placement, className, disabled, zindex }: IMate
   };
 
   const onHandleMenuToggle = debounce(
-    (_: any) => {
+    (event: any) => {
       setIsOpen(() => !isOpen);
     },
     50

package/source/components/_common/Modal/CookieModal.tsx

@@ -3,6 +3,7 @@ import useModal from '../../../framework/hooks/useModal';
 import { updateCookieList } from '../../../framework/utils/CommonUtils';
 import Modal from './Modal';
 
+
 export interface ICookieModal {
   handleSentryInit?: () => void;
 }
@@ -42,8 +43,9 @@ const CookieModal = ({ handleSentryInit }: ICookieModal) => {
     : <></>;
 };
 
+
 CookieModal.defaultProps = {
-  handleSentryInit: () => {}
+  handleSentryInit: () => {},
 };
 
 export default CookieModal;

package/source/components/_common/Modal/Modal.styled.tsx

@@ -10,6 +10,5 @@ export const BaseModalWrapper = styled('div')({
   boxShadow: '0px 0px 20px rgba(76, 78, 100, 0.4)',
   borderRadius: '10px',
   maxWidth: '600px',
-  boxSizing: 'border-box',
-  outline: 'none'
+  boxSizing: 'border-box'
 });

package/source/components/_common/Modal/Modal.tsx

@@ -12,8 +12,12 @@ interface IBasicModal {
 }
 
 const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
+  const { onClearModalState } = modalProps;
   return (
-    <Modal open={isVisible}>
+    <Modal open={isVisible} onClose={() => {
+      // toggleModal();
+      // onClearModalState();
+    }}>
       <BaseModalWrapper>
         {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
       </BaseModalWrapper>

package/source/components/_common/Modal/ModalsConfig.tsx

@@ -4,11 +4,7 @@ import TestModal from './modals/TestModal';
 import PreviewCookieModal from './modals/PreviewCookieModal/PreviewCookieModal';
 import ManageCookieModal from './modals/ManageCookieModal/ManageCookieModal';
 
-interface IModalConfigProps {
-  [key: string]: (props: any) => JSX.Element;
-}
-
-const ModalsConfig: IModalConfigProps = {
+const ModalsConfig = {
   TEST_MODAL: (props: any) => {
     return <TestModal { ...props } />;
   },

package/source/components/_common/Modal/modals/ManageCookieModal/ManageCookieModal.styl

@@ -1,7 +1,7 @@
 @import '../../../../../theme/mixins.styl';
 
 .modalWrapper
-  padding: 13px 15px 28px;
+  padding: 16px 10px 25px 25px
   text-align: center
   box-sizing: border-box
   max-width: 600px
@@ -9,13 +9,10 @@
 .modalTitle
   font-family: sans-serif
   font-weight: bold
-  font-size: 16px;
+  font-size: 24px;
   line-height: 133.4%;
   color: rgba(76, 78, 100, 0.87)
-  margin-top: 12px
-  +media-tablet-up()
-    font-size: 24px;
-    margin-top: 20px
+  margin-top: 20px
 
 .modalContent
   font-family: sans-serif
@@ -24,11 +21,9 @@
   text-align: justify;
   letter-spacing: 0.15px;
   color: rgba(76, 78, 100, 0.87);
-  margin-top: 12px
+  margin-top: 20px
   margin-right: 25px
 
-  +media-tablet-up()
-    margin-top: 20px
 .accordions
   height: 278px
   overflow-y: scroll
@@ -57,6 +52,7 @@
 .modalBtn
   height: 38px
   text-transform: capitalize !important
+  font-size: 11px !important;
   +media-tablet-landscape-up()
     min-width: 222px !important
     font-size: 14px !important;
@@ -66,22 +62,10 @@
 
 .switchBlock
   display: flex
+  justify-content: space-between
   align-items: center
   font-size: 12px
   line-height: 15px
   letter-spacing: 1px
   color: rgba(76, 78, 100, 0.87)
-  text-align: left
-
-.switchBlockTitle
-  width: 140px;
-
-.switchBlockLink
-  color: rgba(76, 78, 100, 0.87);
-  text-decoration-line: underline;
-  font-size: 10px;
-
-  &:focus
-    text-decoration-line: underline;
-  &:hover
-    text-decoration-line: none;
+  text-align: left