merge main and resolve conflicts

GenerateNU · May 31, 2024 · f976710 · f976710
1 parent 5eefd44
commit f976710
Show file tree

Hide file tree

Showing 13 changed files with 63 additions and 30 deletions.
diff --git 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
@@ -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
diff --git a/...app)/components/event-card/event-card.tsx → ...ystem)/components/EventCard/EventCard.tsx b/...app)/components/event-card/event-card.tsx → ...ystem)/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/.../components/event-card/event-card-big.tsx → ...em)/components/EventCard/EventCardBig.tsx b/.../components/event-card/event-card-big.tsx → ...em)/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/...onents/event-card/event-card-calendar.tsx → ...omponents/EventCard/EventCardCalendar.tsx b/...onents/event-card/event-card-calendar.tsx → ...omponents/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/...components/event-card/event-card-club.tsx → ...m)/components/EventCard/EventCardClub.tsx b/...components/event-card/event-card-club.tsx → ...m)/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/...omponents/event-card/event-card-small.tsx → ...)/components/EventCard/EventCardSmall.tsx b/...omponents/event-card/event-card-small.tsx → ...)/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/...(app)/components/event-card/event-tag.tsx → ...system)/components/EventCard/EventTag.tsx b/...(app)/components/event-card/event-tag.tsx → ...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,19 +25,32 @@ 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>
             )
         );
     };
 
     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
@@ -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
@@ -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,11 +37,16 @@ const Texts = {
         fontSize: 10,
         fontStyle: 'normal',
         fontWeight: '200'
+    },
+    'caption-3': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 12,
+        fontStyle: 'normal',
+        fontWeight: '400'
     }
 } as const;
 
 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
@@ -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
@@ -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;