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( + () => ( + + ), + [colors.panelForegroundLabel], + ); + + const onPressRemoveKeyserver = React.useCallback(() => { + // TODO + }, []); + return ( - {null} + + + + + + + + + {keyserverInfo.urlPrefix} + + + Disconnecting from this keyserver will remove you from its associated + communities. + + + Any messages or content you have previously sent will remain on the + keyserver. + + + ); } +const unboundStyles = { + container: { + paddingHorizontal: 16, + }, + keyserverDetailsContainer: { + alignItems: 'center', + justifyContent: 'space-between', + paddingVertical: 16, + backgroundColor: 'modalAccentBackground', + 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; diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -100,6 +100,7 @@ modalInputBackground: designSystemColors.shadesWhite60, modalInputForeground: designSystemColors.shadesWhite90, modalKnob: designSystemColors.shadesWhite90, + modalAccentBackground: designSystemColors.shadesWhite90, navigationCard: designSystemColors.shadesWhite100, navigationChevron: designSystemColors.shadesWhite60, panelBackground: designSystemColors.shadesWhite90, @@ -201,6 +202,7 @@ modalInputBackground: designSystemColors.shadesBlack75, modalInputForeground: designSystemColors.shadesBlack50, modalKnob: designSystemColors.shadesWhite90, + modalAccentBackground: designSystemColors.shadesBlack90, navigationCard: '#2A2A2A', navigationChevron: designSystemColors.shadesBlack60, panelBackground: designSystemColors.shadesBlack95,