@bytebrand/fe-ui-core 4.1.199 → 4.1.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.199",
+  "version": "4.1.201",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

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

@@ -0,0 +1,8 @@
+import { styled } from '@mui/system';
+import IconSVG from '../IconSVG/IconSVG';
+
+export const IconSvgWrapper = styled(IconSVG)({
+  fill: '#005ccb',
+  width: '12px',
+  height: '12px'
+});

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

@@ -1,21 +1,34 @@
 import React from 'react';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import IconSVG from '../IconSVG/IconSVG';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
+import { IconSvgWrapper } from './MaterialTooltip.styled';
 
 interface IMaterialTooltip {
   text: string;
-  icon: string;
+  icon?: string;
+  placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 }
 
-const MaterialTooltip = ({ text, icon }: IMaterialTooltip) => {
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.white,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 11,
+  },
+}));
+
+const MaterialTooltip = ({ text, icon = 'infoIcon', placement }: IMaterialTooltip) => {
   return (
-    <Tooltip title={text}>
+    <LightTooltip placement={placement} title={text}>
       <IconButton>
-        <IconSVG name={icon} customDimensions />
+        <IconSvgWrapper name={icon} customDimensions />
       </IconButton>
-    </Tooltip>
+    </LightTooltip>
   );
 };
 
-export default MaterialTooltip;
+export default MaterialTooltip;

package/source/components/_common/UserMenu/MaterialMenu.styled.tsx

@@ -39,7 +39,7 @@ export const Theme = createTheme({
         root: ({ ownerState }) => ({
           minHeight: '44px !important',
           fontSize: '14px important',
-          ...(ownerState.isComponent && {
+          ...(ownerState.disableRipple && {
             cursor: 'initial !important',
             '&:hover': {
               background: 'transparent !important'

package/source/components/_common/UserMenu/MaterialMenuItem.tsx

@@ -12,18 +12,16 @@ interface IListItem {
   divider?: boolean;
   onClick?: () => void;
   href?: string;
-  isComponent?: string;
   isSelect?: boolean;
   Link?: any;
+  handleClose?: () => void;
 }
 
-const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Link, handleClose }: IListItem) => {
+const ListItem = ({ icon, label, amount, divider, onClick, href, Link, handleClose }: IListItem) => {
   return !!href ? (
     <Link color='#4C4E64DE' variant='caption' to={href} underline='none' onClick={onClick}>
       <MenuItem
         divider={divider}
-        disableRipple={isComponent ? true : false}
-        isComponent={isComponent}
       >
         {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
         <ListItemText>
@@ -39,8 +37,7 @@ const ListItem = ({ icon, label, amount, divider, onClick, href, isComponent, Li
         handleClose();
       }}
       divider={divider}
-      disableRipple={isComponent ? true : false}
-      isComponent={isComponent}
+      disableRipple={true}
     >
       {icon && <ListItemIcon><IconSVG customDimensions name={icon} /></ListItemIcon>}
       <ListItemText>