diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js --- a/native/account/registration/keyserver-selection.react.js +++ b/native/account/registration/keyserver-selection.react.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react'; -import { Text, TextInput } from 'react-native'; +import { Text, TextInput, View } from 'react-native'; import RegistrationButton from './registration-button.react.js'; import RegistrationContainer from './registration-container.react.js'; @@ -46,57 +46,64 @@ const styles = useStyles(unboundStyles); const colors = useColors(); return ( - - Select a keyserver to join - - Chat communities on Comm are hosted on keyservers, which are - user-operated backends. - - - Keyservers allow Comm to offer strong privacy guarantees without - sacrificing functionality. - - - - - ashoat - - - Ashoat is Comm’s founder, and his keyserver currently hosts most of - the communities on Comm. + + + Select a keyserver to join + + Chat communities on Comm are hosted on keyservers, which are + user-operated backends. + + + Keyservers allow Comm to offer strong privacy guarantees without + sacrificing functionality. - - - - Enter a keyserver - - - + + + + ashoat + + + Ashoat is Comm’s founder, and his keyserver currently hosts most of + the communities on Comm. + + + + + Enter a keyserver + + + + - + ); } const unboundStyles = { + container: { + backgroundColor: 'panelBackground', + justifyContent: 'space-between', + flex: 1, + }, header: { fontSize: 24, color: 'panelForegroundLabel', diff --git a/native/account/registration/registration-button.react.js b/native/account/registration/registration-button.react.js --- a/native/account/registration/registration-button.react.js +++ b/native/account/registration/registration-button.react.js @@ -24,6 +24,7 @@ button: { backgroundColor: 'purpleButton', borderRadius: 8, + margin: 16, }, buttonText: { fontSize: 18, diff --git a/native/account/registration/registration-container.react.js b/native/account/registration/registration-container.react.js --- a/native/account/registration/registration-container.react.js +++ b/native/account/registration/registration-container.react.js @@ -7,10 +7,14 @@ import KeyboardAvoidingView from '../../components/keyboard-avoiding-view.react.js'; import { useStyles } from '../../themes/colors.js'; +type ViewProps = React.ElementConfig; type Props = { + ...ViewProps, +children: React.Node, }; function RegistrationContainer(props: Props): React.Node { + const { children, style, ...rest } = props; + const headerHeight = useHeaderHeight(); const backgroundStyle = React.useMemo( () => ({ @@ -20,13 +24,19 @@ ); const styles = useStyles(unboundStyles); + const contentContainerStyle = React.useMemo( + () => [styles.scrollViewContentContainer, style], + [styles.scrollViewContentContainer, style], + ); + return ( - {props.children} + {children} );