Update base components

src/renderer/components/button/index.tsx

@@ -44,6 +44,11 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     }
   }};
 
+  &:disabled {
+    background-color: transparent;
+    opacity: 0.8;
+  }
+
   &:hover {
     color: ${(props) => {
       switch (props.variant) {
@@ -84,7 +89,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
   }
 `;
 
-const pButton = forwardRef<HTMLButtonElement, ButtonProps>(
+export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, tooltip, ...props }: ButtonProps, ref) => {
     if (tooltip) {
       return (
@@ -105,10 +110,10 @@ const pButton = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 export const Button = createPolymorphicComponent<'button', ButtonProps>(
-  pButton
+  _Button
 );
 
-pButton.defaultProps = {
+_Button.defaultProps = {
   onClick: undefined,
   tooltip: undefined,
 };

src/renderer/components/input/index.tsx

@@ -8,11 +8,11 @@ import {
 } from '@mantine/core';
 
 interface TextInputProps extends MantineTextInputProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 interface PasswordInputProps extends MantinePasswordInputProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
@@ -30,6 +30,17 @@ const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
     &:focus-within {
       border-color: var(--primary-color);
     }
+
+    color: var(--input-fg);
+    background: var(--input-bg);
+
+    &::placeholder {
+      color: var(--input-placeholder-fg);
+    }
+  }
+
+  & .mantine-Input-icon {
+    color: var(--input-placeholder-fg);
   }
 
   & .mantine-TextInput-required {
@@ -77,3 +88,11 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     );
   }
 );
+
+TextInput.defaultProps = {
+  children: null,
+};
+
+PasswordInput.defaultProps = {
+  children: null,
+};

src/renderer/components/tooltip/index.tsx

@@ -2,20 +2,26 @@ 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}>
+    <StyledTooltip
+      pl={10}
+      pr={10}
+      py={5}
+      radius="xs"
+      styles={{
+        tooltip: {
+          background: 'var(--tooltip-bg)',
+          color: 'var(--tooltip-fg)',
+        },
+      }}
+      {...rest}
+    >
       {children}
     </StyledTooltip>
   );

src/renderer/themes/default.scss

@@ -35,7 +35,7 @@
   --grid-card-bg: rgb(24, 24, 24);
 
   --tooltip-bg: #ffffff;
-  --tooltip-text-color: #000000;
+  --tooltip-fg: #000000;
 
   --scrollbar-track-bg: #181818;
   --scrollbar-thumb-bg: #5a5a5a;
@@ -55,6 +55,10 @@
   --btn-subtle-fg: rgb(119, 126, 139);
   --btn-subtle-fg-hover: rgb(200, 200, 200);
 
+  --input-bg: rgb(37, 38, 43);
+  --input-fg: rgb(193, 193, 193);
+  --input-placeholder-fg: rgb(119, 126, 139);
+
   --dropdown-menu-bg: rgb(24, 24, 24);
   --dropdown-menu-fg: rgb(193, 194, 197);