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,
 };

src/renderer/themes/default.scss

@@ -14,12 +14,13 @@
 
   --main-bg: rgb(24, 24, 25);
   --main-fg: rgb(193, 194, 187);
+  --main-fg-secondary: rgb(150, 150, 150);
 
   --titlebar-fg: rgb(255, 255, 255);
   --titlebar-bg: rgb(29, 29, 29);
 
   --sidebar-bg: rgb(16, 16, 16);
-  --sidebar-btn-color: #b3b3b3;
+  --sidebar-btn-color: rgb(179, 179, 179);
   --sidebar-btn-color-hover: #dddddd;
   --sidebar-handle-bg: #4d4d4d;
 
@@ -52,7 +53,7 @@
 
   --btn-subtle-bg: transparent;
   --btn-subtle-bg-hover: rgba(100, 100, 100, 0.5);
-  --btn-subtle-fg: rgb(119, 126, 139);
+  --btn-subtle-fg: rgb(150, 150, 150);
   --btn-subtle-fg-hover: rgb(200, 200, 200);
 
   --input-bg: rgb(37, 38, 43);
@@ -62,6 +63,10 @@
   --dropdown-menu-bg: rgb(24, 24, 24);
   --dropdown-menu-fg: rgb(193, 194, 197);
 
+  --switch-track-bg: rgb(50, 50, 50);
+  --switch-track-enabled-bg: var(--primary-color);
+  --switch-thumb-bg: rgb(255, 255, 255);
+
   --toast-title-fg: rgb(255, 255, 255);
   --toast-description-fg: rgb(193, 194, 197);
   --toast-bg: rgb(16, 16, 16);
@@ -69,12 +74,21 @@
   --paper-bg: rgb(29, 29, 29);
 
   .ag-theme-alpine-dark {
-    --ag-borders: none;
-    --ag-background-color: #101010;
-    --ag-odd-row-background-color: #101010;
+    --ag-font-family: poppins;
     --ag-font-size: 12px;
-    --ag-foreground-color: #ffffff;
-    --ag-font-family: Poppins;
+
+    --ag-borders: none;
+    --ag-border-color: rgb(50, 50, 50);
+
+    --ag-header-background-color: rgb(16, 16, 16);
+    --ag-header-foreground-color: rgb(179, 179, 179);
+
+    --ag-foreground-color: rgb(179, 179, 179);
+
+    --ag-background-color: rgb(24, 24, 25);
+    --ag-odd-row-background-color: rgb(24, 24, 25);
+    --ag-row-hover-color: rgba(100, 100, 100, 0.2);
+    --ag-selected-row-background-color: rgba(100, 100, 100, 0.4);
   }
 
   .ag-header-cell-label {