fix: android footer and status bar

Signed-off-by: clegirar <clemntgirard@gmail.com>
berty · May 3, 2021 · 9ac3951 · 9ac3951
1 parent ec5f420
commit 9ac3951
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/js/packages/components/chat/ContactSettings.tsx b/js/packages/components/chat/ContactSettings.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, ScrollView, ActivityIndicator } from 'react-native'
+import { View, ScrollView, ActivityIndicator, StatusBar } from 'react-native'
 import { Text } from '@ui-kitten/components'
 import { useTranslation } from 'react-i18next'
 
@@ -132,7 +132,7 @@ export const ContactSettings: React.FC<ScreenProps.Chat.ContactSettings> = ({ ro
 	const { contactId } = route.params
 	const { goBack } = useNavigation()
 	const contact: any = (useContacts() as any)[contactId] || null
-	const [{ background, flex, padding }] = useStyles()
+	const [{ background, flex, padding, color }] = useStyles()
 	if (!contact) {
 		goBack()
 		return (
@@ -144,17 +144,22 @@ export const ContactSettings: React.FC<ScreenProps.Chat.ContactSettings> = ({ ro
 		)
 	}
 	return (
-		<ScrollView
-			style={[flex.tiny, background.white]}
-			contentContainerStyle={[padding.bottom.huge]}
-			bounces={false}
-		>
-			<SwipeNavRecognizer>
-				<HeaderSettings actionIcon='upload' undo={goBack}>
-					<ContactSettingsHeader contact={contact} />
-				</HeaderSettings>
-				<ContactSettingsBody id={contact.publicKey} />
-			</SwipeNavRecognizer>
-		</ScrollView>
+		<>
+			<View style={[flex.tiny]}>
+				<StatusBar backgroundColor={color.blue} barStyle='light-content' />
+				<ScrollView
+					style={[flex.tiny, background.white]}
+					contentContainerStyle={[padding.bottom.huge]}
+					bounces={false}
+				>
+					<SwipeNavRecognizer>
+						<HeaderSettings actionIcon='upload' undo={goBack}>
+							<ContactSettingsHeader contact={contact} />
+						</HeaderSettings>
+						<ContactSettingsBody id={contact.publicKey} />
+					</SwipeNavRecognizer>
+				</ScrollView>
+			</View>
+		</>
 	)
 }
diff --git a/js/packages/components/chat/OneToOneSettings.tsx b/js/packages/components/chat/OneToOneSettings.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ScrollView, View } from 'react-native'
+import { ScrollView, View, StatusBar } from 'react-native'
 import { Text } from '@ui-kitten/components'
 import { useTranslation } from 'react-i18next'
 
@@ -130,7 +130,7 @@ export const OneToOneSettings: React.FC<ScreenProps.Chat.OneToOneSettings> = ({
 	route: { params },
 }) => {
 	const { goBack, navigate } = useNavigation()
-	const [{ flex, background, padding }] = useStyles()
+	const [{ flex, background, padding, color }] = useStyles()
 	const { convId } = params
 	const conv = useConversation(convId)
 	const contact = useContact(conv?.contactPublicKey)
@@ -143,6 +143,7 @@ export const OneToOneSettings: React.FC<ScreenProps.Chat.OneToOneSettings> = ({
 	return (
 		<>
 			<View style={[flex.tiny]}>
+				<StatusBar backgroundColor={color.blue} barStyle='light-content' />
 				<ScrollView
 					style={[flex.tiny, background.white]}
 					contentContainerStyle={[padding.bottom.huge]}

diff --git a/js/packages/components/chat/common.tsx b/js/packages/components/chat/common.tsx
@@ -376,7 +376,7 @@ export const ChatFooter: React.FC<{
 						padding.left.small,
 						!_isFocused && padding.right.small,
 						{
-							alignItems: _isFocused && inputHeight > 35 ? 'flex-end' : 'center',
+							alignItems: 'center',
 							flexDirection: 'row',
 						},
 					]}
@@ -408,7 +408,7 @@ export const ChatFooter: React.FC<{
 							flex: 1,
 							paddingLeft: 9 * scaleSize,
 							paddingRight: 4 * scaleSize,
-							alignItems: _isFocused && inputHeight > 35 ? 'flex-end' : 'center',
+							alignItems: 'center',
 							flexDirection: 'row',
 						}}
 					>
@@ -425,7 +425,6 @@ export const ChatFooter: React.FC<{
 						<Animated.View
 							style={[
 								border.radius.medium,
-
 								{
 									alignSelf: 'flex-end',
 									backgroundColor: _isFocused ? '#E8E9FC99' : '#F7F8FF',
@@ -434,7 +433,6 @@ export const ChatFooter: React.FC<{
 									marginLeft: 9 * scaleSize,
 									zIndex: 100,
 									elevation: 100,
-
 									flex: 1,
 								},
 							]}
@@ -453,6 +451,7 @@ export const ChatFooter: React.FC<{
 									padding.left.small,
 									{
 										paddingVertical: 5 * scaleSize,
+										justifyContent: 'center',
 									},
 								]}
 							>
@@ -478,7 +477,6 @@ export const ChatFooter: React.FC<{
 											height: inputHeight < 35 ? 35 * scaleSize : inputHeight * scaleSize,
 											fontFamily: 'Open Sans',
 											marginTop: 3 * scaleSize,
-											fontSize: 15 * scaleSize,
 											paddingRight: 12 * scaleSize,
 										},
 									]}

diff --git a/js/packages/components/main/Scan.tsx b/js/packages/components/main/Scan.tsx
@@ -6,6 +6,7 @@ import {
 	TouchableOpacity,
 	Vibration,
 	Text as TextNative,
+	StatusBar,
 } from 'react-native'
 import { Layout, Text, Icon } from '@ui-kitten/components'
 import QRCodeScanner from 'react-native-qrcode-scanner'
@@ -15,7 +16,7 @@ import { useStyles } from '@berty-tech/styles'
 import { useNavigation } from '@react-navigation/native'
 
 import ScanTarget from './scan_target.svg'
-import { SwipeNavRecognizer } from '../shared-components/SwipeNavRecognizer.tsx'
+import { SwipeNavRecognizer } from '../shared-components/SwipeNavRecognizer'
 
 //
 // Scan => Scan QrCode of an other contact
@@ -211,11 +212,12 @@ const ScanComponent: React.FC<any> = () => {
 }
 
 export const Scan: React.FC<{}> = () => {
-	const [{ flex }] = useStyles()
+	const [{ flex, color }] = useStyles()
 	const navigation = useNavigation()
 
 	return (
 		<Layout style={[flex.tiny, { backgroundColor: 'transparent' }]}>
+			<StatusBar backgroundColor={color.red} barStyle='light-content' />
 			<SwipeNavRecognizer
 				onSwipeRight={() => navigation.goBack()}
 				onSwipeLeft={() => navigation.goBack()}