Page MenuHomePhabricator
Files F3246943

D9754.id32920.diff
No OneTemporary
Actions

D9754.id32920.diff
View Options

diff --git a/native/profile/keyserver-selection-bottom-sheet.react.js b/native/profile/keyserver-selection-bottom-sheet.react.js
--- a/native/profile/keyserver-selection-bottom-sheet.react.js
+++ b/native/profile/keyserver-selection-bottom-sheet.react.js
@@ -1,12 +1,18 @@
// @flow
import * as React from 'react';
+import { View, Text } from 'react-native';
import type { KeyserverInfo } from 'lib/types/keyserver-types.js';
import BottomSheet from '../bottom-sheet/bottom-sheet.react.js';
+import Button from '../components/button.react.js';
+import CommIcon from '../components/comm-icon.react.js';
+import Pill from '../components/pill.react.js';
+import StatusIndicator from '../components/status-indicator.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
+import { useColors, useStyles } from '../themes/colors.js';
export type KeyserverSelectionBottomSheetParams = {
+keyserverAdminUsername: string,
@@ -19,17 +25,106 @@
};
function KeyserverSelectionBottomSheet(props: Props): React.Node {
- const { navigation } = props;
+ const {
+ navigation,
+ route: {
+ params: { keyserverAdminUsername, keyserverInfo },
+ },
+ } = props;
const { goBack } = navigation;
const bottomSheetRef = React.useRef();
+ const colors = useColors();
+ const styles = useStyles(unboundStyles);
+
+ const cloudIcon = React.useMemo(
+ () => (
+ <CommIcon
+ name="cloud-filled"
+ size={12}
+ color={colors.panelForegroundLabel}
+ />
+ ),
+ [colors.panelForegroundLabel],
+ );
+
+ const onPressRemoveKeyserver = React.useCallback(() => {
+ // TODO
+ }, []);
+
return (
<BottomSheet ref={bottomSheetRef} onClosed={goBack}>
- {null}
+ <View style={styles.container}>
+ <View style={styles.keyserverDetailsContainer}>
+ <View style={styles.keyserverHeaderContainer}>
+ <Pill
+ label={keyserverAdminUsername}
+ backgroundColor={colors.codeBackground}
+ icon={cloudIcon}
+ />
+ <View style={styles.statusIndicatorContainer}>
+ <StatusIndicator connectionInfo={keyserverInfo.connection} />
+ </View>
+ </View>
+ <Text style={styles.keyserverURLText}>www.ginsu.com</Text>
+ </View>
+ <Text style={styles.keyserverRemoveText}>
+ Disconnecting from this keyserver will remove you from its associated
+ communities.
+ </Text>
+ <Text style={styles.keyserverRemoveText}>
+ Any messages or content you have previously sent will remain on the
+ keyserver.
+ </Text>
+ <Button
+ style={styles.removeButtonContainer}
+ onPress={onPressRemoveKeyserver}
+ >
+ <Text style={styles.removeButtonText}>Disconnect keyserver</Text>
+ </Button>
+ </View>
</BottomSheet>
);
}
+const unboundStyles = {
+ container: {
+ paddingHorizontal: 16,
+ },
+ keyserverDetailsContainer: {
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ paddingVertical: 16,
+ backgroundColor: 'drawerOpenCommunityBackground',
+ marginBottom: 24,
+ borderRadius: 8,
+ },
+ keyserverHeaderContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ statusIndicatorContainer: {
+ marginLeft: 8,
+ },
+ keyserverURLText: {
+ color: 'modalForegroundLabel',
+ marginTop: 8,
+ },
+ keyserverRemoveText: {
+ color: 'modalForegroundLabel',
+ marginBottom: 24,
+ },
+ removeButtonContainer: {
+ backgroundColor: 'vibrantRedButton',
+ paddingVertical: 12,
+ borderRadius: 8,
+ alignItems: 'center',
+ },
+ removeButtonText: {
+ color: 'floatingButtonLabel',
+ },
+};
+
export default KeyserverSelectionBottomSheet;

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 16, 2:34 AM (20 h, 49 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2496161
Default Alt Text
D9754.id32920.diff (3 KB)

Event Timeline