feat: styles for deal drawer

src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.module.css

@@ -1,6 +0,0 @@
-.container {
-    width: min-content;
-    cursor: pointer;
-    padding: 6px;
-    height: 100%;
-}

src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx

@@ -1,26 +0,0 @@
-import { FC, PropsWithChildren } from "react";
-import { ActionIcon, Box } from "@mantine/core";
-import style from "./ToolPanelAction.module.css";
-
-type Props = {
-    onClick: () => void;
-};
-
-const ToolPanelAction: FC<PropsWithChildren<Props>> = ({
-    onClick,
-    children,
-}) => {
-    return (
-        <Box>
-            <ActionIcon
-                variant={"default"}
-                onClick={onClick}
-                radius="lg"
-                className={style.container}>
-                {children}
-            </ActionIcon>
-        </Box>
-    );
-};
-
-export default ToolPanelAction;

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -4,12 +4,12 @@ import { FC } from "react";
 import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
 import { Flex, Group, Indicator } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/ToolPanelAction";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import { DealsFiltersForm } from "@/app/deals/hooks/useDealsFilters";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
+import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
@@ -89,16 +89,16 @@ const TopToolPanel: FC<Props> = ({ view, setView }) => {
                     disabled={!isChangedFilters}
                     offset={3}
                     size={8}>
-                    <ToolPanelAction onClick={onFiltersClick}>
+                    <ActionIconWithTip onClick={onFiltersClick}>
                         <IconFilter />
-                    </ToolPanelAction>
+                    </ActionIconWithTip>
                 </Indicator>
-                <ToolPanelAction onClick={onEditClick}>
+                <ActionIconWithTip onClick={onEditClick}>
                     <IconEdit />
-                </ToolPanelAction>
-                <ToolPanelAction onClick={onCreateClick}>
+                </ActionIconWithTip>
+                <ActionIconWithTip onClick={onCreateClick}>
                     <IconPlus />
-                </ToolPanelAction>
+                </ActionIconWithTip>
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}