From 1e0f1c0c6200af5d4f9554778341d991b47381da Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 16 Jul 2021 18:47:19 -0400
Subject: Add styling

---
 src/components/camera/SaveButton.tsx |  7 ++++---
 src/screens/upload/EditMedia.tsx     | 31 ++++++++++++++++++-------------
 2 files changed, 22 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx
index 104e7c30..d1b87e65 100644
--- a/src/components/camera/SaveButton.tsx
+++ b/src/components/camera/SaveButton.tsx
@@ -1,18 +1,19 @@
 import React from 'react';
-import {Text, TouchableOpacity} from 'react-native';
+import {StyleProp, Text, TouchableOpacity, ViewStyle} from 'react-native';
 import SaveIcon from '../../assets/icons/camera/save.svg';
 import {styles} from './styles';
 
 interface SaveButtonProps {
   onPress: () => void;
+  style?: StyleProp<ViewStyle>;
 }
 
 /*
  * Appears when a picture has been taken,
  * On click, saves the captured image to "Recents" album on device gallery
  */
-export const SaveButton: React.FC<SaveButtonProps> = ({onPress}) => (
-  <TouchableOpacity onPress={onPress} style={styles.saveButton}>
+export const SaveButton: React.FC<SaveButtonProps> = ({onPress, style}) => (
+  <TouchableOpacity onPress={onPress} style={[styles.saveButton, style]}>
     <SaveIcon width={40} height={40} />
     <Text style={styles.saveButtonLabel}>Save</Text>
   </TouchableOpacity>
diff --git a/src/screens/upload/EditMedia.tsx b/src/screens/upload/EditMedia.tsx
index 92b93888..1d42e675 100644
--- a/src/screens/upload/EditMedia.tsx
+++ b/src/screens/upload/EditMedia.tsx
@@ -340,8 +340,12 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
         </View>
       )}
       <View style={styles.bottomContainer}>
-        <SaveButton onPress={() => processVideo(saveImageToGallery)} />
+        <SaveButton
+          style={styles.saveButton}
+          onPress={() => processVideo(saveImageToGallery)}
+        />
         <TaggSquareButton
+          style={styles.button}
           onPress={() =>
             processVideo((uri) =>
               navigation.navigate('CaptionScreen', {
@@ -355,10 +359,9 @@ export const EditMedia: React.FC<EditMediaProps> = ({route, navigation}) => {
             )
           }
           title={'Next'}
-          buttonStyle={'normal'}
+          buttonStyle={'large'}
           buttonColor={'blue'}
           labelColor={'white'}
-          style={styles.button}
           labelStyle={styles.buttonLabel}
         />
       </View>
@@ -379,14 +382,20 @@ const styles = StyleSheet.create({
     zIndex: 1,
     marginLeft: '5%',
   },
+  bottomContainer: {
+    width: SCREEN_WIDTH * 0.8,
+    justifyContent: 'space-between',
+    marginBottom: SCREEN_HEIGHT * 0.1,
+    alignItems: 'center',
+    alignSelf: 'center',
+    flexDirection: 'row',
+  },
+  saveButton: {
+    width: 50,
+  },
   button: {
-    zIndex: 1,
-    position: 'absolute',
-    bottom: normalize(20),
-    right: normalize(15),
     width: normalize(108),
-    height: normalize(25),
-    borderRadius: 10,
+    height: normalize(36),
   },
   buttonLabel: {
     fontWeight: '700',
@@ -432,10 +441,6 @@ const styles = StyleSheet.create({
     width: 25,
     height: 25,
   },
-  bottomContainer: {
-    width: SCREEN_WIDTH * 0.7,
-    justifyContent: 'space-between',
-  },
 });
 
 export default EditMedia;
-- 
cgit v1.2.3-70-g09d2