Changeset View
Changeset View
Standalone View
Standalone View
native/community-creation/community-configuration.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { Text, View } from 'react-native'; | |||||
import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js'; | import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js'; | ||||
import RegistrationContainer from '../account/registration/registration-container.react.js'; | |||||
import RegistrationContentContainer from '../account/registration/registration-content-container.react.js'; | |||||
import CommIcon from '../components/comm-icon.react.js'; | |||||
import Pill from '../components/pill.react.js'; | |||||
import { type NavigationRoute } from '../navigation/route-names.js'; | import { type NavigationRoute } from '../navigation/route-names.js'; | ||||
import { useColors, useStyles } from '../themes/colors.js'; | |||||
type Props = { | type Props = { | ||||
+navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>, | +navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>, | ||||
+route: NavigationRoute<'CommunityConfiguration'>, | +route: NavigationRoute<'CommunityConfiguration'>, | ||||
}; | }; | ||||
// eslint-disable-next-line no-unused-vars | // eslint-disable-next-line no-unused-vars | ||||
function CommunityConfiguration(props: Props): React.Node { | function CommunityConfiguration(props: Props): React.Node { | ||||
return null; | const styles = useStyles(unboundStyles); | ||||
const colors = useColors(); | |||||
const cloudIcon = ( | |||||
<CommIcon | |||||
name="cloud-filled" | |||||
size={12} | |||||
color={colors.panelForegroundLabel} | |||||
/> | |||||
); | |||||
return ( | |||||
<RegistrationContainer> | |||||
<RegistrationContentContainer style={styles.containerPaddingOverride}> | |||||
<View style={styles.keyserverRowContainer}> | |||||
<Text style={styles.withinText}>within</Text> | |||||
<Pill | |||||
label="ashoat" | |||||
backgroundColor={colors.codeBackground} | |||||
icon={cloudIcon} | |||||
/> | |||||
</View> | |||||
</RegistrationContentContainer> | |||||
</RegistrationContainer> | |||||
); | |||||
} | } | ||||
const unboundStyles = { | |||||
keyserverRowContainer: { | |||||
flexDirection: 'row', | |||||
justifyContent: 'center', | |||||
alignItems: 'center', | |||||
backgroundColor: 'panelForeground', | |||||
height: 48, | |||||
borderColor: 'panelForegroundBorder', | |||||
borderBottomWidth: 1, | |||||
}, | |||||
withinText: { | |||||
color: 'panelForegroundLabel', | |||||
fontSize: 14, | |||||
marginRight: 6, | |||||
}, | |||||
containerPaddingOverride: { | |||||
padding: 0, | |||||
}, | |||||
}; | |||||
export default CommunityConfiguration; | export default CommunityConfiguration; |