From 426288367ce2dd50d2b2bfe0d5e85c6ceb3801f2 Mon Sep 17 00:00:00 2001 From: chrisnojima Date: Wed, 18 Feb 2026 13:46:39 -0500 Subject: [PATCH 1/6] move from box to box2 --- shared/chat/conversation/error.tsx | 11 ++-- .../input-area/normal2/typing.tsx | 9 ++- .../conversation/list-area/index.native.tsx | 4 +- .../messages/retention-notice.tsx | 11 ++-- .../system-added-to-team/container.tsx | 4 +- .../unfurl/unfurl-list/image/video.native.tsx | 4 +- .../index.native.tsx | 15 +++-- .../rekey/participant-rekey.desktop.tsx | 55 +++++++++---------- .../rekey/participant-rekey.native.tsx | 32 +++++------ .../conversation/rekey/you-rekey.desktop.tsx | 13 ++--- shared/chat/conversation/you-are-reset.tsx | 24 ++++---- shared/chat/delete-history-warning.tsx | 16 ++---- .../common-adapters/avatar/index.native.tsx | 17 +++--- shared/common-adapters/back-button.native.tsx | 10 ++-- shared/common-adapters/button-bar.tsx | 31 +++++++---- .../common-adapters/choice-list.desktop.tsx | 55 ++++++++++--------- shared/common-adapters/choice-list.native.tsx | 27 ++++----- .../floating-box/index.native.tsx | 9 +-- .../relative-floating-box.desktop.tsx | 8 +-- .../header-hoc/index.desktop.tsx | 23 +++----- .../header-hoc/index.native.tsx | 49 ++++++++--------- .../common-adapters/loading-line.desktop.tsx | 10 ++-- shared/common-adapters/save-indicator.tsx | 9 +-- shared/common-adapters/timeline-marker.tsx | 14 ++--- shared/common-adapters/toast.native.tsx | 8 +-- shared/common-adapters/video.native.tsx | 11 ++-- .../common-adapters/with-tooltip.native.tsx | 9 +-- shared/fs/browser/rows/editing.tsx | 14 ++--- shared/fs/browser/rows/placeholder.tsx | 6 +- shared/fs/common/item-icon.tsx | 28 +++++----- shared/fs/common/path-item-action/header.tsx | 4 +- shared/fs/common/pie-slice.tsx | 16 +++--- shared/fs/filepreview/bare-preview.tsx | 21 +++---- shared/fs/footer/upload.native.tsx | 12 ++-- shared/git/delete-repo.tsx | 16 ++---- shared/login/forms/container.native.tsx | 3 +- shared/login/relogin/dropdown.native.tsx | 16 +++--- shared/login/user-card/index.native.tsx | 22 +++----- shared/package.json | 2 +- shared/people/follow-suggestions.tsx | 5 +- shared/people/index.shared.tsx | 4 +- shared/profile/edit-avatar/index.desktop.tsx | 8 +-- shared/profile/generic/shared.tsx | 3 +- shared/profile/pgp/import/index.desktop.tsx | 6 +- shared/profile/revoke.tsx | 17 ++---- shared/provision/code-page/qr-scan/lines.tsx | 24 +++++--- shared/settings/common.desktop.tsx | 4 +- shared/settings/db-nuke.confirm.tsx | 15 ++--- .../invite-generated/index.desktop.tsx | 21 +++---- .../settings/notifications/index.native.tsx | 13 +++-- shared/settings/proxy.tsx | 16 +++--- shared/settings/subheading.desktop.tsx | 4 +- shared/teams/channel/index.tsx | 8 +-- .../confirm-remove-from-channel.tsx | 4 +- shared/teams/main/banner.tsx | 19 ++----- shared/teams/team/index.tsx | 8 +-- shared/unlock-folders/success.desktop.tsx | 4 +- 57 files changed, 376 insertions(+), 455 deletions(-) diff --git a/shared/chat/conversation/error.tsx b/shared/chat/conversation/error.tsx index 0c9266bb235c..e098c723b111 100644 --- a/shared/chat/conversation/error.tsx +++ b/shared/chat/conversation/error.tsx @@ -4,15 +4,15 @@ import * as Kb from '@/common-adapters' const ConversationError = () => { const text = Chat.useChatContext(s => s.meta.snippet ?? '') return ( - + There was an error loading this conversation. The error is: - + - - + + ) } @@ -21,12 +21,9 @@ const styles = Kb.Styles.styleSheetCreate( ({ body: {marginTop: Kb.Styles.globalMargins.small}, container: { - ...Kb.Styles.globalStyles.flexBoxColumn, padding: Kb.Styles.globalMargins.medium, - width: '100%', }, errorBox: { - ...Kb.Styles.globalStyles.flexBoxRow, marginTop: Kb.Styles.globalMargins.small, }, errorText: {flexGrow: 1}, diff --git a/shared/chat/conversation/input-area/normal2/typing.tsx b/shared/chat/conversation/input-area/normal2/typing.tsx index adfc08867ee1..9b80f6647870 100644 --- a/shared/chat/conversation/input-area/normal2/typing.tsx +++ b/shared/chat/conversation/input-area/normal2/typing.tsx @@ -56,18 +56,18 @@ const Typing = React.memo(function Typing() { }) ) return ( - + {names.size > 0 && ( - + - + )} {names.size > 0 && ( )} - + ) }) @@ -91,7 +91,6 @@ const styles = Kb.Styles.styleSheetCreate( opacity: 1, }, isMobile: { - ...Kb.Styles.globalStyles.flexBoxRow, alignItems: 'flex-end', backgroundColor: Kb.Styles.globalColors.white, height: mobileTypingContainerHeight, diff --git a/shared/chat/conversation/list-area/index.native.tsx b/shared/chat/conversation/list-area/index.native.tsx index 4a4ea8308087..b932d1950dfe 100644 --- a/shared/chat/conversation/list-area/index.native.tsx +++ b/shared/chat/conversation/list-area/index.native.tsx @@ -272,7 +272,7 @@ const ConversationList = React.memo(function ConversationList() { - + {jumpToRecent} {debugWhichList} - + diff --git a/shared/chat/conversation/messages/retention-notice.tsx b/shared/chat/conversation/messages/retention-notice.tsx index 77327c4f58ed..2ec9b07ecdca 100644 --- a/shared/chat/conversation/messages/retention-notice.tsx +++ b/shared/chat/conversation/messages/retention-notice.tsx @@ -56,10 +56,10 @@ const RetentionNoticeContainer = React.memo(function RetentionNoticeContainer() : 'iconfont-timer-solid' return ( - - + + - + {!!explanation && ( {explanation} @@ -74,7 +74,7 @@ const RetentionNoticeContainer = React.memo(function RetentionNoticeContainer() Change this )} - + ) }) @@ -82,14 +82,11 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: { - ...Kb.Styles.globalStyles.flexBoxColumn, - alignItems: 'center', backgroundColor: Kb.Styles.globalColors.blueLighter3, paddingBottom: Kb.Styles.globalMargins.small, paddingLeft: Kb.Styles.globalMargins.medium, paddingRight: Kb.Styles.globalMargins.medium, paddingTop: Kb.Styles.globalMargins.small, - width: '100%', }, iconBox: {marginBottom: Kb.Styles.globalMargins.xtiny}, }) as const diff --git a/shared/chat/conversation/messages/system-added-to-team/container.tsx b/shared/chat/conversation/messages/system-added-to-team/container.tsx index 10999c12dc9f..4c684a85fd06 100644 --- a/shared/chat/conversation/messages/system-added-to-team/container.tsx +++ b/shared/chat/conversation/messages/system-added-to-team/container.tsx @@ -120,11 +120,11 @@ const ManageComponent = (props: Props) => { } if (addee === you) { return ( - + Manage phone and computer notifications - + ) } else if (bot) { return ( diff --git a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx index b3a330b258dc..a4aaab4c3049 100644 --- a/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx +++ b/shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.native.tsx @@ -50,9 +50,9 @@ export const Video = (props: Props) => { isMuted={true} shouldPlay={playing} /> - + {!playing && } - + ) } diff --git a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx index 6e61f9206f6a..125feab14cb8 100644 --- a/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx +++ b/shared/chat/conversation/messages/wrapper/exploding-height-retainer/index.native.tsx @@ -25,7 +25,9 @@ const ExplodingHeightRetainer = (p: Props) => { const numImages = Math.ceil(height / 80) return ( - { messageKey={messageKey} numImages={numImages} /> - + ) } @@ -157,7 +159,7 @@ const EmojiTower = (p: {numImages: number; animatedValue: NativeAnimated.Value}) setChildren(children) }, [running, numImages]) - return {children} + return {children} } const AshTower = (p: {explodedBy?: string; numImages: number; showExploded: boolean}) => { @@ -199,7 +201,7 @@ const AshTower = (p: {explodedBy?: string; numImages: number; showExploded: bool return ( <> {children} - {exploded} + {exploded} ) } @@ -211,9 +213,8 @@ const styles = Kb.Styles.styleSheetCreate( height: 80, width: 400, }, - container: {...Kb.Styles.globalStyles.flexBoxColumn, flex: 1}, + container: {flex: 1}, emojiTower: { - ...Kb.Styles.globalStyles.flexBoxColumn, bottom: 0, overflow: 'hidden', position: 'absolute', @@ -238,8 +239,6 @@ const styles = Kb.Styles.styleSheetCreate( top: 0, }, tagBox: { - ...Kb.Styles.globalStyles.flexBoxColumn, - alignItems: 'flex-end', backgroundColor: Kb.Styles.globalColors.fastBlank, bottom: 2, minWidth: 80, diff --git a/shared/chat/conversation/rekey/participant-rekey.desktop.tsx b/shared/chat/conversation/rekey/participant-rekey.desktop.tsx index 3cf0791e1fcb..9ef08e9e0d1a 100644 --- a/shared/chat/conversation/rekey/participant-rekey.desktop.tsx +++ b/shared/chat/conversation/rekey/participant-rekey.desktop.tsx @@ -2,27 +2,30 @@ import * as Kb from '@/common-adapters' import type {Props} from './participant-rekey.types' const Row = (props: {username: string; onUsernameClicked: (s: string) => void}) => ( - props.onUsernameClicked(props.username)}> - - - - - Can rekey this chat by opening the Keybase app. - - - + props.onUsernameClicked(props.username)}> + + + + + + Can rekey this chat by opening the Keybase app. + + + + ) const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => { return ( - - + This conversation is waiting for a participant to open their Keybase app. - - + - + {rekeyers.map(username => ( ))} - - - + + + ) } @@ -61,8 +65,6 @@ const styles = Kb.Styles.styleSheetCreate( ({ container: Kb.Styles.platformStyles({ isElectron: { - ...Kb.Styles.globalStyles.flexBoxColumn, - alignItems: 'stretch', backgroundColor: Kb.Styles.globalColors.white, borderLeft: `1px solid ${Kb.Styles.globalColors.black_20}`, flex: 1, @@ -71,7 +73,6 @@ const styles = Kb.Styles.styleSheetCreate( }), innerRow: Kb.Styles.platformStyles({ isElectron: { - ...Kb.Styles.globalStyles.flexBoxColumn, borderBottom: `1px solid ${Kb.Styles.globalColors.black_10}`, flex: 1, justifyContent: 'center', @@ -79,8 +80,6 @@ const styles = Kb.Styles.styleSheetCreate( }), row: Kb.Styles.platformStyles({ isElectron: { - ...Kb.Styles.globalStyles.flexBoxRow, - ...Kb.Styles.desktopStyles.clickable, minHeight: 48, }, }), diff --git a/shared/chat/conversation/rekey/participant-rekey.native.tsx b/shared/chat/conversation/rekey/participant-rekey.native.tsx index 93b354294595..4809d13219a7 100644 --- a/shared/chat/conversation/rekey/participant-rekey.native.tsx +++ b/shared/chat/conversation/rekey/participant-rekey.native.tsx @@ -4,13 +4,13 @@ import type {Props} from './participant-rekey.types' const Row = ({username, onUsernameClicked}: {username: string; onUsernameClicked: (s: string) => void}) => ( onUsernameClicked(username)}> - + - + Can rekey this chat by opening the Keybase app. - - + + ) const ParticipantRekey = ({rekeyers, onShowProfile: onUsernameClicked}: Props) => ( - - + This conversation is waiting for a participant to open their Keybase app. - + - - + + {rekeyers.map(username => ( ))} - - + + - + ) const styles = Kb.Styles.styleSheetCreate( () => ({ container: { - ...Kb.Styles.globalStyles.flexBoxColumn, - alignItems: 'stretch', backgroundColor: Kb.Styles.globalColors.blueDarker2, flex: 1, justifyContent: 'flex-start', }, innerRow: { - ...Kb.Styles.globalStyles.flexBoxColumn, borderBottomColor: Kb.Styles.globalColors.black_10, borderBottomWidth: 1, flex: 1, @@ -74,8 +72,6 @@ const styles = Kb.Styles.styleSheetCreate( }, row: Kb.Styles.platformStyles({ common: { - ...Kb.Styles.globalStyles.flexBoxRow, - alignItems: 'center', minHeight: 56, }, isElectron: { diff --git a/shared/chat/conversation/rekey/you-rekey.desktop.tsx b/shared/chat/conversation/rekey/you-rekey.desktop.tsx index 7c6bfaa726c2..264fb0a36c0d 100644 --- a/shared/chat/conversation/rekey/you-rekey.desktop.tsx +++ b/shared/chat/conversation/rekey/you-rekey.desktop.tsx @@ -3,10 +3,11 @@ import type {Props} from './you-rekey' const YouRekey = ({onRekey}: Props) => { return ( - - + { > This conversation needs to be rekeyed. - + - + ) } @@ -30,8 +31,6 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: { - ...Kb.Styles.globalStyles.flexBoxColumn, - alignItems: 'stretch', backgroundColor: Kb.Styles.globalColors.blueDarker2, flex: 1, justifyContent: 'flex-start', diff --git a/shared/chat/conversation/you-are-reset.tsx b/shared/chat/conversation/you-are-reset.tsx index 92143cfe21d4..61fe260710d0 100644 --- a/shared/chat/conversation/you-are-reset.tsx +++ b/shared/chat/conversation/you-are-reset.tsx @@ -1,31 +1,27 @@ import * as Kb from '@/common-adapters' const YouAreReset = () => ( - - + - - + + Since you reset your account, participants have to accept to let you back in. - - + + ) const styles = Kb.Styles.styleSheetCreate( () => ({ box: { - ...Kb.Styles.globalStyles.flexBoxColumn, - alignItems: 'center', backgroundColor: Kb.Styles.globalColors.red, padding: Kb.Styles.globalMargins.small, }, diff --git a/shared/chat/delete-history-warning.tsx b/shared/chat/delete-history-warning.tsx index 47ffafd71431..7c50ecf17a99 100644 --- a/shared/chat/delete-history-warning.tsx +++ b/shared/chat/delete-history-warning.tsx @@ -18,12 +18,12 @@ const DeleteHistoryWarning = () => { return ( {Kb.Styles.isMobile && } - @@ -32,7 +32,7 @@ const DeleteHistoryWarning = () => { You are about to delete all the messages in this conversation. For everyone. - + { label="Yes, clear for everyone" fullWidth={Kb.Styles.isMobile} /> - - + + ) } @@ -73,12 +73,8 @@ const styles = Kb.Styles.styleSheetCreate( }), buttonBox: Kb.Styles.platformStyles({ common: {marginTop: Kb.Styles.globalMargins.xlarge}, - isElectron: {...Kb.Styles.globalStyles.flexBoxRow}, isMobile: { - ...Kb.Styles.globalStyles.flexBoxColumn, - alignItems: 'stretch', flex: 1, - flexDirection: 'column-reverse', paddingTop: Kb.Styles.globalMargins.xlarge, width: '100%', }, diff --git a/shared/common-adapters/avatar/index.native.tsx b/shared/common-adapters/avatar/index.native.tsx index d3e183163e8f..db137e0f0788 100644 --- a/shared/common-adapters/avatar/index.native.tsx +++ b/shared/common-adapters/avatar/index.native.tsx @@ -3,12 +3,12 @@ import * as React from 'react' import * as Styles from '@/styles' import ClickableBox from '../clickable-box' import Image2 from '../image2' -import Box from '../box' +import {Box2} from '../box' import type {Props, AvatarSize} from '.' import useHook from './hooks' const Kb = { - Box, + Box2, ClickableBox, Icon, Image2, @@ -34,14 +34,17 @@ const Avatar = React.memo(function Avatar(p: Props) { return ( - + {!props.skipBackground && ( - + )} {!!props.blocked && ( - + - + )} {!!props.url && ( )} {props.children} - + ) }) diff --git a/shared/common-adapters/back-button.native.tsx b/shared/common-adapters/back-button.native.tsx index e9bedbaf2daf..13218fb405c4 100644 --- a/shared/common-adapters/back-button.native.tsx +++ b/shared/common-adapters/back-button.native.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import * as C from '@/constants' import {Pressable, Keyboard} from 'react-native' import Badge from './badge' -import Box from './box' +import {Box2} from './box' import Icon from './icon' import * as Styles from '@/styles' import type {Props} from './back-button' @@ -10,7 +10,7 @@ import noop from 'lodash/noop' const Kb = { Badge, - Box, + Box2, Icon, } @@ -25,7 +25,7 @@ const BackButton = React.memo(function BackButton(props: Props) { const onBack = props.disabled ? noop : (props.onClick ?? onNavUp) return ( - + {!!props.badgeNumber && } - + ) }) @@ -44,8 +44,6 @@ const styles = Styles.styleSheetCreate(() => ({ marginTop: 2, }, container: { - ...Styles.globalStyles.flexBoxRow, - alignItems: 'center', marginRight: 8, minWidth: 32, padding: Styles.globalMargins.tiny, diff --git a/shared/common-adapters/button-bar.tsx b/shared/common-adapters/button-bar.tsx index 63c816d3e8b6..dd8d8946dbb5 100644 --- a/shared/common-adapters/button-bar.tsx +++ b/shared/common-adapters/button-bar.tsx @@ -1,8 +1,8 @@ import * as React from 'react' import * as Styles from '@/styles' -import Box from './box' +import {Box2} from './box' -const Kb = {Box} +const Kb = {Box2} type Props = { direction?: 'row' | 'column' @@ -43,33 +43,40 @@ const ButtonBar = (props: Props) => { minHeight: Styles.isMobile ? (props.small ? 64 : 72) : props.small ? 44 : 64, } + const isColumn = (props.direction ?? 'row') === 'column' const style = Styles.collapseStyles([ { - alignItems: (props.fullWidth ?? false) ? 'stretch' : 'center', - width: '100%', ...(Styles.isTablet ? {maxWidth: 460} : {}), - ...((props.direction ?? 'row') === 'column' - ? {...Styles.globalStyles.flexBoxColumn} - : { - ...Styles.globalStyles.flexBoxRow, + ...(!isColumn + ? { justifyContent: props.align ?? 'center', ...minHeight, - }), + } + : undefined), }, props.style, ]) - return {childrenWithSpacing} + return ( + + {childrenWithSpacing} + + ) } // Note explicitly not using globalMargins here. We don't necessarily want this spacing to change ever -const BigSpacer = () => +const BigSpacer = () => const bigSpacerStyle = { flexShrink: 0, height: 8, width: 8, } -const SmallSpacer = () => +const SmallSpacer = () => const smallSpacerStyle = { flexShrink: 0, height: Styles.isMobile ? 8 : 4, diff --git a/shared/common-adapters/choice-list.desktop.tsx b/shared/common-adapters/choice-list.desktop.tsx index e08386265466..7dd5ba5c4593 100644 --- a/shared/common-adapters/choice-list.desktop.tsx +++ b/shared/common-adapters/choice-list.desktop.tsx @@ -1,4 +1,5 @@ -import {Box} from './box' +import {Box2} from './box' +import ClickableBox from './clickable-box' import Text from './text' import Icon from './icon' import * as Styles from '@/styles' @@ -6,48 +7,51 @@ import type {Props} from './choice-list' import './choice-list.css' const Kb = { - Box, + Box2, + ClickableBox, Icon, Text, } const ChoiceList = ({options}: Props) => { return ( - + {options.map((op, idx) => { const iconType = op.icon return ( - op.onClick()}> - - {typeof op.icon === 'string' ? ( - - ) : ( - - {op.icon} - - )} - - - {op.title} - {op.description} - - + op.onClick()}> + + + {typeof op.icon === 'string' ? ( + + ) : ( + + {op.icon} + + )} + + + {op.title} + {op.description} + + + ) })} - + ) } const styles = Styles.styleSheetCreate(() => ({ entry: Styles.platformStyles({ isElectron: { - ...Styles.globalStyles.flexBoxRow, ...Styles.desktopStyles.clickable, ...Styles.padding(Styles.globalMargins.tiny, Styles.globalMargins.small), - width: '100%', }, }), icon: { @@ -55,14 +59,11 @@ const styles = Styles.styleSheetCreate(() => ({ width: 48, }, iconContainer: { - alignItems: 'center', background: Styles.globalColors.greyLight, height: 80, - justifyContent: 'center', width: 80, }, infoContainer: { - alignItems: 'flex-start', flex: 1, justifyContent: 'center', marginLeft: Styles.globalMargins.small, diff --git a/shared/common-adapters/choice-list.native.tsx b/shared/common-adapters/choice-list.native.tsx index 03e8a86ce3b0..7cdfae4ff31c 100644 --- a/shared/common-adapters/choice-list.native.tsx +++ b/shared/common-adapters/choice-list.native.tsx @@ -1,4 +1,4 @@ -import Box from './box' +import {Box2} from './box' import ClickableBox from './clickable-box' import Icon from './icon' import Text from './text' @@ -6,7 +6,7 @@ import * as React from 'react' import * as Styles from '@/styles' import type {Props} from './choice-list' -const Kb = {Box, ClickableBox, Icon, Text} +const Kb = {Box2, ClickableBox, Icon, Text} const ChoiceList = (props: Props) => { const [activeIndex, setActiveIndex] = React.useState(undefined) @@ -17,7 +17,7 @@ const ChoiceList = (props: Props) => { }, [options]) return ( - + {options.map((op, idx) => { const iconType = op.icon return ( @@ -28,30 +28,29 @@ const ChoiceList = (props: Props) => { onPressIn={() => setActiveIndex(idx)} onPressOut={() => setActiveIndex(undefined)} > - - + + {typeof op.icon === 'string' ? ( ) : ( - {op.icon} + {op.icon} )} - - + + {op.title} {op.description} - - + + ) })} - + ) } const styleEntry = { - ...Styles.globalStyles.flexBoxRow, paddingBottom: Styles.globalMargins.tiny, paddingLeft: Styles.globalMargins.small, paddingRight: Styles.globalMargins.small, @@ -60,12 +59,9 @@ const styleEntry = { const styleIconContainer = (active: boolean) => ({ - ...Styles.globalStyles.flexBoxColumn, - alignItems: 'center', alignSelf: 'center', borderRadius: (Styles.globalMargins.large + Styles.globalMargins.medium) / 2, height: Styles.globalMargins.large + Styles.globalMargins.medium, - justifyContent: 'center', ...(active ? {} : {backgroundColor: Styles.globalColors.greyLight}), width: Styles.globalMargins.large + Styles.globalMargins.medium, }) as const @@ -76,7 +72,6 @@ const styleIcon = { } const styleInfoContainer = { - ...Styles.globalStyles.flexBoxColumn, flex: 1, justifyContent: 'center', marginLeft: Styles.globalMargins.small, diff --git a/shared/common-adapters/floating-box/index.native.tsx b/shared/common-adapters/floating-box/index.native.tsx index 05a830764347..295a97f8e24b 100644 --- a/shared/common-adapters/floating-box/index.native.tsx +++ b/shared/common-adapters/floating-box/index.native.tsx @@ -1,12 +1,12 @@ import * as React from 'react' -import Box from '@/common-adapters/box' +import {Box2} from '@/common-adapters/box' import * as Styles from '@/styles' import {Keyboard} from 'react-native' import {Portal} from '../portal.native' import type {Props} from '.' const Kb = { - Box, + Box2, Portal, } @@ -22,12 +22,13 @@ const FloatingBox = (p: Props) => { return ( - {children} - + ) } diff --git a/shared/common-adapters/floating-box/relative-floating-box.desktop.tsx b/shared/common-adapters/floating-box/relative-floating-box.desktop.tsx index f6c327f5d8cf..386431a878c5 100644 --- a/shared/common-adapters/floating-box/relative-floating-box.desktop.tsx +++ b/shared/common-adapters/floating-box/relative-floating-box.desktop.tsx @@ -1,12 +1,12 @@ import * as React from 'react' import * as Styles from '@/styles' import includes from 'lodash/includes' -import Box from '@/common-adapters/box' +import {Box2} from '@/common-adapters/box' import ReactDOM from 'react-dom' import {EscapeHandler} from '../key-event-handler.desktop' import type {MeasureDesktop} from '@/common-adapters/measure-ref' -const Kb = {Box} +const Kb = {Box2} type ComputedStyle = { position: Styles._StylesCrossPlatform['position'] @@ -301,10 +301,10 @@ export const RelativeFloatingBox = (props: ModalPositionRelativeProps) => { ? ReactDOM.createPortal(
{disableEscapeKey ? ( - {children} + {children} ) : ( - {children} + {children} )}
, diff --git a/shared/common-adapters/header-hoc/index.desktop.tsx b/shared/common-adapters/header-hoc/index.desktop.tsx index ebb3f15bc325..daa77782439e 100644 --- a/shared/common-adapters/header-hoc/index.desktop.tsx +++ b/shared/common-adapters/header-hoc/index.desktop.tsx @@ -2,13 +2,13 @@ import * as C from '@/constants' import type * as React from 'react' import * as Styles from '@/styles' import BackButton from '../back-button' -import Box from '@/common-adapters/box' +import {Box2} from '@/common-adapters/box' import Icon from '@/common-adapters/icon' import Text from '@/common-adapters/text' import {useNavigation} from '@react-navigation/native' import type {Props, LeftActionProps} from '.' -const Kb = {BackButton, Box, Icon, Text} +const Kb = {BackButton, Box2, Icon, Text} export const HeaderHocHeader = ({ headerStyle, @@ -18,7 +18,7 @@ export const HeaderHocHeader = ({ onCancel, theme = 'light', }: Props) => ( - + {customComponent} {onCancel && ( )} {title && ( - + {title} - + )} {titleComponent} - + ) // TODO use LeftAction above @@ -48,7 +48,7 @@ const LeftAction = ({ onLeftAction, theme, }: LeftActionProps) => ( - + {onLeftAction && leftAction === 'cancel' ? ( {leftActionText || customCancelText || 'Cancel'} @@ -69,7 +69,7 @@ const LeftAction = ({ onClick={disabled ? undefined : onLeftAction} /> ) : null} - + ) export const HeaderHocWrapper = (props: Props & {children: React.ReactNode}): React.ReactNode => { @@ -77,8 +77,6 @@ export const HeaderHocWrapper = (props: Props & {children: React.ReactNode}): Re } const _headerStyle = { - ...Styles.globalStyles.flexBoxRow, - alignItems: 'center', flexShrink: 0, justifyContent: 'flex-start', minHeight: undefined, @@ -111,11 +109,8 @@ const _styleCloseThemed = { } const _titleStyle = { - ...Styles.globalStyles.flexBoxRow, - alignItems: 'center', bottom: 0, flex: 1, - justifyContent: 'center', left: 0, position: 'absolute', // This is always centered so we never worry about items to the left/right. If you have overlap or other issues you likely have to fix the content right: 0, @@ -142,8 +137,6 @@ const styles = Styles.styleSheetCreate(() => ({ }, leftAction: Styles.platformStyles({ common: { - ...Styles.globalStyles.flexBoxColumn, - alignItems: 'flex-start', flexShrink: 1, justifyContent: 'flex-start', }, diff --git a/shared/common-adapters/header-hoc/index.native.tsx b/shared/common-adapters/header-hoc/index.native.tsx index 37a56f896a82..735c449710a6 100644 --- a/shared/common-adapters/header-hoc/index.native.tsx +++ b/shared/common-adapters/header-hoc/index.native.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import * as Styles from '@/styles' import BackButton from '../back-button' -import Box from '@/common-adapters/box' +import {Box2} from '@/common-adapters/box' import BoxGrow from '@/common-adapters/box-grow' import FloatingMenu from '@/common-adapters/floating-menu' import Icon, {type IconType} from '@/common-adapters/icon' @@ -10,7 +10,7 @@ import Text from '@/common-adapters/text' import {useNavigation} from '@react-navigation/native' import type {Props, LeftActionProps} from '.' -const Kb = {BackButton, Box, BoxGrow, FloatingMenu, Icon, Text} +const Kb = {BackButton, Box2, BoxGrow, FloatingMenu, Icon, Text} type RightAction = { label?: string @@ -38,12 +38,16 @@ export const HeaderHocHeader = (props: Props) => { const hasTextTitle = !!props.title && !props.titleComponent const header = ( - {props.customComponent} {hasTextTitle && ( - { {props.title} - + )} { theme={props.theme} /> {props.titleComponent && ( - { ] as const)} > {props.titleComponent} - + )} {rightAction && } - + ) return header @@ -95,7 +101,7 @@ export const LeftAction = (p: LeftActionProps): React.ReactElement => { const {badgeNumber, disabled, customCancelText, hasTextTitle, hideBackLabel, leftAction} = p const {leftActionText, onLeftAction, theme, customIconColor, style} = p return ( - + {onLeftAction && leftAction === 'cancel' ? ( {leftActionText || customCancelText || 'Cancel'} @@ -118,16 +124,16 @@ export const LeftAction = (p: LeftActionProps): React.ReactElement => { /> ) )} - + ) } const RightActions = (p: {hasTextTitle: boolean; rightAction: RightAction}) => { const {hasTextTitle, rightAction} = p return ( - - {renderAction(rightAction, 0)} - + + {renderAction(rightAction, 0)} + ) } @@ -149,12 +155,12 @@ const renderAction = (action: RightAction, index: number): React.ReactNode => export const HeaderHocWrapper = (props: Props & {children: React.ReactNode; skipHeader?: boolean}) => { const {customSafeAreaTopStyle, children, customSafeAreaBottomStyle, skipHeader} = props return ( - + {!!customSafeAreaTopStyle && } {!skipHeader && } {children} {!!customSafeAreaBottomStyle && } - + ) } @@ -182,15 +188,11 @@ const styles = Styles.styleSheetCreate( }), borderless: {borderBottomWidth: 0}, container: { - ...Styles.globalStyles.flexBoxColumn, - height: '100%', position: 'relative', }, grow: {flexGrow: 1}, header: Styles.platformStyles({ common: { - ...Styles.globalStyles.flexBoxRow, - alignItems: 'center', borderBottomColor: Styles.globalColors.black_10, borderBottomWidth: 1, borderStyle: 'solid', @@ -207,27 +209,20 @@ const styles = Styles.styleSheetCreate( }), leftAction: Styles.platformStyles({ common: { - ...Styles.globalStyles.flexBoxColumn, - alignItems: 'flex-start', flexShrink: 1, justifyContent: 'flex-start', }, }), rightActions: Styles.platformStyles({ common: { - ...Styles.globalStyles.flexBoxColumn, - alignItems: 'flex-end', flexShrink: 1, justifyContent: 'flex-end', }, isIOS: {paddingRight: Styles.globalMargins.tiny}, }), - rightActionsWrapper: {...Styles.globalStyles.flexBoxRow}, title: {color: Styles.globalColors.black}, titleContainer: Styles.platformStyles({ common: { - ...Styles.globalStyles.flexBoxColumn, - alignItems: 'center', flexGrow: 1, flexShrink: 2, justifyContent: 'center', @@ -243,7 +238,7 @@ const styles = Styles.styleSheetCreate( titleContainerRightPadding: Styles.platformStyles({ isAndroid: {paddingRight: Styles.globalMargins.small}, }), - titleTextContainer: {...Styles.globalStyles.fillAbsolute}, + titleTextContainer: Styles.globalStyles.fillAbsolute, }) as const ) diff --git a/shared/common-adapters/loading-line.desktop.tsx b/shared/common-adapters/loading-line.desktop.tsx index 32924e927525..a333c81948ae 100644 --- a/shared/common-adapters/loading-line.desktop.tsx +++ b/shared/common-adapters/loading-line.desktop.tsx @@ -1,15 +1,15 @@ -import Box from './box' +import {Box2} from './box' import * as React from 'react' import * as Styles from '@/styles' import './loading-line.css' -const Kb = {Box} +const Kb = {Box2} const LoadingLine = React.memo(function LoadingLine() { return ( - - - + + + ) }) diff --git a/shared/common-adapters/save-indicator.tsx b/shared/common-adapters/save-indicator.tsx index f571a46c408a..9245f8ccc98e 100644 --- a/shared/common-adapters/save-indicator.tsx +++ b/shared/common-adapters/save-indicator.tsx @@ -1,12 +1,12 @@ import * as React from 'react' import * as Styles from '@/styles' -import Box from './box' +import {Box2} from './box' import Icon from './icon' import ProgressIndicator from './progress-indicator' import Text from './text' const Kb = { - Box, + Box2, Icon, ProgressIndicator, Text, @@ -20,10 +20,7 @@ export type Props = { } const defaultStyle = { - ...Styles.globalStyles.flexBoxRow, - alignItems: 'center', height: Styles.globalMargins.medium, - justifyContent: 'center', } as const const SaveIndicator = (props: Props) => { @@ -71,7 +68,7 @@ const SaveIndicator = (props: Props) => { break } - return {content} + return {content} } export default SaveIndicator diff --git a/shared/common-adapters/timeline-marker.tsx b/shared/common-adapters/timeline-marker.tsx index 321c692a29f9..f7428ffab013 100644 --- a/shared/common-adapters/timeline-marker.tsx +++ b/shared/common-adapters/timeline-marker.tsx @@ -1,9 +1,9 @@ -import Box from './box' +import {Box2} from './box' import * as Styles from '@/styles' import {timeline_grey} from './timeline-marker.meta' const Kb = { - Box, + Box2, } export type Props = { @@ -14,11 +14,11 @@ export type Props = { } const TimelineMarker = ({idx, max, type, style}: Props) => ( - - - {type === 'closed' ? : } - - + + + {type === 'closed' ? : } + + ) const circleSize = 8 diff --git a/shared/common-adapters/toast.native.tsx b/shared/common-adapters/toast.native.tsx index cf58d4503172..a5e8577b87e1 100644 --- a/shared/common-adapters/toast.native.tsx +++ b/shared/common-adapters/toast.native.tsx @@ -2,7 +2,7 @@ import * as C from '@/constants' import * as React from 'react' import * as Styles from '@/styles' import FloatingBox from './floating-box' -import Box from './box' +import {Box2} from './box' import {KeyboardAvoidingView2} from './keyboard-avoiding-view' import {useTimeout} from './use-timers' import {Animated as NativeAnimated, Easing as NativeEasing} from 'react-native' @@ -12,7 +12,7 @@ import noop from 'lodash/noop' import {useColorScheme} from 'react-native' const Kb = { - Box, + Box2, FloatingBox, KeyboardAvoidingView2, } @@ -74,7 +74,7 @@ const Toast = (props: Props) => { return shouldRender ? ( - + { > {props.children} - + ) : null diff --git a/shared/common-adapters/video.native.tsx b/shared/common-adapters/video.native.tsx index a2235363d576..6eeb1517f7a0 100644 --- a/shared/common-adapters/video.native.tsx +++ b/shared/common-adapters/video.native.tsx @@ -1,12 +1,12 @@ import * as React from 'react' import * as Styles from '@/styles' -import Box from './box' +import {Box2} from './box' import type {Props} from './video' import {StatusBar} from 'react-native' import {Video as AVVideo, VideoFullscreenUpdate} from 'expo-av' import {useCheckURL} from './video.shared' -const Kb = {Box} +const Kb = {Box2} // There seems to be a race between navigation animation and the measurement stuff // here that causes stuff to be rendered off-screen. So delay mounting to avoid @@ -32,7 +32,7 @@ const Video = (props: Props) => { const content = ( - + { }} style={styles.video} /> - + ) @@ -58,10 +58,7 @@ export default Video const styles = Styles.styleSheetCreate(() => ({ container: { - ...Styles.globalStyles.flexBoxRow, - alignItems: 'center', height: '100%', - justifyContent: 'center', width: '100%', }, video: { diff --git a/shared/common-adapters/with-tooltip.native.tsx b/shared/common-adapters/with-tooltip.native.tsx index c5d5af2eb987..71d97dba4736 100644 --- a/shared/common-adapters/with-tooltip.native.tsx +++ b/shared/common-adapters/with-tooltip.native.tsx @@ -2,7 +2,7 @@ import * as C from '@/constants' import * as React from 'react' import {Portal} from './portal.native' import {useTimeout} from './use-timers' -import Box from './box' +import {Box2} from './box' import ClickableBox from './clickable-box' import Text from './text' import * as Styles from '@/styles' @@ -17,7 +17,7 @@ import {useSafeAreaFrame} from 'react-native-safe-area-context' // "top center" for now. const Kb = { - Box, + Box2, ClickableBox, Portal, Text, @@ -32,12 +32,13 @@ type Dims = { const FloatingBox = (props: {children: React.ReactNode; style: Styles.StylesCrossPlatform}) => ( - {props.children} - + ) diff --git a/shared/fs/browser/rows/editing.tsx b/shared/fs/browser/rows/editing.tsx index 99ac037113a7..1d2fba13a49f 100644 --- a/shared/fs/browser/rows/editing.tsx +++ b/shared/fs/browser/rows/editing.tsx @@ -42,12 +42,12 @@ const Editing = React.memo(function Editing({editID}: Props) { /> } icon={ - + - + } body={ - + - + } action={ - + {!!edit.error && ( @@ -82,7 +82,7 @@ const Editing = React.memo(function Editing({editID}: Props) { hoverColor={Kb.Styles.globalColors.black} style={styles.iconCancel} /> - + } /> ) @@ -104,8 +104,6 @@ const styles = Kb.Styles.styleSheetCreate( }, }), rightBox: { - ...Kb.Styles.globalStyles.flexBoxRow, - alignItems: 'center', flexShrink: 1, justifyContent: 'flex-end', }, diff --git a/shared/fs/browser/rows/placeholder.tsx b/shared/fs/browser/rows/placeholder.tsx index f21847aef538..b8acb0e2e0ab 100644 --- a/shared/fs/browser/rows/placeholder.tsx +++ b/shared/fs/browser/rows/placeholder.tsx @@ -10,7 +10,7 @@ const PlaceholderRow = ({type}: PlaceholderProps) => ( } + statusIcon={} icon={ ( /> } body={ - + - + } /> ) diff --git a/shared/fs/common/item-icon.tsx b/shared/fs/common/item-icon.tsx index 8b0d42789caf..c163b7045d15 100644 --- a/shared/fs/common/item-icon.tsx +++ b/shared/fs/common/item-icon.tsx @@ -78,21 +78,21 @@ const TlfTypeIcon = (props: TlfTypeIconProps) => { const badgeCount = FS.computeBadgeNumberForTlfList(tlfList) const badgeStyle = badgeStyles[getIconSizeString(props.size)] return ( - + {getTlfTypeIcon(props.size, props.tlfType)} {props.badgeOverride ? ( - + color={Kb.Styles.globalColors.greyDarker} - + ) : ( !!badgeCount && ( - + - + ) )} - + ) } @@ -104,23 +104,23 @@ type TlfIconProps = { } const TlfIcon = (props: TlfIconProps) => ( - + {props.tlfTypeForFolderIconOverride ? ( getTlfTypeIcon(props.size, props.tlfTypeForFolderIconOverride) ) : ( )} {!!props.badgeOverride && ( - + - + )} - + ) type InTlfItemIconProps = { @@ -139,7 +139,7 @@ const InTlfIcon = (props: InTlfItemIconProps) => { const badgeStyle = badgeStyles[getIconSizeString(props.size)] const badgeIcon = props.badgeOverride || (downloadIntent && 'icon-addon-file-downloading') return ( - + {pathItem.type === T.FS.PathType.Folder ? ( props.tlfTypeForFolderIconOverride ? ( getTlfTypeIcon(props.size, props.tlfTypeForFolderIconOverride) @@ -150,15 +150,15 @@ const InTlfIcon = (props: InTlfItemIconProps) => { )} {badgeIcon ? ( - + - + ) : null} - + ) } diff --git a/shared/fs/common/path-item-action/header.tsx b/shared/fs/common/path-item-action/header.tsx index bad49b1b3836..62a5b18adc17 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) => ( - ( - + ) export default Header diff --git a/shared/fs/common/pie-slice.tsx b/shared/fs/common/pie-slice.tsx index 8490f2dad3d8..da52293a3d7b 100644 --- a/shared/fs/common/pie-slice.tsx +++ b/shared/fs/common/pie-slice.tsx @@ -11,9 +11,10 @@ const Slice = (props: Props) => { const styleFilled = props.negative ? styles.filledNegative : styles.filledPositive const styleUnfilled = props.negative ? styles.unfilledNegative : styles.unfilledPositive return ( - - - + + { }), ])} > - - - + + - + ) } diff --git a/shared/fs/filepreview/bare-preview.tsx b/shared/fs/filepreview/bare-preview.tsx index f9d95b402178..cc4a6f083ec3 100644 --- a/shared/fs/filepreview/bare-preview.tsx +++ b/shared/fs/filepreview/bare-preview.tsx @@ -15,27 +15,27 @@ const ConnectedBarePreview = (ownProps: OwnProps) => { const onUrlError = Kbfs.useFsFileContext(path) return ( - - + + Close - - + + - - + + - +