Scale down icons in IconButton component

5 files changed, 20 insertions, 20 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index 83142d29d7..e11eec5fad 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -31,14 +31,12 @@ import { NavigationContainer } from './NavigationContainer';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
 import { SmallButton, SmallButtonColor } from './SmallButton';
 
-const StyledContextMenuButton = styled(Cell.Icon)({
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginRight: Spacings.spacing3,
+const StyledMethodInfoButton = styled(InfoButton)({
+  marginRight: Spacings.spacing1,
 });
 
-const StyledMethodInfoButton = styled(InfoButton).attrs({ size: 'small' })({
-  marginRight: Spacings.spacing4,
+const StyledMethodTriggerImage = styled(ImageView)({
+  marginRight: Spacings.spacing1,
 });
 
 const StyledNameLabel = styled(Cell.Label)({
@@ -300,10 +298,12 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
       )}
       <ContextMenuContainer>
         <ContextMenuTrigger>
-          <StyledContextMenuButton
+          <StyledMethodTriggerImage
             source="icon-more"
             tintColor={colors.white}
             tintHoverColor={colors.white80}
+            height={36}
+            width={36}
           />
         </ContextMenuTrigger>
         <ContextMenu items={menuItems} align="right" />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
index d8d3734222..db8fe0c42e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -32,9 +32,7 @@ export const StyledIllustration = styled.img({
   padding: '8px 0 8px',
 });
 
-const StyledInfoButton = styled(InfoButton).attrs({
-  size: 'small',
-})({
+const StyledInfoButton = styled(InfoButton)({
   marginRight: Spacings.spacing5,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index 7a21a18f6b..c79a5eaa5d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -30,9 +30,7 @@ import { NavigationContainer } from './NavigationContainer';
 import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
-const StyledInfoButton = styled(InfoButton).attrs({
-  size: 'small',
-})({
+const StyledInfoButton = styled(InfoButton)({
   marginRight: Spacings.spacing5,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
index 4fc8e15925..0917cce129 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
@@ -99,9 +99,7 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
       </AriaLabel>
       {props.details && (
         <AriaDetails>
-          <StyledInfoButton title={props.infoTitle} size="small">
-            {props.details}
-          </StyledInfoButton>
+          <StyledInfoButton title={props.infoTitle}>{props.details}</StyledInfoButton>
         </AriaDetails>
       )}
     </>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx
index 691be4c9d7..586ab0e76d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx
@@ -30,16 +30,21 @@ const sizes = {
   medium: 24,
 };
 
+// TODO: This should be removed when we have updated to the new icons from design system
+const iconSizes = {
+  small: 14,
+  medium: 20,
+};
+
 const StyledButton = styled.button({
   ...buttonReset,
 
   background: 'transparent',
   height: 'var(--size)',
   width: 'var(--size)',
+  borderRadius: '100%',
   '&:focus-visible': {
     outline: `2px solid ${Colors.white}`,
-    outlineOffset: '2px',
-    borderRadius: '100%',
   },
 });
 
@@ -47,6 +52,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ icon, variant = 'primary', size: sizeProp = 'medium', disabled, style, ...props }, ref) => {
     const styles = variants[variant];
     const size = sizes[sizeProp];
+    const iconSize = iconSizes[sizeProp];
     return (
       <StyledButton
         ref={ref}
@@ -63,8 +69,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
           tintColor={styles.background}
           tintHoverColor={styles.hover}
           disabled={disabled}
-          height={size}
-          width={size}
+          height={iconSize}
+          width={iconSize}
         />
       </StyledButton>
     );