conditionally displaying brown icon

1 files changed, 18 insertions, 7 deletions

diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx
index 1e7f2e71..583cdcf1 100644
--- a/src/components/suggestedPeople/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/BadgesDropdown.tsx
@@ -7,6 +7,7 @@ import Animated, {Easing} from 'react-native-reanimated';
 import {UniversityBadge} from 'src/types';
 import {UniversityIcon} from '..';
 import {normalize, SCREEN_WIDTH} from '../../utils';
+import UniversityIconClicked from './UniversityIconClicked';
 interface BadgesDropdownProps {
   localBadges: {
     badge: UniversityBadge;
@@ -15,8 +16,10 @@ interface BadgesDropdownProps {
   badges: UniversityBadge[];
 }
 
-const BadgesDropdown: React.FC<BadgesDropdownProps> = ({localBadges, badges}) => {
-
+const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
+  localBadges,
+  badges,
+}) => {
   // Used to toggle between dropdown being displayed and not
   const [displayBadges, setDisplayBadges] = useState<boolean>(false);
 
@@ -75,11 +78,19 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({localBadges, badges}) =>
             animateBack();
           }
         }}>
-        <UniversityIcon
-          university="brown"
-          style={styles.universityIconContainer}
-          imageStyle={{width: normalize(31), height: normalize(38)}}
-        />
+        {displayBadges ? (
+          <UniversityIconClicked
+            university="brown"
+            style={styles.universityIconContainer}
+            imageStyle={{width: normalize(31), height: normalize(38)}}
+          />
+        ) : (
+          <UniversityIcon
+            university="brown"
+            style={styles.universityIconContainer}
+            imageStyle={{width: normalize(31), height: normalize(38)}}
+          />
+        )}
       </TouchableOpacity>
       {localBadges &&
         localBadges.map(({badge, img}, index) => (