From 90125f043b12cab8f99574ebcf5c322d719a7d85 Mon Sep 17 00:00:00 2001 From: Adam Spooner <adamjspooner@gmail.com> Date: Wed, 15 Apr 2020 11:22:42 -0400 Subject: [PATCH] Add a tooltip. (#23785) --- shared/chat/inbox/row/small-team/bottom-line.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/shared/chat/inbox/row/small-team/bottom-line.tsx b/shared/chat/inbox/row/small-team/bottom-line.tsx index 05f2ff295bf7..f762b4466a62 100644 --- a/shared/chat/inbox/row/small-team/bottom-line.tsx +++ b/shared/chat/inbox/row/small-team/bottom-line.tsx @@ -20,8 +20,8 @@ type Props = { draft?: string } -const SnippetDecoration = (type: Kb.IconType, color: string) => { - return ( +const SnippetDecoration = (type: Kb.IconType, color: string, tooltip?: string) => { + const icon = ( <Kb.Icon color={color} type={type} @@ -29,6 +29,7 @@ const SnippetDecoration = (type: Kb.IconType, color: string) => { style={{alignSelf: 'flex-start'}} /> ) + return tooltip ? <Kb.WithTooltip tooltip={tooltip}>{icon}</Kb.WithTooltip> : icon } const BottomLine = React.memo((props: Props) => { @@ -90,12 +91,13 @@ const BottomLine = React.memo((props: Props) => { switch (props.snippetDecoration) { case RPCChatTypes.SnippetDecoration.pendingMessage: - snippetDecoration = SnippetDecoration('iconfont-hourglass', defaultIconColor) + snippetDecoration = SnippetDecoration('iconfont-hourglass', defaultIconColor, 'Sending…') break case RPCChatTypes.SnippetDecoration.failedPendingMessage: snippetDecoration = SnippetDecoration( 'iconfont-exclamation', - props.isSelected ? Styles.globalColors.white : Styles.globalColors.red + props.isSelected ? Styles.globalColors.white : Styles.globalColors.red, + 'Failed to send' ) break case RPCChatTypes.SnippetDecoration.explodingMessage: