@bytebrand/fe-ui-core 4.1.200 → 4.1.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.200",
+  "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;