Convert Button and subcomponents to named functions

4 files changed, 27 insertions, 28 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 5ce7593784..82922d756e 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
@@ -101,29 +101,28 @@ const StyledFlex = styled(Flex)`
   }
 `;
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, disabled = false, style, ...props }, ref) => {
-    return (
-      <ButtonProvider disabled={disabled}>
-        <StyledButton ref={ref} disabled={disabled} {...props}>
-          <StyledFlex
-            $flex={1}
-            $gap="small"
-            $alignItems="center"
-            $padding={{
-              horizontal: 'small',
-            }}>
-            {children}
-          </StyledFlex>
-        </StyledButton>
-      </ButtonProvider>
-    );
-  },
-);
-
-Button.displayName = 'Button';
+const ForwardedButton = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { children, disabled = false, style, ...props },
+  ref,
+) {
+  return (
+    <ButtonProvider disabled={disabled}>
+      <StyledButton ref={ref} disabled={disabled} {...props}>
+        <StyledFlex
+          $flex={1}
+          $gap="small"
+          $alignItems="center"
+          $padding={{
+            horizontal: 'small',
+          }}>
+          {children}
+        </StyledFlex>
+      </StyledButton>
+    </ButtonProvider>
+  );
+});
 
-const ButtonNamespace = Object.assign(Button, {
+const ButtonNamespace = Object.assign(ForwardedButton, {
   Text: ButtonText,
   Icon: ButtonIcon,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/ButtonContext.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/ButtonContext.tsx
index 4ff4876723..296b000bf4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/ButtonContext.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/ButtonContext.tsx
@@ -19,6 +19,6 @@ interface ButtonProviderProps {
   children: React.ReactNode;
 }
 
-export const ButtonProvider = ({ disabled, children }: ButtonProviderProps) => {
+export function ButtonProvider({ disabled, children }: ButtonProviderProps) {
   return <ButtonContext.Provider value={{ disabled }}>{children}</ButtonContext.Provider>;
-};
+}
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 fe7795d040..73b746ab9f 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
@@ -8,7 +8,7 @@ type ButtonIconProps = Omit<IconProps, 'size'>;
 
 export const StyledIcon = styled(Icon)({});
 
-export const ButtonIcon = ({ ...props }: ButtonIconProps) => {
+export function ButtonIcon({ ...props }: ButtonIconProps) {
   const { disabled } = useButtonContext();
   return (
     <StyledIcon
@@ -18,4 +18,4 @@ export const ButtonIcon = ({ ...props }: ButtonIconProps) => {
       {...props}
     />
   );
-};
+}
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 a1a3c02b3a..9f61d11436 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
@@ -8,7 +8,7 @@ import { useButtonContext } from '../ButtonContext';
 export type ButtonTextProps<T extends React.ElementType = 'span'> = BodySmallSemiBoldProps<T>;
 export const StyledText = styled(BodySmallSemiBold)``;
 
-export const ButtonText = <T extends React.ElementType = 'span'>(props: ButtonTextProps<T>) => {
+export function ButtonText<T extends React.ElementType = 'span'>(props: ButtonTextProps<T>) {
   const { disabled } = useButtonContext();
   return <StyledText color={disabled ? Colors.white40 : Colors.white} {...props} />;
-};
+}