feat: styles for deal drawer

src/components/ui/ActionIconWithTip/ActionIconWithTip.module.css

@@ -0,0 +1,5 @@
+.container {
+    cursor: pointer;
+    min-height: calc(var(--mantine-spacing-md) + var(--mantine-spacing-lg));
+    min-width: calc(var(--mantine-spacing-md) + var(--mantine-spacing-lg));
+}

src/components/ui/ActionIconWithTip/ActionIconWithTip.tsx

@@ -0,0 +1,34 @@
+import { FC, PropsWithChildren } from "react";
+import {
+    ActionIcon,
+    ActionIconProps,
+    PolymorphicComponentProps,
+    Tooltip,
+} from "@mantine/core";
+import style from "./ActionIconWithTip.module.css";
+
+type Props = PolymorphicComponentProps<"button", ActionIconProps> & {
+    tipLabel?: string;
+};
+
+const ActionIconWithTip: FC<PropsWithChildren<Props>> = ({
+    children,
+    tipLabel,
+    ...props
+}) => (
+    <Tooltip
+        label={tipLabel}
+        hidden={!tipLabel}
+        h={"max-content"}
+        w={"max-content"}>
+        <ActionIcon
+            variant={"default"}
+            radius={"lg"}
+            className={style.container}
+            {...props}>
+            {children}
+        </ActionIcon>
+    </Tooltip>
+);
+
+export default ActionIconWithTip;

src/components/ui/BaseTable/BaseTable.module.css

@@ -0,0 +1,11 @@
+
+.table-border {
+    border-width: 1px;
+    border-radius: var(--mantine-radius-lg);
+    @mixin light {
+        border-color: var(--mantine-color-gray-4);
+    }
+    @mixin dark {
+        border-color: var(--mantine-color-dark-4);
+    }
+}

src/components/ui/BaseTable/BaseTable.tsx

@@ -1,14 +1,18 @@
 import React from "react";
+import classNames from "classnames";
 import { DataTable, DataTableProps } from "mantine-datatable";
+import styles from "./BaseTable.module.css";
 
 function BaseTable<T>(props: DataTableProps<T>) {
     return (
         <DataTable
-            withTableBorder
             withRowBorders
             striped={false}
             verticalAlign={"center"}
             backgroundColor={"transparent"}
+            className={classNames(
+                props.withTableBorder && styles["table-border"]
+            )}
             {...props}
         />
     );