Update base components

src/renderer/components/tooltip/Tooltip.module.scss

@@ -1,9 +0,0 @@
-.body {
-  padding: 5px;
-  color: var(--tooltip-text-color);
-  background: var(--tooltip-bg);
-}
-
-.arrow {
-  background: var(--tooltip-bg);
-}

src/renderer/components/tooltip/Tooltip.tsx

@@ -1,31 +0,0 @@
-import { Tooltip as MantineTooltip, TooltipProps } from '@mantine/core';
-
-export const Tooltip = ({ children, ...rest }: TooltipProps) => {
-  return (
-    <MantineTooltip
-      radius="xs"
-      styles={{
-        arrow: {
-          background: 'var(--tooltip-bg)',
-        },
-        root: {
-          background: 'var(--tooltip-bg)',
-          color: 'var(--tooltip-text-color)',
-          padding: '5px',
-        },
-      }}
-      {...rest}
-    >
-      {children}
-    </MantineTooltip>
-  );
-};
-
-Tooltip.defaultProps = {
-  openDelay: 0,
-  position: 'top',
-  transition: 'fade',
-  transitionDuration: 250,
-  withArrow: true,
-  withinPortal: true,
-};

src/renderer/components/tooltip/index.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import { Tooltip as MantineTooltip, TooltipProps } from '@mantine/core';
+
+const StyledTooltip = styled(MantineTooltip)`
+  & .mantine-Tooltip-arrow {
+    background: var(--tooltip-bg);
+  }
+
+  & .mantine-Tooltip-tooltip {
+    margin: 20px;
+    color: var(--tooltip-text-color);
+    background: var(--tooltip-bg);
+  }
+`;
+
+export const Tooltip = ({ children, ...rest }: TooltipProps) => {
+  return (
+    <StyledTooltip pl={10} pr={10} py={5} radius="xs" {...rest}>
+      {children}
+    </StyledTooltip>
+  );
+};
+
+Tooltip.defaultProps = {
+  openDelay: 0,
+  position: 'top',
+  transition: 'fade',
+  transitionDuration: 250,
+  withArrow: true,
+  withinPortal: true,
+};