Update base components

src/renderer/components/button/index.tsx

@@ -101,6 +101,33 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     }};
   }
 
+  &:focus-visible {
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-fg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg-hover)';
+        default:
+          return '';
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-bg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-bg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-bg-hover)';
+        default:
+          return '';
+      }
+    }};
+  }
+
   &:active {
     transform: scale(0.98);
   }

src/renderer/components/dropzone/index.tsx

@@ -0,0 +1,35 @@
+import {
+  Dropzone as MantineDropzone,
+  DropzoneProps as MantineDropzoneProps,
+} from '@mantine/dropzone';
+import styled from 'styled-components';
+
+export type DropzoneProps = MantineDropzoneProps;
+
+const StyledDropzone = styled(MantineDropzone)`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--input-bg);
+  border-radius: 5px;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    background: var(--input-bg);
+    opacity: 1;
+  }
+
+  & .mantine-Dropzone-inner {
+    display: flex;
+  }
+`;
+
+export const Dropzone = ({ children, ...props }: DropzoneProps) => {
+  return <StyledDropzone {...props}>{children}</StyledDropzone>;
+};
+
+Dropzone.Accept = StyledDropzone.Accept;
+Dropzone.Idle = StyledDropzone.Idle;
+Dropzone.Reject = StyledDropzone.Reject;

src/renderer/components/index.ts

@@ -17,3 +17,4 @@ export * from './paper';
 export * from './tabs';
 export * from './slider';
 export * from './accordion';
+export * from './dropzone';

src/renderer/components/text/index.tsx

@@ -24,6 +24,7 @@ const BaseText = styled(MantineText)<TextProps>`
   color: ${(props) =>
     props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
   font-family: ${(props) => props.font};
+  cursor: default;
   user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
   ${(props) => props.overflow === 'hidden' && textEllipsis}
 

src/renderer/components/tooltip/index.tsx

@@ -21,6 +21,8 @@ export const Tooltip = ({ children, ...rest }: TooltipProps) => {
           background: 'var(--tooltip-bg)',
           boxShadow: '4px 4px 10px 0px rgba(0,0,0,0.2)',
           color: 'var(--tooltip-fg)',
+          fontSize: '1.1rem',
+          fontWeight: 550,
           maxWidth: '250px',
         },
       }}