Component and Screens Implementation

App.js

@@ -21,6 +21,7 @@ import {
 import LoginPage from './screens/LoginPage';
 import HomePageNavigator from './navigation/HomePageNavigator';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import UnsignedLandingPage from './screens/UnsignedLandingPage';
 
 const AppStack = createNativeStackNavigator();
 
@@ -30,7 +31,7 @@ const App = () => {
   return (
 
     <NavigationContainer>
-      <AppStack.Navigator iniialRouteName="Home" headerShown={true}>
+      <AppStack.Navigator headerShown={true}>
         <AppStack.Screen
           name="Login"
           component={LoginPage}
@@ -43,6 +44,11 @@ const App = () => {
           component={HomePageNavigator}
           options={{ headerShown: false }}
         />
+        <AppStack.Screen 
+          name='UnsignedLanding'
+          component={UnsignedLandingPage}
+          options={{headerShown: false}}
+        />
       </AppStack.Navigator>
       {/* <View style={styles.appContainer}>
         <Text>App</Text>

assets/images/images.js

@@ -1,6 +1,8 @@
 const images = {
-    newscout_dark: require("../images/newscout_logo_dark.png"),
-    newscout_light: require("./newscout_logo_light.png"),
+    newscoutDark: require("../images/newscout_logo_dark.png"),
+    newscoutLight: require("./newscout_logo_light.png"),
+    newscoutTextLight: require("../images/newscout_text_light.png"),
+    getStarted: require("../images/get_started.png"),
     imageCard: require("../images/hp_newscard.png"),
     horizontalCard: require("../images/pubg.png"),
     verticalCard: require("../images/VertCard.png"),

components/atoms/Button.js

@@ -4,8 +4,8 @@ import fonts from '../../theme/fonts'
 
 const Button = ({ style, onPress, children }) => {
     return (
-        <TouchableOpacity style={[styles.button,style]}onPress={onPress}>
-            <View>
+        <TouchableOpacity onPress={onPress}>
+            <View style={[styles.button,style]}>
                 {children}
             </View>
         </TouchableOpacity>

components/molecules/NewscoutLogo.js

@@ -5,7 +5,7 @@ import images from '../../assets/images/images'
 const NewscoutLogo = ({style}) => {
   return (
     <View>
-      <Image source={images.newscout_light} style={[styles.image,style]}/>
+      <Image source={images.newscoutLight} style={[styles.image,style]}/>
     </View>
   )
 }

components/molecules/NewscoutTextLogo.js

@@ -0,0 +1,21 @@
+import { StyleSheet, Text, View, Image } from 'react-native'
+import React from 'react'
+import images from '../../assets/images/images'
+
+const NewscoutTextLogo = ({style}) => {
+  return (
+    <View>
+        <Image source={images.newscoutTextLight} style={[styles.image,style]}/>
+    </View>
+  )
+}
+
+export default NewscoutTextLogo
+
+const styles = StyleSheet.create({
+    image:{
+        aspectRatio: 3.0,
+        width: '100%',
+        height: 64
+    }
+})

components/molecules/PrimaryButton.js

@@ -1,14 +0,0 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React from 'react'
-
-const PrimaryButton = ({label,onPress, children}) => {
-  return (
-    <View>
-      <Text>PrimaryButtom</Text>
-    </View>
-  )
-}
-
-export default PrimaryButton
-
-const styles = StyleSheet.create({})

components/organisms/Buttons/CircularPrimaryBackButton.js

@@ -10,7 +10,7 @@ const CircularPrimaryBackButton = ({onPress}) => {
     <TouchableWithoutFeedback onPress={onPress}>
       <View style={styles.buttonContainer}>
         <EntypoIcon
-          color={colors.tertiaryColorColor}
+          color={colors.tertiaryColor}
           size={20}
           name="chevron-thin-left"
         />

components/organisms/Buttons/PrimaryButton.js

@@ -0,0 +1,35 @@
+import { StyleSheet, Text, View} from 'react-native'
+import Button from '../../atoms/Button'
+import React from 'react'
+import colors from '../../../theme/colors'
+import fonts from '../../../theme/fonts'
+
+const PrimaryButton = ({ onPress, title, buttonStyle, titleStyle }) => {
+    return (
+        <Button
+            onPress={onPress}
+            style={[styles.button,buttonStyle]}
+        >
+            <Text style={[styles.buttonTextStyle,titleStyle]}>
+                {title}
+            </Text>
+        </Button>
+    )
+}
+
+export default PrimaryButton
+
+const styles = StyleSheet.create({
+  
+    button:{
+        backgroundColor: colors.tertiaryColor,
+        maxWidth: '100%',
+        width: '100%',
+        alignItems:'center'
+    },
+    buttonTextStyle:{
+        fontFamily: fonts.type.medium,
+        color: colors.white
+    }
+
+})

components/organisms/Headers/NewscoutHomeHeader.js

@@ -3,10 +3,11 @@ import React from 'react'
 import NewscoutLogo from '../../molecules/NewscoutLogo'
 import fonts from '../../../theme/fonts'
 import Header from '../../atoms/Header'
+import colors from '../../../theme/colors'
 
-const NewscoutHomeHeader = ({ children }) => {
+const NewscoutHomeHeader = ({ children, headerStyle}) => {
   return (
-    <Header >
+    <Header style={[styles.header,headerStyle]}>
       <NewscoutLogo style={styles.headerLogo} />
 
       {children}
@@ -21,4 +22,7 @@ const styles = StyleSheet.create({
     height: fonts.getSize(64),
     width: fonts.getSize(64)
   },
+  header:{
+    backgroundColor: colors.white
+  }
 })

navigation/LandingPageNavigator.js

@@ -8,6 +8,7 @@ import SidebarPage from '../screens/SidebarPage';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import MaterialIcon from "react-native-vector-icons/dist/MaterialIcons";
 import colors from '../theme/colors';
+import NewsDetailPage from '../screens/NewsDetailPage';
 
 
 const Drawer = createDrawerNavigator();
@@ -48,6 +49,13 @@ const LandingPageNavigator = () => {
                     ),
                 })}
             />
+            <Drawer.Screen
+                name="NewsDetailPage"
+                component={NewsDetailPage}
+                options={() =>({
+                    headerShown: false
+                })}
+            />
         </Drawer.Navigator>
     );
 };

package-lock.json

@@ -7790,9 +7790,9 @@
       }
     },
     "react-native-safe-area-context": {
-      "version": "4.6.3",
-      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz",
-      "integrity": "sha512-3CeZM9HFXkuqiU9HqhOQp1yxhXw6q99axPWrT+VJkITd67gnPSU03+U27Xk2/cr9XrLUnakM07kj7H0hdPnFiQ=="
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.4.tgz",
+      "integrity": "sha512-UWYsokTLZmj8g0cluzoUeGUjQrCTW4slKr2xKmuwQCurAuvSJq/QvfhCrqyea++XrXo46+1Q3wSoP50YXG24jA=="
     },
     "react-native-screens": {
       "version": "3.22.0",

package.json

@@ -21,7 +21,7 @@
     "react-native-linear-gradient": "^2.6.2",
     "react-native-paper": "^5.8.0",
     "react-native-reanimated": "^3.3.0",
-    "react-native-safe-area-context": "^4.5.3",
+    "react-native-safe-area-context": "^4.6.4",
     "react-native-screens": "^3.20.0",
     "react-native-vector-icons": "^9.2.0"
   },

screens/BookmarkPage.js

@@ -5,9 +5,14 @@ import HorizontalNewsCardVariant from '../components/organisms/Cards/HorizontalN
 import fonts from '../theme/fonts';
 import SearchTextInput from '../components/molecules/SearchTextInput';
 
-const BookmarkPage = () => {
+const BookmarkPage = ({navigation}) => {
   const data = ["1", "2", "3", "4", "5"];
   //const data = []
+
+  const detailPageNavigation = () => {
+    navigation.navigate("Landing",{'screen':'NewsDetailPage'})
+  }
+
   return (
     <View>
       {data.length <= 0 ? <NoBookmarkSection /> :
@@ -21,7 +26,7 @@ const BookmarkPage = () => {
               // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
               ListHeaderComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
               data={data}
-              renderItem={(item) => <HorizontalNewsCardVariant onPress={true}/>}
+              renderItem={(item) => <HorizontalNewsCardVariant onPress={detailPageNavigation}/>}
               keyExtractor={item => data.indexOf(item)}
 
             />

screens/LoginPage.js

@@ -1,25 +1,34 @@
-import { StyleSheet, Text, View } from 'react-native'
+import { Image, StyleSheet, Text, View } from 'react-native'
 import React from 'react'
 import colors from '../theme/colors'
-import Button from '../components/atoms/Button'
+import PrimaryButton from '../components/organisms/Buttons/PrimaryButton'
+import fonts from '../theme/fonts'
+import NewscoutTextLogo from '../components/molecules/NewscoutTextLogo'
+import images from '../assets/images/images'
 
-const LoginPage = ({navigation}) => {
+
+const LoginPage = ({ navigation }) => {
 
     const homePageNavigation = () => {
-        navigation.navigate('Home')
+        navigation.navigate('UnsignedLanding')
     }
 
     return (
-        <View style={[styles.container, {}]}>
-            <Text>LoginPage</Text>
-            <Button
+        <View style={[styles.container]}>
+            <View style={styles.logoContainer}>
+                <NewscoutTextLogo style={styles.logo} />
+            </View>
+            <View style={styles.sketchContainer}>
+                <Image source={images.getStarted} style={[styles.sketch]}/>
+            </View>
+            <View style={styles.taglineContainer}>
+                <Text style={[styles.tagline,{color:colors.black}]}> Get the latest news from </Text>
+                <Text style={[styles.tagline,{color:colors.topColor}]}> reliable sources. </Text>
+            </View>
+            <PrimaryButton
+                title="Next"
                 onPress={homePageNavigation}
-                style={styles.button}
-            >
-                <Text style={styles.buttonStyle}>
-                    Home Page
-                </Text>
-            </Button>
+            />
         </View>
     )
 }
@@ -29,15 +38,43 @@ export default LoginPage
 const styles = StyleSheet.create({
     container: {
         backgroundColor: colors.primaryColor_5,
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center'
+        justifyContent:'center',
+        flex:1,
+        paddingHorizontal: fonts.getSize(16)
     },
-    button:{
+    button: {
         backgroundColor: colors.primaryColor_4
     },
-    buttonStyle:{
+    buttonStyle: {
         fontFamily: 'monospace'
+    },
+    logo: {
+        // width: fonts.getSize(84),
+        aspectRatio: 3.0,
+        width: '100%',
+        height: 64
+    },
+    logoContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: fonts.getSize(32)
+    },
+    sketchContainer:{
+        height: '42.5%',
+        width: '100%',
+        
+    },
+    sketch:{
+        width:'100%',
+        height: '100%'
+    },
+    taglineContainer:{
+        padding:fonts.getSize(16),
+        paddingBottom: fonts.getSize(32)
+    },
+    tagline:{
+        fontFamily: fonts.type.medium,
+        fontSize: fonts.getSize(20)
     }
 
 })

screens/NewsDetailPage.js

@@ -0,0 +1,26 @@
+import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native'
+import React from 'react'
+import Header from '../components/atoms/Header'
+import FeatherIcon from 'react-native-vector-icons/Feather'
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
+import colors from '../theme/colors'
+
+const NewsDetailPage = ({ navigation }) => {
+    return (
+        <View>
+            <Header>
+                <TouchableWithoutFeedback onPress={() => {navigation.goBack()}}>
+                    <FeatherIcon name={'chevron-left'} size={24} color={colors.black} />
+                </TouchableWithoutFeedback>
+                <TouchableWithoutFeedback onPress={() => navigation.toggleDrawer()}>
+                                    <MaterialIcon name='list' color={colors.topColor} size={30} />
+                </TouchableWithoutFeedback>
+
+            </Header>
+        </View>
+    )
+}
+
+export default NewsDetailPage
+
+const styles = StyleSheet.create({})

screens/SidebarPage.js

@@ -5,6 +5,7 @@ import {
   Text,
   UIManager,
   View,
+  ScrollView
 } from 'react-native';
 import React, { useState } from 'react';
 import NewscoutLogo from '../components/molecules/NewscoutLogo';
@@ -13,27 +14,38 @@ import CircularPrimaryBackButton from '../components/organisms/Buttons/CircularP
 import { List } from 'react-native-paper';
 import colors from '../theme/colors';
 import EntypoIcon from 'react-native-vector-icons/Entypo'
-import { ScrollView } from 'react-native-gesture-handler';
+import metrics from '../theme/metrics';
+
 
 const data = [
   {
     title: 'Sector Update',
+    icon: "area-graph",
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'Regional Update',
+    icon: "network",
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'Finance',
+    icon: "database",
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'Economic',
+    icon: "line-graph",
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
   {
     title: 'Miscellaneous',
+    icon: "documents",
+    subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
+  },
+  {
+    title: 'RSS',
+    icon: "rss",
     subTitles: ['Banking', 'Retail', 'Transport', 'Banking', 'Food & Drink'],
   },
 ];
@@ -48,17 +60,23 @@ const SidebarPage = ({ navigation }) => {
 
 
 
-  const [isExpanded, setExpanded] = useState(
-    data.map((item) => {
-      return {
-        key: item.title,
-        value: false
-      };
-    }).reduce((result, item) => {
-      result[item.key] = item.value;
-      return result;
-    }, {})
-  )
+  // const [isExpanded, setExpanded] = useState(
+  //   data.map((item) => {
+  //     return {
+  //       key: item.title,
+  //       value: false
+  //     };
+  //   }).reduce((result, item) => {
+  //     result[item.key] = item.value;
+  //     return result;
+  //   }, {})
+  // )
+
+  const [expandedId, setExpandedId] = React.useState('');
+
+  const handleAccordionPress = (accordionId) => {
+    setExpandedId(accordionId === expandedId ? '' : accordionId);
+  };
 
   return (
     <View style={styles.sideBarContainer}>
@@ -68,39 +86,47 @@ const SidebarPage = ({ navigation }) => {
       <View style={styles.buttonContainer}>
         <CircularPrimaryBackButton onPress={() => navigation.toggleDrawer()} />
       </View>
+
       <ScrollView>
         <View style={styles.accordionContainer}>
-          <List.AccordionGroup>
-            {data.map(item => (
-              <List.Accordion
-                key={data.indexOf(item)}
-                id={`${data.indexOf(item)}`}
-                style={[styles.accordionStyle]}
-                titleStyle={[styles.accordionTextStyle, {}]}
-                onPress={() => {
-                  // setExpandedsetIsShowingText(!isShowingText);
-                  // LayoutAnimation.configureNext(
-                  //   LayoutAnimation.Presets.easeInEaseOut,
-                  // )
-                  // const nextState = { ...isExpanded };
-                  // nextState[item.title] = !nextState[item.title];
-                  //console.log("set state changes");
-                  // setExpanded(nextState);
-                }}
-                expanded={isExpanded[item.title]}
-                left={() => <View style={{ paddingLeft: 16, }}><EntypoIcon name="box" size={24} /></View>}
-                right={() => <EntypoIcon name="chevron-down" size={12} />}
-                title={item.title}>
-                {item.subTitles.map(subTitle => (
-                  <List.Item
-                    key={item.subTitles.indexOf(subTitle)}
-                    style={styles.accordionItemStyle}
-                    titleStyle={styles.accordionItemTextStyle}
-                    title={subTitle}
-                  />
-                ))}
-              </List.Accordion>
-            ))}
+          <List.AccordionGroup
+            expandedId={expandedId}
+            onAccordionPress={handleAccordionPress}
+          >
+            {data.map(item => {
+              let acc_check = item.title.toLowerCase()
+              return (
+                <List.Accordion
+                  key={acc_check}
+                  id={acc_check}
+                  style={[styles.accordionStyle, acc_check === expandedId && { backgroundColor: colors.tertiaryColor, borderColor: colors.tertiaryColor }]}
+                  titleStyle={[, styles.accordionTextStyle, acc_check === expandedId && { color: colors.white, fontFamily: fonts.type.semibold, }]}
+                  onPress={() => {
+                    // setExpandedsetIsShowingText(!isShowingText);
+                    // LayoutAnimation.configureNext(
+                    //   LayoutAnimation.Presets.easeInEaseOut,
+                    // )
+                    // const nextState = { ...isExpanded };
+                    // nextState[item.title] = !nextState[item.title];
+                    //console.log("set state changes");
+
+                  }}
+                  left={() => <View style={{ paddingLeft: 16, }}><EntypoIcon name={item.icon} size={24} color={acc_check === expandedId ? colors.white : colors.black} /></View>}
+                  right={() => <EntypoIcon name={acc_check === expandedId ? "chevron-up" : "chevron-down"} size={12} color={acc_check === expandedId ? colors.white : colors.black} />}
+                  title={item.title}>
+                  {item.subTitles.map((subTitle) => (
+                    <List.Item
+                      // key={`${item.title}_${subTitle}`}
+                      // key={`${item.title}_${item.subTitles.indexOf(subTitle)}`}
+                      //key={`Sidebar_${item.title}_${item.subTitles.indexOf(subTitle)}`}
+                      style={styles.accordionItemStyle}
+                      titleStyle={styles.accordionItemTextStyle}
+                      title={subTitle}
+                    />
+                  ))}
+                </List.Accordion>
+              )
+            })}
           </List.AccordionGroup>
         </View>
       </ScrollView>
@@ -127,15 +153,14 @@ const styles = StyleSheet.create({
   accordionContainer: {
     paddingVertical: fonts.getSize(16),
     gap: fonts.getSize(8),
+    height:"100%"
   },
-  accordionItemStyle: {},
-  accordionItemTextStyle: {},
   accordionStyle: {
     backgroundColor: colors.white,
     borderRadius: fonts.getSize(8),
     borderWidth: fonts.getSize(3),
     borderColor: colors.lightGray,
-    maxHeight: fonts.getSize(52),
+    maxHeight: fonts.getSize(56),
   },
   accordionTextStyle: { fontFamily: fonts.type.medium },
 });

screens/UnsignedLandingPage.js

@@ -0,0 +1,168 @@
+import { StyleSheet, Text, View, ScrollView, FlatList, TouchableWithoutFeedback } from 'react-native'
+import { useState } from 'react'
+import fonts from '../theme/fonts'
+import colors from '../theme/colors'
+import PrimaryButton from '../components/organisms/Buttons/PrimaryButton'
+import { Portal, ToggleButton, Modal, PaperProvider, IconButton } from 'react-native-paper'
+import HorizontalNewsCardVariant from '../components/organisms/Cards/HorizontalNewsCardVariant'
+import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader'
+
+const UnsignedLandingPage = ({ navigation }) => {
+
+    const categories = ["All", "Tech", "Banking", "Retail", "Politics"]
+    const news = [{}, {}, {}, {}, {}, {}, {}]
+    const [categoryValue, setCategoryValue] = useState('all')
+
+    const [visible, setVisible] = useState(false);
+    const showModal = () => setVisible(true);
+    const hideModal = () => setVisible(false);
+
+    const homePageNavigation = () => {
+        navigation.navigate('Home')
+    }
+    return (
+        <PaperProvider>
+            <NewscoutHomeHeader />
+            <View style={styles.container}>
+                <Portal>
+                    <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modalContainerStyle}>
+                        <IconButton
+                            icon="close"
+                            iconColor={colors.black}
+                            size={16}
+                            onPress={hideModal}
+                            style={{ alignSelf: 'flex-end' }}
+                        />
+                        <Text
+                            style={{
+                                fontFamily: fonts.type.regular,
+                                color: colors.black,
+                                fontSize: fonts.getSize(14),
+                                paddingTop: fonts.getSize(8),
+                                paddingBottom: fonts.getSize(16)
+                            }}
+                        >
+                            You are not logged in. Log in to bookmark news, leave comment and to explore more!
+                        </Text>
+                        <PrimaryButton title="Login" onPress={homePageNavigation} />
+                        <View style={{ flexDirection: 'row', justifyContent:'center',alignItems:'center',paddingVertical:fonts.getSize(16)}}>
+                            <Text 
+                                style={{
+                                    color: colors.black,
+                                    fontFamily: fonts.type.regular
+                                }}
+                            >Don’t have account? </Text>
+                            <TouchableWithoutFeedback onPress={true}>
+                                <Text
+                                    style={{
+                                        color: colors.tertiaryColor,
+                                        fontFamily: fonts.type.regular
+                                    }}
+                                >
+                                    Create one
+                                </Text>
+                            </TouchableWithoutFeedback>
+                        </View>
+                    </Modal>
+                </Portal>
+                <Text style={styles.loginText}>You are not logged in. Sign in or log in to bookmark news leave comment and a lot more!</Text>
+                <PrimaryButton title="Sign In" onPress={showModal} />
+                <View style={styles.underlinePillContainer}>
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+                        <ToggleButton.Group onValueChange={value => setCategoryValue(value)}>
+                            {
+                                categories.map((category) => {
+                                    let valueId = category.toLowerCase()
+                                    return <ToggleButton
+                                        icon={() =>
+                                            <Text style={
+                                                [
+                                                    valueId === categoryValue ?
+                                                        styles.selectedPillText :
+                                                        styles.pillText,
+                                                    {
+                                                        paddingHorizontal: fonts.getSize(11),
+                                                        fontSize: fonts.getSize(16)
+                                                    }
+                                                ]
+                                            }>
+                                                {category}
+                                            </Text>}
+                                        style={[styles.underlinePill]}
+                                        value={valueId}
+                                    />
+                                })
+                            }
+                        </ToggleButton.Group>
+                    </ScrollView>
+                </View>
+                <FlatList
+                    showsVerticalScrollIndicator={false}
+                    ItemSeparatorComponent={() => <View style={{ height: fonts.getSize(8) }}></View>}
+                    // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
+                    ListHeaderComponent={() => <View style={{ height: fonts.getSize(16) }}></View>}
+                    data={news}
+                    renderItem={(item) => <HorizontalNewsCardVariant onPress={true} />}
+                    keyExtractor={item => news.indexOf(item)}
+
+                />
+                {/* <ScrollView showsVerticalScrollIndicator={false}>
+                <View style={styles.cardContainer}>
+                    {
+                        news.map((newsItem) => <HorizontalNewsCardVariant onPress={true} />)
+                    }
+                </View>
+            </ScrollView> */}
+            </View>
+        </PaperProvider>
+    )
+}
+
+export default UnsignedLandingPage
+
+const styles = StyleSheet.create({
+    container: {
+        paddingHorizontal: fonts.getSize(16),
+        backgroundColor: colors.white
+    },
+    loginText: {
+        fontFamily: fonts.type.regular,
+        paddingVertical: fonts.getSize(16),
+        color: colors.black
+    },
+    underlinePillContainer: {
+        paddingVertical: fonts.getSize(8),
+        flexDirection: 'row',
+        alignItems: 'space-between',
+
+    },
+    selectedPillText: {
+        fontFamily: fonts.type.semibold,
+        fontSize: fonts.getSize(12),
+        color: colors.black,
+        borderBottomWidth: fonts.getSize(4),
+        borderBottomColor: colors.tertiaryColor,
+        borderRadius: 0
+
+
+    },
+    pillText: {
+        fontFamily: fonts.type.semibold,
+        fontSize: fonts.getSize(12),
+        color: colors.gray
+    },
+    underlinePill: {
+        width: 'auto',
+    },
+    cardContainer: {
+        gap: fonts.getSize(4),
+        paddingVertical: fonts.getSize(4)
+    },
+    modalContainerStyle: {
+        padding: fonts.getSize(16),
+        width: 'auto',
+        marginHorizontal: fonts.getSize(32),
+        backgroundColor: colors.white,
+        borderRadius: fonts.getSize(4)
+    }
+})