Rename Button styled components

3 files changed, 9 insertions, 9 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
index 82922d756e..f2062607f6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
@@ -5,7 +5,7 @@ import { Colors, Radius } from '../../foundations';
 import { Flex } from '../flex';
 import { ButtonBase } from './ButtonBase';
 import { ButtonProvider } from './ButtonContext';
-import { ButtonIcon, ButtonText, StyledIcon, StyledText } from './components';
+import { ButtonIcon, ButtonText, StyledButtonIcon, StyledButtonText } from './components';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'success' | 'destructive';
@@ -74,24 +74,24 @@ const StyledButton = styled(ButtonBase)<ButtonProps>`
 
 const StyledFlex = styled(Flex)`
   justify-content: space-between;
-  &&:has(${StyledText}:only-child) {
+  &&:has(${StyledButtonText}:only-child) {
     justify-content: center;
   }
-  &&:has(${StyledText} + ${StyledIcon}) {
+  &&:has(${StyledButtonText} + ${StyledButtonIcon}) {
     &::before {
       content: ' ';
       display: inline-block;
       width: 24px;
     }
   }
-  &&:has(${StyledIcon} + ${StyledText}) {
+  &&:has(${StyledButtonIcon} + ${StyledButtonText}) {
     &::after {
       content: ' ';
       display: inline-block;
       width: 24px;
     }
   }
-  &&:has(${StyledIcon} + ${StyledText} + ${StyledIcon}) {
+  &&:has(${StyledButtonIcon} + ${StyledButtonText} + ${StyledButtonIcon}) {
     &::before {
       display: none;
     }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
index 73b746ab9f..b8a6d0582a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
@@ -6,12 +6,12 @@ import { useButtonContext } from '../ButtonContext';
 
 type ButtonIconProps = Omit<IconProps, 'size'>;
 
-export const StyledIcon = styled(Icon)({});
+export const StyledButtonIcon = styled(Icon)({});
 
 export function ButtonIcon({ ...props }: ButtonIconProps) {
   const { disabled } = useButtonContext();
   return (
-    <StyledIcon
+    <StyledButtonIcon
       size="medium"
       aria-hidden="true"
       color={disabled ? Colors.white40 : Colors.white}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
index 9f61d11436..a55a48e637 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
@@ -6,9 +6,9 @@ import { BodySmallSemiBold, BodySmallSemiBoldProps } from '../../typography';
 import { useButtonContext } from '../ButtonContext';
 
 export type ButtonTextProps<T extends React.ElementType = 'span'> = BodySmallSemiBoldProps<T>;
-export const StyledText = styled(BodySmallSemiBold)``;
+export const StyledButtonText = styled(BodySmallSemiBold)``;
 
 export function ButtonText<T extends React.ElementType = 'span'>(props: ButtonTextProps<T>) {
   const { disabled } = useButtonContext();
-  return <StyledText color={disabled ? Colors.white40 : Colors.white} {...props} />;
+  return <StyledButtonText color={disabled ? Colors.white40 : Colors.white} {...props} />;
 }