[TMA-229] Moments Barebones (#50)

* added react native svg transformation to support svg icons

* finished moments barebones view

* resolved a warning from the svg file

12 files changed, 141 insertions, 24 deletions

diff --git a/src/assets/icons/plus_icon-01.svg b/src/assets/icons/plus_icon-01.svg
new file mode 100644
index 00000000..32632897
--- /dev/null
+++ b/src/assets/icons/plus_icon-01.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 216 216"><defs><style>.cls-1{fill:none;stroke:#718dc3;stroke-miterlimit:10;stroke-width:11px;}.cls-2{fill:#718dc3;}</style></defs><circle class="cls-1" cx="108" cy="108" r="84.9"/><rect class="cls-2" x="101.05" y="59.11" width="13.91" height="97.78" rx="6.34"/><rect class="cls-2" x="101.05" y="59.11" width="13.91" height="97.78" rx="6.34" transform="translate(0 216) rotate(-90)"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/plus_icon-02.svg b/src/assets/icons/plus_icon-02.svg
new file mode 100644
index 00000000..25527911
--- /dev/null
+++ b/src/assets/icons/plus_icon-02.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><style>.cls-1{fill:#fff;}</style></defs><rect class="cls-1" x="25.73" width="8.54" height="60" rx="3.89"/><rect class="cls-1" x="25.73" width="8.54" height="60" rx="3.89" transform="translate(0 60) rotate(-90)"/></svg>
\ No newline at end of file
diff --git a/src/components/common/AvatarTitle.tsx b/src/components/common/AvatarTitle.tsx
index b6d95bd8..8c82dca9 100644
--- a/src/components/common/AvatarTitle.tsx
+++ b/src/components/common/AvatarTitle.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Image, StyleSheet} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT } from '../../constants';
+import {AVATAR_DIM, AVATAR_GRADIENT_DIM, TAGGS_GRADIENT} from '../../constants';
 import {AuthContext} from '../../routes/authentication';
 
 /**
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 206fd9e4..a3b9e74a 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,19 +1,18 @@
 import React, {useState} from 'react';
-import {StyleSheet, LayoutChangeEvent} from 'react-native';
+import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
 import Animated from 'react-native-reanimated';
-
-import {UserType} from '../../types';
+import {defaultMoments} from '../../constants';
+import {SCREEN_HEIGHT} from '../../utils';
+import TaggsBar from '../taggs/TaggsBar';
+import Moment from './Moment';
+import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
-import ProfileBody from './ProfileBody';
-import TaggsBar from '../taggs/TaggsBar';
-import Feed from './Feed';
 
 interface ContentProps {
   y: Animated.Value<number>;
-  user: UserType;
 }
-const Content: React.FC<ContentProps> = ({y, user}) => {
+const Content: React.FC<ContentProps> = ({y}) => {
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
   const onLayout = (e: LayoutChangeEvent) => {
     const {height} = e.nativeEvent.layout;
@@ -31,7 +30,11 @@ const Content: React.FC<ContentProps> = ({y, user}) => {
       </ProfileCutout>
       <ProfileBody {...{onLayout}} />
       <TaggsBar {...{y, profileBodyHeight}} />
-      <Feed {...{user}} />
+      <View style={styles.momentsContainer}>
+        {defaultMoments.map((title, index) => (
+          <Moment key={index} title={title} images={[]} />
+        ))}
+      </View>
     </Animated.ScrollView>
   );
 };
@@ -40,6 +43,10 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  momentsContainer: {
+    backgroundColor: '#f2f2f2',
+    paddingBottom: SCREEN_HEIGHT / 10,
+  },
 });
 
 export default Content;
diff --git a/src/components/profile/Moment.tsx b/src/components/profile/Moment.tsx
new file mode 100644
index 00000000..0fbabe8f
--- /dev/null
+++ b/src/components/profile/Moment.tsx
@@ -0,0 +1,95 @@
+import {useNavigation} from '@react-navigation/native';
+import React from 'react';
+import {Alert, StyleSheet, View} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
+import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
+import {MOMENTS_TITLE_COLOR} from '../../constants';
+import {SCREEN_WIDTH} from '../../utils';
+
+interface MomentProps {
+  title: string;
+  images: Array<string>;
+}
+
+const Moment: React.FC<MomentProps> = ({title, images}) => {
+  const navigation = useNavigation();
+  const navigateToImagePicker = () => {
+    Alert.alert('Perform navigation to Image Picker with Caption screen');
+    // navigation.navigate('')
+  };
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.titleText}>{title}</Text>
+        <PlusIcon
+          width={21}
+          height={21}
+          onPress={() => navigateToImagePicker()}
+        />
+      </View>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollContainer}>
+        <TouchableOpacity onPress={() => navigateToImagePicker()}>
+          <LinearGradient
+            colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
+            <View style={styles.defaultImage}>
+              <BigPlusIcon width={50} height={50} />
+              <Text style={styles.defaultImageText}>
+                Add a moment of your {title.toLowerCase()}!
+              </Text>
+            </View>
+          </LinearGradient>
+        </TouchableOpacity>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: '#eee',
+  },
+  header: {
+    flex: 1,
+    paddingHorizontal: 10,
+    padding: 5,
+    paddingTop: 20,
+    backgroundColor: 'white',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  titleText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: MOMENTS_TITLE_COLOR,
+  },
+  scrollContainer: {
+    height: SCREEN_WIDTH / 2,
+    backgroundColor: '#eee',
+  },
+  defaultImage: {
+    aspectRatio: 1,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+  },
+  defaultImageText: {
+    fontSize: 20,
+    paddingTop: 20,
+    color: 'white',
+    fontWeight: 'bold',
+    width: '75%',
+    textAlign: 'center',
+  },
+});
+
+export default Moment;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index e0ca5742..2d16c830 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -1,5 +1,6 @@
 export {default as Cover} from './Cover';
 export {default as Content} from './Content';
+export {default as Moment} from './Moment';
 export {default as ProfileCutout} from './ProfileCutout';
 export {default as ProfileBody} from './ProfileBody';
 export {default as ProfileHeader} from './ProfileHeader';
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 9a5ec1e2..341a713a 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -2,7 +2,7 @@ import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { TAGGS_GRADIENT } from '../../constants';
+import {TAGGS_GRADIENT} from '../../constants';
 
 interface TaggProps extends ViewProps {}
 
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index b60b506f..76a0df03 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -35,14 +35,14 @@ export const SNAPCHAT_FONT_COLOR: string = '#FFFC00';
 export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
 
 export const TAGGS_GRADIENT = {
-  'start': '#9F00FF',
-  'end': '#27EAE9'
-}
+  start: '#9F00FF',
+  end: '#27EAE9',
+};
 
 export const AVATAR_GRADIENT = {
-  'start': '#240041',
-  'end': '#215151'
-}
+  start: '#240041',
+  end: '#215151',
+};
 
 export const SOCIAL_FONT_COLORS = {
   INSTAGRAM: INSTAGRAM_FONT_COLOR,
@@ -55,3 +55,13 @@ export const SOCIAL_FONT_COLORS = {
   SNAPCHAT: SNAPCHAT_FONT_COLOR,
   YOUTUBE: YOUTUBE_FONT_COLOR,
 };
+
+// Profile Moments
+export const defaultMoments: Array<string> = [
+  'Early Life',
+  'Best Friends',
+  'Dance',
+  'Education',
+];
+
+export const MOMENTS_TITLE_COLOR: string = '#698DD3';
diff --git a/src/declarations.d.ts b/src/declarations.d.ts
new file mode 100644
index 00000000..e5bbc768
--- /dev/null
+++ b/src/declarations.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg' {
+  import React from 'react';
+  import {SvgProps} from 'react-native-svg';
+  const content: React.FC<SvgProps>;
+  export default content;
+}
diff --git a/src/routes/profile/Profile.tsx b/src/routes/profile/Profile.tsx
index faab0bde..caa75f3b 100644
--- a/src/routes/profile/Profile.tsx
+++ b/src/routes/profile/Profile.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
-import {Image, StyleSheet} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
 import {AvatarTitle} from '../../components';
-import {AVATAR_DIM, TAGGS_GRADIENT} from '../../constants';
 import {ProfileScreen, SocialMediaTaggs} from '../../screens';
-import {AuthContext} from '../authentication';
 import {ProfileStack} from './ProfileStack';
 
 const Profile: React.FC = () => {
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index ea557063..cc388ffd 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import {Cover, Content, TabsGradient} from '../../components';
+import {StatusBar} from 'react-native';
 import Animated from 'react-native-reanimated';
+import {Content, Cover, TabsGradient} from '../../components';
 import {AuthContext} from '../../routes/authentication';
-import {StatusBar} from 'react-native';
 
 /**
  * Profile Screen for a user's logged in profile
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 8bc5e4d8..9e4f2aea 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -2,7 +2,7 @@ import {RouteProp} from '@react-navigation/native';
 import React from 'react';
 import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { AVATAR_GRADIENT } from '../../constants';
+import {AVATAR_GRADIENT} from '../../constants';
 import {SocialMediaInfo, TabsGradient, TaggsFeed} from '../../components';
 import {AuthContext, ProfileStackParams} from '../../routes';
 import {headerBarHeightWithImage, SCREEN_HEIGHT} from '../../utils';