Page MenuHomePhabricator
Files F3246566

D9643.id32649.diff
No OneTemporary
Actions

D9643.id32649.diff
View Options

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 (
<View style={styles.keyserverListItemContainer}>
@@ -45,10 +55,21 @@
backgroundColor={colors.codeBackground}
icon={cloudIcon}
/>
+ <View style={connectionIndicatorOuterStyle}>
+ <View style={connectionIndicatorInnerStyle} />
+ </View>
</View>
);
},
- [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<typeof light>;
@@ -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 };

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 16, 12:41 AM (20 h, 31 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2495601
Default Alt Text
D9643.id32649.diff (3 KB)

Event Timeline