Page MenuHomePhabricator
Files F2752780

D7576.id25566.diff
No OneTemporary
Actions

D7576.id25566.diff
View Options

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,12 +1,17 @@
// @flow
import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, TextInput } from 'react-native';
import RegistrationContainer from './registration-container.react.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';
+import {
+ RegistrationTile,
+ RegistrationTileHeader,
+} from './registration-tile.react.js';
+import CommIcon from '../../components/comm-icon.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
-import { useStyles } from '../../themes/colors.js';
+import { useStyles, useColors } from '../../themes/colors.js';
type Props = {
+navigation: RegistrationNavigationProp<'KeyserverSelection'>,
@@ -15,17 +20,77 @@
// eslint-disable-next-line no-unused-vars
function KeyserverSelection(props: Props): React.Node {
const styles = useStyles(unboundStyles);
+ const colors = useColors();
return (
<RegistrationContainer>
- <Text style={styles.testText}>Test Hello Test</Text>
+ <Text style={styles.header}>Select a keyserver to join</Text>
+ <Text style={styles.body}>
+ Chat communities on Comm are hosted on keyservers, which are
+ user-operated backends.
+ </Text>
+ <Text style={styles.body}>
+ Keyservers allow Comm to offer strong privacy guarantees without
+ sacrificing functionality.
+ </Text>
+ <RegistrationTile>
+ <RegistrationTileHeader>
+ <CommIcon
+ name="cloud-filled"
+ size={16}
+ color={colors.panelForegroundLabel}
+ style={styles.cloud}
+ />
+ <Text style={styles.tileTitleText}>ashoat</Text>
+ </RegistrationTileHeader>
+ <Text style={styles.tileBody}>
+ Ashoat is Comm’s founder, and his keyserver currently hosts most of
+ the communities on Comm.
+ </Text>
+ </RegistrationTile>
+ <RegistrationTile>
+ <RegistrationTileHeader>
+ <Text style={styles.tileTitleText}>Enter a keyserver</Text>
+ </RegistrationTileHeader>
+ <TextInput
+ style={styles.keyserverInput}
+ placeholderTextColor={colors.panelSecondaryForegroundBorder}
+ placeholder="Keyserver"
+ />
+ </RegistrationTile>
</RegistrationContainer>
);
}
const unboundStyles = {
- testText: {
+ header: {
fontSize: 24,
- color: 'white',
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ },
+ body: {
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'panelForegroundSecondaryLabel',
+ paddingBottom: 16,
+ },
+ tileTitleText: {
+ flex: 1,
+ fontSize: 18,
+ color: 'panelForegroundLabel',
+ },
+ tileBody: {
+ fontSize: 13,
+ color: 'panelForegroundSecondaryLabel',
+ },
+ cloud: {
+ marginRight: 8,
+ },
+ keyserverInput: {
+ color: 'panelForegroundLabel',
+ borderColor: 'panelSecondaryForegroundBorder',
+ borderWidth: 1,
+ borderRadius: 4,
+ padding: 12,
},
};
diff --git a/native/account/registration/registration-tile.react.js b/native/account/registration/registration-tile.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/registration-tile.react.js
@@ -0,0 +1,68 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useStyles } from '../../themes/colors.js';
+
+type TileProps = {
+ +children: React.Node,
+};
+function RegistrationTile(props: TileProps): React.Node {
+ const { children } = props;
+
+ let body = children;
+ let header;
+ if (Array.isArray(children)) {
+ body = [];
+ for (const child of children) {
+ if (child.type === RegistrationTileHeader) {
+ header = child;
+ } else {
+ body.push(child);
+ }
+ }
+ }
+
+ const styles = useStyles(unboundStyles);
+ return (
+ <View style={styles.tile}>
+ <View style={styles.tileTitle}>
+ {header}
+ <View style={styles.tileRadio} />
+ </View>
+ {body}
+ </View>
+ );
+}
+
+type HeaderProps = {
+ +children: React.Node,
+};
+function RegistrationTileHeader(props: HeaderProps): React.Node {
+ return props.children;
+}
+
+const unboundStyles = {
+ tile: {
+ backgroundColor: 'panelForeground',
+ paddingHorizontal: 16,
+ paddingVertical: 20,
+ borderRadius: 8,
+ marginTop: 24,
+ },
+ tileTitle: {
+ paddingBottom: 16,
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ tileRadio: {
+ borderColor: 'panelSecondaryForegroundBorder',
+ borderWidth: 1,
+ height: 24,
+ width: 24,
+ borderRadius: 12,
+ },
+};
+
+export { RegistrationTile, RegistrationTileHeader };

File Metadata

Mime Type
text/plain
Expires
Thu, Sep 19, 4:18 PM (7 h, 34 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2140745
Default Alt Text
D7576.id25566.diff (4 KB)

Event Timeline