Page MenuHomePhabricator
Files F3246565

D9643.id32521.diff
No OneTemporary
Actions

D9643.id32521.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,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 (
<View style={styles.keyserverListItemContainer}>
@@ -45,10 +53,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(
@@ -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<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:40 AM (20 h, 47 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2495902
Default Alt Text
D9643.id32521.diff (3 KB)

Event Timeline