diff --git a/shared/app/global-errors.tsx b/shared/app/global-errors.tsx index d1257d310d98..34096f4029c2 100644 --- a/shared/app/global-errors.tsx +++ b/shared/app/global-errors.tsx @@ -213,7 +213,7 @@ const GlobalError = () => { } return ( - + {summary} @@ -239,7 +239,7 @@ const GlobalError = () => { {details} - + ) } diff --git a/shared/app/runtime-stats.tsx b/shared/app/runtime-stats.tsx index 4214b75d8e5c..ae2bc1d8ff0b 100644 --- a/shared/app/runtime-stats.tsx +++ b/shared/app/runtime-stats.tsx @@ -226,7 +226,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => { return ( <> - setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}> + setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}> {!moreLogs && stats.processStats?.map((stat, i) => { return ( @@ -302,7 +302,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => { )*/} - + ) @@ -331,9 +331,9 @@ const RuntimeStatsMobile = ({stats}: Props) => { style={showLogs ? styles.modalLogStats : styles.modalLogStatsHidden} gap="xtiny" > - setShowLogs(s => !s)} direction="vertical"> + setShowLogs(s => !s)} direction="vertical"> - + {processStat && ( diff --git a/shared/chat/audio/audio-player.tsx b/shared/chat/audio/audio-player.tsx index 89556b0f0b5e..850f1e053afc 100644 --- a/shared/chat/audio/audio-player.tsx +++ b/shared/chat/audio/audio-player.tsx @@ -98,13 +98,13 @@ const AudioPlayer = (props: Props) => { style={Kb.Styles.collapseStyles([styles.container, {height: big ? 56 : 40}])} gap="tiny" > - + - + {formatAudioRecordDuration(timeLeft)} diff --git a/shared/chat/conversation/attachment-fullscreen/index.tsx b/shared/chat/conversation/attachment-fullscreen/index.tsx index b5315e66d4b1..6b233ff19d18 100644 --- a/shared/chat/conversation/attachment-fullscreen/index.tsx +++ b/shared/chat/conversation/attachment-fullscreen/index.tsx @@ -31,7 +31,7 @@ type ArrowProps = { const Arrow = (props: ArrowProps) => { const {left, onClick} = props return ( - { color={Kb.Styles.globalColors.white} style={Kb.Styles.collapseStyles([styles.arrow, left && styles.arrowLeft, !left && styles.arrowRight])} /> - + ) } diff --git a/shared/chat/conversation/attachment-get-titles.tsx b/shared/chat/conversation/attachment-get-titles.tsx index c0646705aa72..f5cdc54c5bea 100644 --- a/shared/chat/conversation/attachment-get-titles.tsx +++ b/shared/chat/conversation/attachment-get-titles.tsx @@ -198,7 +198,7 @@ const ContainerInner = (ownProps: OwnProps) => { return ( <> - inputRef.current?.blur()}> + inputRef.current?.blur()}> {preview} {pathAndInfos.length > 0 && !isMobile && ( @@ -227,7 +227,7 @@ const ContainerInner = (ownProps: OwnProps) => { inputStyle={styles.input} /> - + {!isMobile && } {isLast ? ( diff --git a/shared/chat/conversation/bot/team-picker.tsx b/shared/chat/conversation/bot/team-picker.tsx index 1cc6088612b2..bab019e94579 100644 --- a/shared/chat/conversation/bot/team-picker.tsx +++ b/shared/chat/conversation/bot/team-picker.tsx @@ -44,7 +44,7 @@ const BotTeamPicker = (props: Props) => { } const renderResult = (index: number, item: T.RPCChat.ConvSearchHit) => { return ( - onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}> + onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}> {item.isTeam ? ( ) : ( @@ -53,7 +53,7 @@ const BotTeamPicker = (props: Props) => { {item.name} - + ) } return ( diff --git a/shared/chat/conversation/fwd-msg.tsx b/shared/chat/conversation/fwd-msg.tsx index 18e179f5c929..112984361c51 100644 --- a/shared/chat/conversation/fwd-msg.tsx +++ b/shared/chat/conversation/fwd-msg.tsx @@ -159,7 +159,7 @@ const TeamPickerInner = (props: Props) => { const renderResult = (index: number, item: T.RPCChat.ConvSearchHit) => { return ( - onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}> + onSelect(item.convID)} direction="horizontal" fullWidth={true} gap="tiny" style={styles.results}> {item.isTeam ? ( { {item.name} - + ) } diff --git a/shared/chat/conversation/info-panel/attachments.tsx b/shared/chat/conversation/info-panel/attachments.tsx index e0094cb63780..f8b3390681c9 100644 --- a/shared/chat/conversation/info-panel/attachments.tsx +++ b/shared/chat/conversation/info-panel/attachments.tsx @@ -188,7 +188,7 @@ const MediaThumb = (props: MediaThumbProps) => { const {sizing, thumb} = props return ( - + {thumb.typ === ThumbTyp.AUDIO ? ( @@ -206,7 +206,7 @@ const MediaThumb = (props: MediaThumbProps) => { ) : ( )} - + {thumb.typ === ThumbTyp.VIDEO && ( @@ -231,7 +231,7 @@ const DocViewRow = (props: DocViewRowProps) => { }) return ( - + {item.name} @@ -240,7 +240,7 @@ const DocViewRow = (props: DocViewRowProps) => { Sent by {item.author} • {formatTimeForMessages(item.ctime)} - + {item.downloading && ( Downloading... @@ -271,7 +271,7 @@ const getColor = (selected: boolean) => const AttachmentTypeSelector = (props: SelectorProps) => ( - ( Media - - + ( Docs - - + ( Links - + ) @@ -916,7 +916,7 @@ export const useAttachmentSections = ( key: month.key, renderItem: ({item}: {item: Item}) => { return item.type === 'link' ? ( - {!!item.title && } - + ) : null }, renderSectionHeader: () => , diff --git a/shared/chat/conversation/info-panel/settings/min-writer-role.tsx b/shared/chat/conversation/info-panel/settings/min-writer-role.tsx index f8ea37b6dde8..e77a57e662b2 100644 --- a/shared/chat/conversation/info-panel/settings/min-writer-role.tsx +++ b/shared/chat/conversation/info-panel/settings/min-writer-role.tsx @@ -140,7 +140,7 @@ const Dropdown = (p: DropdownProps) => { ]) return ( <> - { {upperFirst(minWriterRole)} - + {popup} diff --git a/shared/chat/conversation/input-area/normal/input.tsx b/shared/chat/conversation/input-area/normal/input.tsx index 3ea834ada2c9..c3052a7b15c6 100644 --- a/shared/chat/conversation/input-area/normal/input.tsx +++ b/shared/chat/conversation/input-area/normal/input.tsx @@ -463,7 +463,7 @@ const ExplodingButton = function ExplodingButton(p: ExplodingButtonProps) { const {popup, popupAnchor, showingPopup, showPopup} = Kb.usePopup2(makePopup) return ( - )} - + ) } @@ -986,7 +986,7 @@ const NativeButtons = function NativeButtons(p: NativeButtonsProps) { } const explodingIcon = !isEditing && !cannotWrite && ( - + {isExploding ? ( @@ -996,7 +996,7 @@ const NativeButtons = function NativeButtons(p: NativeButtonsProps) { ) : ( )} - + ) return ( @@ -1065,14 +1065,14 @@ const NativeAnimatedExpand = (() => { }, [expanded, offset]) return ( - + - + ) } } diff --git a/shared/chat/conversation/input-area/suggestors/common.tsx b/shared/chat/conversation/input-area/suggestors/common.tsx index d7c4c49fdecf..1c500be2a461 100644 --- a/shared/chat/conversation/input-area/suggestors/common.tsx +++ b/shared/chat/conversation/input-area/suggestors/common.tsx @@ -61,9 +61,9 @@ export function List(p: ListProps) { const [selectedIndex, setSelectedIndex] = React.useState(0) const renderItem = (idx: number, item: T) => ( - onSelected(item, true)}> + onSelected(item, true)}> - + ) const lastSelectedIndex = React.useRef(selectedIndex) diff --git a/shared/chat/conversation/messages/attachment/file.tsx b/shared/chat/conversation/messages/attachment/file.tsx index 8cc2995386c0..83a3f640d08a 100644 --- a/shared/chat/conversation/messages/attachment/file.tsx +++ b/shared/chat/conversation/messages/attachment/file.tsx @@ -109,7 +109,7 @@ function FileContainer(p: OwnProps) { : undefined return ( - + )} - + ) } diff --git a/shared/chat/conversation/messages/attachment/image/index.tsx b/shared/chat/conversation/messages/attachment/image/index.tsx index c189ccc40afa..c65fca6ed8a9 100644 --- a/shared/chat/conversation/messages/attachment/image/index.tsx +++ b/shared/chat/conversation/messages/attachment/image/index.tsx @@ -64,7 +64,7 @@ function Image(p: Props) { gap="xxtiny" > - - + {showTitle ? : null} <Transferring transferState={transferState} ratio={transferProgress} /> </Kb.Box2> diff --git a/shared/chat/conversation/messages/attachment/shared.tsx b/shared/chat/conversation/messages/attachment/shared.tsx index 032afbee1f88..28ed0b53960b 100644 --- a/shared/chat/conversation/messages/attachment/shared.tsx +++ b/shared/chat/conversation/messages/attachment/shared.tsx @@ -279,9 +279,9 @@ const useCollapseAction = (ordinal: T.Chat.Ordinal) => { const useCollapseIconDesktop = (ordinal: T.Chat.Ordinal, isCollapsed: boolean, isWhite: boolean) => { const onCollapse = useCollapseAction(ordinal) return ( - <Kb.ClickableBox3 direction="horizontal" alignSelf="flex-start" gap="xtiny" onClick={onCollapse}> + <Kb.ClickableBox direction="horizontal" alignSelf="flex-start" gap="xtiny" onClick={onCollapse}> <CollapseIcon isCollapsed={isCollapsed} isWhite={isWhite} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } const useCollapseIconMobile = (_ordinal: T.Chat.Ordinal, _isCollapsed: boolean, _isWhite: boolean) => null diff --git a/shared/chat/conversation/messages/cards/make-team.tsx b/shared/chat/conversation/messages/cards/make-team.tsx index f24a68134b6e..dcd677c9c186 100644 --- a/shared/chat/conversation/messages/cards/make-team.tsx +++ b/shared/chat/conversation/messages/cards/make-team.tsx @@ -12,7 +12,7 @@ const MakeTeam = () => { <Kb.Text type="BodySmallSemibold" style={styles.header} negative={true}> {"Make it a team? You'll be able to add and delete members as you wish."} </Kb.Text> - <Kb.ClickableBox3 onClick={onShowNewTeamDialog} direction="horizontal" alignItems="center" fullWidth={true} className="hover_container" gap="xtiny"> + <Kb.ClickableBox onClick={onShowNewTeamDialog} direction="horizontal" alignItems="center" fullWidth={true} className="hover_container" gap="xtiny"> <Kb.Text type="BodySmallSemiboldPrimaryLink" style={styles.link} @@ -27,7 +27,7 @@ const MakeTeam = () => { className="hover_contained_color_white" style={styles.icon} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> <Kb.ImageIcon type="icon-illustration-teams-80" style={styles.image} /> </Kb.Box2> diff --git a/shared/chat/conversation/messages/cards/new-chat.tsx b/shared/chat/conversation/messages/cards/new-chat.tsx index ed7a916c1d54..d63cfdf6ec2c 100644 --- a/shared/chat/conversation/messages/cards/new-chat.tsx +++ b/shared/chat/conversation/messages/cards/new-chat.tsx @@ -43,7 +43,7 @@ function NewCard(outerProps: Props) { <Kb.Text type="BodySmallSemibold" style={styles.header} negative={true}> {props.text} </Kb.Text> - <Kb.ClickableBox3 onClick={props.action} direction="horizontal" alignItems="center" fullWidth={true} className="hover_container" gap="xtiny"> + <Kb.ClickableBox onClick={props.action} direction="horizontal" alignItems="center" fullWidth={true} className="hover_container" gap="xtiny"> <Kb.Text type="BodySmallSemiboldPrimaryLink" style={styles.link} @@ -58,7 +58,7 @@ function NewCard(outerProps: Props) { className="hover_contained_color_white" style={styles.icon} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> <Kb.ImageIcon type={props.icon} diff --git a/shared/chat/conversation/messages/emoji-row.tsx b/shared/chat/conversation/messages/emoji-row.tsx index 07499ceffe6f..3c57ec97c436 100644 --- a/shared/chat/conversation/messages/emoji-row.tsx +++ b/shared/chat/conversation/messages/emoji-row.tsx @@ -82,7 +82,7 @@ function EmojiRowContainer(p: OwnProps) { </Kb.Box2> <Kb.Box2 direction="horizontal"> <Kb.Divider style={styles.divider} vertical={true} /> - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" className="hover_container" onClick={hasMessageID ? _showPicker : undefined} @@ -90,9 +90,9 @@ function EmojiRowContainer(p: OwnProps) { tooltip="React" > <Kb.Icon className="hover_contained_color_blue" style={styles.icon} type="iconfont-reacji" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> {!!onReply && ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" className="hover_container" onClick={onReply} @@ -100,10 +100,10 @@ function EmojiRowContainer(p: OwnProps) { tooltip="Reply" > <Kb.Icon className="hover_contained_color_blue" style={styles.icon} type="iconfont-reply" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} {!!onForward && ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" className="hover_container" onClick={onForward} @@ -111,7 +111,7 @@ function EmojiRowContainer(p: OwnProps) { tooltip="Forward" > <Kb.Icon className="hover_contained_color_blue" style={styles.icon} type="iconfont-forward" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} </Kb.Box2> {showingPicker && message && hasMessageID && ( @@ -138,7 +138,7 @@ const HoverEmoji = (props: {emoji: T.RPCGen.UserReacji; onClick: () => void}) => const _setHovering = () => setHovering(true) const _setNotHovering = () => setHovering(false) return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" centerChildren={true} onClick={props.onClick} @@ -154,7 +154,7 @@ const HoverEmoji = (props: {emoji: T.RPCGen.UserReacji; onClick: () => void}) => style={styles.hoverEmoji} virtualText={true} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/conversation/messages/message-popup/reactionitem.tsx b/shared/chat/conversation/messages/message-popup/reactionitem.tsx index 4e582712074a..4d7584e97914 100644 --- a/shared/chat/conversation/messages/message-popup/reactionitem.tsx +++ b/shared/chat/conversation/messages/message-popup/reactionitem.tsx @@ -23,13 +23,13 @@ const ReactionItem = (props: Props) => { return ( <Kb.Box2 direction="horizontal" fullWidth={true} flex={1} style={styles.container} justifyContent="space-between"> {topReacjis.map((r, idx) => ( - <Kb.ClickableBox3 direction="vertical" centerChildren={true} key={r.name || idx} onClick={() => onReact(r.name)} style={styles.clickableBox}> + <Kb.ClickableBox direction="vertical" centerChildren={true} key={r.name || idx} onClick={() => onReact(r.name)} style={styles.clickableBox}> <Kb.Emoji userReacji={r} noAnim={true} showTooltip={false} size={28} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ))} - <Kb.ClickableBox3 direction="vertical" centerChildren={true} onClick={showPicker} style={styles.clickableBox}> + <Kb.ClickableBox direction="vertical" centerChildren={true} onClick={showPicker} style={styles.clickableBox}> <Kb.Icon type="iconfont-reacji" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> ) } diff --git a/shared/chat/conversation/messages/react-button.tsx b/shared/chat/conversation/messages/react-button.tsx index c7e2b1ccf178..0adfa62ad248 100644 --- a/shared/chat/conversation/messages/react-button.tsx +++ b/shared/chat/conversation/messages/react-button.tsx @@ -37,7 +37,7 @@ function ReactionButton({ text: string }) { return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" centerChildren={true} fullHeight={true} @@ -72,7 +72,7 @@ function ReactionButton({ > {count} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } @@ -122,7 +122,7 @@ export function NewReactionButton(p: NewReactionButtonProps) { } return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" centerChildren={true} fullHeight={true} @@ -142,7 +142,7 @@ export function NewReactionButton(p: NewReactionButtonProps) { fontSize={18} style={styles.emojiIconWrapper} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/conversation/messages/text/reply.tsx b/shared/chat/conversation/messages/text/reply.tsx index b278232af4de..c153487238c3 100644 --- a/shared/chat/conversation/messages/text/reply.tsx +++ b/shared/chat/conversation/messages/text/reply.tsx @@ -82,7 +82,7 @@ function ReplyStructure(p: RS) { const {showImage, showEdited, isDeleted, onClick} = p return ( - <Kb.ClickableBox3 direction="horizontal" gap="tiny" fullWidth={true} style={styles.replyContainer} className={Kb.Styles.classNames('ReplyBox')} onClick={onClick}> + <Kb.ClickableBox direction="horizontal" gap="tiny" fullWidth={true} style={styles.replyContainer} className={Kb.Styles.classNames('ReplyBox')} onClick={onClick}> <Kb.Box2 direction="horizontal" alignSelf="stretch" style={styles.quoteContainer} /> <Kb.Box2 direction="vertical" gap="xtiny" flex={1}> <Kb.Box2 direction="horizontal" fullWidth={true}> @@ -106,7 +106,7 @@ function ReplyStructure(p: RS) { </Kb.Text> )} </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/index.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/index.tsx index 72db22882892..7f4b8513b418 100644 --- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/index.tsx +++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/index.tsx @@ -44,7 +44,7 @@ const UnfurlImage = (p: Props) => { width={width} /> ) : ( - <Kb.ClickableBox3 direction="vertical" onClick={onClick || onOpenURL}> + <Kb.ClickableBox direction="vertical" onClick={onClick || onOpenURL}> <Kb.Image src={url} style={Kb.Styles.collapseStyles([ @@ -53,7 +53,7 @@ const UnfurlImage = (p: Props) => { style, ])} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx index 358d6b7613fe..117041521221 100644 --- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx +++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx @@ -167,7 +167,7 @@ const NativeVideo = (props: Props) => { } return ( - <Kb.ClickableBox3 direction="vertical" relative={true} onClick={_onClick} style={Kb.Styles.collapseStyles([style, nativeStyles.container])}> + <Kb.ClickableBox direction="vertical" relative={true} onClick={_onClick} style={Kb.Styles.collapseStyles([style, nativeStyles.container])}> {active && ( <NativeActiveVideo sourceUri={sourceUri} @@ -179,7 +179,7 @@ const NativeVideo = (props: Props) => { <Kb.Box2 direction="vertical" style={Kb.Styles.collapseStyles([sharedStyles.absoluteContainer, {height, width}])}> {!playing && <Kb.ImageIcon type="icon-play-64" style={sharedStyles.playButton} />} </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/conversation/messages/wrapper/exploding-meta.tsx b/shared/chat/conversation/messages/wrapper/exploding-meta.tsx index 33fb1d20e9c8..1fc45c9f2fcc 100644 --- a/shared/chat/conversation/messages/wrapper/exploding-meta.tsx +++ b/shared/chat/conversation/messages/wrapper/exploding-meta.tsx @@ -195,9 +195,9 @@ function ExplodingMetaInner(p: ExplodingMetaInnerProps) { } return ( - <Kb.ClickableBox3 direction="horizontal" relative={true} onClick={onClick} style={styles.container}> + <Kb.ClickableBox direction="horizontal" relative={true} onClick={onClick} style={styles.container}> {children} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/conversation/pinned-message.tsx b/shared/chat/conversation/pinned-message.tsx index c7edd057cf0d..5686921785ca 100644 --- a/shared/chat/conversation/pinned-message.tsx +++ b/shared/chat/conversation/pinned-message.tsx @@ -87,7 +87,7 @@ const PinnedMessage = function PinnedMessage() { } const sizing = imageWidth && imageHeight ? zoomImage(imageWidth, imageHeight, 30) : undefined const pin = ( - <Kb.ClickableBox3 direction="horizontal" fullWidth={true} gap="tiny" className="hover_container" onClick={onClick} style={styles.container}> + <Kb.ClickableBox direction="horizontal" fullWidth={true} gap="tiny" className="hover_container" onClick={onClick} style={styles.container}> <Kb.Box2 direction="horizontal" alignSelf="stretch" style={styles.blueBar} /> {!!imageURL && ( <Kb.Box2 direction="vertical" overflow="hidden" relative={true}> @@ -123,7 +123,7 @@ const PinnedMessage = function PinnedMessage() { /> </Kb.Box2> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const popup = ( <UnpinPrompt diff --git a/shared/chat/conversation/rekey/participant-rekey.tsx b/shared/chat/conversation/rekey/participant-rekey.tsx index 4967c4423c50..dddcd3e1866c 100644 --- a/shared/chat/conversation/rekey/participant-rekey.tsx +++ b/shared/chat/conversation/rekey/participant-rekey.tsx @@ -2,7 +2,7 @@ import * as Kb from '@/common-adapters' import type {Props} from './participant-rekey.types' const Row = ({username, onUsernameClicked}: {username: string; onUsernameClicked: (s: string) => void}) => ( - <Kb.ClickableBox3 direction="horizontal" alignItems={isMobile ? 'center' : undefined} style={styles.row} onClick={() => onUsernameClicked(username)}> + <Kb.ClickableBox direction="horizontal" alignItems={isMobile ? 'center' : undefined} style={styles.row} onClick={() => onUsernameClicked(username)}> <Kb.Avatar username={username} size={48} @@ -31,7 +31,7 @@ const Row = ({username, onUsernameClicked}: {username: string; onUsernameClicked Can rekey this chat by opening the Keybase app. </Kb.Text> </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => ( diff --git a/shared/chat/conversation/search.tsx b/shared/chat/conversation/search.tsx index ad66b83eadba..d8feaaac7edc 100644 --- a/shared/chat/conversation/search.tsx +++ b/shared/chat/conversation/search.tsx @@ -359,7 +359,7 @@ const ThreadSearchDesktopInner = function ThreadSearchDesktopInner(p: CommonProp const _renderHit = (index: number, item: SearchHit) => { return ( - <Kb.ClickableBox3 direction="horizontal" alignItems="center" justifyContent="space-between" key={index} onClick={() => selectResult(index)} style={styles.hitRow}> + <Kb.ClickableBox direction="horizontal" alignItems="center" justifyContent="space-between" key={index} onClick={() => selectResult(index)} style={styles.hitRow}> <Kb.Avatar username={item.author} size={24} /> <Kb.Text type="Body" style={styles.hitSummary}> {item.summary} @@ -367,7 +367,7 @@ const ThreadSearchDesktopInner = function ThreadSearchDesktopInner(p: CommonProp <Kb.Text type="BodySmall" style={styles.time}> {formatTimeForMessages(item.timestamp)} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/create-channel/index.tsx b/shared/chat/create-channel/index.tsx index 9e79d25127c0..528e886a48f8 100644 --- a/shared/chat/create-channel/index.tsx +++ b/shared/chat/create-channel/index.tsx @@ -29,10 +29,10 @@ const CreateChannel = (p: Props) => { </Kb.Banner> )} <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={desktopStyles.box}> - <Kb.ClickableBox3 direction="horizontal" alignItems="center" style={desktopStyles.back} onClick={props.onBack}> + <Kb.ClickableBox direction="horizontal" alignItems="center" style={desktopStyles.back} onClick={props.onBack}> <Kb.Icon style={desktopStyles.backIcon} type="iconfont-arrow-left" /> <Kb.Text type="BodyPrimaryLink">Back</Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny" gapEnd={true} gapStart={true}> <Kb.Input3 autoFocus={true} diff --git a/shared/chat/emoji-picker/container.tsx b/shared/chat/emoji-picker/container.tsx index 05a1310a37c5..d2fc1e653555 100644 --- a/shared/chat/emoji-picker/container.tsx +++ b/shared/chat/emoji-picker/container.tsx @@ -121,9 +121,9 @@ const WrapperMobile = (props: Props) => { style={styles.contain} > <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center"> - <Kb.ClickableBox3 direction="vertical" onClick={onCancel} style={styles.cancelContainerMobile}> + <Kb.ClickableBox direction="vertical" onClick={onCancel} style={styles.cancelContainerMobile}> <Kb.Text type="BodyBigLink">Cancel</Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> <Kb.SearchFilter focusOnMount={true} size="small" diff --git a/shared/chat/emoji-picker/index.tsx b/shared/chat/emoji-picker/index.tsx index 92b8a0952590..8f346a3c2929 100644 --- a/shared/chat/emoji-picker/index.tsx +++ b/shared/chat/emoji-picker/index.tsx @@ -223,7 +223,7 @@ function EmojiPicker(props: Props) { const getEmojiSingle = (emoji: EmojiData, skinTone?: T.Chat.EmojiSkinTone) => { const skinToneModifier = getSkinToneModifierStrIfAvailable(emoji, skinTone) return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" className="emoji-picker-emoji-box" onClick={() => { @@ -243,7 +243,7 @@ function EmojiPicker(props: Props) { showTooltip={false} size={singleEmojiWidth} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/emoji-picker/skin-tone-picker.tsx b/shared/chat/emoji-picker/skin-tone-picker.tsx index a248233f8431..8a8820389811 100644 --- a/shared/chat/emoji-picker/skin-tone-picker.tsx +++ b/shared/chat/emoji-picker/skin-tone-picker.tsx @@ -41,7 +41,7 @@ function SkinTonePicker(props: Props) { props.onExpandChange?.(toSet) } const optionSkinTones = reorderedSkinTones(props.currentSkinTone).map((skinTone, index) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" key={index.toString()} style={styles.dotContainerExpanded} @@ -51,7 +51,7 @@ function SkinTonePicker(props: Props) { }} > {circle(skinTone, true, isMobile && skinTone === props.currentSkinTone)} - </Kb.ClickableBox3> + </Kb.ClickableBox> )) return isMobile ? ( @@ -65,10 +65,10 @@ function SkinTonePicker(props: Props) { {optionSkinTones} </Kb.Box2> ) : ( - <Kb.ClickableBox3 direction="horizontal" alignItems="center" gap="tiny" onClick={() => setExpanded(true)}> + <Kb.ClickableBox direction="horizontal" alignItems="center" gap="tiny" onClick={() => setExpanded(true)}> {circle(props.currentSkinTone, false, false)} <Kb.Text type="BodySmallSemibold">Skin tone</Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) ) : ( <Kb.Box2 direction="vertical" relative={true}> @@ -78,9 +78,9 @@ function SkinTonePicker(props: Props) { </Kb.Box2> ) : ( <Kb.WithTooltip tooltip="Skin tone" containerStyle={styles.absolute}> - <Kb.ClickableBox3 direction="vertical" style={styles.dotContainerDesktop} onClick={() => setExpanded(true)}> + <Kb.ClickableBox direction="vertical" style={styles.dotContainerDesktop} onClick={() => setExpanded(true)}> {circle(props.currentSkinTone, false, false)} - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.WithTooltip> )} <Kb.Box2 direction="vertical" style={styles.dotPlaceholder} /> diff --git a/shared/chat/inbox-search/index.tsx b/shared/chat/inbox-search/index.tsx index af6a6c496893..a000c48aaf3d 100644 --- a/shared/chat/inbox-search/index.tsx +++ b/shared/chat/inbox-search/index.tsx @@ -445,7 +445,7 @@ const OpenTeamRow = (p: OpenTeamProps) => { }, [showingDueToSelect, showPopup, hidePopup, showingPopup, isSelected]) return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" fullWidth={true} onClick={showPopup} @@ -489,7 +489,7 @@ const OpenTeamRow = (p: OpenTeamProps) => { </Kb.Box2> </Kb.Box2> {popup} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/inbox/filter-row.tsx b/shared/chat/inbox/filter-row.tsx index caf4aad22cd2..e9e6559f2d4e 100644 --- a/shared/chat/inbox/filter-row.tsx +++ b/shared/chat/inbox/filter-row.tsx @@ -81,7 +81,7 @@ function ConversationFilterInput(ownProps: OwnProps) { /> ) : ( <Kb.Box2 direction="horizontal" style={styles.searchPlaceholderOuter} alignItems="center"> - <Kb.ClickableBox3 direction="horizontal" alignItems="center" flex={1} onClick={startSearch} style={styles.searchPlaceholder}> + <Kb.ClickableBox direction="horizontal" alignItems="center" flex={1} onClick={startSearch} style={styles.searchPlaceholder}> <Kb.Icon type="iconfont-search" sizeType={isMobile ? 'Small' : 'Default'} @@ -91,7 +91,7 @@ function ConversationFilterInput(ownProps: OwnProps) { <Kb.Text type="BodySemibold" style={styles.searchPlaceholderText}> {isMobile ? 'Search' : 'Search (\u2318K)'} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> ) return ( diff --git a/shared/chat/inbox/row/big-team-channel.tsx b/shared/chat/inbox/row/big-team-channel.tsx index a5778196e654..1911673d040d 100644 --- a/shared/chat/inbox/row/big-team-channel.tsx +++ b/shared/chat/inbox/row/big-team-channel.tsx @@ -90,7 +90,7 @@ const BigTeamChannel = (props: Props) => { ) : null return ( - <Kb.ClickableBox3 direction="vertical" fullWidth={true} onClick={onSelectConversation} style={styles.container}> + <Kb.ClickableBox direction="vertical" fullWidth={true} onClick={onSelectConversation} style={styles.container}> <Kb.Box2 direction="horizontal" fullHeight={true} style={styles.rowContainer}> <Kb.Box2 className="hover_background_color_blueGreyDark" @@ -117,7 +117,7 @@ const BigTeamChannel = (props: Props) => { </Kb.Box2> </Kb.Box2> </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/inbox/row/big-team-header.tsx b/shared/chat/inbox/row/big-team-header.tsx index dbe2be773705..c2f8d73829e6 100644 --- a/shared/chat/inbox/row/big-team-header.tsx +++ b/shared/chat/inbox/row/big-team-header.tsx @@ -45,7 +45,7 @@ const BigTeamHeader = (props: Props) => { {teamname} </Kb.Text> </Kb.BoxGrow2> - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" className="hover_container" onClick={showPopup} @@ -61,7 +61,7 @@ const BigTeamHeader = (props: Props) => { direction="vertical" style={Kb.Styles.collapseStyles([styles.badge, showBadge && styles.badgeVisible])} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> ) } diff --git a/shared/chat/inbox/row/big-teams-divider.tsx b/shared/chat/inbox/row/big-teams-divider.tsx index 6483db0c73f3..89af6dafaf50 100644 --- a/shared/chat/inbox/row/big-teams-divider.tsx +++ b/shared/chat/inbox/row/big-teams-divider.tsx @@ -18,7 +18,7 @@ const BigTeamsDivider = (props: Props) => { inlineLayout ? styles.inlineContainer : undefined, ]) return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" onClick={() => { T.RPCChat.localRequestInboxSmallResetRpcPromise().catch(() => {}) @@ -61,7 +61,7 @@ const BigTeamsDivider = (props: Props) => { ) : null} </Kb.Box2> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/inbox/row/small-team/index.tsx b/shared/chat/inbox/row/small-team/index.tsx index 8395e2dd49f8..8eea5576ee7c 100644 --- a/shared/chat/inbox/row/small-team/index.tsx +++ b/shared/chat/inbox/row/small-team/index.tsx @@ -100,9 +100,9 @@ const SmallTeam = (p: Props) => { {rowContents} </Kb.Box2> ) : ( - <Kb.ClickableBox3 direction="vertical" fullWidth={true} onClick={onSelectConversation} className={className} testID={TestIDs.CHAT_INBOX_ROW} style={containerStyle}> + <Kb.ClickableBox direction="vertical" fullWidth={true} onClick={onSelectConversation} className={className} testID={TestIDs.CHAT_INBOX_ROW} style={containerStyle}> {rowContents} - </Kb.ClickableBox3> + </Kb.ClickableBox> )} </SwipeConvActions> ) diff --git a/shared/chat/inbox/row/start-new-chat.tsx b/shared/chat/inbox/row/start-new-chat.tsx index 9a123d52a73c..efab32a00508 100644 --- a/shared/chat/inbox/row/start-new-chat.tsx +++ b/shared/chat/inbox/row/start-new-chat.tsx @@ -9,12 +9,12 @@ const StartNewChat = (props: Props) => { if (isMobile) { return ( <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} justifyContent="center" style={styles.container} relative={true}> - <Kb.ClickableBox3 direction="horizontal" alignItems="center" onClick={props.onNewChat}> + <Kb.ClickableBox direction="horizontal" alignItems="center" onClick={props.onNewChat}> <Kb.Icon type="iconfont-compose" style={styles.iconCompose} /> <Kb.Text type="BodyBigLink" style={{margin: Kb.Styles.globalMargins.tiny}}> Start a new chat </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> ) } diff --git a/shared/chat/inbox/unread-shortcut.tsx b/shared/chat/inbox/unread-shortcut.tsx index 5651e38381ce..69c4d6c32f9e 100644 --- a/shared/chat/inbox/unread-shortcut.tsx +++ b/shared/chat/inbox/unread-shortcut.tsx @@ -8,7 +8,7 @@ type Props = { } const UnreadShortcut = (props: Props) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" gap="tiny" centerChildren={!props.inlineLayout} @@ -27,7 +27,7 @@ const UnreadShortcut = (props: Props) => ( ? `${props.unreadCount} unread` : `${props.unreadCount} unread ${pluralize('message', props.unreadCount)}`} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const styles = Kb.Styles.styleSheetCreate( diff --git a/shared/chat/selectable-big-team-channel.tsx b/shared/chat/selectable-big-team-channel.tsx index 3ffe2791fd9f..f2ca0b9af3d1 100644 --- a/shared/chat/selectable-big-team-channel.tsx +++ b/shared/chat/selectable-big-team-channel.tsx @@ -89,7 +89,7 @@ const SelectableBigTeamChannel = (props: Props) => { </> ) return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" fullWidth={true} centerChildren={true} @@ -105,7 +105,7 @@ const SelectableBigTeamChannel = (props: Props) => { onMouseOver={_onMouseOver} > {props.teamname ? rowLoadedContent : <Kb.ProgressIndicator type="Small" />} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/selectable-small-team.tsx b/shared/chat/selectable-small-team.tsx index b8fdae688c08..7d557f37d406 100644 --- a/shared/chat/selectable-small-team.tsx +++ b/shared/chat/selectable-small-team.tsx @@ -30,13 +30,13 @@ const SelectableSmallTeam = (props: Props) => { if (!props.teamname && props.participants.length === 0) { return ( - <Kb.ClickableBox3 direction="vertical" style={styles.container} centerChildren={true} onClick={props.onSelectConversation}> + <Kb.ClickableBox direction="vertical" style={styles.container} centerChildren={true} onClick={props.onSelectConversation}> <Kb.ProgressIndicator style={styles.spinner} type="Small" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" alignItems="center" fullWidth={true} @@ -93,7 +93,7 @@ const SelectableSmallTeam = (props: Props) => { )} </Kb.Box2> {props.showBadge && <Kb.Box2 direction="horizontal" style={styles.badge} />} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/chat/send-to-chat/conversation-list/conversation-list.tsx b/shared/chat/send-to-chat/conversation-list/conversation-list.tsx index d2cecb8b23dd..9c1acab7370d 100644 --- a/shared/chat/send-to-chat/conversation-list/conversation-list.tsx +++ b/shared/chat/send-to-chat/conversation-list/conversation-list.tsx @@ -23,7 +23,7 @@ type Row = { const _itemRenderer = (index: number, row: Row) => { const item = row.item return ( - <Kb.ClickableBox3 key={index} onClick={row.onSelect} direction="horizontal" fullWidth={true} gap="tiny" style={Kb.Styles.collapseStyles([styles.results, {backgroundColor: !isMobile && row.isSelected ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.white}])}> + <Kb.ClickableBox key={index} onClick={row.onSelect} direction="horizontal" fullWidth={true} gap="tiny" style={Kb.Styles.collapseStyles([styles.results, {backgroundColor: !isMobile && row.isSelected ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.white}])}> {item.isTeam ? ( <TeamAvatar isHovered={false} isMuted={false} isSelected={row.isSelected} teamname={item.tlfName} /> ) : ( @@ -36,7 +36,7 @@ const _itemRenderer = (index: number, row: Row) => { <Kb.Text type="Body" style={{alignSelf: 'center'}} lineClamp={1}> {item.name} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/common-adapters/box.tsx b/shared/common-adapters/box.tsx index 4858a2564ce9..c4c4cbb6962f 100644 --- a/shared/common-adapters/box.tsx +++ b/shared/common-adapters/box.tsx @@ -184,7 +184,7 @@ export const box2SharedProps = (p: Box2Props) => { } } -// Shared className generator used by Box2 and ClickableBox3. +// Shared className generator used by Box2 and ClickableBox. export const box2ClassNames = (p: Box2Props, extra?: string): string => { const {direction, alignItems, alignSelf, gap, gapStart, gapEnd, justifyContent, overflow} = p const {padding, centerChildren, flex, fullHeight, fullWidth, noShrink, pointerEvents, relative, tooltip, className} = p @@ -309,13 +309,13 @@ const nativeStyles = { }, } as const -export type ClickableBox3Props = Box2Props & { +export type ClickableBoxProps = Box2Props & { onClick?: (e?: React.SyntheticEvent) => void onLongPress?: () => void hitSlop?: number } -export const ClickableBox3 = (p: ClickableBox3Props & {ref?: React.Ref<MeasureRef | null>}) => { +export const ClickableBox = (p: ClickableBoxProps & {ref?: React.Ref<MeasureRef | null>}) => { const {onClick, onLongPress, hitSlop, ref, ...box2p} = p if (!isMobile) { diff --git a/shared/common-adapters/checkbox.tsx b/shared/common-adapters/checkbox.tsx index 0009ffa4ffa7..4a8c4c87624e 100644 --- a/shared/common-adapters/checkbox.tsx +++ b/shared/common-adapters/checkbox.tsx @@ -1,4 +1,4 @@ -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import Icon from './icon' import Switch from '@/common-adapters/switch' import Text from './text' @@ -23,12 +23,12 @@ type Props = { const CHECKBOX_SIZE = 13 const CHECKBOX_MARGIN = 8 -const Kb = {Box2, ClickableBox3, Icon, Styles, Switch, Text} +const Kb = {Box2, ClickableBox, Icon, Styles, Switch, Text} const Checkbox = (props: Props) => { if (!isMobile) { return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" alignItems="flex-start" alignSelf="flex-start" @@ -69,7 +69,7 @@ const Checkbox = (props: Props) => { ))} {!!props.labelSubtitle && <Kb.Text type="BodySmall">{props.labelSubtitle}</Kb.Text>} </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/common-adapters/dropdown.tsx b/shared/common-adapters/dropdown.tsx index 893a49746e66..700132575fcb 100644 --- a/shared/common-adapters/dropdown.tsx +++ b/shared/common-adapters/dropdown.tsx @@ -1,5 +1,5 @@ import type * as React from 'react' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import ProgressIndicator from './progress-indicator' import Text from './text' import Popup from './popup' @@ -14,7 +14,7 @@ import {useSafeAreaInsets} from './safe-area-view' const Kb = { Box2, - ClickableBox3, + ClickableBox, Icon, Popup, ProgressIndicator, @@ -37,7 +37,7 @@ type DropdownButtonProps = { export const DropdownButton = (props: DropdownButtonProps) => { const {disabled, toggleOpen, style, popupAnchor, selectedBoxStyle, inline, loading, selected} = props return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={!disabled ? toggleOpen : undefined} direction="vertical" ref={popupAnchor} @@ -68,7 +68,7 @@ export const DropdownButton = (props: DropdownButtonProps) => { sizeType="Tiny" style={{marginTop: isMobile ? 2 : -8}} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } @@ -102,7 +102,7 @@ function Dropdown<N extends React.ReactNode>(p: Props<N>) { > <Kb.ScrollView style={styles.scrollView} contentInset={{bottom}}> {items.map((i: N, idx) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox key={idx} onClick={evt => { evt?.stopPropagation() @@ -117,7 +117,7 @@ function Dropdown<N extends React.ReactNode>(p: Props<N>) { style={Styles.collapseStyles([styles.itemClickBox, styles.itemBox, itemBoxStyle])} > {i} - </Kb.ClickableBox3> + </Kb.ClickableBox> ))} </Kb.ScrollView> </Kb.Popup> diff --git a/shared/common-adapters/floating-menu/menu-layout/index.tsx b/shared/common-adapters/floating-menu/menu-layout/index.tsx index a39d4883aedf..b60584907879 100644 --- a/shared/common-adapters/floating-menu/menu-layout/index.tsx +++ b/shared/common-adapters/floating-menu/menu-layout/index.tsx @@ -2,7 +2,7 @@ import type * as React from 'react' import type {MenuLayoutProps, MenuItem} from './index.shared' export type {MenuItem, MenuItems, MenuLayoutProps, _InnerMenuItem} from './index.shared' import {Box2} from '@/common-adapters/box' -import {ClickableBox3} from '@/common-adapters/box' +import {ClickableBox} from '@/common-adapters/box' import Divider from '@/common-adapters/divider' import Icon from '@/common-adapters/icon' import IconAuto from '@/common-adapters/icon-auto' @@ -53,7 +53,7 @@ const DesktopMenuLayout = (props: MenuLayoutProps) => { return item.unWrapped ? ( item.view ) : ( - <ClickableBox3 + <ClickableBox key={index} direction="vertical" fullWidth={true} @@ -109,7 +109,7 @@ const DesktopMenuLayout = (props: MenuLayoutProps) => { </Text> )} {!!item.progressIndicator && <ProgressIndicator type="Large" style={desktopStyles.progressIndicator} />} - </ClickableBox3> + </ClickableBox> ) } @@ -124,7 +124,7 @@ const DesktopMenuLayout = (props: MenuLayoutProps) => { }, []) return ( - <ClickableBox3 + <ClickableBox onClick={event => { event?.stopPropagation() }} @@ -146,7 +146,7 @@ const DesktopMenuLayout = (props: MenuLayoutProps) => { )} </Box2> )} - </ClickableBox3> + </ClickableBox> ) } diff --git a/shared/common-adapters/index.tsx b/shared/common-adapters/index.tsx index bdac814e91e9..02e55af1eac0 100644 --- a/shared/common-adapters/index.tsx +++ b/shared/common-adapters/index.tsx @@ -26,8 +26,8 @@ export {default as IconAuto} from './icon-auto' export {default as BoxGrow, BoxGrow2} from './box-grow' export {default as Checkbox} from './checkbox' export {default as CheckCircle} from './check-circle' -export {ClickableBox3} from './box' -export type {ClickableBox3Props} from './box' +export {ClickableBox} from './box' +export type {ClickableBoxProps} from './box' export {default as ConfirmModal} from './confirm-modal' export {default as CopyText} from './copy-text' export {default as CopyableText} from './copyable-text' diff --git a/shared/common-adapters/list-item.tsx b/shared/common-adapters/list-item.tsx index 2a148bdc3bad..9b165cba74c5 100644 --- a/shared/common-adapters/list-item.tsx +++ b/shared/common-adapters/list-item.tsx @@ -1,6 +1,6 @@ import type * as React from 'react' import * as Styles from '@/styles' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import BoxGrow from './box-grow' import Divider from './divider' import './list-item.css' @@ -8,7 +8,7 @@ import './list-item.css' const Kb = { Box2, BoxGrow, - ClickableBox3, + ClickableBox, Divider, } @@ -40,7 +40,7 @@ type Props = { const ListItem = (props: Props) => { if (props.type === 'Card') return <CardListItem {...props} /> return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={props.onClick || (props.onMouseDown ? () => {} : undefined)} // make sure clickable box applies click styles if just onMouseDown is given. onMouseDown={props.onMouseDown} direction="horizontal" @@ -106,7 +106,7 @@ const ListItem = (props: Props) => { </Kb.Box2> </Kb.Box2> </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } @@ -335,7 +335,7 @@ const getActionStyle = (props: Props) => ]) const CardListItem = (props: Props) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={props.onClick} direction="horizontal" alignItems="center" @@ -344,7 +344,7 @@ const CardListItem = (props: Props) => ( > {props.icon && <Kb.Box2 direction="vertical" style={cardStyles.icon}>{props.icon}</Kb.Box2>} <Kb.Box2 direction="vertical" flex={1} fullWidth={true}>{props.body}</Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const cardStyles = Styles.styleSheetCreate(() => ({ diff --git a/shared/common-adapters/name-with-icon.tsx b/shared/common-adapters/name-with-icon.tsx index 8008f507c10b..ee0a27d0affd 100644 --- a/shared/common-adapters/name-with-icon.tsx +++ b/shared/common-adapters/name-with-icon.tsx @@ -2,7 +2,7 @@ import type * as React from 'react' import * as Styles from '@/styles' import * as C from '@/constants' import Avatar from './avatar' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import IconAuto from './icon-auto' import type {IconType} from './icon.constants-gen' import Icon from './icon' @@ -230,14 +230,14 @@ export const NameWithIcon = (props: NameWithIconProps) => { ) return _onClickWrapper ? ( - <ClickableBox3 + <ClickableBox onClick={e => e && _onClickWrapper(e)} direction={props.horizontal ? 'horizontal' : 'vertical'} alignItems="center" style={containerStyle} > {children} - </ClickableBox3> + </ClickableBox> ) : ( <Box2 direction={props.horizontal ? 'horizontal' : 'vertical'} diff --git a/shared/common-adapters/phone-input.tsx b/shared/common-adapters/phone-input.tsx index c956c0ab9a8a..8b8a0a1a613f 100644 --- a/shared/common-adapters/phone-input.tsx +++ b/shared/common-adapters/phone-input.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import * as Styles from '@/styles' import NativeEmoji from './emoji/native-emoji' import Text from './text' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import FloatingMenu from './floating-menu' import SearchFilter from './search-filter' import Input3 from './input3' @@ -23,7 +23,7 @@ import type {MeasureRef} from './measure-ref' const Kb = { Box2, - ClickableBox3, + ClickableBox, FloatingMenu, FloatingPicker, Icon, @@ -550,7 +550,7 @@ const PhoneInput = (p: Props) => { isSmall ? undefined : Styles.collapseStyles([styles.countrySelectorRowBig, styles.fakeInputBig]) } > - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={toggleShowingMenu} direction="horizontal" style={Styles.collapseStyles([ @@ -563,7 +563,7 @@ const PhoneInput = (p: Props) => { > {renderCountrySelector()} <Kb.Icon type="iconfont-caret-down" sizeType="Tiny" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> <Kb.Box2 direction="horizontal" diff --git a/shared/common-adapters/profile-card.tsx b/shared/common-adapters/profile-card.tsx index 407b4d07f695..13059e0aed43 100644 --- a/shared/common-adapters/profile-card.tsx +++ b/shared/common-adapters/profile-card.tsx @@ -4,7 +4,7 @@ import * as Styles from '@/styles' import * as Platforms from '@/util/platforms' import * as T from '@/constants/types' import capitalize from 'lodash/capitalize' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import ConnectedNameWithIcon from './name-with-icon' import {_setWithProfileCardPopup} from './usernames' import FloatingMenu from './floating-menu' @@ -27,7 +27,7 @@ const positionFallbacks = ['top center', 'bottom center'] as const const Kb = { Box2, - ClickableBox3, + ClickableBox, ConnectedNameWithIcon, FloatingMenu, Icon, @@ -117,9 +117,9 @@ const ServiceIcons = ({userDetailsAssertions}: ServiceIconsProps) => { ) })} {!!expandLabel && ( - <Kb.ClickableBox3 onClick={() => setExpanded(true)} direction="vertical" style={styles.expand}> + <Kb.ClickableBox onClick={() => setExpanded(true)} direction="vertical" style={styles.expand}> <Kb.Meta title={expandLabel} backgroundColor={Styles.globalColors.greyDark} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} </Kb.Box2> ) diff --git a/shared/common-adapters/radio-button.tsx b/shared/common-adapters/radio-button.tsx index 4aa6ab891a6d..0eb4e4d99e03 100644 --- a/shared/common-adapters/radio-button.tsx +++ b/shared/common-adapters/radio-button.tsx @@ -1,5 +1,5 @@ import {View} from 'react-native' -import {ClickableBox3} from './box' +import {ClickableBox} from './box' import Text from './text' import * as Styles from '@/styles' import './radio-button.css' @@ -14,7 +14,7 @@ type Props = { } const Kb = { - ClickableBox3, + ClickableBox, Text, } @@ -38,7 +38,7 @@ const RadioButton = ({disabled, label, onSelect, selected, style}: Props) => { ) } return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" alignItems="center" style={Styles.collapseStyles([nativeStyles.container, style])} @@ -67,7 +67,7 @@ const RadioButton = ({disabled, label, onSelect, selected, style}: Props) => { ) : ( label )} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/common-adapters/search-filter.tsx b/shared/common-adapters/search-filter.tsx index f9455c7ef64f..3fc189409d4c 100644 --- a/shared/common-adapters/search-filter.tsx +++ b/shared/common-adapters/search-filter.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import Animation from './animation' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import Input3 from './input3' import type {Input3Ref} from './input3.shared' import Text from './text' @@ -17,7 +17,7 @@ import type {MeasureRef} from './measure-ref' const Kb = { Animation, Box2, - ClickableBox3, + ClickableBox, Icon, IconAuto, Input3, @@ -221,18 +221,18 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) { } if (isMobile) { return ( - <Kb.ClickableBox3 onClick={props.mobileCancelButton ? clear : cancel} hitSlop={10} direction="vertical"> + <Kb.ClickableBox onClick={props.mobileCancelButton ? clear : cancel} hitSlop={10} direction="vertical"> <Kb.Icon type="iconfont-remove" sizeType={iconSizeType()} color={iconColor()} style={styles.removeIconNonFullWidth} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } else { return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={() => {}} onMouseDown={cancel} direction="vertical" @@ -243,7 +243,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) { sizeType={iconSizeType()} color={iconColor()} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } } @@ -263,7 +263,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) { ) const content = isMobile ? ( - <Kb.ClickableBox3 + <Kb.ClickableBox data-search-filter={true} direction="horizontal" style={Styles.collapseStyles([ @@ -275,9 +275,9 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) { onClick={props.onClick || focus} > {inside} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) : ( - <Kb.ClickableBox3 + <Kb.ClickableBox data-search-filter={true} direction="horizontal" alignSelf={props.size === 'full-width' ? 'stretch' : undefined} @@ -294,7 +294,7 @@ function SearchFilter(props: Props & {ref?: React.Ref<SearchFilterRef>}) { onClick={props.onClick || (!focused ? focus : undefined)} > {inside} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) return isMobile ? ( diff --git a/shared/common-adapters/section-divider.tsx b/shared/common-adapters/section-divider.tsx index 40e135851e1d..ddbfafeceda4 100644 --- a/shared/common-adapters/section-divider.tsx +++ b/shared/common-adapters/section-divider.tsx @@ -1,13 +1,13 @@ import type * as React from 'react' import * as Styles from '@/styles' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import Text from './text' import Icon from './icon' import ProgressIndicator from './progress-indicator' const Kb = { Box2, - ClickableBox3, + ClickableBox, Icon, ProgressIndicator, Text, @@ -40,9 +40,9 @@ const SectionDivider = (props: Props) => { </Kb.Box2> ) return collapsible ? ( - <Kb.ClickableBox3 onClick={props.onToggleCollapsed} direction="horizontal" fullWidth={true}> + <Kb.ClickableBox onClick={props.onToggleCollapsed} direction="horizontal" fullWidth={true}> {children} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) : ( children ) diff --git a/shared/common-adapters/switch.tsx b/shared/common-adapters/switch.tsx index 006efc2b9966..dad7d59fbc09 100644 --- a/shared/common-adapters/switch.tsx +++ b/shared/common-adapters/switch.tsx @@ -1,6 +1,6 @@ import type * as React from 'react' import * as Styles from '@/styles' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import ProgressIndicator from './progress-indicator' import Text from './text' import SwitchToggle from './switch-toggle' @@ -10,7 +10,7 @@ import type {TextType} from './text.shared' const Kb = { Box2, - ClickableBox3, + ClickableBox, ProgressIndicator, Text, WithTooltip, @@ -45,9 +45,9 @@ const LabelContainer = (props: Props) => </Kb.WithTooltip> ) : ( <Kb.Box2 direction="vertical" style={styles.labelContainer}> - <Kb.ClickableBox3 onClick={props.allowLabelClick ? props.onClick : undefined} direction="vertical"> + <Kb.ClickableBox onClick={props.allowLabelClick ? props.onClick : undefined} direction="vertical"> {props.children} - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> ) @@ -62,7 +62,7 @@ function Switch(props: Props & {ref?: React.Ref<MeasureRef>}) { const {ref} = props const content = ( <> - <Kb.ClickableBox3 onClick={props.disabled ? undefined : props.onClick} ref={ref} direction="vertical"> + <Kb.ClickableBox onClick={props.disabled ? undefined : props.onClick} ref={ref} direction="vertical"> <SwitchToggle on={props.on} color={props.color || 'blue'} @@ -73,7 +73,7 @@ function Switch(props: Props & {ref?: React.Ref<MeasureRef>}) { !!props.labelSubtitle && styles.switch, ] as const)} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> {!!props.gapInBetween && <Kb.Box2 direction="vertical" flex={1} />} {!!props.gapSize && <Kb.Box2 direction="vertical" style={{width: props.gapSize}} />} {typeof props.label === 'string' ? ( diff --git a/shared/common-adapters/tabs.tsx b/shared/common-adapters/tabs.tsx index 64efcd101ce1..ce5ccf1a9810 100644 --- a/shared/common-adapters/tabs.tsx +++ b/shared/common-adapters/tabs.tsx @@ -5,13 +5,13 @@ import IconAuto from './icon-auto' import type {IconType} from './icon.constants-gen' import ProgressIndicator from './progress-indicator' import Text from './text' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import capitalize from 'lodash/capitalize' const Kb = { Badge, Box2, - ClickableBox3, + ClickableBox, Divider, IconAuto, ProgressIndicator, @@ -54,7 +54,7 @@ const Tabs = <TitleT extends string>(props: Props<TitleT>) => ( {props.tabs.map((tab: Tab<TitleT>) => { const selected = props.selectedTab === tab.title return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={() => props.onSelect(tab.title)} key={tab.title} direction="vertical" @@ -70,7 +70,7 @@ const Tabs = <TitleT extends string>(props: Props<TitleT>) => ( {!!tab.badgeNumber && <Kb.Badge badgeNumber={tab.badgeNumber} badgeStyle={styles.badge} />} </Kb.Box2> <Kb.Divider style={selected ? styles.dividerSelected : styles.divider} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) })} {props.showProgressIndicator && <Kb.ProgressIndicator style={styles.progressIndicator} />} diff --git a/shared/common-adapters/with-tooltip.tsx b/shared/common-adapters/with-tooltip.tsx index 2ca1c163ac40..42cc23491850 100644 --- a/shared/common-adapters/with-tooltip.tsx +++ b/shared/common-adapters/with-tooltip.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import * as Styles from '@/styles' import {Portal} from './portal' import {useTimeout} from './use-timers' -import {Box2, ClickableBox3} from './box' +import {Box2, ClickableBox} from './box' import Toast from './toast' import Text from './text' import type {MeasureRef} from './measure-ref' @@ -30,7 +30,7 @@ const IGNORE_FOR_PROFILING = false as boolean const Kb = { Box2, - ClickableBox3, + ClickableBox, Portal, Text, Toast, @@ -162,7 +162,7 @@ function WithTooltip(p: Props) { return ( <> <View style={Styles.castStyleNative(containerStyle)} ref={clickableRef} collapsable={false}> - <Kb.ClickableBox3 onClick={_onClick} direction="vertical">{children}</Kb.ClickableBox3> + <Kb.ClickableBox onClick={_onClick} direction="vertical">{children}</Kb.ClickableBox> </View> <Kb.Portal hostName="popup-root"> <Kb.Box2 diff --git a/shared/crypto/input.tsx b/shared/crypto/input.tsx index 3a0cb2cbc10c..c2b4aeadaba2 100644 --- a/shared/crypto/input.tsx +++ b/shared/crypto/input.tsx @@ -115,7 +115,7 @@ const TextInput = (props: TextProps) => { ) : null return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" fullWidth={true} fullHeight={true} @@ -149,7 +149,7 @@ const TextInput = (props: TextProps) => { {!isMobile && browseButton} </Kb.Box2> {!isMobile && clearButton} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/devices/add-device.tsx b/shared/devices/add-device.tsx index db670c970999..358a67c59877 100644 --- a/shared/devices/add-device.tsx +++ b/shared/devices/add-device.tsx @@ -109,7 +109,7 @@ const deviceOptionTypeMap = { phone: 'mobile', } as const const DeviceOption = ({highlight, iconNumber, onClick, type}: DeviceOptionProps) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={onClick} className="hover_background_color_blueLighter2" style={Kb.Styles.collapseStyles([ @@ -125,7 +125,7 @@ const DeviceOption = ({highlight, iconNumber, onClick, type}: DeviceOptionProps) <Kb.Text type="BodySemibold"> {type === 'paper key' ? 'Create' : 'Add'} a {type === 'phone' ? 'phone or tablet' : type} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const styles = Kb.Styles.styleSheetCreate(() => ({ diff --git a/shared/devices/index.tsx b/shared/devices/index.tsx index 2558d10c1e9a..638015dc0483 100644 --- a/shared/devices/index.tsx +++ b/shared/devices/index.tsx @@ -120,14 +120,14 @@ function ReloadableDevices() { <BadgedDeviceIDsContext value={badged}> <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} relative={true} testID={TestIDs.DEVICES_LIST}> {isMobile ? ( - <Kb.ClickableBox3 onClick={() => onAddDevice()} direction="horizontal" centerChildren={true} relative={true} style={styles.mobileAddHeader}> + <Kb.ClickableBox onClick={() => onAddDevice()} direction="horizontal" centerChildren={true} relative={true} style={styles.mobileAddHeader}> <Kb.Button label="Add a device or paper key" fullWidth={true} /> {waiting ? ( <Kb.Box2 direction="vertical" centerChildren={true} style={styles.progressContainer}> <Kb.ProgressIndicator /> </Kb.Box2> ) : null} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) : null} {showPaperKeyNudge ? <PaperKeyNudge onAddDevice={() => onAddDevice(['paper key'])} /> : null} <Kb.BoxGrow2> @@ -179,7 +179,7 @@ const styles = Kb.Styles.styleSheetCreate( ) const PaperKeyNudge = ({onAddDevice}: {onAddDevice: () => void}) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={onAddDevice} direction="horizontal" gap="xsmall" @@ -198,6 +198,6 @@ const PaperKeyNudge = ({onAddDevice}: {onAddDevice: () => void}) => ( </Kb.Text> </Kb.Box2> {!isMobile && <Kb.Text type="BodyBigLink">Create a paper key</Kb.Text>} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) export default ReloadableDevices diff --git a/shared/fs/browser/destination-picker.tsx b/shared/fs/browser/destination-picker.tsx index fdf3e80584d7..39714ddff740 100644 --- a/shared/fs/browser/destination-picker.tsx +++ b/shared/fs/browser/destination-picker.tsx @@ -126,7 +126,7 @@ const ConnectedDestinationPicker = (ownProps: OwnProps) => { <Kb.Divider key="dheader" /> <FsCommon.Errs /> {!!onBackUp && ( - <Kb.ClickableBox3 key="up" direction="horizontal" alignItems="center" fullWidth={true} style={styles.actionRowContainer} onClick={onBackUp}> + <Kb.ClickableBox key="up" direction="horizontal" alignItems="center" fullWidth={true} style={styles.actionRowContainer} onClick={onBackUp}> <Kb.Icon type="iconfont-folder-up" color={Kb.Styles.globalColors.black_50} @@ -134,10 +134,10 @@ const ConnectedDestinationPicker = (ownProps: OwnProps) => { style={RowCommon.rowStyles.pathItemIcon} /> <Kb.Text type="BodySemibold">..</Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} {!!onCopyHere && ( - <Kb.ClickableBox3 key="copy" direction="horizontal" alignItems="center" fullWidth={true} style={styles.actionRowContainer} onClick={onCopyHere}> + <Kb.ClickableBox key="copy" direction="horizontal" alignItems="center" fullWidth={true} style={styles.actionRowContainer} onClick={onCopyHere}> <Kb.ImageIcon type="icon-folder-copy-32" style={RowCommon.rowStyles.pathItemIcon} @@ -145,10 +145,10 @@ const ConnectedDestinationPicker = (ownProps: OwnProps) => { <Kb.Text type="BodySemibold" style={styles.actionText}> {isShare ? 'Save here' : 'Copy here'} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} {!!onMoveHere && ( - <Kb.ClickableBox3 key="move" direction="horizontal" alignItems="center" fullWidth={true} style={styles.actionRowContainer} onClick={onMoveHere}> + <Kb.ClickableBox key="move" direction="horizontal" alignItems="center" fullWidth={true} style={styles.actionRowContainer} onClick={onMoveHere}> <Kb.ImageIcon type="icon-folder-move-32" style={RowCommon.rowStyles.pathItemIcon} @@ -156,7 +156,7 @@ const ConnectedDestinationPicker = (ownProps: OwnProps) => { <Kb.Text type="BodySemibold" style={styles.actionText}> Move here </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} {parentPath === FS.defaultPath ? ( <Root destinationPickerSource={source} /> @@ -198,12 +198,12 @@ const Screen = (props: OwnProps) => ( const NewFolder = (p: {onNewFolder?: () => void}) => { const {onNewFolder} = p return ( - <Kb.ClickableBox3 direction="horizontal" alignItems="center" fullWidth={true} style={styles.newFolderBox} onClick={onNewFolder}> + <Kb.ClickableBox direction="horizontal" alignItems="center" fullWidth={true} style={styles.newFolderBox} onClick={onNewFolder}> <Kb.Icon type="iconfont-folder-new" color={Kb.Styles.globalColors.blue} /> <Kb.Text type="BodyBig" style={styles.newFolderText}> Create new folder </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/fs/common/path-item-action/header.tsx b/shared/fs/common/path-item-action/header.tsx index ee1e6d50dbac..1d4346bb93f5 100644 --- a/shared/fs/common/path-item-action/header.tsx +++ b/shared/fs/common/path-item-action/header.tsx @@ -6,7 +6,7 @@ import PathInfo from '../path-info' export type Props = {path: T.FS.Path} const Header = (props: Props) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={ // This box is necessary as otherwise the click event propagates into // the ListItem backed row. @@ -18,7 +18,7 @@ const Header = (props: Props) => ( <PathItemInfo path={props.path} containerStyle={styles.container} /> <Kb.Divider /> <PathInfo path={props.path} containerStyle={styles.container} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) export default Header diff --git a/shared/fs/common/sfmi-popup.tsx b/shared/fs/common/sfmi-popup.tsx index 1c248df40b19..6f1938aa5458 100644 --- a/shared/fs/common/sfmi-popup.tsx +++ b/shared/fs/common/sfmi-popup.tsx @@ -25,7 +25,7 @@ const SFMIPopup = (props: Props) => { return ( <Kb.Popup style={styles.popup} attachTo={attachTo} onHidden={hidePopup} position="bottom right"> - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" fullWidth={true} onClick={e => e?.stopPropagation()} @@ -51,7 +51,7 @@ const SFMIPopup = (props: Props) => { onClick={enableDriver} /> </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Popup> ) } diff --git a/shared/fs/top-bar/sort.tsx b/shared/fs/top-bar/sort.tsx index e49559a2b255..ea1b701d1530 100644 --- a/shared/fs/top-bar/sort.tsx +++ b/shared/fs/top-bar/sort.tsx @@ -55,12 +55,12 @@ const Sort = (ownProps: OwnProps) => { const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup) return shownSortSetting ? ( <> - <Kb.ClickableBox3 onClick={showPopup} ref={popupAnchor} direction="horizontal" gap="xxtiny" centerChildren={isMobile}> + <Kb.ClickableBox onClick={showPopup} ref={popupAnchor} direction="horizontal" gap="xxtiny" centerChildren={isMobile}> <Kb.Icon type="iconfont-arrow-full-down" padding="xtiny" sizeType="Small" /> <Kb.Text type="BodySmallSemibold" style={styles.sortText}> {getTextFromSortSetting(shownSortSetting)} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> {popup} </> ) : null diff --git a/shared/git/index.tsx b/shared/git/index.tsx index 5219bbd67bba..f86d9da8a6f0 100644 --- a/shared/git/index.tsx +++ b/shared/git/index.tsx @@ -194,7 +194,7 @@ const GitRoot = (ownProps: OwnProps) => { <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} relative={true} testID={TestIDs.GIT_REPO_LIST}> {!!error && <Kb.Banner color="red">{error.message}</Kb.Banner>} {isMobile && ( - <Kb.ClickableBox3 ref={popupAnchor} direction="horizontal" centerChildren={true} noShrink={true} style={styles.header} onClick={showPopup}> + <Kb.ClickableBox ref={popupAnchor} direction="horizontal" centerChildren={true} noShrink={true} style={styles.header} onClick={showPopup}> <Kb.Icon type="iconfont-new" style={styles.newIcon} @@ -202,7 +202,7 @@ const GitRoot = (ownProps: OwnProps) => { fontSize={20} /> <Kb.Text type="BodyBigLink">New encrypted git repository...</Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} <NewContext value={badged}> <Kb.SectionList diff --git a/shared/git/row.tsx b/shared/git/row.tsx index 09cafec32c4a..53e49fd0f11c 100644 --- a/shared/git/row.tsx +++ b/shared/git/row.tsx @@ -120,7 +120,7 @@ function ConnectedRow(ownProps: OwnProps) { expanded && {backgroundColor: Kb.Styles.globalColors.white}, ])} > - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={onToggleExpand} direction="horizontal" fullWidth={true} @@ -148,7 +148,7 @@ function ConnectedRow(ownProps: OwnProps) { {isNew && ( <Kb.Meta title="new" style={styles.meta} backgroundColor={Kb.Styles.globalColors.orange} /> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> {expanded && ( <Kb.Box2 direction="vertical" fullWidth={true} style={styles.rowBottom}> <Kb.Box2 diff --git a/shared/incoming-share/index.tsx b/shared/incoming-share/index.tsx index 482502b65682..886ba39ed865 100644 --- a/shared/incoming-share/index.tsx +++ b/shared/incoming-share/index.tsx @@ -155,10 +155,10 @@ const useFooter = (incomingShareItems: ReadonlyArray<T.RPCGen.IncomingShareItem> ? undefined : { content: ( - <Kb.ClickableBox3 direction="horizontal" centerChildren={true} fullWidth={true} onClick={saveInFiles}> + <Kb.ClickableBox direction="horizontal" centerChildren={true} fullWidth={true} onClick={saveInFiles}> <Kb.Icon type="iconfont-file" color={Kb.Styles.globalColors.blue} style={styles.footerIcon} /> <Kb.Text type="BodyBigLink">Save in Files</Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ), } } diff --git a/shared/menubar/index.desktop.tsx b/shared/menubar/index.desktop.tsx index 2023adaaa12a..24524c166e55 100644 --- a/shared/menubar/index.desktop.tsx +++ b/shared/menubar/index.desktop.tsx @@ -118,7 +118,7 @@ const ChatRow = (p: {conv: Conversation; httpSrvAddress: string; httpSrvToken: s const timestamp = conv.timestamp ? TimestampUtil.formatTimeForConversationList(conv.timestamp) : '' return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={() => R.remoteDispatch(RemoteGen.createOpenChatFromWidget({conversationIDKey: conv.conversationIDKey}))} direction="horizontal" fullWidth={true} @@ -166,7 +166,7 @@ const ChatRow = (p: {conv: Conversation; httpSrvAddress: string; httpSrvToken: s </Kb.Text> )} </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } @@ -193,7 +193,7 @@ const ChatPreview = (p: {conversationsToSend: ReadonlyArray<Conversation>; convL // Inline file updates (replaces FilesContainer + files.desktop.tsx with store-connected components) const FileUpdate = (p: {path: T.FS.Path; uploading: boolean; onClick: () => void}) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox className="hover-underline-container" onClick={p.onClick} direction="horizontal" @@ -208,7 +208,7 @@ const FileUpdate = (p: {path: T.FS.Path; uploading: boolean; onClick: () => void </Kb.Box2> )} <Filename type="Body" path={p.path} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const defaultNumFileOptionsShown = 3 diff --git a/shared/people/follow-notification.tsx b/shared/people/follow-notification.tsx index 2d7107a211f2..531bc7ceb207 100644 --- a/shared/people/follow-notification.tsx +++ b/shared/people/follow-notification.tsx @@ -51,7 +51,7 @@ const FollowNotification = (props: Props) => { } return ( - <Kb.ClickableBox3 onClick={type === 'follow' ? onClick : undefined} direction="vertical" fullWidth={true}> + <Kb.ClickableBox onClick={type === 'follow' ? onClick : undefined} direction="vertical" fullWidth={true}> <PeopleItem badged={props.badged} buttons={ @@ -76,7 +76,7 @@ const FollowNotification = (props: Props) => { </Kb.Text> )} </PeopleItem> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/profile/add-to-team.tsx b/shared/profile/add-to-team.tsx index c0f13276c0bd..03c06428a205 100644 --- a/shared/profile/add-to-team.tsx +++ b/shared/profile/add-to-team.tsx @@ -322,7 +322,7 @@ type RowProps = { const TeamRow = (props: RowProps) => { return ( - <Kb.ClickableBox3 direction="vertical" fullWidth={true} onClick={props.canAddThem ? () => props.onCheck(!props.checked) : undefined}> + <Kb.ClickableBox direction="vertical" fullWidth={true} onClick={props.canAddThem ? () => props.onCheck(!props.checked) : undefined}> <Kb.Box2 direction="horizontal" style={styles.teamRow}> <Kb.Checkbox disabled={!props.canAddThem} checked={props.checked} onCheck={props.onCheck} /> <Kb.Avatar @@ -347,7 +347,7 @@ const TeamRow = (props: RowProps) => { </Kb.Box2> </Kb.Box2> {!isMobile && <Kb.Divider style={styles.divider} />} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/profile/edit-avatar/index.tsx b/shared/profile/edit-avatar/index.tsx index dc790bc91597..595ae0248317 100644 --- a/shared/profile/edit-avatar/index.tsx +++ b/shared/profile/edit-avatar/index.tsx @@ -155,7 +155,7 @@ const DesktopEditAvatar = (_p: Props) => { </Kb.Text>{' '} for one. </Kb.Text> - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" className={Kb.Styles.classNames('hoverbox', {filled: loading !== 'loaded'})} onClick={!loading ? filePickerOpen : undefined} @@ -188,7 +188,7 @@ const DesktopEditAvatar = (_p: Props) => { type="iconfont-camera" /> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> {loading === 'loaded' ? <Kb.Text type="Body">Click to select. Scroll to zoom.</Kb.Text> : null} </div> <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} style={styles.modalFooter}> @@ -308,14 +308,14 @@ const NativeAvatarUploadWrapper = (p: Props) => { const renderImageZoomer = () => { if (type === 'team' && !selectedImage) { return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" centerChildren={true} style={Kb.Styles.collapseStyles([styles.placeholder, getImageStyle()])} onClick={onChooseNewAvatar} > <Kb.Icon type="iconfont-camera" sizeType="Huge" color={Kb.Styles.globalColors.black_10} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } return selectedImage ? ( diff --git a/shared/profile/generic/proofs-list.tsx b/shared/profile/generic/proofs-list.tsx index ee20b37713ac..d451f65492c3 100644 --- a/shared/profile/generic/proofs-list.tsx +++ b/shared/profile/generic/proofs-list.tsx @@ -630,7 +630,7 @@ const ProviderPicker = ({ renderItem={(_: unknown, provider: Provider) => ( <React.Fragment key={provider.name}> <Kb.Divider /> - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" alignItems="center" justifyContent="flex-start" @@ -661,7 +661,7 @@ const ProviderPicker = ({ style={styles.iconArrow} type="iconfont-arrow-right" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </React.Fragment> )} /> diff --git a/shared/profile/user/actions/index.tsx b/shared/profile/user/actions/index.tsx index 06227bc59b13..555abbcece14 100644 --- a/shared/profile/user/actions/index.tsx +++ b/shared/profile/user/actions/index.tsx @@ -195,12 +195,12 @@ const DropdownButton = (p: DropdownProps) => { const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup) return ( - <Kb.ClickableBox3 direction="horizontal" gap="xsmall" onClick={showPopup} ref={popupAnchor}> + <Kb.ClickableBox direction="horizontal" gap="xsmall" onClick={showPopup} ref={popupAnchor}> <Kb.Button onClick={undefined} mode="Secondary" style={styles.dropdownButton}> <Kb.Icon color={Kb.Styles.globalColors.blue} type="iconfont-ellipsis" /> </Kb.Button> {popup} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/profile/user/friend.tsx b/shared/profile/user/friend.tsx index 166dbb0742f7..3f6114e21200 100644 --- a/shared/profile/user/friend.tsx +++ b/shared/profile/user/friend.tsx @@ -25,7 +25,7 @@ const Friend = (ownProps: OwnProps) => { : followsYou ? ('icon-follow-me-21' as const) : ('icon-following-21' as const) return ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="vertical" centerChildren={true} noShrink={true} @@ -46,7 +46,7 @@ const Friend = (ownProps: OwnProps) => { <Kb.Text type="BodySmall" lineClamp={1} style={styles.fullname}> {fullname} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/profile/user/index.tsx b/shared/profile/user/index.tsx index 070979249ac5..851345e1eeb7 100644 --- a/shared/profile/user/index.tsx +++ b/shared/profile/user/index.tsx @@ -228,7 +228,7 @@ const Tabs = (p: TabsProps) => { const onClickFollowing = () => p.onSelectTab('following') const onClickFollowers = () => p.onSelectTab('followers') const tab = (tab: Tab) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox direction="horizontal" gap="xtiny" onClick={tab === 'following' ? onClickFollowing : onClickFollowers} @@ -245,7 +245,7 @@ const Tabs = (p: TabsProps) => { {((tab === 'following' && p.loadingFollowing) || p.loadingFollowers) && ( <Kb.ProgressIndicator style={styles.progress} /> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) return ( diff --git a/shared/profile/user/teams/index.tsx b/shared/profile/user/teams/index.tsx index 63daf3753e9c..c245d8923c83 100644 --- a/shared/profile/user/teams/index.tsx +++ b/shared/profile/user/teams/index.tsx @@ -72,12 +72,12 @@ const TeamShowcase = (props: TeamShowcaseProps) => { } const ShowcaseTeamsOffer = (p: {onEdit: () => void}) => ( - <Kb.ClickableBox3 direction="horizontal" gap="tiny" fullWidth={true} onClick={p.onEdit}> + <Kb.ClickableBox direction="horizontal" gap="tiny" fullWidth={true} onClick={p.onEdit}> <Kb.ImageIcon type="icon-team-placeholder-avatar-32" style={styles.placeholderTeam} /> <Kb.Text style={styles.youFeatureTeam} type="BodyPrimaryLink"> {"Feature the teams you're in"} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const styles = Kb.Styles.styleSheetCreate( diff --git a/shared/profile/user/teams/team-row.tsx b/shared/profile/user/teams/team-row.tsx index 4f6a1152cdb6..3f6e05575a9f 100644 --- a/shared/profile/user/teams/team-row.tsx +++ b/shared/profile/user/teams/team-row.tsx @@ -12,7 +12,7 @@ type Props = { } const TeamRow = ({isOpen, loading = false, name, onClick, popup, popupAnchor}: Props) => ( - <Kb.ClickableBox3 direction="horizontal" fullWidth={true} gap="tiny" style={styles.row} ref={popupAnchor} onClick={onClick}> + <Kb.ClickableBox direction="horizontal" fullWidth={true} gap="tiny" style={styles.row} ref={popupAnchor} onClick={onClick}> <> {popup} <Kb.Avatar size={32} teamname={name} isTeam={true} /> @@ -22,7 +22,7 @@ const TeamRow = ({isOpen, loading = false, name, onClick, popup, popupAnchor}: P </Kb.Text> {typeof isOpen === 'boolean' && <OpenMeta isOpen={isOpen} />} {loading && <Kb.ProgressIndicator style={styles.loading} />} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const styles = Kb.Styles.styleSheetCreate(() => ({ diff --git a/shared/provision/code-page/container.tsx b/shared/provision/code-page/container.tsx index e7838bf8ab10..85343515d048 100644 --- a/shared/provision/code-page/container.tsx +++ b/shared/provision/code-page/container.tsx @@ -214,7 +214,7 @@ const CodePageContainer = () => { } const heyWaitBanner = () => ( - <Kb.ClickableBox3 onClick={() => setTroubleshooting(true)} direction="vertical" fullWidth={true}> + <Kb.ClickableBox onClick={() => setTroubleshooting(true)} direction="vertical" fullWidth={true}> <Kb.Banner color="yellow"> <Kb.BannerParagraph bannerColor="yellow" @@ -224,7 +224,7 @@ const CodePageContainer = () => { ]} /> </Kb.Banner> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const troubleshootingContent = () => ( diff --git a/shared/provision/troubleshooting.tsx b/shared/provision/troubleshooting.tsx index 013507f39699..5f6a840acb17 100644 --- a/shared/provision/troubleshooting.tsx +++ b/shared/provision/troubleshooting.tsx @@ -17,7 +17,7 @@ type BigButtonProps = { } const BigButton = ({onClick, icon, mainText, subText, waiting}: BigButtonProps) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={waiting ? undefined : onClick} direction={isMobile ? 'horizontal' : 'vertical'} style={styles.bigButton} @@ -43,7 +43,7 @@ const BigButton = ({onClick, icon, mainText, subText, waiting}: BigButtonProps) <Kb.ProgressIndicator /> </Kb.Box2> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const Troubleshooting = (props: Props) => { diff --git a/shared/router-v2/header/index.desktop.tsx b/shared/router-v2/header/index.desktop.tsx index e112e3e639c6..956ef4e7deab 100644 --- a/shared/router-v2/header/index.desktop.tsx +++ b/shared/router-v2/header/index.desktop.tsx @@ -79,15 +79,15 @@ const SystemButtons = ({isMaximized}: {isMaximized: boolean}) => { } return ( <Kb.Box2 direction="horizontal"> - <Kb.ClickableBox3 + <Kb.ClickableBox className="hover_background_color_black_05 color_black_50 hover_color_black" onClick={onMinimize} style={styles.appIconBox} direction="vertical" > <Kb.Icon color="inherit" onClick={onMinimize} style={styles.appIcon} type="iconfont-app-minimize" /> - </Kb.ClickableBox3> - <Kb.ClickableBox3 + </Kb.ClickableBox> + <Kb.ClickableBox className="hover_background_color_black_05 color_black_50 hover_color_black" onClick={onToggleMaximizeWindow} style={styles.appIconBox} @@ -99,15 +99,15 @@ const SystemButtons = ({isMaximized}: {isMaximized: boolean}) => { style={styles.appIcon} type={isMaximized ? 'iconfont-app-un-maximize' : 'iconfont-app-maximize'} /> - </Kb.ClickableBox3> - <Kb.ClickableBox3 + </Kb.ClickableBox> + <Kb.ClickableBox className="hover_background_color_red hover_color_white color_black_50" onClick={onCloseWindow} style={styles.appIconBox} direction="vertical" > <Kb.Icon color="inherit" onClick={onCloseWindow} style={styles.appIcon} type="iconfont-app-close" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> ) } @@ -195,7 +195,7 @@ function DesktopHeader(p: Props) { > {/* TODO have headerLeft be the back button */} {headerLeft !== null && ( - <Kb.ClickableBox3 + <Kb.ClickableBox className={Kb.Styles.classNames('hover_container', { hover_background_color_black_10: !!back, })} @@ -208,7 +208,7 @@ function DesktopHeader(p: Props) { color={iconColor} className={Kb.Styles.classNames({hover_contained_color_blackOrBlack: back})} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} <Kb.Box2 direction="horizontal" flex={1} justifyContent="flex-end"> <SyncingFolders diff --git a/shared/router-v2/tab-bar.desktop.tsx b/shared/router-v2/tab-bar.desktop.tsx index 1b300a13d546..e8992c66e583 100644 --- a/shared/router-v2/tab-bar.desktop.tsx +++ b/shared/router-v2/tab-bar.desktop.tsx @@ -86,7 +86,7 @@ const Header = () => { const menuHeader = ( <Kb.Box2 direction="vertical" fullWidth={true}> - <Kb.ClickableBox3 onClick={onClickWrapper} style={styles.headerBox} direction="vertical"> + <Kb.ClickableBox onClick={onClickWrapper} style={styles.headerBox} direction="vertical"> <Kb.NameWithIcon username={username} onClick={onClickWrapper} @@ -96,7 +96,7 @@ const Header = () => { </Kb.Text> } /> - </Kb.ClickableBox3> + </Kb.ClickableBox> <Kb.Button label="View/Edit profile" mode="Secondary" @@ -125,7 +125,7 @@ const Header = () => { return ( <> - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={togglePopup} direction="horizontal" gap="tiny" @@ -151,7 +151,7 @@ const Header = () => { style={styles.caret} /> </> - </Kb.ClickableBox3> + </Kb.ClickableBox> {popup} </> ) @@ -278,7 +278,7 @@ function Tab(props: TabProps) { } return ( - <Kb.ClickableBox3 + <Kb.ClickableBox key={tab} onClick={onClick} onMouseDown={onMouseDown} @@ -305,7 +305,7 @@ function Tab(props: TabProps) { {label} </Kb.Text> <TabBadge name={tab} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/settings/account/email-phone-row.tsx b/shared/settings/account/email-phone-row.tsx index bb1b04c40ed3..244775d85c50 100644 --- a/shared/settings/account/email-phone-row.tsx +++ b/shared/settings/account/email-phone-row.tsx @@ -147,7 +147,7 @@ const EmailPhoneRow = (p: {contactKey: string; onEmailVerificationSuccess: (emai </Kb.Box2> {!!menuItems.length && ( <> - <Kb.ClickableBox3 + <Kb.ClickableBox className="hover_container" onClick={showPopup} ref={popupAnchor} @@ -156,7 +156,7 @@ const EmailPhoneRow = (p: {contactKey: string; onEmailVerificationSuccess: (emai > <Kb.Icon className="hover_contained_color_black" type="iconfont-gear" style={styles.gearIcon} /> {gearIconBadge} - </Kb.ClickableBox3> + </Kb.ClickableBox> {popup} </> )} diff --git a/shared/settings/feedback/index.tsx b/shared/settings/feedback/index.tsx index 994eff357c6e..c4eb89d426d4 100644 --- a/shared/settings/feedback/index.tsx +++ b/shared/settings/feedback/index.tsx @@ -85,14 +85,14 @@ const Feedback = (props: Props) => { </Kb.Banner> )} <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true}> - <Kb.ClickableBox3 onClick={_onLabelClick} direction="vertical" fullWidth={true}> + <Kb.ClickableBox onClick={_onLabelClick} direction="vertical" fullWidth={true}> <Kb.Checkbox label="Include your logs" labelSubtitle="This includes some private metadata info (e.g., file sizes, but not names or contents) but it will help the developers fix bugs more quickly." checked={sendLogs} onCheck={setSendLogs} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> {props.loggedOut && ( <Kb.Box2 direction="horizontal" fullWidth={true}> diff --git a/shared/settings/files/index.tsx b/shared/settings/files/index.tsx index dc8510d291a5..5a79b952583d 100644 --- a/shared/settings/files/index.tsx +++ b/shared/settings/files/index.tsx @@ -80,11 +80,11 @@ const FinderIntegration = () => { <Kb.Text type="Header">{Platform.fileUIName} integration</Kb.Text> {isPending && <Kb.ProgressIndicator style={styles.spinner} />} {driverStatus.type === T.FS.DriverStatusType.Disabled && driverStatus.kextPermissionError && ( - <Kb.ClickableBox3 direction="vertical" style={styles.actionNeededBox} onClick={onShowKextPermissionPopup}> + <Kb.ClickableBox direction="vertical" style={styles.actionNeededBox} onClick={onShowKextPermissionPopup}> <Kb.Text style={styles.actionNeededText} type="BodySmallSemibold"> Action needed! </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} </Kb.Box2> {driverStatus.type === T.FS.DriverStatusType.Enabled ? ( diff --git a/shared/settings/logout.tsx b/shared/settings/logout.tsx index 68ff45edbc93..fe54dcbdfbf8 100644 --- a/shared/settings/logout.tsx +++ b/shared/settings/logout.tsx @@ -123,7 +123,7 @@ const LogoutContainer = () => { {loggingOut ? ( <Kb.ProgressIndicator style={styles.smallProgress} type="Small" /> ) : ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={logOut} direction="horizontal" justifyContent="center" @@ -134,7 +134,7 @@ const LogoutContainer = () => { <Kb.Text className="underline" style={styles.logout} type="BodySmallSecondaryLink"> Just sign out </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} </Kb.Box2> </Kb.ButtonBar> diff --git a/shared/settings/routes.tsx b/shared/settings/routes.tsx index 9beeba0bdcba..d7e43e756d05 100644 --- a/shared/settings/routes.tsx +++ b/shared/settings/routes.tsx @@ -19,7 +19,7 @@ const PushPromptSkipButton = () => { const rejectPermissions = usePushState(s => s.dispatch.rejectPermissions) const clearModals = C.Router2.clearModals return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={() => { rejectPermissions() clearModals() @@ -29,7 +29,7 @@ const PushPromptSkipButton = () => { <Kb.Text type="BodyBig" negative={true}> Skip </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/settings/sub-nav/settings-item.tsx b/shared/settings/sub-nav/settings-item.tsx index bfb85c4897cf..5cc5ee00bafa 100644 --- a/shared/settings/sub-nav/settings-item.tsx +++ b/shared/settings/sub-nav/settings-item.tsx @@ -21,7 +21,7 @@ function SettingsItem(props: SettingsItemProps) { _onClick(type) } return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={onClick} direction="horizontal" alignItems="center" @@ -57,7 +57,7 @@ function SettingsItem(props: SettingsItemProps) { {!!props.badgeNumber && props.badgeNumber > 0 && ( <Kb.Badge badgeNumber={props.badgeNumber} badgeStyle={styles.badge} /> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } export default SettingsItem diff --git a/shared/signup/common.tsx b/shared/signup/common.tsx index f5e02511c918..61ad2416fccc 100644 --- a/shared/signup/common.tsx +++ b/shared/signup/common.tsx @@ -83,7 +83,7 @@ const Header = (props: HeaderProps) => ( )} <Kb.Box2 direction="horizontal" centerChildren={true} relative={true} style={styles.titleContainer} fullWidth={true}> {props.onBack && ( - <Kb.ClickableBox3 onClick={props.onBack} direction="horizontal" alignItems="center" gap="xtiny" style={styles.backButton}> + <Kb.ClickableBox onClick={props.onBack} direction="horizontal" alignItems="center" gap="xtiny" style={styles.backButton}> <Kb.Icon type="iconfont-arrow-left" color={props.negative ? Kb.Styles.globalColors.white : Kb.Styles.globalColors.black_50} @@ -97,7 +97,7 @@ const Header = (props: HeaderProps) => ( > Back </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} {props.titleComponent || <Kb.Text type="Header">{props.title}</Kb.Text>} {props.onRightAction && !!props.rightActionLabel && ( diff --git a/shared/signup/phone-number/verify-body.tsx b/shared/signup/phone-number/verify-body.tsx index e383c263f48e..1e4e889b36ef 100644 --- a/shared/signup/phone-number/verify-body.tsx +++ b/shared/signup/phone-number/verify-body.tsx @@ -36,7 +36,7 @@ const VerifyBody = (props: BodyProps) => { containerStyle={styles.inputContainer2} inputStyle={styles.inputText2} /> - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={props.resendWaiting || resendDisabled ? undefined : onResend} direction="vertical" relative={true} @@ -64,7 +64,7 @@ const VerifyBody = (props: BodyProps) => { <Kb.ProgressIndicator type="Small" white={true} /> </Kb.Box2> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> ) } diff --git a/shared/team-building/contacts.tsx b/shared/team-building/contacts.tsx index 8d94ae68a210..e5615caa4cb7 100644 --- a/shared/team-building/contacts.tsx +++ b/shared/team-building/contacts.tsx @@ -144,7 +144,7 @@ export const ContactsImportButton = () => { return null return ( - <Kb.ClickableBox3 onClick={onImportContacts} direction="horizontal" fullWidth={true} alignItems="center" gap="small" style={styles.importContactsContainer}> + <Kb.ClickableBox onClick={onImportContacts} direction="horizontal" fullWidth={true} alignItems="center" gap="small" style={styles.importContactsContainer}> <Kb.Box2 direction="vertical" style={styles.iconContactBookContainer}> <Kb.Icon type="iconfont-contact-book" color={Kb.Styles.globalColors.black} /> </Kb.Box2> @@ -152,7 +152,7 @@ export const ContactsImportButton = () => { Import phone contacts </Kb.Text> <Kb.Icon type="iconfont-arrow-right" sizeType="Small" color={Kb.Styles.globalColors.black} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/team-building/search-result/common-result.tsx b/shared/team-building/search-result/common-result.tsx index 81362c7014bf..e53f0d23277c 100644 --- a/shared/team-building/search-result/common-result.tsx +++ b/shared/team-building/search-result/common-result.tsx @@ -91,7 +91,7 @@ const CommonResult = (props: CommonResultProps) => { const onClick = getRowAction(props) return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={onClick} className="hover_background_color_blueLighter2 hover_container" direction="horizontal" @@ -144,7 +144,7 @@ const CommonResult = (props: CommonResultProps) => { {/* Renders checkbox for new-chat and team-building, and chat buttons + dropdown for people search */} {props.rightButtons ?? null} </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/team-building/search-result/people-result.tsx b/shared/team-building/search-result/people-result.tsx index 4313b1103f95..2c4e17bcd816 100644 --- a/shared/team-building/search-result/people-result.tsx +++ b/shared/team-building/search-result/people-result.tsx @@ -135,7 +135,7 @@ const DropdownButton = (p: DropdownProps) => { const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup) return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={e => { e?.stopPropagation() showPopup() @@ -147,7 +147,7 @@ const DropdownButton = (p: DropdownProps) => { <Kb.Icon color={Kb.Styles.globalColors.blue} type="iconfont-ellipsis" /> </Kb.Button> {popup} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/team-building/search-result/user-result.tsx b/shared/team-building/search-result/user-result.tsx index dc2434705d79..33fe412d3d27 100644 --- a/shared/team-building/search-result/user-result.tsx +++ b/shared/team-building/search-result/user-result.tsx @@ -45,14 +45,14 @@ const ActionButton = (props: { const Icon = props.inTeam ? AlreadyAddedIconButton : AddButton return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={props.inTeam ? props.onRemove : props.onAdd} direction="vertical" centerChildren={true} style={Kb.Styles.collapseStyles([styles.actionButton, props.inTeam && {backgroundColor: undefined}])} > <Icon /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/team-building/service-tab-bar.tsx b/shared/team-building/service-tab-bar.tsx index 2297ab364368..51b13cfee1ae 100644 --- a/shared/team-building/service-tab-bar.tsx +++ b/shared/team-building/service-tab-bar.tsx @@ -120,7 +120,7 @@ const ServiceIconNative = function ServiceIcon(props: IconProps) { }) return ( - <Kb.ClickableBox3 onClick={() => onClick(service)} direction="vertical" relative={true}> + <Kb.ClickableBox onClick={() => onClick(service)} direction="vertical" relative={true}> <AnimatedBox2 direction="vertical" style={[nativeStyles.serviceIconContainer, animatedWidth]}> <Kb.Box2 direction="vertical" relative={true}> {serviceIdToBadge(service) && ( @@ -156,7 +156,7 @@ const ServiceIconNative = function ServiceIcon(props: IconProps) { Kb.Styles.platformStyles({isMobile: animatedTransform}), ])} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } @@ -282,7 +282,7 @@ const MoreNetworksButton = (props: { ref={popupAnchor} > <Kb.WithTooltip tooltip="More networks" containerStyle={desktopStyles.moreNetworks2}> - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={showPopup} direction="horizontal" alignItems="center" @@ -294,7 +294,7 @@ const MoreNetworksButton = (props: { <Kb.Text type="BodyBigExtrabold" style={desktopStyles.moreText}> ••• </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.WithTooltip> </Kb.Box2> <Kb.Box2 direction="horizontal" fullWidth={true} style={desktopStyles.inactiveTabBar} /> @@ -310,7 +310,7 @@ const ServiceIconDesktop = (props: IconProps) => { const color = props.isActive || hover ? serviceIdToAccentColor(props.service, isDarkMode) : Kb.Styles.globalColors.black return ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={() => props.onClick(props.service)} onMouseOver={() => setHover(true)} onMouseLeave={() => setHover(false)} @@ -353,7 +353,7 @@ const ServiceIconDesktop = (props: IconProps) => { props.isActive && {backgroundColor: serviceIdToAccentColor(props.service, isDarkMode)}, ])} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/team-building/user-bubble.tsx b/shared/team-building/user-bubble.tsx index 8d8b46de8574..778c88b0ff08 100644 --- a/shared/team-building/user-bubble.tsx +++ b/shared/team-building/user-bubble.tsx @@ -50,7 +50,7 @@ const UserBubble = (props: Props) => { } const RemoveBubble = ({onRemove}: {onRemove: () => void}) => ( - <Kb.ClickableBox3 onClick={onRemove} direction="vertical"> + <Kb.ClickableBox onClick={onRemove} direction="vertical"> <Kb.Icon type="iconfont-close" color={Kb.Styles.globalColors.black_50_on_white} @@ -58,7 +58,7 @@ const RemoveBubble = ({onRemove}: {onRemove: () => void}) => ( style={styles.removeIcon} className="hover_color_black" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) const styles = Kb.Styles.styleSheetCreate( diff --git a/shared/teams/add-members-wizard/confirm.tsx b/shared/teams/add-members-wizard/confirm.tsx index d0c1b019db1b..e9f79b6a21dc 100644 --- a/shared/teams/add-members-wizard/confirm.tsx +++ b/shared/teams/add-members-wizard/confirm.tsx @@ -358,11 +358,11 @@ const AddingMembers = ({ /> ))} {showDivider && ( - <Kb.ClickableBox3 onClick={toggleExpanded} direction="horizontal" alignSelf="stretch" style={styles.addingMemberDivider} centerChildren={true}> + <Kb.ClickableBox onClick={toggleExpanded} direction="horizontal" alignSelf="stretch" style={styles.addingMemberDivider} centerChildren={true}> <Kb.Text type="BodySemibold" negative={true}> {expanded ? 'Show less' : `+${addingMembers.length - 4} more`} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} {expanded && belowDivider.map(toAdd => ( diff --git a/shared/teams/common/channels-widget.tsx b/shared/teams/common/channels-widget.tsx index 7f6e4e94fd9e..b89345926676 100644 --- a/shared/teams/common/channels-widget.tsx +++ b/shared/teams/common/channels-widget.tsx @@ -101,7 +101,7 @@ const ChannelInputMobile = (props: ChannelInputProps) => { onAdd(channels) } return ( - <Kb.ClickableBox3 onClick={() => setShowingPopup(true)} direction="vertical"> + <Kb.ClickableBox onClick={() => setShowingPopup(true)} direction="vertical"> <Kb.Box2 direction="horizontal" gap="tiny" @@ -123,7 +123,7 @@ const ChannelInputMobile = (props: ChannelInputProps) => { hideGeneral={disableGeneral} /> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/teams/common/use-autocompleter.tsx b/shared/teams/common/use-autocompleter.tsx index e6bff1b276b7..c2daf961db0f 100644 --- a/shared/teams/common/use-autocompleter.tsx +++ b/shared/teams/common/use-autocompleter.tsx @@ -35,7 +35,7 @@ function useAutocompleter<U>( positionFallbacks={positionFallbacks} > {itemsFiltered.map((item, idx) => ( - <Kb.ClickableBox3 + <Kb.ClickableBox key={item.label} onMouseDown={() => onSelect(item.value)} onMouseOver={() => setSelected(idx)} @@ -46,7 +46,7 @@ function useAutocompleter<U>( <Kb.Text type="BodySemibold" lineClamp={1}> {item.label} </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> ))} </Kb.Popup> ) diff --git a/shared/teams/emojis/add-emoji.tsx b/shared/teams/emojis/add-emoji.tsx index be79d1ad73a6..2b3d3a7beda1 100644 --- a/shared/teams/emojis/add-emoji.tsx +++ b/shared/teams/emojis/add-emoji.tsx @@ -323,9 +323,9 @@ type EmojiToAddOrAddRow = const renderRow = (_: number, item: EmojiToAddOrAddRow) => item.type === 'add' ? ( <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} style={styles.emojiToAddRow}> - <Kb.ClickableBox3 direction="vertical" centerChildren={true} onClick={item.add} style={styles.addEmojiIconContainer}> + <Kb.ClickableBox direction="vertical" centerChildren={true} onClick={item.add} style={styles.addEmojiIconContainer}> <Kb.Icon type="iconfont-new" color={Kb.Styles.globalColors.blue} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> ) : ( <Kb.Box2 diff --git a/shared/teams/emojis/common.tsx b/shared/teams/emojis/common.tsx index 44b33bbc9974..7520e2e2963b 100644 --- a/shared/teams/emojis/common.tsx +++ b/shared/teams/emojis/common.tsx @@ -35,9 +35,9 @@ export function AliasInput(props: AliasInputProps & {ref?: React.Ref<AliasRef>}) onEnterKeyDown={onEnterKeyDown} /> {onRemove && ( - <Kb.ClickableBox3 direction="horizontal" centerChildren={true} onClick={onRemove} style={styles.removeBox}> + <Kb.ClickableBox direction="horizontal" centerChildren={true} onClick={onRemove} style={styles.removeBox}> <Kb.Icon type="iconfont-remove" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> )} </Kb.Box2> {!!error && ( diff --git a/shared/teams/invite-by-contact/index.native.tsx b/shared/teams/invite-by-contact/index.native.tsx index 491c72608445..42af98ff0562 100644 --- a/shared/teams/invite-by-contact/index.native.tsx +++ b/shared/teams/invite-by-contact/index.native.tsx @@ -105,12 +105,12 @@ export const InviteByContact = (props: InviteByContactProps) => { position="bottom center" disabledRoles={{owner: 'Cannot invite an owner via email.'}} /> - <Kb.ClickableBox3 direction="vertical" centerChildren={true} onClick={() => setRolePickerOpen(true)} style={styles.rolePickerBox}> + <Kb.ClickableBox direction="vertical" centerChildren={true} onClick={() => setRolePickerOpen(true)} style={styles.rolePickerBox}> <Kb.Text center={true} type="BodySmall"> Users will be invited to {props.teamName} as <Kb.Text type="BodySmallPrimaryLink">{' ' + props.selectedRole + 's'}</Kb.Text>. </Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> <Kb.List keyProperty="id" items={listItems} diff --git a/shared/teams/main/index.tsx b/shared/teams/main/index.tsx index 9cde5cafc60d..6b5296d17683 100644 --- a/shared/teams/main/index.tsx +++ b/shared/teams/main/index.tsx @@ -21,7 +21,7 @@ export type Props = { const TeamBigButtons = (props: {onCreateTeam: () => void; onJoinTeam: () => void; empty: boolean}) => ( <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.teamButtons} gap="tiny" justifyContent="flex-start"> - <Kb.ClickableBox3 + <Kb.ClickableBox style={styles.bigButton} onClick={props.onCreateTeam} className="background_color_white hover_background_color_blueLighter2" @@ -34,8 +34,8 @@ const TeamBigButtons = (props: {onCreateTeam: () => void; onJoinTeam: () => void <Kb.Avatar isTeam={true} size={96} /> <Kb.Icon type="iconfont-add-solid" sizeType="Default" style={styles.teamPlus} /> </Kb.Box2> - </Kb.ClickableBox3> - <Kb.ClickableBox3 + </Kb.ClickableBox> + <Kb.ClickableBox style={styles.bigButton} onClick={props.onJoinTeam} className="background_color_white hover_background_color_blueLighter2" @@ -45,7 +45,7 @@ const TeamBigButtons = (props: {onCreateTeam: () => void; onJoinTeam: () => void > <Kb.Text type="BodyBig">Join a team</Kb.Text> <Kb.ImageIcon type="icon-illustration-teams-96" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> {props.empty && !isMobile && ( <Kb.Text type="BodySmall" style={styles.emptyNote}> Keybase team chats are encrypted – unlike Slack – and work for any size group, from casual friends to @@ -90,10 +90,10 @@ const SortHeader = ({onChangeSort, sortOrder}: {onChangeSort: Props['onChangeSor const {popup, showPopup, popupAnchor} = Kb.usePopup2(makePopup) return ( <Kb.Box2 direction="horizontal" style={styles.sortHeader} alignItems="center" fullWidth={true}> - <Kb.ClickableBox3 onClick={showPopup} ref={popupAnchor} direction="horizontal" gap="tiny" alignItems="center"> + <Kb.ClickableBox onClick={showPopup} ref={popupAnchor} direction="horizontal" gap="tiny" alignItems="center"> <Kb.Icon type="iconfont-arrow-full-down" /> <Kb.Text type="BodySmallSemibold">{sortOrderToTitle[sortOrder]}</Kb.Text> - </Kb.ClickableBox3> + </Kb.ClickableBox> {popup} </Kb.Box2> ) diff --git a/shared/teams/main/team-row.tsx b/shared/teams/main/team-row.tsx index 2ac14a130891..69c3d52b8659 100644 --- a/shared/teams/main/team-row.tsx +++ b/shared/teams/main/team-row.tsx @@ -61,7 +61,7 @@ const TeamRow = function TeamRow(props: Props) { if (isMobile) { return ( <> - <Kb.ClickableBox3 onClick={onViewTeam} direction="horizontal" fullWidth={true} alignItems="center" style={styles.rowStyle}> + <Kb.ClickableBox onClick={onViewTeam} direction="horizontal" fullWidth={true} alignItems="center" style={styles.rowStyle}> <Kb.Divider style={styles.divider} /> <Kb.Box2 direction="vertical" style={styles.avatarOuter} centerChildren={true}> <Kb.Box2 direction="vertical" relative={true} style={styles.avatarRelative}> @@ -109,7 +109,7 @@ const TeamRow = function TeamRow(props: Props) { ref={popupAnchor} /> </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> {popup} </> ) @@ -117,7 +117,7 @@ const TeamRow = function TeamRow(props: Props) { return ( <> - <Kb.ClickableBox3 onClick={onViewTeam} testID={TestIDs.TEAMS_ROW} className="teamRow" direction="horizontal" fullWidth={true} alignItems="center" style={styles.rowStyle}> + <Kb.ClickableBox onClick={onViewTeam} testID={TestIDs.TEAMS_ROW} className="teamRow" direction="horizontal" fullWidth={true} alignItems="center" style={styles.rowStyle}> <Kb.Divider style={styles.divider} /> <Kb.Box2 direction="vertical" style={styles.avatarOuter} centerChildren={true}> <Kb.Box2 direction="vertical" relative={true} style={styles.avatarRelative}> @@ -170,7 +170,7 @@ const TeamRow = function TeamRow(props: Props) { ref={popupAnchor} /> </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> {popup} </> ) diff --git a/shared/teams/role-picker.tsx b/shared/teams/role-picker.tsx index 28870a5a887e..a485139e0755 100644 --- a/shared/teams/role-picker.tsx +++ b/shared/teams/role-picker.tsx @@ -117,7 +117,7 @@ const RoleRowWrapper = (props: RoleRowWrapperProps) => { ...(isMobile ? {} : {height: selected ? 160 : 42}), } return ( - <Kb.ClickableBox3 direction="vertical" fullWidth={true} onClick={onSelect} style={style}> + <Kb.ClickableBox direction="vertical" fullWidth={true} onClick={onSelect} style={style}> <Kb.Divider /> <RoleRow selected={selected} @@ -138,7 +138,7 @@ const RoleRowWrapper = (props: RoleRowWrapperProps) => { onSelect={onSelect} disabledReason={disabledReason} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) } diff --git a/shared/teams/team/member/add-to-channels.tsx b/shared/teams/team/member/add-to-channels.tsx index 057afd789873..0358de6ee049 100644 --- a/shared/teams/team/member/add-to-channels.tsx +++ b/shared/teams/team/member/add-to-channels.tsx @@ -495,7 +495,7 @@ const ChannelRow = function ChannelRow(p: ChannelRowProps) { } return isMobile ? ( - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={selfMode ? onPreviewChannel : onSelect} direction="horizontal" alignItems="center" @@ -531,7 +531,7 @@ const ChannelRow = function ChannelRow(p: ChannelRowProps) { } /> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) : ( <Kb.ListItem fullDivider={true} diff --git a/shared/teams/team/member/index.new.tsx b/shared/teams/team/member/index.new.tsx index d2c5146a1dbd..b3a463aefc8a 100644 --- a/shared/teams/team/member/index.new.tsx +++ b/shared/teams/team/member/index.new.tsx @@ -627,7 +627,7 @@ const NodeInRow = (props: NodeInRowProps) => { open={open} disabledRoles={disabledRoles} /> - <Kb.ClickableBox3 onClick={() => setExpanded(!expanded)} direction="vertical" fullWidth={true} style={!expanded && styles.rowCollapsedFixedHeight}> + <Kb.ClickableBox onClick={() => setExpanded(!expanded)} direction="vertical" fullWidth={true} style={!expanded && styles.rowCollapsedFixedHeight}> {props.idx !== 0 && <Kb.Divider />} <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="flex-start" style={styles.row}> @@ -750,7 +750,7 @@ const NodeInRow = (props: NodeInRowProps) => { </Kb.Box2> )} </Kb.Box2> - </Kb.ClickableBox3> + </Kb.ClickableBox> </> ) } diff --git a/shared/teams/team/settings-tab/channel-popup.tsx b/shared/teams/team/settings-tab/channel-popup.tsx index dbde462ee100..8d4771a5d80d 100644 --- a/shared/teams/team/settings-tab/channel-popup.tsx +++ b/shared/teams/team/settings-tab/channel-popup.tsx @@ -81,7 +81,7 @@ const ChannelPopup = (props: Props) => { const disabled = disabledChannels?.some(c => c.conversationIDKey === channel.conversationIDKey) const onClick = disabled ? undefined : () => onSelect(channel) return ( - <Kb.ClickableBox3 key={channel.conversationIDKey} onClick={onClick} direction="horizontal" style={styles.channelContainer} gap="tiny" fullWidth={true} justifyContent="space-between"> + <Kb.ClickableBox key={channel.conversationIDKey} onClick={onClick} direction="horizontal" style={styles.channelContainer} gap="tiny" fullWidth={true} justifyContent="space-between"> <Kb.Text type="Body" lineClamp={1} style={Kb.Styles.globalStyles.flexOne}> #{channel.channelname} </Kb.Text> @@ -92,7 +92,7 @@ const ChannelPopup = (props: Props) => { } disabled={disabled} /> - </Kb.ClickableBox3> + </Kb.ClickableBox> ) }} /> diff --git a/shared/teams/team/settings-tab/retention/index.tsx b/shared/teams/team/settings-tab/retention/index.tsx index df5cf98d7342..90d9f40ab7d8 100644 --- a/shared/teams/team/settings-tab/retention/index.tsx +++ b/shared/teams/team/settings-tab/retention/index.tsx @@ -165,7 +165,7 @@ const RetentionPicker = (p: Props) => { <Kb.Box2 direction="horizontal" alignItems="center" style={styles.heading} fullWidth={true}> <Kb.Text type="BodySmallSemibold">Message deletion</Kb.Text> </Kb.Box2> - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={showPopup} ref={popupAnchor} direction="horizontal" @@ -176,7 +176,7 @@ const RetentionPicker = (p: Props) => { {policyToLabel(policy, teamPolicy)} </Kb.Box2> <Kb.Icon type="iconfont-caret-down" color="inherit" fontSize={7} sizeType="Tiny" /> - </Kb.ClickableBox3> + </Kb.ClickableBox> {policyIsExploding && ( <Kb.Box2 direction="horizontal" alignItems="center" fullWidth={true} gap="xtiny"> <Kb.Text type="BodySmall">Participants will see their message explode.</Kb.Text> diff --git a/shared/tracker/assertion.tsx b/shared/tracker/assertion.tsx index 56efb5defba4..4104121d6d64 100644 --- a/shared/tracker/assertion.tsx +++ b/shared/tracker/assertion.tsx @@ -224,7 +224,7 @@ const Assertion = (ownProps: OwnProps) => { </Kb.Text> )} </Kb.Text> - <Kb.ClickableBox3 + <Kb.ClickableBox onClick={items ? showPopup : onShowProof} style={styles.statusAssertion} direction="horizontal" @@ -246,7 +246,7 @@ const Assertion = (ownProps: OwnProps) => { ) : ( <Kb.Box2 direction="vertical" /> )} - </Kb.ClickableBox3> + </Kb.ClickableBox> </Kb.Box2> {!!metas.length && ( <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.metaAssertion}> @@ -434,9 +434,9 @@ const AssertionSiteIcon = (p: SIProps) => { child = <HoverOpacity>{child}</HoverOpacity> } return ( - <Kb.ClickableBox3 onClick={onCreateProof || onShowProof} style={isSuggestion ? styles.halfOpacity : null} direction="vertical"> + <Kb.ClickableBox onClick={onCreateProof || onShowProof} style={isSuggestion ? styles.halfOpacity : null} direction="vertical"> {child} - </Kb.ClickableBox3> + </Kb.ClickableBox> ) }