Update base components

src/renderer/components/button/index.tsx

@@ -45,8 +45,32 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
   }};
 
   &:disabled {
-    background-color: transparent;
-    opacity: 0.8;
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg)';
+        case 'filled':
+          return 'var(--btn-primary-fg)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg)';
+        default:
+          return '';
+      }
+    }};
+    background-color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-bg)';
+        case 'filled':
+          return 'var(--btn-primary-bg)';
+        case 'subtle':
+          return 'var(--btn-subtle-bg)';
+        default:
+          return '';
+      }
+    }};
+
+    opacity: 0.4;
   }
 
   &:hover {
@@ -93,7 +117,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, tooltip, ...props }: ButtonProps, ref) => {
     if (tooltip) {
       return (
-        <Tooltip {...tooltip}>
+        <Tooltip withinPortal {...tooltip}>
           <StyledButton ref={ref} {...props}>
             {children}
           </StyledButton>

src/renderer/components/date-picker/index.tsx

@@ -5,15 +5,17 @@ import {
 } from '@mantine/dates';
 
 interface DatePickerProps extends MantineDatePickerProps {
+  maxWidth?: number | string;
   width?: number | string;
 }
 
 const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>``;
 
-export const DatePicker = ({ width, ...props }: DatePickerProps) => {
-  return <StyledDatePicker {...props} sx={{ width }} />;
+export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
+  return <StyledDatePicker {...props} sx={{ maxWidth, width }} />;
 };
 
 DatePicker.defaultProps = {
+  maxWidth: undefined,
   width: undefined,
 };

src/renderer/components/dropdown-menu/index.tsx

@@ -30,6 +30,10 @@ const StyledMenuItem = styled(MantineMenu.Item)`
   & .mantine-Menu-itemIcon {
     margin-right: 0.5rem;
   }
+
+  & .mantine-Menu-itemRightSection {
+    margin-left: 2rem !important;
+  }
 `;
 
 const StyledMenuDropdown = styled(MantineMenu.Dropdown)`

src/renderer/components/index.ts

@@ -13,3 +13,4 @@ export * from './popover';
 export * from './select';
 export * from './date-picker';
 export * from './scroll-area';
+export * from './paper';

src/renderer/components/input/index.tsx

@@ -13,21 +13,25 @@ import {
 
 interface TextInputProps extends MantineTextInputProps {
   children?: React.ReactNode;
+  maxWidth?: number | string;
   width?: number | string;
 }
 
 interface NumberInputProps extends MantineNumberInputProps {
   children?: React.ReactNode;
+  maxWidth?: number | string;
   width?: number | string;
 }
 
 interface PasswordInputProps extends MantinePasswordInputProps {
   children?: React.ReactNode;
+  maxWidth?: number | string;
   width?: number | string;
 }
 
 interface FileInputProps extends MantineFileInputProps {
   children?: React.ReactNode;
+  maxWidth?: number | string;
   width?: number | string;
 }
 
@@ -140,9 +144,14 @@ const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
 `;
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  ({ children, width, ...props }: TextInputProps, ref) => {
+  ({ children, width, maxWidth, ...props }: TextInputProps, ref) => {
     return (
-      <StyledTextInput ref={ref} spellCheck={false} {...props} sx={{ width }}>
+      <StyledTextInput
+        ref={ref}
+        spellCheck={false}
+        {...props}
+        sx={{ maxWidth, width }}
+      >
         {children}
       </StyledTextInput>
     );
@@ -150,9 +159,14 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
 );
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  ({ children, width, ...props }: NumberInputProps, ref) => {
+  ({ children, width, maxWidth, ...props }: NumberInputProps, ref) => {
     return (
-      <StyledNumberInput ref={ref} spellCheck={false} {...props} sx={{ width }}>
+      <StyledNumberInput
+        ref={ref}
+        spellCheck={false}
+        {...props}
+        sx={{ maxWidth, width }}
+      >
         {children}
       </StyledNumberInput>
     );
@@ -160,13 +174,13 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
 );
 
 export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  ({ children, width, ...props }: PasswordInputProps, ref) => {
+  ({ children, width, maxWidth, ...props }: PasswordInputProps, ref) => {
     return (
       <StyledPasswordInput
         ref={ref}
         spellCheck={false}
         {...props}
-        sx={{ width }}
+        sx={{ maxWidth, width }}
       >
         {children}
       </StyledPasswordInput>
@@ -175,9 +189,14 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
 );
 
 export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
-  ({ children, width, ...props }: FileInputProps, ref) => {
+  ({ children, width, maxWidth, ...props }: FileInputProps, ref) => {
     return (
-      <StyledFileInput ref={ref} spellCheck={false} {...props} sx={{ width }}>
+      <StyledFileInput
+        ref={ref}
+        spellCheck={false}
+        {...props}
+        sx={{ maxWidth, width }}
+      >
         {children}
       </StyledFileInput>
     );
@@ -186,20 +205,24 @@ export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
 
 TextInput.defaultProps = {
   children: undefined,
+  maxWidth: undefined,
   width: undefined,
 };
 
 NumberInput.defaultProps = {
   children: undefined,
+  maxWidth: undefined,
   width: undefined,
 };
 
 PasswordInput.defaultProps = {
   children: undefined,
+  maxWidth: undefined,
   width: undefined,
 };
 
 FileInput.defaultProps = {
   children: undefined,
+  maxWidth: undefined,
   width: undefined,
 };