mass clean

shared/chat/audio/audio-player.tsx

@@ -105,7 +105,7 @@ const AudioPlayer = (props: Props) => {
           color={url ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.grey}
         />
       </Kb.ClickableBox3>
-      <Kb.Box2 direction="vertical" style={styles.visContainer} gap="xxtiny" fullHeight={true} justifyContent="flex-end">
+      <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.visContainer} gap="xxtiny" fullHeight={true} justifyContent="flex-end">
         <AudioVis height={big ? 32 : 18} amps={visAmps} maxWidth={maxWidth} playedRatio={playedRatio} />
         <Kb.Text type="BodyTiny">{formatAudioRecordDuration(timeLeft)}</Kb.Text>
       </Kb.Box2>
@@ -123,7 +123,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     backgroundColor: Kb.Styles.globalColors.white,
   },
   visContainer: {
-    alignItems: 'flex-start',
     minWidth: 40,
   },
 }))

shared/chat/avatars.tsx

@@ -82,10 +82,8 @@ const Avatars = function Avatars(p: Props) {
   if (!participantTwo) {
     return (
       <Kb.Box2 direction="vertical" relative={true} style={containerStyle}>
-        <Kb.Box2 direction="vertical" relative={true}>
-          <Kb.Avatar username={participantOne} size={singleSize} style={{opacity}} />
-          <OverlayIcon isHovered={isHovered} isSelected={isSelected} isMuted={isMuted} isLocked={isLocked} />
-        </Kb.Box2>
+        <Kb.Avatar username={participantOne} size={singleSize} style={{opacity}} />
+        <OverlayIcon isHovered={isHovered} isSelected={isSelected} isMuted={isMuted} isLocked={isLocked} />
       </Kb.Box2>
     )
   }

shared/chat/blocking/block-modal.tsx

@@ -127,7 +127,7 @@ const ReportOptions = (props: ReportOptionsProps) => {
   )
 }
 
-const Container = function BlockModal(ownProps: OwnProps) {
+const BlockModal = (ownProps: OwnProps) => {
   const {context, conversationIDKey, blockUserByDefault = false, filterUserByDefault = false} = ownProps
   const {flagUserByDefault = false, reportsUserByDefault = false, team: teamname} = ownProps
   let {username: adderUsername, others} = ownProps
@@ -496,7 +496,7 @@ const Container = function BlockModal(ownProps: OwnProps) {
   )
 }
 
-export default Container
+export default BlockModal
 
 const getListHeightStyle = (numOthers: number, expanded: boolean) => ({
   height:

shared/chat/blocking/invitation-to-block.tsx

@@ -141,7 +141,7 @@ const BlockButtons = () => {
       </Kb.Box2>
     </Kb.Box2>
   ) : (
-    <Kb.Box2 direction="horizontal" gap="xsmall" style={styles.container} centerChildren={false}>
+    <Kb.Box2 direction="horizontal" gap="xsmall" alignItems="center" style={styles.container}>
       <Kb.Text type="BodySmall">
         {team ? `${adder} added you to this team.` : `You don't follow ${adder}.`}
       </Kb.Text>
@@ -166,7 +166,6 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       buttonContainer: {maxWidth: 322},
       container: {
-        alignItems: 'center',
         alignSelf: 'flex-start',
         marginLeft: 57,
       },

shared/chat/conversation/attachment-get-titles.tsx

@@ -314,8 +314,4 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-const Container = (ownProps: OwnProps) => {
-  return <ContainerInner {...ownProps} />
-}
-
-export default Container
+export default ContainerInner

shared/chat/conversation/error.tsx

@@ -4,11 +4,9 @@ import {useConversationThreadSelector} from './thread-context'
 const ConversationError = () => {
   const text = useConversationThreadSelector(s => s.meta.snippet) ?? ''
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.container} gap="small">
+    <Kb.Box2 direction="vertical" fullWidth={true} padding="medium" gap="small">
       <Kb.Text type="Header">There was an error loading this conversation.</Kb.Text>
-      <Kb.Text type="Body">
-        The error is:
-      </Kb.Text>
+      <Kb.Text type="Body">The error is:</Kb.Text>
       <Kb.Box2 direction="horizontal" fullWidth={true}>
         <Kb.CopyableText style={styles.errorText} value={text} />
       </Kb.Box2>
@@ -19,9 +17,6 @@ const ConversationError = () => {
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      container: {
-        padding: Kb.Styles.globalMargins.medium,
-      },
       errorText: {flexGrow: 1},
     }) as const
 )

shared/chat/conversation/fwd-msg.tsx

@@ -304,8 +304,4 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-const TeamPicker = (props: Props) => {
-  return <TeamPickerInner {...props} />
-}
-
-export default TeamPicker
+export default TeamPickerInner

shared/chat/conversation/info-panel/index.tsx

@@ -20,22 +20,17 @@ type Props = {
   tab?: 'settings' | 'members' | 'attachments' | 'bots'
 }
 
-const InfoPanelConnector = (ownProps: Props) => {
-  const conversationIDKey = ownProps.conversationIDKey ?? Chat.noConversationIDKey
-  return <InfoPanelConnectorInner {...ownProps} conversationIDKey={conversationIDKey} />
-}
-
-const InfoPanelConnectorInner = (ownProps: Props & {conversationIDKey: T.Chat.ConversationIDKey}) => {
-  const {conversationIDKey} = ownProps
+const InfoPanelConnector = ({conversationIDKey: _conversationIDKey, tab}: Props) => {
+  const conversationIDKey = _conversationIDKey ?? Chat.noConversationIDKey
   const meta = useConversationMeta(conversationIDKey)
   const shouldNavigateOut = meta.conversationIDKey === Chat.noConversationIDKey
   const isPreview = meta.membershipType === 'youArePreviewing'
   const channelname = meta.channelname
   const teamname = meta.teamname
   const {role: yourRole} = useChatTeam(meta.teamID, teamname)
 
-  const [uncontrolledSelectedTab, onSelectTab] = React.useState<Panel>(() => ownProps.tab ?? 'members')
-  const selectedTab = ownProps.tab ?? uncontrolledSelectedTab
+  const [uncontrolledSelectedTab, onSelectTab] = React.useState<Panel>(() => tab ?? 'members')
+  const selectedTab = tab ?? uncontrolledSelectedTab
 
   const hideInfoPanel = React.useEffectEvent(() => {
     showConversationInfoPanel(conversationIDKey, false, undefined)

shared/chat/conversation/list-area/jump-to-recent.tsx

@@ -7,7 +7,7 @@ type Props = {
 
 const JumpToRecent = (props: Props) => {
   return (
-    <Kb.Box2 direction="vertical" style={styles.outerContainer}>
+    <Kb.Box2 direction="vertical" alignItems="center" style={styles.outerContainer}>
       <Kb.Button label="Jump to recent messages" onClick={props.onClick} small={true}>
         <Kb.Icon
           color={Kb.Styles.globalColors.whiteOrWhite}
@@ -26,7 +26,6 @@ const styles = Kb.Styles.styleSheetCreate(
       arrowText: {paddingRight: Kb.Styles.globalMargins.tiny},
       outerContainer: Kb.Styles.platformStyles({
         common: {
-          alignItems: 'center',
           bottom: 0,
           ...Kb.Styles.paddingV(Kb.Styles.globalMargins.small),
           position: 'absolute',

shared/chat/conversation/messages/text/reply.tsx

@@ -83,14 +83,14 @@ function ReplyStructure(p: RS) {
 
   return (
     <Kb.ClickableBox3 direction="horizontal" gap="tiny" fullWidth={true} style={styles.replyContainer} className={Kb.Styles.classNames('ReplyBox')} onClick={onClick}>
-      <Kb.Box2 direction="horizontal" style={styles.quoteContainer} />
+      <Kb.Box2 direction="horizontal" alignSelf="stretch" style={styles.quoteContainer} />
       <Kb.Box2 direction="vertical" gap="xtiny" flex={1}>
         <Kb.Box2 direction="horizontal" fullWidth={true}>
           <AvatarHolder />
         </Kb.Box2>
         <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny">
           {showImage && <ReplyImage />}
-          <Kb.Box2 direction="horizontal" flex={1} style={styles.replyTextContainer}>
+          <Kb.Box2 direction="horizontal" flex={1} alignSelf="flex-start">
             {isDeleted ? (
               <Kb.Text type="BodyTiny" style={styles.replyEdited} virtualText={true}>
                 The original message was deleted.
@@ -128,7 +128,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       quoteContainer: {
-        alignSelf: 'stretch',
         backgroundColor: Kb.Styles.globalColors.grey,
         paddingLeft: Kb.Styles.globalMargins.xtiny,
       },
@@ -137,9 +136,6 @@ const styles = Kb.Styles.styleSheetCreate(
         paddingTop: Kb.Styles.globalMargins.xtiny,
       },
       replyEdited: {color: Kb.Styles.globalColors.black_35},
-      replyTextContainer: {
-        alignSelf: 'flex-start',
-      },
       replyUsername: {alignSelf: 'center'},
       replyUsernameHighlighted: {color: Kb.Styles.globalColors.blackOrBlack},
       textHighlighted: {color: Kb.Styles.globalColors.black_50OrBlack_50},

shared/chat/conversation/no-conversation.tsx

@@ -1,20 +1,10 @@
 import * as Kb from '@/common-adapters'
 
 const NoConversation = () => (
-  <Kb.Box2 direction="vertical" gap="xsmall" centerChildren={true} flex={1} style={styles.noConvoText}>
+  <Kb.Box2 direction="vertical" gap="xsmall" centerChildren={true} flex={1} alignSelf="center">
     <Kb.ImageIcon type="icon-fancy-encrypted-computer-desktop-150-72" />
     <Kb.Text type="BodySmall">All conversations are end-to-end encrypted.</Kb.Text>
   </Kb.Box2>
 )
 
-const styles = Kb.Styles.styleSheetCreate(
-  () =>
-    ({
-      noConvoText: {
-        alignSelf: 'center',
-        justifyContent: 'center',
-      },
-    }) as const
-)
-
 export default NoConversation

shared/chat/conversation/pinned-message.tsx

@@ -88,7 +88,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.Box2 direction="horizontal" style={styles.blueBar} />
+      <Kb.Box2 direction="horizontal" alignSelf="stretch" style={styles.blueBar} />
       {!!imageURL && (
         <Kb.Box2 direction="vertical" overflow="hidden" relative={true}>
           <Kb.Box2 direction="vertical" style={{...(sizing ? sizing.margins : {})}}>
@@ -177,7 +177,6 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       author: {color: Kb.Styles.globalColors.black},
       blueBar: {
-        alignSelf: 'stretch',
         backgroundColor: Kb.Styles.globalColors.blue,
         width: Kb.Styles.globalMargins.xtiny,
       },

shared/chat/conversation/you-are-reset.tsx

@@ -2,12 +2,7 @@ import * as Kb from '@/common-adapters'
 
 const YouAreReset = () => (
   <Kb.Box2 direction="vertical" fullWidth={true} flex={1}>
-    <Kb.Box2
-      direction="vertical"
-      centerChildren={true}
-      fullWidth={true}
-      flex={1}
-    >
+    <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} flex={1}>
       <Kb.ImageIcon type={isMobile ? 'icon-skull-64' : 'icon-skull-48'} />
     </Kb.Box2>
     <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} style={styles.box}>

shared/chat/create-channel/index.tsx

@@ -55,7 +55,7 @@ const CreateChannel = (p: Props) => {
               onChangeText={props.onDescriptionChange}
             />
           </Kb.Box2>
-          <Kb.ButtonBar fullWidth={true} style={desktopStyles.buttonBar}>
+          <Kb.ButtonBar fullWidth={true} style={buttonBarStyle}>
             <Kb.Button type="Dim" onClick={props.onBack} label="Cancel" />
             <Kb.WaitingButton
               waitingKey={C.waitingKeyTeamsCreateChannel(props.teamID)}
@@ -96,7 +96,7 @@ const CreateChannel = (p: Props) => {
             onChangeText={props.onDescriptionChange}
           />
         </Kb.Box2>
-        <Kb.ButtonBar fullWidth={true} style={nativeStyles.buttonBar}>
+        <Kb.ButtonBar fullWidth={true} style={buttonBarStyle}>
           <Kb.WaitingButton
             waitingKey={C.waitingKeyTeamsCreateChannel(props.teamID)}
             onClick={props.onSubmit}
@@ -108,6 +108,8 @@ const CreateChannel = (p: Props) => {
   )
 }
 
+const buttonBarStyle = {alignItems: 'center'} as const
+
 const desktopStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
@@ -126,15 +128,13 @@ const desktopStyles = Kb.Styles.styleSheetCreate(
         paddingRight: Kb.Styles.globalMargins.large,
         paddingTop: Kb.Styles.globalMargins.medium,
       },
-      buttonBar: {alignItems: 'center'},
     }) as const
 )
 
 const nativeStyles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       box: {padding: 16},
-      buttonBar: {alignItems: 'center'},
     }) as const
 )
 

shared/chat/delete-history-warning.tsx

@@ -34,10 +34,7 @@ const DeleteHistoryWarning = (props: Props) => {
   return (
     <Kb.Box2
       direction="vertical"
-      style={Kb.Styles.collapseStyles([
-        styles.padding,
-        styles.box,
-      ])}
+      style={Kb.Styles.collapseStyles([styles.padding, styles.box])}
     >
       <Kb.ImageIcon type={isMobile ? 'icon-message-deletion-64' : 'icon-message-deletion-48'} />
       <Kb.Text style={{padding: Kb.Styles.globalMargins.small}} type="Header">

shared/chat/emoji-picker/container.tsx

@@ -69,12 +69,6 @@ const useReacji = ({
   }
 }
 
-const useSkinTone = () => {
-  const currentSkinTone = useCurrentSkinTone()
-  const setSkinTone = useSetSkinTone()
-  return {currentSkinTone, setSkinTone}
-}
-
 const useCustomReacji = (
   conversationIDKey: T.Chat.ConversationIDKey,
   onlyInTeam: boolean | undefined,
@@ -107,7 +101,8 @@ const WrapperMobile = (props: Props) => {
   )
   const [width, setWidth] = React.useState(0)
   const onLayout = (evt: LayoutEvent) => setWidth(evt.nativeEvent.layout.width)
-  const {currentSkinTone, setSkinTone} = useSkinTone()
+  const currentSkinTone = useCurrentSkinTone()
+  const setSkinTone = useSetSkinTone()
   const [skinTonePickerExpanded, setSkinTonePickerExpanded] = React.useState(false)
   const onCancel = C.Router2.navigateUp
   const addEmoji = () =>
@@ -149,7 +144,7 @@ const WrapperMobile = (props: Props) => {
         skinTone={currentSkinTone}
         hideFrequentEmoji={props.hideFrequentEmoji ?? false}
       />
-      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.footerContainer}>
+      <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" noShrink={true} style={styles.footerContainer}>
         <SkinTonePicker
           currentSkinTone={currentSkinTone}
           onExpandChange={setSkinTonePickerExpanded}
@@ -174,7 +169,8 @@ const EmojiPickerDesktopInner = (props: Props) => {
   const {onDidPick} = props
   const conversationIDKey = props.conversationIDKey ?? T.Chat.noConversationIDKey
   const {filter, onChoose, setFilter: _setFilter, topReacjis} = useReacji(props)
-  const {currentSkinTone, setSkinTone} = useSkinTone()
+  const currentSkinTone = useCurrentSkinTone()
+  const setSkinTone = useSetSkinTone()
   const [hoveredEmoji, setHoveredEmoji] = React.useState(emojiData.defaultHoverEmoji)
   const {waiting, customEmojiGroups} = useCustomReacji(
     conversationIDKey,
@@ -235,7 +231,7 @@ const EmojiPickerDesktopInner = (props: Props) => {
           direction="horizontal"
           fullWidth={true}
           alignItems="center"
-          style={styles.footerContainer}
+          noShrink={true} style={styles.footerContainer}
           gap="small"
         >
           <Kb.Emoji
@@ -306,7 +302,6 @@ const styles = Kb.Styles.styleSheetCreate(
       },
       footerContainer: Kb.Styles.platformStyles({
         common: {
-          flexShrink: 0,
           ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small),
         },
         isElectron: {

shared/chat/emoji-picker/index.tsx

@@ -300,7 +300,7 @@ function EmojiPicker(props: Props) {
   }
 
   const getSectionHeader = (title: string) => (
-    <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.sectionHeader}>
+    <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.sectionHeader}>
       <Kb.Text type="BodySmallSemibold">{title}</Kb.Text>
     </Kb.Box2>
   )
@@ -455,7 +455,6 @@ const styles = Kb.Styles.styleSheetCreate(
         ...Kb.Styles.padding(Kb.Styles.globalMargins.medium, 0),
       },
       sectionHeader: {
-        alignItems: 'center',
         backgroundColor: Kb.Styles.globalColors.white,
         height: 32,
         paddingLeft: Kb.Styles.globalMargins.tiny,

shared/chat/inbox-and-conversation-get-options.tsx

@@ -27,7 +27,5 @@ export default Kb.Styles.isTablet
       headerTitleContainerStyle: {},
     }
   : {
-      headerTitle: () => {
-        return <InboxAndConvoHeader />
-      },
+      headerTitle: () => <InboxAndConvoHeader />,
     }