From f97671064fd585dcee1aa63d1b7b99eb4c0ce633 Mon Sep 17 00:00:00 2001
From: mai <thisismainguyen@gmail.com>
Date: Fri, 31 May 2024 12:46:04 +0700
Subject: [PATCH] merge main and resolve conflicts

---
 frontend/mobile/.eslintrc.js                  |  2 +-
 frontend/mobile/app/(app)/(tabs)/calendar.tsx |  2 +-
 .../app/(app)/components/event-card/index.ts  |  1 -
 .../components/EventCard/EventCard.tsx}       |  8 +++----
 .../components/EventCard/EventCardBig.tsx}    |  4 +++-
 .../EventCard/EventCardCalendar.tsx}          | 15 ++++++------
 .../components/EventCard/EventCardClub.tsx}   | 11 +++++----
 .../components/EventCard/EventCardSmall.tsx}  |  4 ++--
 .../components/EventCard/EventTag.tsx}        | 23 +++++++++++++++----
 .../components/EventCard/index.ts             |  1 +
 .../components/Text/TextVariants.ts           | 17 ++++++++++++--
 .../app/(design-system)/shared/border.ts      |  2 ++
 .../app/(design-system)/shared/colors.ts      |  3 ++-
 13 files changed, 63 insertions(+), 30 deletions(-)
 delete mode 100644 frontend/mobile/app/(app)/components/event-card/index.ts
 rename frontend/mobile/app/{(app)/components/event-card/event-card.tsx => (design-system)/components/EventCard/EventCard.tsx} (90%)
 rename frontend/mobile/app/{(app)/components/event-card/event-card-big.tsx => (design-system)/components/EventCard/EventCardBig.tsx} (96%)
 rename frontend/mobile/app/{(app)/components/event-card/event-card-calendar.tsx => (design-system)/components/EventCard/EventCardCalendar.tsx} (92%)
 rename frontend/mobile/app/{(app)/components/event-card/event-card-club.tsx => (design-system)/components/EventCard/EventCardClub.tsx} (94%)
 rename frontend/mobile/app/{(app)/components/event-card/event-card-small.tsx => (design-system)/components/EventCard/EventCardSmall.tsx} (92%)
 rename frontend/mobile/app/{(app)/components/event-card/event-tag.tsx => (design-system)/components/EventCard/EventTag.tsx} (65%)
 create mode 100644 frontend/mobile/app/(design-system)/components/EventCard/index.ts

diff --git a/frontend/mobile/.eslintrc.js b/frontend/mobile/.eslintrc.js
index f333f697..b9bc4de5 100644
--- a/frontend/mobile/.eslintrc.js
+++ b/frontend/mobile/.eslintrc.js
@@ -5,7 +5,7 @@ module.exports = {
     rules: {
         'prettier/prettier': 'error',
         'react/react-in-jsx-scope': 'off',
-        'react-native/no-inline-styles': 'off',
+        'react-native/no-inline-styles': 'off'
     },
     env: {
         'jest/globals': true
diff --git a/frontend/mobile/app/(app)/(tabs)/calendar.tsx b/frontend/mobile/app/(app)/(tabs)/calendar.tsx
index 8bce1a87..9255574c 100644
--- a/frontend/mobile/app/(app)/(tabs)/calendar.tsx
+++ b/frontend/mobile/app/(app)/(tabs)/calendar.tsx
@@ -3,7 +3,7 @@ import { Box, Tag } from '@/app/(design-system)';
 const CalendarPage = () => {
     return (
         <Box flex={1} alignItems="center" justifyContent="center" padding="m">
-            <Tag variant="darkRed">Calendar</Tag>
+            <Tag>Calendar</Tag>
         </Box>
     );
 };
diff --git a/frontend/mobile/app/(app)/components/event-card/index.ts b/frontend/mobile/app/(app)/components/event-card/index.ts
deleted file mode 100644
index 1c280811..00000000
--- a/frontend/mobile/app/(app)/components/event-card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { EventCard } from './event-card';
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card.tsx b/frontend/mobile/app/(design-system)/components/EventCard/EventCard.tsx
similarity index 90%
rename from frontend/mobile/app/(app)/components/event-card/event-card.tsx
rename to frontend/mobile/app/(design-system)/components/EventCard/EventCard.tsx
index 4aed020c..567f2c7d 100644
--- a/frontend/mobile/app/(app)/components/event-card/event-card.tsx
+++ b/frontend/mobile/app/(design-system)/components/EventCard/EventCard.tsx
@@ -1,9 +1,9 @@
 import { Tag } from '@generatesac/lib';
 
-import { EventCardBig } from './event-card-big';
-import { EventCardCalendar } from './event-card-calendar';
-import { EventCardClub } from './event-card-club';
-import { EventCardSmall } from './event-card-small';
+import { EventCardBig } from './EventCardBig';
+import { EventCardCalendar } from './EventCardCalendar';
+import { EventCardClub } from './EventCardClub';
+import { EventCardSmall } from './EventCardSmall';
 
 interface EventCardProps {
     event: string;
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card-big.tsx b/frontend/mobile/app/(design-system)/components/EventCard/EventCardBig.tsx
similarity index 96%
rename from frontend/mobile/app/(app)/components/event-card/event-card-big.tsx
rename to frontend/mobile/app/(design-system)/components/EventCard/EventCardBig.tsx
index 459c6051..9af44a41 100644
--- a/frontend/mobile/app/(app)/components/event-card/event-card-big.tsx
+++ b/frontend/mobile/app/(design-system)/components/EventCard/EventCardBig.tsx
@@ -5,9 +5,11 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { Image } from '@rneui/base';
 
-import { Box, Text } from '@/app/(design-system)';
 import { calculateDuration, createOptions, eventTime } from '@/utils/time';
 
+import { Box } from '../Box/Box';
+import { Text } from '../Text/Text';
+
 interface EventCardBigProps {
     event: string;
     club: string;
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card-calendar.tsx b/frontend/mobile/app/(design-system)/components/EventCard/EventCardCalendar.tsx
similarity index 92%
rename from frontend/mobile/app/(app)/components/event-card/event-card-calendar.tsx
rename to frontend/mobile/app/(design-system)/components/EventCard/EventCardCalendar.tsx
index e12daf11..dc83ef62 100644
--- a/frontend/mobile/app/(app)/components/event-card/event-card-calendar.tsx
+++ b/frontend/mobile/app/(design-system)/components/EventCard/EventCardCalendar.tsx
@@ -4,10 +4,11 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Tag } from '@generatesac/lib';
 import { Avatar, Image } from '@rneui/base';
 
-import { Box, Text } from '@/app/(design-system)';
 import { createOptions, eventTime, happeningNow } from '@/utils/time';
 
-import { EventTags } from './event-tag';
+import { Box } from '../Box/Box';
+import { Text } from '../Text/Text';
+import { EventTags } from './EventTag';
 
 interface EventCardCalendarProps {
     event: string;
@@ -50,7 +51,7 @@ export const EventCardCalendar: React.FC<EventCardCalendarProps> = ({
                             flexDirection="column"
                             justifyContent="center"
                             alignItems="center"
-                            borderRadius={4}
+                            borderRadius="small"
                             backgroundColor="darkRed"
                             shadowColor="black"
                             shadowOffset={{ width: 0, height: 1 }}
@@ -69,10 +70,10 @@ export const EventCardCalendar: React.FC<EventCardCalendarProps> = ({
                     shadowOpacity={0.1}
                     shadowRadius={2}
                 >
-                    <Box width="100%" borderRadius={12} />
+                    <Box width="100%" borderRadius="medium" />
                     <Box
                         width="100%"
-                        borderRadius={12}
+                        borderRadius="medium"
                         padding="m"
                         backgroundColor="white"
                         flexDirection="row"
@@ -92,7 +93,7 @@ export const EventCardCalendar: React.FC<EventCardCalendarProps> = ({
                                 flexWrap="wrap"
                             >
                                 <Text
-                                    variant="caption-1"
+                                    variant="caption-3"
                                     color="darkGray"
                                 >{`${eventTime(
                                     startTime,
@@ -109,7 +110,7 @@ export const EventCardCalendar: React.FC<EventCardCalendarProps> = ({
                                         rounded
                                         source={{ uri: logo }}
                                     />
-                                    <Text color="darkGray" variant="caption-1">
+                                    <Text color="darkGray" variant="caption-3">
                                         {club}
                                     </Text>
                                 </Box>
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card-club.tsx b/frontend/mobile/app/(design-system)/components/EventCard/EventCardClub.tsx
similarity index 94%
rename from frontend/mobile/app/(app)/components/event-card/event-card-club.tsx
rename to frontend/mobile/app/(design-system)/components/EventCard/EventCardClub.tsx
index 6e42ddec..81da6d78 100644
--- a/frontend/mobile/app/(app)/components/event-card/event-card-club.tsx
+++ b/frontend/mobile/app/(design-system)/components/EventCard/EventCardClub.tsx
@@ -4,10 +4,11 @@ import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Tag } from '@generatesac/lib';
 import { Avatar, Image } from '@rneui/base';
 
-import { Box, Text } from '@/app/(design-system)';
 import { createOptions, eventTime } from '@/utils/time';
 
-import { EventTags } from './event-tag';
+import { Box } from '../Box/Box';
+import { Text } from '../Text/Text';
+import { EventTags } from './EventTag';
 
 interface EventCardClubProps {
     event: string;
@@ -39,7 +40,7 @@ export const EventCardClub: React.FC<EventCardClubProps> = ({
                 >
                     <Box
                         width="100%"
-                        borderRadius={8}
+                        borderRadius="base"
                         padding="m"
                         backgroundColor="white"
                         flexDirection="row"
@@ -51,7 +52,7 @@ export const EventCardClub: React.FC<EventCardClubProps> = ({
                             source={{ uri: image }}
                         />
                         <Box flex={3} flexDirection="column" gap="xxs">
-                            <Text color="darkGray" variant="caption-1">
+                            <Text color="darkGray" variant="caption-3">
                                 {eventTime(
                                     startTime,
                                     endTime,
@@ -69,7 +70,7 @@ export const EventCardClub: React.FC<EventCardClubProps> = ({
                                 alignItems="center"
                                 gap="xxs"
                             >
-                                <Text color="darkGray" variant="caption-1">
+                                <Text color="darkGray" variant="caption-3">
                                     Hosted by {club}
                                 </Text>
                                 <Avatar
diff --git a/frontend/mobile/app/(app)/components/event-card/event-card-small.tsx b/frontend/mobile/app/(design-system)/components/EventCard/EventCardSmall.tsx
similarity index 92%
rename from frontend/mobile/app/(app)/components/event-card/event-card-small.tsx
rename to frontend/mobile/app/(design-system)/components/EventCard/EventCardSmall.tsx
index 26248513..dee579b2 100644
--- a/frontend/mobile/app/(app)/components/event-card/event-card-small.tsx
+++ b/frontend/mobile/app/(design-system)/components/EventCard/EventCardSmall.tsx
@@ -35,14 +35,14 @@ export const EventCardSmall: React.FC<EventCardSmallProps> = ({
                         source={{ uri: image }}
                     />
                     <Text fontWeight="500">{event}</Text>
-                    <Text variant="caption-1" color="darkGray">
+                    <Text variant="caption-3" color="darkGray">
                         {eventTime(
                             startTime,
                             endTime,
                             createOptions('dayOfWeek', 'monthAndDate')
                         )}
                     </Text>
-                    <Text variant="caption-1" color="darkGray">
+                    <Text variant="caption-3" color="darkGray">
                         {club}
                     </Text>
                 </Box>
diff --git a/frontend/mobile/app/(app)/components/event-card/event-tag.tsx b/frontend/mobile/app/(design-system)/components/EventCard/EventTag.tsx
similarity index 65%
rename from frontend/mobile/app/(app)/components/event-card/event-tag.tsx
rename to frontend/mobile/app/(design-system)/components/EventCard/EventTag.tsx
index 51129eff..eebf916b 100644
--- a/frontend/mobile/app/(app)/components/event-card/event-tag.tsx
+++ b/frontend/mobile/app/(design-system)/components/EventCard/EventTag.tsx
@@ -1,6 +1,6 @@
 import { Tag } from '@generatesac/lib';
 
-import { Box, Tag as TagComponent, Text } from '@/app/(design-system)';
+import { Box, Text } from '@/app/(design-system)';
 
 interface EventTagProps {
     tags: Tag[];
@@ -25,9 +25,15 @@ export const EventTags = ({ tags, variant }: EventTagProps) => {
         const remainingTagsCount = tags.length - 1;
         return (
             remainingTagsCount > 0 && (
-                <TagComponent variant="eventCard">
+                <Box
+                    borderWidth={1}
+                    borderColor="gray"
+                    borderRadius="medium"
+                    paddingHorizontal="xs"
+                    paddingVertical="xxs"
+                >
                     <Text variant="caption-1">{`+${remainingTagsCount}`}</Text>
-                </TagComponent>
+                </Box>
             )
         );
     };
@@ -35,9 +41,16 @@ export const EventTags = ({ tags, variant }: EventTagProps) => {
     return (
         <Box flexDirection="row" paddingTop="xxs" gap="xxs">
             {renderTags().map((tag, index) => (
-                <TagComponent key={index} variant="eventCard">
+                <Box
+                    borderWidth={1}
+                    borderColor="gray"
+                    borderRadius="medium"
+                    key={index}
+                    paddingHorizontal="xs"
+                    paddingVertical="xxs"
+                >
                     <Text variant="caption-1">{tag.name}</Text>
-                </TagComponent>
+                </Box>
             ))}
             {variant === 'plus' && renderPlusTag()}
         </Box>
diff --git a/frontend/mobile/app/(design-system)/components/EventCard/index.ts b/frontend/mobile/app/(design-system)/components/EventCard/index.ts
new file mode 100644
index 00000000..9688efc6
--- /dev/null
+++ b/frontend/mobile/app/(design-system)/components/EventCard/index.ts
@@ -0,0 +1 @@
+export { EventCard } from './EventCard';
diff --git a/frontend/mobile/app/(design-system)/components/Text/TextVariants.ts b/frontend/mobile/app/(design-system)/components/Text/TextVariants.ts
index bc654e1f..1d943107 100644
--- a/frontend/mobile/app/(design-system)/components/Text/TextVariants.ts
+++ b/frontend/mobile/app/(design-system)/components/Text/TextVariants.ts
@@ -10,7 +10,15 @@ const Texts = {
         fontFamily: 'DMSans-Medium',
         fontSize: 24,
         fontStyle: 'normal',
-        fontWeight: '500'
+        fontWeight: '500',
+        lineHeight: 'normal'
+    },
+    'subheader-2': {
+        fontFamily: 'DMSans-Medium',
+        fontSize: 20,
+        fontStyle: 'normal',
+        fontWeight: '500',
+        lineHeight: 'normal'
     },
     'body-1': {
         fontFamily: 'DMSans-Regular',
@@ -29,6 +37,12 @@ const Texts = {
         fontSize: 10,
         fontStyle: 'normal',
         fontWeight: '200'
+    },
+    'caption-3': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 12,
+        fontStyle: 'normal',
+        fontWeight: '400'
     }
 } as const;
 
@@ -36,4 +50,3 @@ export const TextVariants = {
     defaults: Texts['body-1'],
     ...Texts
 };
-
diff --git a/frontend/mobile/app/(design-system)/shared/border.ts b/frontend/mobile/app/(design-system)/shared/border.ts
index 03b6f6b8..8933cc1e 100644
--- a/frontend/mobile/app/(design-system)/shared/border.ts
+++ b/frontend/mobile/app/(design-system)/shared/border.ts
@@ -1,4 +1,6 @@
 export const Border = {
     base: 8,
+    small: 4,
+    medium: 12,
     full: 999
 };
diff --git a/frontend/mobile/app/(design-system)/shared/colors.ts b/frontend/mobile/app/(design-system)/shared/colors.ts
index a3d041db..cd8254f0 100644
--- a/frontend/mobile/app/(design-system)/shared/colors.ts
+++ b/frontend/mobile/app/(design-system)/shared/colors.ts
@@ -11,7 +11,8 @@ export const Colors = {
     yellow: '#FFB626',
     white: '#FFFFFF',
     black: '#000000',
-    gray: '#C3C9D0'
+    gray: '#C3C9D0',
+    darkGray: '#7A7A7A'
 };
 
 export type SACColors = keyof typeof Colors;