diff options
| -rw-r--r-- | desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx | 48 |
1 files changed, 21 insertions, 27 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx index b7e70e23b4..62cf1a1c3e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx @@ -1,8 +1,8 @@ import React, { forwardRef } from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { colors } from '../../foundations'; -import { buttonReset } from '../../styles'; +import { ButtonBase } from '../button'; import { IconProps, iconSizes } from '../icon/Icon'; import { IconButtonIcon } from './components/IconButtonIcon'; import { IconButtonProvider } from './IconButtonContext'; @@ -12,35 +12,29 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl size?: IconProps['size']; } -const StyledButton = styled.button({ - ...buttonReset, +const StyledButton = styled(ButtonBase)<{ $size: IconButtonProps['size'] }>` + ${({ $size = 'medium' }) => { + const size = iconSizes[$size]; + return css` + --size: ${size}px; - background: 'transparent', - height: 'var(--size)', - width: 'var(--size)', - borderRadius: '100%', - '&:focus-visible': { - outline: `2px solid ${colors.white100}`, - outlineOffset: '1px', - }, -}); + background: transparent; + height: var(--size); + width: var(--size); + border-radius: 100%; + &:focus-visible { + outline: 2px solid ${colors.white100}; + outline-offset: 1px; + } + `; + }} +`; const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>( - ({ variant = 'primary', size: sizeProp = 'medium', disabled, style, ...props }, ref) => { - const size = iconSizes[sizeProp]; + ({ variant = 'primary', size = 'medium', disabled, style, ...props }, ref) => { return ( - <IconButtonProvider size={sizeProp} variant={variant} disabled={disabled}> - <StyledButton - ref={ref} - disabled={disabled} - style={ - { - '--size': `${size}px`, - ...style, - } as React.CSSProperties - } - {...props} - /> + <IconButtonProvider size={size} variant={variant} disabled={disabled}> + <StyledButton ref={ref} disabled={disabled} $size={size} {...props} /> </IconButtonProvider> ); }, |