diff --git a/native/profile/keyserver-selection-list.react.js b/native/profile/keyserver-selection-list.react.js --- a/native/profile/keyserver-selection-list.react.js +++ b/native/profile/keyserver-selection-list.react.js @@ -36,7 +36,15 @@ const renderKeyserverListItem = React.useCallback( ({ item }) => { - const { keyserverAdminUsername } = item; + const { keyserverAdminUsername, keyserverInfo } = item; + + let connectionIndicatorOuterStyle = styles.offlineIndicatorOuter; + let connectionIndicatorInnerStyle = styles.offlineIndicatorInner; + + if (keyserverInfo.connection.status === 'connected') { + connectionIndicatorOuterStyle = styles.onlineIndicatorOuter; + connectionIndicatorInnerStyle = styles.onlineIndicatorInner; + } return ( @@ -45,10 +53,21 @@ backgroundColor={colors.codeBackground} icon={cloudIcon} /> + + + ); }, - [cloudIcon, colors.codeBackground, styles.keyserverListItemContainer], + [ + cloudIcon, + colors.codeBackground, + styles.keyserverListItemContainer, + styles.offlineIndicatorInner, + styles.offlineIndicatorOuter, + styles.onlineIndicatorInner, + styles.onlineIndicatorOuter, + ], ); const keyserverListSeparatorComponent = React.useCallback( @@ -114,6 +133,34 @@ height: 1, marginHorizontal: 16, }, + onlineIndicatorOuter: { + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'greenIndicatorOuter', + width: 18, + height: 18, + borderRadius: 9, + }, + onlineIndicatorInner: { + backgroundColor: 'greenIndicatorInner', + width: 9, + height: 9, + borderRadius: 4.5, + }, + offlineIndicatorOuter: { + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'redIndicatorOuter', + width: 18, + height: 18, + borderRadius: 9, + }, + offlineIndicatorInner: { + backgroundColor: 'redIndicatorInner', + width: 9, + height: 9, + borderRadius: 4.5, + }, }; export default KeyserverSelectionList; diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -145,6 +145,10 @@ secondaryButtonBorder: designSystemColors.shadesWhite100, inviteLinkLinkColor: designSystemColors.shadesBlack100, inviteLinkButtonBackground: designSystemColors.shadesWhite60, + greenIndicatorInner: designSystemColors.successPrimary, + greenIndicatorOuter: designSystemColors.successDark90, + redIndicatorInner: designSystemColors.errorPrimary, + redIndicatorOuter: designSystemColors.errorDark90, }); export type Colors = $Exact; @@ -245,6 +249,10 @@ secondaryButtonBorder: designSystemColors.shadesWhite100, inviteLinkLinkColor: designSystemColors.shadesWhite80, inviteLinkButtonBackground: designSystemColors.shadesBlack80, + greenIndicatorInner: designSystemColors.successPrimary, + greenIndicatorOuter: designSystemColors.successDark90, + redIndicatorInner: designSystemColors.errorPrimary, + redIndicatorOuter: designSystemColors.errorDark90, }); const colors = { light, dark };