feat: create new typography UI components & update welcome screen layout

src/components/Heading/Heading.tsx

@@ -1,18 +1,10 @@
-import { Text, TextProps } from '@ui-kitten/components';
-import React from 'react';
-
-import Space from '../Space';
-
-const Heading: React.FC<HeadingProps> = ({ children }) => {
-  return (
-    <Space type="comfortable">
-      <Text category="h1">{children}</Text>
-    </Space>
-  );
-};
-
-export interface HeadingProps extends TextProps {
-  children: string;
-}
+import { Text } from '@ui-kitten/components';
+import styled from 'styled-components/native';
+
+const Heading = styled(Text).attrs({ category: 'h1' })`
+  font-size: 31px;
+  font-weight: 800;
+  line-height: 46px;
+`;
 
 export default Heading;

src/components/Paragraph/Paragraph.tsx

@@ -1,9 +1,13 @@
-import { Text } from '@ui-kitten/components';
-import styled from 'styled-components/native';
+import { TextProps } from '@ui-kitten/components';
+import React from 'react';
 
-const Paragraph = styled(Text).attrs({ category: 'p1' })`
-  font-size: 18px;
-  line-height: 26px;
-`;
+import Space from '../Space';
+import Text from '../Text';
+
+const Paragraph: React.FC<TextProps> = ({ children }) => (
+  <Space>
+    <Text>{children}</Text>
+  </Space>
+);
 
 export default Paragraph;

src/components/Subheading/Subheading.tsx

@@ -0,0 +1,10 @@
+import { Text } from '@ui-kitten/components';
+import styled from 'styled-components/native';
+
+const Subheading = styled(Text).attrs({ category: 'h2' })`
+  font-size: 25px;
+  font-weight: 600;
+  line-height: 38px;
+`;
+
+export default Subheading;

src/components/Subheading/index.ts

@@ -0,0 +1 @@
+export { default } from './Subheading';

src/components/Text/Text.tsx

@@ -0,0 +1,9 @@
+import { Text as UIKitText } from '@ui-kitten/components';
+import styled from 'styled-components/native';
+
+const Text = styled(UIKitText)`
+  font-size: 18px;
+  line-height: 27px;
+`;
+
+export default Text;

src/components/Text/index.ts

@@ -0,0 +1 @@
+export { default } from './Text';

src/views/Wizard/WelcomeScreen.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import Heading from '../../components/Heading';
 import Paragraph from '../../components/Paragraph';
 import Space from '../../components/Space';
+import Subheading from '../../components/Subheading';
 import ViewLayout from '../../components/ViewLayout';
 import { useI18n } from '../../services/LocalizationProvider';
 
@@ -13,16 +14,14 @@ const WelcomeScreen: React.FC = () => {
   return (
     <ViewLayout>
       <Layout style={{ marginBottom: 'auto', marginTop: 'auto' }}>
-        <Heading>{__('welcomeScreen.title')}</Heading>
         <Space>
-          <Paragraph>{__('welcomeScreen.greeting')}</Paragraph>
+          <Heading>{__('welcomeScreen.title')}</Heading>
         </Space>
         <Space>
-          <Paragraph>{__('welcomeScreen.whoAmI')}</Paragraph>
-        </Space>
-        <Space>
-          <Paragraph>{__('welcomeScreen.ready')}</Paragraph>
+          <Subheading>{__('welcomeScreen.greeting')}</Subheading>
         </Space>
+        <Paragraph>{__('welcomeScreen.whoAmI')}</Paragraph>
+        <Paragraph>{__('welcomeScreen.ready')}</Paragraph>
       </Layout>
       <Layout style={{ marginTop: 'auto' }}>
         <Button>{__('welcomeScreen.cta')}</Button>