Move IconButton state styling to root component

3 files changed, 65 insertions, 65 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 fa363c6e3b..2ca14232d4 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
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 
 import { colors } from '../../foundations';
 import { IconProps, iconSizes } from '../icon/Icon';
-import { IconButtonIcon } from './components/IconButtonIcon';
+import { IconButtonIcon, StyledIconButtonIcon } from './components';
 import { IconButtonProvider } from './IconButtonContext';
 
 export type IconButtonVariant = 'primary' | 'secondary';
@@ -13,20 +13,75 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   size?: IconProps['size'];
 }
 
-const StyledButton = styled.button<{ $size: IconButtonProps['size'] }>`
-  ${({ $size = 'medium' }) => {
+const variants: Record<
+  IconButtonVariant,
+  {
+    background: string;
+    hover: string;
+    pressed: string;
+    disabled: string;
+  }
+> = {
+  primary: {
+    background: colors.white,
+    hover: colors.whiteAlpha60,
+    pressed: colors.whiteAlpha40,
+    disabled: colors.whiteAlpha40,
+  },
+  secondary: {
+    background: colors.whiteAlpha60,
+    hover: colors.whiteAlpha80,
+    pressed: colors.white,
+    disabled: colors.whiteAlpha40,
+  },
+} as const;
+
+const StyledButton = styled.button<{
+  $size: IconButtonProps['size'];
+  $variant: IconButtonVariant;
+}>`
+  ${({ $size = 'medium', $variant = 'primary' }) => {
     const size = iconSizes[$size];
+    const variant = variants[$variant];
     return css`
       --size: ${size}px;
 
+      --background: ${variant.background};
+      --hover: ${variant.hover};
+      --pressed: ${variant.pressed};
+      --disabled: ${variant.disabled};
+      --transition-duration: 0.15s;
+
       background: ${colors.transparent};
       height: var(--size);
       width: var(--size);
       border-radius: 100%;
-      &:focus-visible {
+
+      &&:focus-visible {
         outline: 2px solid ${colors.white};
         outline-offset: 1px;
       }
+
+      ${StyledIconButtonIcon} {
+        background-color: var(--background);
+        @media (prefers-reduced-motion: no-preference) {
+          transition: background-color var(--transition-duration) ease;
+        }
+      }
+
+      &&:not(:disabled):hover ${StyledIconButtonIcon} {
+        --transition-duration: 0s;
+        background-color: var(--hover);
+      }
+
+      &&:not(:disabled):active ${StyledIconButtonIcon} {
+        --transition-duration: 0s;
+        background-color: var(--pressed);
+      }
+
+      &&:disabled ${StyledIconButtonIcon} {
+        background-color: var(--disabled);
+      }
     `;
   }}
 `;
@@ -35,7 +90,7 @@ const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ variant = 'primary', size = 'medium', disabled, style, ...props }, ref) => {
     return (
       <IconButtonProvider size={size} variant={variant} disabled={disabled}>
-        <StyledButton ref={ref} disabled={disabled} $size={size} {...props} />
+        <StyledButton ref={ref} disabled={disabled} $variant={variant} $size={size} {...props} />
       </IconButtonProvider>
     );
   },
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx
index a466d45ba0..b34cc0310c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx
@@ -1,68 +1,12 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
-import { colors } from '../../../foundations';
 import { Icon, IconProps } from '../../icon/Icon';
-import { IconButtonVariant } from '../IconButton';
 import { useIconButtonContext } from '../IconButtonContext';
 export type IconButtonIconProps = IconProps;
 
-const variants: Record<
-  IconButtonVariant,
-  {
-    background: string;
-    hover: string;
-    pressed: string;
-    disabled: string;
-  }
-> = {
-  primary: {
-    background: colors.white,
-    hover: colors.whiteAlpha60,
-    pressed: colors.whiteAlpha40,
-    disabled: colors.whiteAlpha40,
-  },
-  secondary: {
-    background: colors.whiteAlpha60,
-    hover: colors.whiteAlpha80,
-    pressed: colors.white,
-    disabled: colors.whiteAlpha40,
-  },
-} as const;
-
-const StyledIconButtonIcon = styled(Icon)<{ $variant: IconButtonVariant }>(({ $variant }) => {
-  const variant = variants[$variant];
-  return css`
-    --background: ${variant.background};
-    --hover: ${variant.hover};
-    --pressed: ${variant.pressed};
-    --disabled: ${variant.disabled};
-    --transition-duration: 0.15s;
-
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color var(--transition-duration) ease;
-    }
-
-    background-color: var(--background);
-
-    &&:not([data-disabled='true']):hover {
-      --transition-duration: 0s;
-      background-color: var(--hover);
-    }
-
-    &&:not([data-disabled='true']):active {
-      --transition-duration: 0s;
-      background-color: var(--pressed);
-    }
-
-    &&[data-disabled='true'] {
-      background-color: var(--disabled);
-    }
-  `;
-});
+export const StyledIconButtonIcon = styled(Icon)``;
 
 export const IconButtonIcon = (props: IconButtonIconProps) => {
-  const { variant = 'primary', size, disabled } = useIconButtonContext();
-  return (
-    <StyledIconButtonIcon size={size} data-disabled={disabled} $variant={variant} {...props} />
-  );
+  const { size } = useIconButtonContext();
+  return <StyledIconButtonIcon size={size} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/index.ts
new file mode 100644
index 0000000000..970aa41372
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/index.ts
@@ -0,0 +1 @@
+export * from './IconButtonIcon';