7 files changed, 42 insertions, 37 deletions
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 6e2c9e1c..14bff6a7 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -173,13 +173,15 @@ export const MOMENT_CATEGORY_BG_COLORS: string[] = [
   '#4E7175',
 ];
 
+// order matters, this decides the order which it displays
 export const EXPLORE_SECTION_TITLES: ExploreSectionType[] = [
   'New to Tagg',
   'People You May Know',
   'Trending on Tagg',
-  "Brown '21",
-  "Brown '22",
+  "Brown '24",
   "Brown '23",
+  "Brown '22",
+  "Brown '21",
 ];
 
 export const SP_WIDTH = 375;
diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/OnboardingStepThree.tsx
index f832539d..64a2a2f7 100644
--- a/src/screens/onboarding/OnboardingStepThree.tsx
+++ b/src/screens/onboarding/OnboardingStepThree.tsx
@@ -2,7 +2,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import moment from 'moment';
-import React, {useMemo} from 'react';
+import React from 'react';
 import {
   Alert,
   Image,
@@ -57,7 +57,7 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
   route,
   navigation,
 }) => {
-  const {userId, username} = route.params;
+  const {userId} = route.params;
   let emptyDate: string | undefined;
   const [form, setForm] = React.useState({
     smallPic: '',
@@ -131,7 +131,6 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
   };
 
   const handleClassYearUpdate = (value: string) => {
-    console.log('foooooo');
     const classYear = Number.parseInt(value);
     setForm({
       ...form,
@@ -192,7 +191,6 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
     if (form.birthdate) {
       request.append('birthday', form.birthdate);
     }
-
     if (customGender) {
       if (form.isValidGender) {
         request.append('gender', form.gender);
@@ -250,18 +248,6 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
     }
   };
 
-  const profilePics = useMemo(() => {
-    return (
-      <View style={styles.profile}>
-        <SmallProfilePic />
-        <Image
-          source={require('../../assets/icons/purple-plus.png')}
-          style={styles.purplePlus}
-        />
-      </View>
-    );
-  }, [form.largePic, form.smallPic]);
-
   return (
     <Animated.ScrollView bounces={false}>
       <Background
@@ -270,7 +256,13 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
         style={styles.container}>
         <StatusBar barStyle="light-content" />
         <RegistrationWizard style={styles.wizard} step="three" />
-        {profilePics}
+        <View style={styles.profile}>
+          <SmallProfilePic />
+          <Image
+            source={require('../../assets/icons/purple-plus.png')}
+            style={styles.purplePlus}
+          />
+        </View>
         <View style={styles.contentContainer}>
           <TaggDropDown
             onValueChange={(value: string) => handleClassYearUpdate(value)}
diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx
index f7d62cee..6e0f78ae 100644
--- a/src/screens/suggestedPeople/AnimatedTutorial.tsx
+++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx
@@ -2,8 +2,11 @@ import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {Image} from 'react-native-animatable';
+import {
+  PanGestureHandler,
+  TapGestureHandler,
+} from 'react-native-gesture-handler';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import GestureRecognizer from 'react-native-swipe-gestures';
 import {useDispatch, useSelector} from 'react-redux';
 import {suggestedPeopleAnimatedTutorialFinished} from '../../store/actions/user';
 import {RootState} from '../../store/rootReducer';
@@ -18,29 +21,34 @@ const AnimatedTutorial: React.FC = () => {
     dispatch(suggestedPeopleAnimatedTutorialFinished(user.userId));
     navigation.pop();
   };
+
+  // don't dismiss the tutorial if swipe gesture isn't sufficiently large
+  const activeOffsetY: number = -15;
+
   return (
     <SafeAreaView>
-      <GestureRecognizer onSwipeUp={handleCloseAnimationTutorial}>
-        <View style={styles.container}>
-          <View style={styles.textContainer}>
-            <Text style={styles.text}>
-              {'Swipe up to discover more people!'}
-            </Text>
+      <TapGestureHandler onEnded={handleCloseAnimationTutorial}>
+        <PanGestureHandler
+          onActivated={handleCloseAnimationTutorial}
+          {...{activeOffsetY}}>
+          <View>
+            <View style={styles.textContainer}>
+              <Text style={styles.text}>
+                {'Swipe up to discover more people!'}
+              </Text>
+            </View>
+            <Image
+              source={require('../../assets/gifs/swipe-animation.gif')}
+              style={styles.swipeGif}
+            />
           </View>
-          <Image
-            source={require('../../assets/gifs/swipe-animation.gif')}
-            style={styles.swipeGif}
-          />
-        </View>
-      </GestureRecognizer>
+        </PanGestureHandler>
+      </TapGestureHandler>
     </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'column',
-  },
   closeButton: {
     top: '2.55%',
     left: '5%',
diff --git a/src/services/ExploreService.ts b/src/services/ExploreService.ts
index 980258be..dc58bdd0 100644
--- a/src/services/ExploreService.ts
+++ b/src/services/ExploreService.ts
@@ -50,6 +50,7 @@ export const getAllExploreSections = async () => {
       "Brown '21": data.categories.brown_21,
       "Brown '22": data.categories.brown_22,
       "Brown '23": data.categories.brown_23,
+      "Brown '24": data.categories.brown_24,
     };
 
     return exploreSections;
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 4b61a2b1..1a3db433 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -79,6 +79,7 @@ export const EMPTY_EXPLORE_SECTIONS: Record<
   "Brown '21": EMPTY_PROFILE_PREVIEW_LIST,
   "Brown '22": EMPTY_PROFILE_PREVIEW_LIST,
   "Brown '23": EMPTY_PROFILE_PREVIEW_LIST,
+  "Brown '24": EMPTY_PROFILE_PREVIEW_LIST,
 };
 
 export const NO_TAGG_USERS = {
diff --git a/src/types/types.ts b/src/types/types.ts
index 3ad787f2..7cd11f7a 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -126,7 +126,8 @@ export type ExploreSectionType =
   | 'Trending on Tagg'
   | "Brown '21"
   | "Brown '22"
-  | "Brown '23";
+  | "Brown '23"
+  | "Brown '24";
 
 /**
  * Redux store to have a Record of ScreenType (Search, Profile, Home etc) mapped to
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 8efe1f6a..50f96493 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -29,7 +29,7 @@ export const handleOpenSocialUrlOnBrowser = (
 
 //Returns university class just like we would like to display on profile page
 export const getUniversityClass = (universityClass: number) => {
-  return `Class of ${(universityClass % 2000).toString()}'`;
+  return `Class of '${(universityClass % 2000).toString()}`;
 };
 
 export const getDateAge: (