feat: services kits table in service page

src/components/ui/ActionIconWithTip/ActionIconWithTip.tsx

@@ -5,6 +5,7 @@ import {
     PolymorphicComponentProps,
     Tooltip,
 } from "@mantine/core";
+import useIsMobile from "@/hooks/utils/useIsMobile";
 import style from "./ActionIconWithTip.module.css";
 
 type Props = PolymorphicComponentProps<"button", ActionIconProps> & {
@@ -15,20 +16,24 @@ 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>
-);
+}) => {
+    const isMobile = useIsMobile();
+
+    return (
+        <Tooltip
+            label={tipLabel}
+            hidden={!tipLabel}
+            h={"max-content"}
+            w={"max-content"}>
+            <ActionIcon
+                variant={isMobile ? "subtle" : "default"}
+                radius={"lg"}
+                className={style.container}
+                {...props}>
+                {children}
+            </ActionIcon>
+        </Tooltip>
+    );
+};
 
 export default ActionIconWithTip;

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

@@ -1,4 +1,13 @@
 
+.table-bg {
+    @mixin light {
+        background-color: white;
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-8);
+    }
+}
+
 .table-border {
     border-width: 1px;
     border-radius: var(--mantine-radius-lg);

src/components/ui/BaseTable/BaseTable.tsx

@@ -9,7 +9,12 @@ function BaseTable<T>(props: DataTableProps<T>) {
             withRowBorders
             striped={false}
             verticalAlign={"center"}
-            backgroundColor={"transparent"}
+            classNames={{
+                root: styles["table-bg"],
+                table: styles["table-bg"],
+                header: styles["table-bg"],
+                footer: styles["table-bg"],
+            }}
             className={classNames(
                 props.withTableBorder && styles["table-border"]
             )}