Clean-up

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

@@ -54,38 +54,32 @@ const Layout = () => {
                 options={{
                     title: 'Home',
                     headerShown: false,
-                    tabBarLabel: ({ focused }) => (
-                        <TabBarLabel focused={focused} title="Home" />
-                    ),
-                    tabBarIcon: ({ focused }) => (
-                        <TabBarIcon focused={focused} icon={faHouse} />
-                    )
+                    tabBarLabel: ({ focused }) =>
+                        TabBarLabel({ focused, title: 'Home' }),
+                    tabBarIcon: ({ focused }) =>
+                        TabBarIcon({ focused, icon: faHouse })
                 }}
             />
             <Tabs.Screen
                 name="calendar"
                 options={{
                     title: 'Calendar',
                     headerShown: false,
-                    tabBarLabel: ({ focused }) => (
-                        <TabBarLabel focused={focused} title="Calendar" />
-                    ),
-                    tabBarIcon: ({ focused }) => (
-                        <TabBarIcon focused={focused} icon={faCalendarDays} />
-                    )
+                    tabBarLabel: ({ focused }) =>
+                        TabBarLabel({ focused, title: 'Calendar' }),
+                    tabBarIcon: ({ focused }) =>
+                        TabBarIcon({ focused, icon: faCalendarDays })
                 }}
             />
             <Tabs.Screen
                 name="profile"
                 options={{
                     title: 'Profile',
                     headerShown: false,
-                    tabBarLabel: ({ focused }) => (
-                        <TabBarLabel focused={focused} title="Profile" />
-                    ),
-                    tabBarIcon: ({ focused }) => (
-                        <TabBarIcon focused={focused} icon={faUser} />
-                    )
+                    tabBarLabel: ({ focused }) =>
+                        TabBarLabel({ focused, title: 'Profile' }),
+                    tabBarIcon: ({ focused }) =>
+                        TabBarIcon({ focused, icon: faUser })
                 }}
             />
         </Tabs>

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

@@ -1,7 +1,7 @@
 import { StyleSheet, View } from 'react-native';
 
 import { Text } from '@/app/(design-system)';
-import { RecruitmentInfo } from '@/components/club-recruitment-info';
+import { RecruitmentInfo } from '@/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo';
 
 const HomePage = () => {
     return (

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

@@ -1,15 +1,10 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import { Button } from '../(design-system)/components/Button/Button';
-
 const Welcome = () => {
     return (
         <View>
             <Text>Welcome</Text>
-            <Button variant="standardButton" color="blue">
-                Hello
-            </Button>
         </View>
     );
 };

frontend/mobile/components/club-recruitment-info.tsx → frontend/mobile/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo.tsx

@@ -5,12 +5,12 @@ import { faComments } from '@fortawesome/free-solid-svg-icons/faComments';
 import { faPenToSquare } from '@fortawesome/free-solid-svg-icons/faPenToSquare';
 import { RecruitmentCycle, RecruitmentType } from '@generatesac/lib';
 
-import { Box, ColorName } from '@/app/(design-system)';
+import { Box, SACColors, createStyles } from '@/app/(design-system)';
 
-import { RecruitmentItem } from './club-recruitment-item';
+import { RecruitmentItem } from '../RecruitmentItem/ClubRecruitmentItem';
 
 interface RecruitmentInfoProps {
-    color: ColorName;
+    color: SACColors;
     recruitmentCycle: RecruitmentCycle;
     recruitingType: RecruitmentType;
     isRecruiting?: boolean;
@@ -25,13 +25,7 @@ export const RecruitmentInfo = ({
     isRecruiting = false
 }: RecruitmentInfoProps) => {
     return (
-        <Box
-            padding="l"
-            flexDirection="row"
-            gap="m"
-            alignItems="stretch"
-            justifyContent="space-evenly"
-        >
+        <Box {...styles.recruitmentInfo}>
             <RecruitmentItem
                 icon={faCalendar}
                 title="Recruitment Cycle"
@@ -57,3 +51,13 @@ export const RecruitmentInfo = ({
         </Box>
     );
 };
+
+const styles = createStyles({
+    recruitmentInfo: {
+        padding: 'l',
+        flexDirection: 'row',
+        gap: 'm',
+        alignItems: 'stretch',
+        justifyContent: 'space-evenly'
+    }
+});

frontend/mobile/app/(design-system)/components/ClubRecruitment/RecruitmentItem/ClubRecruitmentItem.tsx

@@ -0,0 +1,55 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+import { Box, SACColors, Text, createStyles } from '@/app/(design-system)';
+import { firstLetterUppercase } from '@/utils/string';
+
+import { Icon } from '../../Icon/Icon';
+
+interface RecruitmentItemProps {
+    icon: IconDefinition;
+    title: string;
+    text: string;
+    color: SACColors;
+}
+
+export const RecruitmentItem = ({
+    icon,
+    title,
+    text,
+    color
+}: RecruitmentItemProps) => {
+    return (
+        <Box {...styles.recruitmentItem}>
+            <Box {...styles.recruitmentItemContent}>
+                <Icon size={'medium'} color={color} icon={icon} />
+                <Text variant="body-1" {...styles.recruitmentItemTitle}>
+                    {firstLetterUppercase(title)}
+                </Text>
+                <Text variant="caption-1" style={{ textAlign: 'center' }}>
+                    {firstLetterUppercase(text)}
+                </Text>
+            </Box>
+        </Box>
+    );
+};
+
+const styles = createStyles({
+    recruitmentItem: {
+        alignItems: 'center',
+        borderWidth: 1,
+        borderRadius: 'base',
+        borderColor: 'gray',
+        width: '33%'
+    },
+    recruitmentItemContent: {
+        paddingTop: 'm',
+        paddingBottom: 'm',
+        gap: 'xs',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    recruitmentItemTitle: {
+        textAlign: 'center',
+        fontWeight: '600'
+    }
+});

frontend/mobile/app/(design-system)/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 
-import { SACColors } from '../../shared/colors';
+import { Colors, SACColors, defaultColor } from '../../shared/colors';
 import { ComponentSizes } from '../../shared/types';
 import { createStyles } from '../../theme';
 
@@ -11,12 +11,16 @@ type IconProps = {
     color?: SACColors;
 };
 
-export const Icon: React.FC<IconProps> = ({ icon, size = 'medium', color }) => {
+export const Icon: React.FC<IconProps> = ({
+    icon,
+    size = 'medium',
+    color = defaultColor
+}) => {
     return (
         <FontAwesomeIcon
             icon={icon}
             size={styles[size].fontSize}
-            color={color}
+            color={Colors[color]}
         />
     );
 };

frontend/mobile/package.json

@@ -47,6 +47,8 @@
         "react-native-reanimated": "^3.11.0",
         "react-native-safe-area-context": "4.10.1",
         "react-native-screens": "3.31.1",
+        "react-native-svg": "^15.3.0",
+        "react-native-svg-transformer": "^1.4.0",
         "react-native-web": "~0.19.10",
         "react-redux": "^9.1.2"
     },