diff --git a/src/renderer/components/button/index.tsx b/src/renderer/components/button/index.tsx index ad5d09287..ce514ad44 100644 --- a/src/renderer/components/button/index.tsx +++ b/src/renderer/components/button/index.tsx @@ -101,6 +101,33 @@ const StyledButton = styled(MantineButton)` }}; } + &: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); } diff --git a/src/renderer/components/dropzone/index.tsx b/src/renderer/components/dropzone/index.tsx new file mode 100644 index 000000000..8fc98d3ac --- /dev/null +++ b/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 {children}; +}; + +Dropzone.Accept = StyledDropzone.Accept; +Dropzone.Idle = StyledDropzone.Idle; +Dropzone.Reject = StyledDropzone.Reject; diff --git a/src/renderer/components/index.ts b/src/renderer/components/index.ts index 54d163e94..b0342fa8f 100644 --- a/src/renderer/components/index.ts +++ b/src/renderer/components/index.ts @@ -17,3 +17,4 @@ export * from './paper'; export * from './tabs'; export * from './slider'; export * from './accordion'; +export * from './dropzone'; diff --git a/src/renderer/components/text/index.tsx b/src/renderer/components/text/index.tsx index 8cf13a706..96e009a9f 100644 --- a/src/renderer/components/text/index.tsx +++ b/src/renderer/components/text/index.tsx @@ -24,6 +24,7 @@ const BaseText = styled(MantineText)` 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} diff --git a/src/renderer/components/tooltip/index.tsx b/src/renderer/components/tooltip/index.tsx index ddd281319..f97a7a701 100644 --- a/src/renderer/components/tooltip/index.tsx +++ b/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', }, }}