text stuff

components/Global/card.tsx

@@ -83,13 +83,17 @@ export function Card(props: CardProps) {
                     width={dimensions.width}
                 >
                     <H5 
+                        textAlign="center"
                         lineBreakStrategyIOS="standard"
+                        numberOfLines={1}
                     >
                         { props.caption }
                     </H5>
 
                     { props.subCaption && (
-                        <Text>
+                        <Text
+                            textAlign="center"
+                        >
                             { props.subCaption }
                         </Text>
                     )}

components/Global/text.tsx

@@ -28,6 +28,7 @@ interface TextProps {
     bold?: boolean | undefined
     children: string;
     width?: number;
+    textAlign?: "left" | "right" | "unset" | "auto" | "center" | "justify" | undefined;
 }
 
 export function Text(props: TextProps): React.JSX.Element {
@@ -35,6 +36,7 @@ export function Text(props: TextProps): React.JSX.Element {
         <Paragraph 
             width={props.width} 
             fontWeight={props.bold ? 800 : 600} 
+            textAlign={props.textAlign}
             fontSize="$4"
             lineBreakMode="clip"
         >