refactor code and linting

frontend/mobile/app/(app)/(tabs)/_layout.tsx

@@ -1,10 +1,34 @@
 import React from 'react';
 import { Tabs } from 'expo-router';
 import { Text } from '@/app/(design-system)';
-import Home from '@/assets/svg/home.svg';
-import Profile from '@/assets/svg/profile.svg';
-import Calendar from '@/assets/svg/calendar.svg';
-import { Box } from '@/app/(design-system)';
+import { Box, Colors } from '@/app/(design-system)';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import { faHouse } from '@fortawesome/free-solid-svg-icons/faHouse';
+import { faCalendarDays } from '@fortawesome/free-solid-svg-icons/faCalendarDays';
+import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+interface TabBarLabelProps {
+    focused: boolean;
+    title: string;
+}
+
+const TabBarLabel: React.FC<TabBarLabelProps> = ({ focused, title }) => (
+    <Text variant="caption-1" color={focused ? 'black' : 'gray'}>
+        {title}
+    </Text>
+);
+
+interface TabBarIconProps {
+    focused: boolean;
+    icon: IconDefinition;
+}
+
+const TabBarIcon: React.FC<TabBarIconProps> = ({ focused, icon }) => (
+    <Box paddingTop="m">
+        <FontAwesomeIcon size={20} color={focused? 'black' : `${Colors.gray}`} icon={icon} />
+    </Box>
+);
 
 const Layout = () => {
     return (
@@ -21,50 +45,26 @@ const Layout = () => {
                 options={{
                     title: 'Home',
                     headerShown: false,
-                    tabBarLabel: ({ focused }) => (
-                        <Text variant="caption-1" color={focused ? 'black' : 'gray'}>
-                            Home
-                        </Text>
-                    ),
-                    tabBarIcon: ({ focused }) => (
-                        <Box paddingTop="m">
-                            <Home fill={focused? 'black' : 'gray'}/>
-                        </Box>
-                    )
+                    tabBarLabel: ({ focused }) => <TabBarLabel focused={focused} title="Home" />,
+                    tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} icon={faHouse} />,
                 }}
             />
             <Tabs.Screen
                 name="calendar"
                 options={{
                     title: 'Calendar',
                     headerShown: false,
-                    tabBarLabel: ({ focused }) => (
-                        <Text variant="caption-1" color={focused ? 'black' : 'gray'}>
-                            Calendar
-                        </Text>
-                    ),
-                    tabBarIcon: ({ focused }) => (
-                        <Box paddingTop="m">
-                            <Calendar fill={focused? 'black' : 'gray'}/>
-                        </Box>
-                    )
+                    tabBarLabel: ({ focused }) => <TabBarLabel focused={focused} title="Calendar" />,
+                    tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} icon={faCalendarDays} />,
                 }}
             />
             <Tabs.Screen
                 name="profile"
                 options={{
                     title: 'Profile',
                     headerShown: false,
-                    tabBarLabel: ({ focused }) => (
-                        <Text variant="caption-1" color={focused ? 'black' : 'gray'}>
-                            Profile
-                        </Text>
-                    ),
-                    tabBarIcon: ({ focused }) => (
-                        <Box paddingTop="m">
-                            <Profile fill={focused? 'black' : 'gray'}/>
-                        </Box>
-                    )
+                    tabBarLabel: ({ focused }) => <TabBarLabel focused={focused} title="Profile" />,
+                    tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} icon={faUser} />,
                 }}
             />
         </Tabs>

frontend/mobile/app/(app)/(tabs)/index.tsx

@@ -1,16 +1,19 @@
-import { Text } from '@/app/(design-system)';
 import { StyleSheet, View } from 'react-native';
+
+import { Text } from '@/app/(design-system)';
 import { RecruitmentInfo } from '@/components/club-recruitment-info';
 
 const HomePage = () => {
     return (
         <View style={styles.container}>
             <Text style={styles.title}>Home</Text>
-            <RecruitmentInfo recruitmentText="Fill out our application"
-                            recruitingType="unrestricted"
-                            isRecruiting={true}
-                            recruitmentCycle="always"
-                            color="aqua" />
+            <RecruitmentInfo
+                recruitmentText="Fill out our application"
+                recruitingType="unrestricted"
+                isRecruiting={true}
+                recruitmentCycle="always"
+                color="aqua"
+            />
         </View>
     );
 };

frontend/mobile/app/(design-system)/Colors.ts

@@ -10,7 +10,7 @@ export const Colors = {
     orange: '#FF7426',
     yellow: '#FFB626',
     black: '#000000',
-    gray: '#C3C9D0',
+    gray: '#C3C9D0'
 };
 
 export type ColorName = keyof typeof Colors;

frontend/mobile/app/(design-system)/Text/TextVariants.ts

@@ -11,7 +11,7 @@ const Texts = {
         fontSize: 24,
         fontStyle: 'normal',
         fontWeight: '500',
-        lineHeight: 'normal',
+        lineHeight: 'normal'
     },
     'body-1': {
         fontFamily: 'DMSans-Regular',
@@ -33,7 +33,7 @@ const Texts = {
         fontStyle: 'normal',
         fontWeight: '400',
         lineHeight: 'normal'
-    },
+    }
 } as const;
 
 export const TextVariants = {

frontend/mobile/components/club-recruitment-info.tsx

@@ -1,48 +1,56 @@
-import { Box, Text, ColorName, Colors} from "@/app/(design-system)"
-import RecruitmentCycleIcon from '@/assets/svg/recruitment-cycle.svg';
-import RecruitmentStatusIcon from '@/assets/svg/recruiting-status.svg';
-import ApplicationTypeIcon from '@/assets/svg/application-type.svg';
-import { RecruitmentCycle, RecruitmentType } from "@generatesac/lib";
-import { SvgProps } from 'react-native-svg';
-import { ReactElement } from 'react';
+import React from 'react';
+import { RecruitmentCycle, RecruitmentType } from '@generatesac/lib';
+import { Box, ColorName } from '@/app/(design-system)';
+import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
+import { faPenToSquare } from '@fortawesome/free-solid-svg-icons/faPenToSquare';
+import { faComments } from '@fortawesome/free-solid-svg-icons/faComments';
+import { RecruitmentItem } from './club-recruitment-item';
 
 interface RecruitmentInfoProps {
-    color: ColorName,
-    recruitmentCycle: RecruitmentCycle,
-    recruitingType: RecruitmentType,
-    isRecruiting?: boolean,
-    recruitmentText: string,
+  color: ColorName;
+  recruitmentCycle: RecruitmentCycle;
+  recruitingType: RecruitmentType;
+  isRecruiting?: boolean;
+  recruitmentText: string;
 }
 
-interface RecruitmentItemProps {
-    icon: ReactElement<SvgProps>,
-    title: string,
-    text?: string | undefined,
-}
-
-const capitalize = (str: string) => {
-    if (!str) return '';
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-export const RecruitmentInfo = ({recruitmentText, color, recruitmentCycle, recruitingType, isRecruiting = false}: RecruitmentInfoProps) => {
-    const RecruitmentItem = ({icon, title, text}: RecruitmentItemProps) => {
-        return (
-            <Box alignItems="center" borderWidth={1} borderColor={color} borderRadius={8} width={'30%'}>
-                <Box paddingTop="l" paddingBottom="l" gap="xs" flexDirection="column" alignItems="center">
-                    {icon}
-                    <Text style={{textAlign: 'center', fontWeight: '600', fontSize: 14 }}>{capitalize(title)}</Text>
-                    {text && <Text variant="caption-1" style={{textAlign: 'center'}}>{capitalize(text)}</Text>}
-                </Box>
-            </Box>
-        )
-    }
-
-    return (
-        <Box padding="l" flexDirection="row" gap="m" alignItems="stretch" justifyContent="space-evenly">
-            <RecruitmentItem icon={<RecruitmentCycleIcon fill={Colors[color]}/>} title="Recruitment Cycle" text={recruitmentCycle}/>
-            <RecruitmentItem icon={<RecruitmentStatusIcon fill={Colors[color]}/>} title={isRecruiting ? "Currently Recruiting" : "Currently Not Recruiting"} text={recruitmentText}/>
-            <RecruitmentItem icon={<ApplicationTypeIcon fill={Colors[color]}/>} title="Application Type" text={recruitingType}/>
-        </Box>
-    )
-}
+export const RecruitmentInfo = ({
+  recruitmentText,
+  color,
+  recruitmentCycle,
+  recruitingType,
+  isRecruiting = false,
+}: RecruitmentInfoProps) => {
+  return (
+    <Box
+      padding="l"
+      flexDirection="row"
+      gap="m"
+      alignItems="stretch"
+      justifyContent="space-evenly"
+    >
+      <RecruitmentItem
+        icon={faCalendar}
+        title="Recruitment Cycle"
+        text={recruitmentCycle}
+        color={color}
+      />
+      <RecruitmentItem
+        icon={faPenToSquare}
+        title={
+          isRecruiting
+            ? 'Currently Recruiting'
+            : 'Currently Not Recruiting'
+        }
+        text={recruitmentText}
+        color={color}
+      />
+      <RecruitmentItem
+        icon={faComments}
+        title="Application Type"
+        text={recruitingType}
+        color={color}
+      />
+    </Box>
+  );
+};

frontend/mobile/components/club-recruitment-item.tsx

@@ -0,0 +1,46 @@
+import { Box, ColorName, Colors, Text } from "@/app/(design-system)";
+import { firstLetterUppercase } from "@/utils/string";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
+
+interface RecruitmentItemProps {
+    icon: IconDefinition;
+    title: string;
+    text: string;
+    color: ColorName;
+}
+
+export const RecruitmentItem = ({ icon, title, text, color }: RecruitmentItemProps) => {
+    return (
+        <Box
+            alignItems="center"
+            borderWidth={1}
+            borderColor={color}
+            borderRadius={8}
+            width={'30%'}
+        >
+            <Box
+            paddingTop="l"
+            paddingBottom="l"
+            gap="xs"
+            flexDirection="column"
+            alignItems="center"
+            >
+                <FontAwesomeIcon size={30} color={Colors[color]} icon={icon} />
+                <Text
+                    style={{
+                    textAlign: 'center',
+                    fontWeight: '600',
+                    fontSize: 14,
+                    }}
+                >
+                    {firstLetterUppercase(title)}
+                </Text>
+                <Text variant="caption-1" style={{ textAlign: 'center' }}>
+                    {firstLetterUppercase(text)}
+                </Text>
+            </Box>
+        </Box>
+    );
+  };
+

frontend/mobile/declarations.d.ts

@@ -3,4 +3,4 @@ declare module '*.svg' {
     import { SvgProps } from 'react-native-svg';
     const content: React.FC<SvgProps>;
     export default content;
-}
+}

frontend/mobile/metro.config.js

@@ -1,19 +1,19 @@
-const { getDefaultConfig } = require("expo/metro-config");
+const { getDefaultConfig } = require('expo/metro-config');
 
 module.exports = (() => {
-  const config = getDefaultConfig(__dirname);
+    const config = getDefaultConfig(__dirname);
 
-  const { transformer, resolver } = config;
+    const { transformer, resolver } = config;
 
-  config.transformer = {
-    ...transformer,
-    babelTransformerPath: require.resolve("react-native-svg-transformer"),
-  };
-  config.resolver = {
-    ...resolver,
-    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
-    sourceExts: [...resolver.sourceExts, "svg"],
-  };
+    config.transformer = {
+        ...transformer,
+        babelTransformerPath: require.resolve('react-native-svg-transformer')
+    };
+    config.resolver = {
+        ...resolver,
+        assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
+        sourceExts: [...resolver.sourceExts, 'svg']
+    };
 
-  return config;
-})();
+    return config;
+})();