1import * as React from 'react' 2import * as Kb from '../../../common-adapters' 3import * as Styles from '../../../styles' 4import {Props} from './participant-rekey.types' 5 6const Row = (props: {username: string; onUsernameClicked: (s: string) => void}) => ( 7 <Kb.Box style={styles.row} onClick={() => props.onUsernameClicked(props.username)}> 8 <Kb.Avatar 9 username={props.username} 10 size={48} 11 style={{marginRight: Styles.globalMargins.small, padding: 4}} 12 /> 13 <Kb.Box style={styles.innerRow}> 14 <Kb.ConnectedUsernames inline={true} type="BodyBold" usernames={props.username} /> 15 <Kb.Text type="BodySmall" style={Styles.platformStyles({isElectron: {lineHeight: '17px'}})}> 16 Can rekey this chat by opening the Keybase app. 17 </Kb.Text> 18 </Kb.Box> 19 </Kb.Box> 20) 21 22const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => { 23 return ( 24 <Kb.Box style={styles.container}> 25 <Kb.Box 26 style={{ 27 ...Styles.globalStyles.flexBoxRow, 28 backgroundColor: Styles.globalColors.red, 29 justifyContent: 'center', 30 }} 31 > 32 <Kb.Text 33 negative={true} 34 style={{paddingBottom: 8, paddingLeft: 24, paddingRight: 24, paddingTop: 8}} 35 type="BodySemibold" 36 > 37 This conversation is waiting for a participant to open their Keybase app. 38 </Kb.Text> 39 </Kb.Box> 40 <Kb.Box 41 style={{ 42 ...Styles.globalStyles.flexBoxColumn, 43 flex: 1, 44 justifyContent: 'center', 45 marginLeft: 8, 46 overflow: 'auto', 47 }} 48 > 49 <Kb.Box> 50 {rekeyers.map(username => ( 51 <Row key={username} username={username} onUsernameClicked={onUsernameClicked} /> 52 ))} 53 </Kb.Box> 54 </Kb.Box> 55 </Kb.Box> 56 ) 57} 58 59const styles = Styles.styleSheetCreate( 60 () => 61 ({ 62 container: Styles.platformStyles({ 63 isElectron: { 64 ...Styles.globalStyles.flexBoxColumn, 65 alignItems: 'stretch', 66 backgroundColor: Styles.globalColors.white, 67 borderLeft: `1px solid ${Styles.globalColors.black_20}`, 68 flex: 1, 69 justifyContent: 'flex-start', 70 }, 71 }), 72 innerRow: Styles.platformStyles({ 73 isElectron: { 74 ...Styles.globalStyles.flexBoxColumn, 75 borderBottom: `1px solid ${Styles.globalColors.black_10}`, 76 flex: 1, 77 justifyContent: 'center', 78 }, 79 }), 80 row: Styles.platformStyles({ 81 isElectron: { 82 ...Styles.globalStyles.flexBoxRow, 83 ...Styles.desktopStyles.clickable, 84 minHeight: 48, 85 }, 86 }), 87 } as const) 88) 89 90export default ParticipantRekey 91