Add `text-align` prop to Text component

1 files changed, 5 insertions, 2 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
index dff1a9dc08..aa4b0f1fca 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
@@ -7,18 +7,20 @@ import { PolymorphicProps, TransientProps } from '../../types';
 type TextBaseProps = {
   variant?: Typography;
   color?: Colors;
+  textAlign?: React.CSSProperties['textAlign'];
 };
 
 export type TextProps<T extends React.ElementType = 'span'> = PolymorphicProps<T, TextBaseProps>;
 
 const StyledText = styled.span<TransientProps<TextBaseProps>>(
-  ({ $variant = 'bodySmall', $color = 'white' }) => {
+  ({ $variant = 'bodySmall', $color = 'white', $textAlign }) => {
     const { fontFamily, fontSize, fontWeight, lineHeight } = typography[$variant];
     const color = colors[$color];
     return `
       --color: ${color};
 
       color: var(--color);
+      text-align: ${$textAlign || undefined};
       font-family: ${fontFamily};
       font-size: ${fontSize};
       font-weight: ${fontWeight};
@@ -30,9 +32,10 @@ const StyledText = styled.span<TransientProps<TextBaseProps>>(
 export const Text = <T extends React.ElementType = 'span'>({
   variant,
   color,
+  textAlign,
   ...props
 }: TextProps<T>) => {
-  return <StyledText $variant={variant} $color={color} {...props} />;
+  return <StyledText $variant={variant} $color={color} $textAlign={textAlign} {...props} />;
 };
 
 Text.displayName = 'Text';