Fix text-align property getting applied as when not passed

1 files changed, 9 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 aa4b0f1fca..e8b58488b4 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
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { Colors, colors, Typography, typography } from '../../foundations';
 import { PolymorphicProps, TransientProps } from '../../types';
@@ -20,11 +20,18 @@ const StyledText = styled.span<TransientProps<TextBaseProps>>(
       --color: ${color};
 
       color: var(--color);
-      text-align: ${$textAlign || undefined};
       font-family: ${fontFamily};
       font-size: ${fontSize};
       font-weight: ${fontWeight};
       line-height: ${lineHeight};
+      ${() => {
+        if ($textAlign) {
+          return css`
+            text-align: ${$textAlign};
+          `;
+        }
+        return null;
+      }}
     `;
   },
 );