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,17 @@ const renderKeyserverListItem = React.useCallback( ({ item }) => { - const { keyserverAdminUsername } = item; + const { keyserverAdminUsername, keyserverInfo } = item; + + const isConnected = keyserverInfo.connection.status === 'connected'; + + const connectionIndicatorOuterStyle = isConnected + ? styles.onlineIndicatorOuter + : styles.offlineIndicatorOuter; + + const connectionIndicatorInnerStyle = isConnected + ? styles.onlineIndicatorInner + : styles.offlineIndicatorInner; return ( @@ -45,10 +55,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( @@ -115,6 +136,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.successDark50, + redIndicatorInner: designSystemColors.errorPrimary, + redIndicatorOuter: designSystemColors.errorDark50, }); 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 };