diff --git a/shared/chat/audio/audio-player.tsx b/shared/chat/audio/audio-player.tsx index 2d17263a58ea..89556b0f0b5e 100644 --- a/shared/chat/audio/audio-player.tsx +++ b/shared/chat/audio/audio-player.tsx @@ -105,7 +105,7 @@ const AudioPlayer = (props: Props) => { color={url ? Kb.Styles.globalColors.blue : Kb.Styles.globalColors.grey} /> - + {formatAudioRecordDuration(timeLeft)} @@ -123,7 +123,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ backgroundColor: Kb.Styles.globalColors.white, }, visContainer: { - alignItems: 'flex-start', minWidth: 40, }, })) diff --git a/shared/chat/avatars.tsx b/shared/chat/avatars.tsx index 3289bb3dd442..f6dadd14c090 100644 --- a/shared/chat/avatars.tsx +++ b/shared/chat/avatars.tsx @@ -82,10 +82,8 @@ const Avatars = function Avatars(p: Props) { if (!participantTwo) { return ( - - - - + + ) } diff --git a/shared/chat/blocking/block-modal.tsx b/shared/chat/blocking/block-modal.tsx index fbaca092b401..faf333f238ea 100644 --- a/shared/chat/blocking/block-modal.tsx +++ b/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: diff --git a/shared/chat/blocking/invitation-to-block.tsx b/shared/chat/blocking/invitation-to-block.tsx index 155028481a0e..34840a423940 100644 --- a/shared/chat/blocking/invitation-to-block.tsx +++ b/shared/chat/blocking/invitation-to-block.tsx @@ -141,7 +141,7 @@ const BlockButtons = () => { ) : ( - + {team ? `${adder} added you to this team.` : `You don't follow ${adder}.`} @@ -166,7 +166,6 @@ const styles = Kb.Styles.styleSheetCreate( }), buttonContainer: {maxWidth: 322}, container: { - alignItems: 'center', alignSelf: 'flex-start', marginLeft: 57, }, diff --git a/shared/chat/conversation/attachment-get-titles.tsx b/shared/chat/conversation/attachment-get-titles.tsx index 17b1a1764546..c0646705aa72 100644 --- a/shared/chat/conversation/attachment-get-titles.tsx +++ b/shared/chat/conversation/attachment-get-titles.tsx @@ -314,8 +314,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -const Container = (ownProps: OwnProps) => { - return -} - -export default Container +export default ContainerInner diff --git a/shared/chat/conversation/error.tsx b/shared/chat/conversation/error.tsx index aa47fb7a036c..867be46841ff 100644 --- a/shared/chat/conversation/error.tsx +++ b/shared/chat/conversation/error.tsx @@ -4,11 +4,9 @@ import {useConversationThreadSelector} from './thread-context' const ConversationError = () => { const text = useConversationThreadSelector(s => s.meta.snippet) ?? '' return ( - + There was an error loading this conversation. - - The error is: - + The error is: @@ -19,9 +17,6 @@ const ConversationError = () => { const styles = Kb.Styles.styleSheetCreate( () => ({ - container: { - padding: Kb.Styles.globalMargins.medium, - }, errorText: {flexGrow: 1}, }) as const ) diff --git a/shared/chat/conversation/fwd-msg.tsx b/shared/chat/conversation/fwd-msg.tsx index fc4030592b2f..18e179f5c929 100644 --- a/shared/chat/conversation/fwd-msg.tsx +++ b/shared/chat/conversation/fwd-msg.tsx @@ -304,8 +304,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -const TeamPicker = (props: Props) => { - return -} - -export default TeamPicker +export default TeamPickerInner diff --git a/shared/chat/conversation/info-panel/index.tsx b/shared/chat/conversation/info-panel/index.tsx index f125a34dc1cd..2781a99ee52d 100644 --- a/shared/chat/conversation/info-panel/index.tsx +++ b/shared/chat/conversation/info-panel/index.tsx @@ -20,13 +20,8 @@ type Props = { tab?: 'settings' | 'members' | 'attachments' | 'bots' } -const InfoPanelConnector = (ownProps: Props) => { - const conversationIDKey = ownProps.conversationIDKey ?? Chat.noConversationIDKey - return -} - -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' @@ -34,8 +29,8 @@ const InfoPanelConnectorInner = (ownProps: Props & {conversationIDKey: T.Chat.Co const teamname = meta.teamname const {role: yourRole} = useChatTeam(meta.teamID, teamname) - const [uncontrolledSelectedTab, onSelectTab] = React.useState(() => ownProps.tab ?? 'members') - const selectedTab = ownProps.tab ?? uncontrolledSelectedTab + const [uncontrolledSelectedTab, onSelectTab] = React.useState(() => tab ?? 'members') + const selectedTab = tab ?? uncontrolledSelectedTab const hideInfoPanel = React.useEffectEvent(() => { showConversationInfoPanel(conversationIDKey, false, undefined) diff --git a/shared/chat/conversation/list-area/jump-to-recent.tsx b/shared/chat/conversation/list-area/jump-to-recent.tsx index c82cd7039f27..b84933f2bcc6 100644 --- a/shared/chat/conversation/list-area/jump-to-recent.tsx +++ b/shared/chat/conversation/list-area/jump-to-recent.tsx @@ -7,7 +7,7 @@ type Props = { const JumpToRecent = (props: Props) => { return ( - + - + {showImage && } - + {isDeleted ? ( 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}, diff --git a/shared/chat/conversation/no-conversation.tsx b/shared/chat/conversation/no-conversation.tsx index 31e6640dbe39..fc88ff72a41a 100644 --- a/shared/chat/conversation/no-conversation.tsx +++ b/shared/chat/conversation/no-conversation.tsx @@ -1,20 +1,10 @@ import * as Kb from '@/common-adapters' const NoConversation = () => ( - + All conversations are end-to-end encrypted. ) -const styles = Kb.Styles.styleSheetCreate( - () => - ({ - noConvoText: { - alignSelf: 'center', - justifyContent: 'center', - }, - }) as const -) - export default NoConversation diff --git a/shared/chat/conversation/pinned-message.tsx b/shared/chat/conversation/pinned-message.tsx index 094f9dd18da9..c7edd057cf0d 100644 --- a/shared/chat/conversation/pinned-message.tsx +++ b/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 = ( - + {!!imageURL && ( @@ -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, }, diff --git a/shared/chat/conversation/you-are-reset.tsx b/shared/chat/conversation/you-are-reset.tsx index 87f5d7d62054..e226c2516dcc 100644 --- a/shared/chat/conversation/you-are-reset.tsx +++ b/shared/chat/conversation/you-are-reset.tsx @@ -2,12 +2,7 @@ import * as Kb from '@/common-adapters' const YouAreReset = () => ( - + diff --git a/shared/chat/create-channel/index.tsx b/shared/chat/create-channel/index.tsx index 42446964e41a..9e79d25127c0 100644 --- a/shared/chat/create-channel/index.tsx +++ b/shared/chat/create-channel/index.tsx @@ -55,7 +55,7 @@ const CreateChannel = (p: Props) => { onChangeText={props.onDescriptionChange} /> - + { onChangeText={props.onDescriptionChange} /> - + { ) } +const buttonBarStyle = {alignItems: 'center'} as const + const desktopStyles = Kb.Styles.styleSheetCreate( () => ({ @@ -126,7 +128,6 @@ const desktopStyles = Kb.Styles.styleSheetCreate( paddingRight: Kb.Styles.globalMargins.large, paddingTop: Kb.Styles.globalMargins.medium, }, - buttonBar: {alignItems: 'center'}, }) as const ) @@ -134,7 +135,6 @@ const nativeStyles = Kb.Styles.styleSheetCreate( () => ({ box: {padding: 16}, - buttonBar: {alignItems: 'center'}, }) as const ) diff --git a/shared/chat/delete-history-warning.tsx b/shared/chat/delete-history-warning.tsx index 3ed402f81f65..c6fa211253bf 100644 --- a/shared/chat/delete-history-warning.tsx +++ b/shared/chat/delete-history-warning.tsx @@ -34,10 +34,7 @@ const DeleteHistoryWarning = (props: Props) => { return ( diff --git a/shared/chat/emoji-picker/container.tsx b/shared/chat/emoji-picker/container.tsx index 83feb91c5a45..05a1310a37c5 100644 --- a/shared/chat/emoji-picker/container.tsx +++ b/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} /> - + { 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" > ( - + {title} ) @@ -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, diff --git a/shared/chat/inbox-and-conversation-get-options.tsx b/shared/chat/inbox-and-conversation-get-options.tsx index 302e028c84a8..82dc4ee37d11 100644 --- a/shared/chat/inbox-and-conversation-get-options.tsx +++ b/shared/chat/inbox-and-conversation-get-options.tsx @@ -27,7 +27,5 @@ export default Kb.Styles.isTablet headerTitleContainerStyle: {}, } : { - headerTitle: () => { - return - }, + headerTitle: () => , } diff --git a/shared/chat/inbox/index.tsx b/shared/chat/inbox/index.tsx index e43e9a301c0a..0952b8fc5990 100644 --- a/shared/chat/inbox/index.tsx +++ b/shared/chat/inbox/index.tsx @@ -247,7 +247,6 @@ const NativeNoChats = (props: {onNewChat: () => void}) => ( onClick={props.onNewChat} mode="Primary" label="Start a new chat" - style={nativeStyles.button} /> @@ -421,7 +420,7 @@ function DesktopInboxBody(props: ControlledInboxProps) { // Native InboxBody function NativeInboxBody(p: ControlledInboxProps) { -const {search} = p + const {search} = p const inbox = useInboxState(p.conversationIDKey, search.isSearching, p.refreshInbox) const {onUntrustedInboxVisible, toggleSmallTeamsExpanded, selectedConversationIDKey} = inbox const {unreadIndices, unreadTotal, rows, smallTeamsExpanded, isSearching, allowShowFloatingButton} = inbox @@ -528,9 +527,7 @@ const {search} = p {isSearching ? ( - - - + ) : ( ({ - accessoryRow: {flex: 1}, - button: {width: '100%'}, container: Kb.Styles.platformStyles({ common: { flexGrow: 1, diff --git a/shared/chat/inbox/search-row.tsx b/shared/chat/inbox/search-row.tsx index 2abc183295bb..92ce1eaea986 100644 --- a/shared/chat/inbox/search-row.tsx +++ b/shared/chat/inbox/search-row.tsx @@ -69,10 +69,8 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ row: { - alignItems: 'center', height: '100%', paddingRight: Kb.Styles.globalMargins.tiny, - width: '100%', }, }) as const ) diff --git a/shared/chat/new-team-dialog-container.tsx b/shared/chat/new-team-dialog-container.tsx index a086b2d2ef4c..3af5b9538cc5 100644 --- a/shared/chat/new-team-dialog-container.tsx +++ b/shared/chat/new-team-dialog-container.tsx @@ -7,9 +7,8 @@ import {useConversationParticipants} from './conversation/data-hooks' type Props = {conversationIDKey?: T.Chat.ConversationIDKey} -const NewTeamDialogInner = (props: {conversationIDKey: T.Chat.ConversationIDKey}) => { - const {conversationIDKey} = props - const baseTeam = '' +const NewTeamDialog = (props: Props) => { + const conversationIDKey = props.conversationIDKey ?? T.Chat.noConversationIDKey const navigateUp = C.Router2.navigateUp const onCancel = () => { navigateUp() @@ -22,16 +21,7 @@ const NewTeamDialogInner = (props: {conversationIDKey: T.Chat.ConversationIDKey} .map(assertion => ({assertion, role: 'writer' as const})) void createNewTeamAndNavigate(teamname, false, {fromChat: true, usersToAdd}) } - const newTeamProps = { - baseTeam, - onCancel, - onSubmit, - } - return + return } -const NewTeamDialog = (props: Props) => ( - -) - export default NewTeamDialog diff --git a/shared/chat/payments/status/index.tsx b/shared/chat/payments/status/index.tsx index 5c33feced12d..a5ad5ac3e76b 100644 --- a/shared/chat/payments/status/index.tsx +++ b/shared/chat/payments/status/index.tsx @@ -66,12 +66,12 @@ const statusColor = (s: Status) => { const PaymentStatus = (props: Props) => { const statusRef = React.useRef(null) const [showPopup, setShowPopup] = React.useState(false) - const _showPopup = () => { + const showPopupIfAllowed = () => { if (props.allowPopup) { setShowPopup(true) } } - const _hidePopup = () => { + const hidePopup = () => { setShowPopup(false) } const text = ( @@ -79,7 +79,7 @@ const PaymentStatus = (props: Props) => { textRef={statusRef} type="BodyExtrabold" allowFontScaling={!!props.allowFontScaling} - onClick={_showPopup} + onClick={showPopupIfAllowed} > {' '} @@ -91,7 +91,7 @@ const PaymentStatus = (props: Props) => { ) : null @@ -104,8 +104,8 @@ const PaymentStatus = (props: Props) => { {text} {popups} diff --git a/shared/chat/pdf/index.tsx b/shared/chat/pdf/index.tsx index 5cf1d2ca525d..bb2111df26f7 100644 --- a/shared/chat/pdf/index.tsx +++ b/shared/chat/pdf/index.tsx @@ -1,17 +1,17 @@ import * as C from '@/constants' import * as Kb from '@/common-adapters' import * as React from 'react' -import {useNavigation} from '@react-navigation/native' import * as T from '@/constants/types' +import {useNavigation} from '@react-navigation/native' +import {openLocalPathInSystemFileManagerDesktop} from '@/util/fs-storeless-actions' +import {attachmentDownloadMessage, takePDFMessage} from '../conversation/attachment-actions' +import {useConversationMessage} from '../conversation/data-hooks' type Props = { conversationIDKey?: T.Chat.ConversationIDKey messageID: T.Chat.MessageID url?: string } -import {openLocalPathInSystemFileManagerDesktop} from '@/util/fs-storeless-actions' -import {attachmentDownloadMessage, takePDFMessage} from '../conversation/attachment-actions' -import {useConversationMessage} from '../conversation/data-hooks' const ChatPDF = (props: Props) => { const {messageID} = props 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 73c724a0cfcd..d2cecb8b23dd 100644 --- a/shared/chat/send-to-chat/conversation-list/conversation-list.tsx +++ b/shared/chat/send-to-chat/conversation-list/conversation-list.tsx @@ -124,18 +124,16 @@ const ConversationListRender = (props: ConversationListRenderProps) => { }} /> - - ({ - isSelected: index === props.selected, - item: r, - onSelect: () => props.onSelect(T.Chat.conversationIDToKey(r.convID), r.tlfName), - }))} - renderItem={_itemRenderer} - indexAsKey={true} - /> - + ({ + isSelected: index === props.selected, + item: r, + onSelect: () => props.onSelect(T.Chat.conversationIDToKey(r.convID), r.tlfName), + }))} + renderItem={_itemRenderer} + indexAsKey={true} + /> ) } diff --git a/shared/chat/send-to-chat/index.tsx b/shared/chat/send-to-chat/index.tsx index d78bc3ddf760..33cdd6a403ec 100644 --- a/shared/chat/send-to-chat/index.tsx +++ b/shared/chat/send-to-chat/index.tsx @@ -16,19 +16,6 @@ type Props = { sendPaths?: Array // KBFS or incoming share (files) } -const MobileSendToChatRoutable = (props: Props) => { - const {canBack, isFromShareExtension, sendPaths, text} = props - - return ( - - ) -} - export const MobileSendToChat = (props: Props) => { const {isFromShareExtension, sendPaths, text} = props const navigateAppend = C.Router2.navigateAppend @@ -120,43 +107,41 @@ type DesktopSendToChatRenderProps = { export const DesktopSendToChatRender = (props: DesktopSendToChatRenderProps) => { return ( - <> - - - Attach in conversation - - - - - {T.FS.getPathName(props.path)} - - - + + + Attach in conversation + + + + + {T.FS.getPathName(props.path)} - - - - + + - + + + + + ) } -const SendToChat = isMobile ? MobileSendToChatRoutable : DesktopSendToChat +const SendToChat = isMobile ? MobileSendToChat : DesktopSendToChat export default SendToChat @@ -165,7 +150,6 @@ const desktopStyles = Kb.Styles.styleSheetCreate( ({ belly: { ...Kb.Styles.globalStyles.flexGrow, - alignItems: 'center', marginBottom: Kb.Styles.globalMargins.small, paddingLeft: Kb.Styles.globalMargins.large, paddingRight: Kb.Styles.globalMargins.large, diff --git a/shared/chat/top-line.tsx b/shared/chat/top-line.tsx index 06558a057261..575604bf5716 100644 --- a/shared/chat/top-line.tsx +++ b/shared/chat/top-line.tsx @@ -43,9 +43,7 @@ const FilteredTopLine = (props: Props) => { } const styles = Kb.Styles.styleSheetCreate(() => ({ - boldOverride: { - ...Kb.Styles.globalStyles.fontBold, - }, + boldOverride: Kb.Styles.globalStyles.fontBold, selectedText: { color: Kb.Styles.globalColors.white, }, diff --git a/shared/common-adapters/avatar/icon-to-img-set.tsx b/shared/common-adapters/avatar/icon-to-img-set.tsx index 2e4f6045b8d8..5b073592b022 100644 --- a/shared/common-adapters/avatar/icon-to-img-set.tsx +++ b/shared/common-adapters/avatar/icon-to-img-set.tsx @@ -30,19 +30,19 @@ function getMultsMap(imgMap: {[size: string]: unknown}, targetSize: number): Mul const sizes = ssizes.map(s => parseInt(s, 10)).sort((a: number, b: number) => a - b) const multsMap: MultMap = {1: undefined, 2: undefined, 3: undefined} - multiKeys.forEach(mult => { + for (const mult of multiKeys) { const level1 = idealSizeMultMap[String(targetSize)] if (level1) { const level2 = level1[mult] if (level2) { multsMap[mult] = level2 - return + continue } } const ideal = mult * targetSize const size = sizes.find(size => size >= ideal) multsMap[mult] = size || sizes.at(-1) - }) + } _getMultsMapCache[sizeKey] = multsMap return multsMap diff --git a/shared/common-adapters/avatar/index.tsx b/shared/common-adapters/avatar/index.tsx index f4e4eac615d1..c06e14dea724 100644 --- a/shared/common-adapters/avatar/index.tsx +++ b/shared/common-adapters/avatar/index.tsx @@ -3,8 +3,7 @@ import {useState} from 'react' import * as Styles from '@/styles' import {useConfigState} from '@/stores/config' import * as AvatarZus from './store' -import {Pressable, View} from 'react-native' -import {useColorScheme} from 'react-native' +import {Pressable, View, useColorScheme} from 'react-native' import {navToProfile} from '@/constants/router' import {Image} from 'expo-image' import {iconTypeToImgSet} from './icon-to-img-set' diff --git a/shared/common-adapters/badge.tsx b/shared/common-adapters/badge.tsx index 159d37399931..17e1d0da798b 100644 --- a/shared/common-adapters/badge.tsx +++ b/shared/common-adapters/badge.tsx @@ -98,11 +98,7 @@ function Badge(p: Badge2Props) { type="BodyTinyBold" style={Styles.collapseStyles([ styles.text, - { - fontSize: fontSize, - height: height, - lineHeight: isMobile ? height : `${height}px`, - } as const, + {fontSize, height, lineHeight: isMobile ? height : `${height}px`} as const, badgeNumberStyle, ])} > diff --git a/shared/common-adapters/banner.tsx b/shared/common-adapters/banner.tsx index 78f23405e429..e22860235088 100644 --- a/shared/common-adapters/banner.tsx +++ b/shared/common-adapters/banner.tsx @@ -118,8 +118,8 @@ export const Banner = (props: BannerProps) => ( padding="xtiny" sizeType="Small" type="iconfont-close" - color={colorToIconColor()[props.color]} - hoverColor={colorToIconHoverColor()[props.color]} + color={colorToIconColor[props.color]} + hoverColor={colorToIconHoverColor[props.color]} onClick={props.onClose} /> @@ -217,20 +217,20 @@ const colorToTextColorStyles = Styles.styleSheetCreate(() => ({ yellow: {color: Styles.globalColors.brown_75}, })) -const colorToIconColor = () => ({ +const colorToIconColor = { blue: Styles.globalColors.white_90, green: Styles.globalColors.white_90, grey: Styles.globalColors.black_50, red: Styles.globalColors.white_90, white: Styles.globalColors.black_50, yellow: Styles.globalColors.brown_75, -}) +} -const colorToIconHoverColor = () => ({ +const colorToIconHoverColor = { blue: Styles.globalColors.white, green: Styles.globalColors.white, grey: Styles.globalColors.black, red: Styles.globalColors.white, white: Styles.globalColors.black, yellow: Styles.globalColors.brown, -}) +} diff --git a/shared/common-adapters/button-bar.tsx b/shared/common-adapters/button-bar.tsx index bba49806ef8e..8199f72fdfbd 100644 --- a/shared/common-adapters/button-bar.tsx +++ b/shared/common-adapters/button-bar.tsx @@ -14,19 +14,9 @@ type Props = { } const ButtonBar = (props: Props) => { - const _spacing = () => { - if ((props.direction ?? 'row') === 'row' && props.small && !isMobile) { - return SmallSpacer - } - return BigSpacer - } - - const _surroundSpacing = () => { - return (props.direction ?? 'row') === 'column' - } - - const Spacing = _spacing() - const surroundSpacing = _surroundSpacing() + const isColumn = (props.direction ?? 'row') === 'column' + const Spacing = (!isColumn && props.small && !isMobile) ? SmallSpacer : BigSpacer + const surroundSpacing = isColumn const children = React.Children.toArray(props.children) const childrenWithSpacing = children.reduce>((arr, c, idx) => { if (surroundSpacing || idx > 0) { @@ -43,7 +33,6 @@ const ButtonBar = (props: Props) => { minHeight: isMobile ? (props.small ? 64 : 72) : props.small ? 44 : 64, } - const isColumn = (props.direction ?? 'row') === 'column' const style = Styles.collapseStyles([ { ...(Styles.isTablet ? {maxWidth: 460} : {}), diff --git a/shared/common-adapters/checkbox.tsx b/shared/common-adapters/checkbox.tsx index 4a45967ab3ba..0009ffa4ffa7 100644 --- a/shared/common-adapters/checkbox.tsx +++ b/shared/common-adapters/checkbox.tsx @@ -31,6 +31,7 @@ const Checkbox = (props: Props) => { { diff --git a/shared/common-adapters/emoji/index.tsx b/shared/common-adapters/emoji/index.tsx index 52bbf78f7c68..6dcf1b2bfb59 100644 --- a/shared/common-adapters/emoji/index.tsx +++ b/shared/common-adapters/emoji/index.tsx @@ -4,10 +4,6 @@ import type * as ED from './slow-data' import type * as Styles from '@/styles' import CustomEmoji from './custom-emoji' -const Kb = { - NativeEmoji, -} - export type RenderableEmoji = { aliasForCustom?: string unicodeStock?: string @@ -121,7 +117,7 @@ const Emoji = (props: EmojiProps) => { if (emoji.renderStock) { return ( - ( - + ( ) -const styles = Styles.styleSheetCreate( - () => - ({ - alignCenter: { - alignItems: 'center', - }, - }) as const -) - export default InfoNote diff --git a/shared/common-adapters/list-item.tsx b/shared/common-adapters/list-item.tsx index 5b3e3ac98cd0..e10ef10663ab 100644 --- a/shared/common-adapters/list-item.tsx +++ b/shared/common-adapters/list-item.tsx @@ -117,15 +117,7 @@ const afterStatusIconItemLeftDistance = statusIconWidth - (isMobile ? 10 : 14) const styles = Styles.styleSheetCreate(() => { const _styles = { - actionLargeContainer: { - alignItems: 'center', - flexGrow: 0, - flexShrink: 0, - justifyContent: 'flex-start', - marginRight: 8, - position: 'relative', - } as const, - actionSmallContainer: { + actionContainer: { alignItems: 'center', flexGrow: 0, flexShrink: 0, @@ -266,21 +258,21 @@ const styles = Styles.styleSheetCreate(() => { const _actionStyles = { actionLargeIsGrowOnHover: { - ..._styles.actionLargeContainer, + ..._styles.actionContainer, ..._styles.heightLarge, justifyContent: 'flex-end', } as const, actionLargeNotGrowOnHover: { - ..._styles.actionLargeContainer, + ..._styles.actionContainer, ..._styles.heightLarge, } as const, actionSmallIsGrowOnHover: { - ..._styles.actionSmallContainer, + ..._styles.actionContainer, ..._styles.heightSmall, justifyContent: 'flex-end', } as const, actionSmallNotGrowOnHover: { - ..._styles.actionSmallContainer, + ..._styles.actionContainer, ..._styles.heightSmall, } as const, } diff --git a/shared/common-adapters/list.tsx b/shared/common-adapters/list.tsx index d3681b975c4f..b3b569e6adfc 100644 --- a/shared/common-adapters/list.tsx +++ b/shared/common-adapters/list.tsx @@ -50,7 +50,6 @@ const NativeList = function List({ref, ...p}: Props) { ) } - const styles = Styles.styleSheetCreate( () => ({ diff --git a/shared/common-adapters/markdown/channel.tsx b/shared/common-adapters/markdown/channel.tsx index b65a372798fc..ce76e55ad2fd 100644 --- a/shared/common-adapters/markdown/channel.tsx +++ b/shared/common-adapters/markdown/channel.tsx @@ -10,7 +10,7 @@ type OwnProps = { allowFontScaling?: boolean } -const Container = (ownProps: OwnProps) => { +const Channel = (ownProps: OwnProps) => { const {name, convID, style, allowFontScaling} = ownProps const onClick = () => previewConversation({ @@ -26,4 +26,4 @@ const Container = (ownProps: OwnProps) => { ) } -export default Container +export default Channel diff --git a/shared/common-adapters/markdown/maybe-mention/index.tsx b/shared/common-adapters/markdown/maybe-mention/index.tsx index 0baa404a4df5..07aa6f5b1c1f 100644 --- a/shared/common-adapters/markdown/maybe-mention/index.tsx +++ b/shared/common-adapters/markdown/maybe-mention/index.tsx @@ -63,21 +63,13 @@ type OwnProps = { style?: StylesTextCrossPlatform } -const Container = (ownProps: OwnProps) => { +const MaybeMentionContainer = (ownProps: OwnProps) => { const {name, channel} = ownProps const info = useMaybeMentionInfo(name, channel) const onResolve = () => { ignorePromise(T.RPCChat.localResolveMaybeMentionRpcPromise({mention: {channel, name}})) } - const props = { - allowFontScaling: ownProps.allowFontScaling, - channel: ownProps.channel, - info, - name: ownProps.name, - onResolve, - style: ownProps.style, - } - return + return } -export default Container +export default MaybeMentionContainer diff --git a/shared/common-adapters/markdown/spoiler.tsx b/shared/common-adapters/markdown/spoiler.tsx index 482894b00365..3446391ef879 100644 --- a/shared/common-adapters/markdown/spoiler.tsx +++ b/shared/common-adapters/markdown/spoiler.tsx @@ -49,29 +49,27 @@ const Spoiler = (p: Props) => { ) } -const styles = Styles.styleSheetCreate(() => { - return { - hidden: Styles.platformStyles({ - common: { - backgroundColor: Styles.globalColors.black_on_white, - color: Styles.globalColors.black_on_white, - }, - isElectron: { - borderRadius: Styles.borderRadius, - ...Styles.paddingH(2), - }, - }), - shown: Styles.platformStyles({ - common: { - backgroundColor: Styles.globalColors.black_on_white, - color: Styles.globalColors.white, - }, - isElectron: { - borderRadius: Styles.borderRadius, - ...Styles.paddingH(2), - }, - }), - } as const -}) +const styles = Styles.styleSheetCreate(() => ({ + hidden: Styles.platformStyles({ + common: { + backgroundColor: Styles.globalColors.black_on_white, + color: Styles.globalColors.black_on_white, + }, + isElectron: { + borderRadius: Styles.borderRadius, + ...Styles.paddingH(2), + }, + }), + shown: Styles.platformStyles({ + common: { + backgroundColor: Styles.globalColors.black_on_white, + color: Styles.globalColors.white, + }, + isElectron: { + borderRadius: Styles.borderRadius, + ...Styles.paddingH(2), + }, + }), +} as const)) export default Spoiler diff --git a/shared/common-adapters/name-with-icon.tsx b/shared/common-adapters/name-with-icon.tsx index efd65aac089e..8008f507c10b 100644 --- a/shared/common-adapters/name-with-icon.tsx +++ b/shared/common-adapters/name-with-icon.tsx @@ -203,11 +203,7 @@ export const NameWithIcon = (props: NameWithIconProps) => { ) const containerStyle = Styles.collapseStyles([ - props.horizontal - ? size === 'big' - ? styles.hbContainerStyle - : styles.hContainerStyle - : styles.vContainerStyle, + props.horizontal && size === 'big' ? styles.hbContainerStyle : undefined, props.containerStyle, ]) @@ -299,7 +295,6 @@ const styles = Styles.styleSheetCreate(() => ({ marginRight: Styles.globalMargins.small, }, }), - hContainerStyle: {}, hIconStyle: Styles.platformStyles({ isElectron: { ...Styles.size(32), @@ -343,7 +338,6 @@ const styles = Styles.styleSheetCreate(() => ({ textContainer: { flex: 1, }, - vContainerStyle: {}, vUsernameContainerStyle: Styles.platformStyles({ isElectron: { textAlign: 'center', diff --git a/shared/common-adapters/placeholder.tsx b/shared/common-adapters/placeholder.tsx index b6697c2152df..c7db4fce4118 100644 --- a/shared/common-adapters/placeholder.tsx +++ b/shared/common-adapters/placeholder.tsx @@ -12,7 +12,7 @@ const Placeholder = (props: PlaceholderProps) => ( style={Styles.collapseStyles([ styles.placeholder, props.style, - ...(props.width ? [{width: props.width}] : []), + props.width ? {width: props.width} : undefined, ])} /> ) diff --git a/shared/common-adapters/popup/index.tsx b/shared/common-adapters/popup/index.tsx index 816dd572777c..0f431a9e25a1 100644 --- a/shared/common-adapters/popup/index.tsx +++ b/shared/common-adapters/popup/index.tsx @@ -153,22 +153,13 @@ function PopupSheet(props: PopupProps) { ) } -function PopupPortal(props: PopupProps) { - const {children} = props - return ( - - {children} - - ) -} - function Popup(props: PopupProps) { if (props.attachTo) { return } if (isMobile) { if (!props.onHidden) { - return + return {props.children} } return } diff --git a/shared/common-adapters/wave-button.tsx b/shared/common-adapters/wave-button.tsx index 336875d1358e..b43a30d30e84 100644 --- a/shared/common-adapters/wave-button.tsx +++ b/shared/common-adapters/wave-button.tsx @@ -33,12 +33,8 @@ const getWaveWaitingKey = (recipient: string) => { return `settings:waveButton:${recipient}` } -const WaveButton = (props: Props) => { - return -} - // A button that sends a wave emoji into a chat. -const WaveButtonImpl = (props: Props) => { +const WaveButton = (props: Props) => { const [waved, setWaved] = React.useState(false) const waitingKey = getWaveWaitingKey(props.username || props.conversationIDKey || 'missing') const waving = C.Waiting.useAnyWaiting(waitingKey) @@ -110,6 +106,8 @@ const WaveButtonImpl = (props: Props) => { ) } +export default WaveButton + const styles = Styles.styleSheetCreate( () => ({ @@ -123,5 +121,3 @@ const styles = Styles.styleSheetCreate( }, }) as const ) - -export default WaveButton diff --git a/shared/crypto/decrypt.tsx b/shared/crypto/decrypt.tsx index c488438f69b7..4990f4760f5a 100644 --- a/shared/crypto/decrypt.tsx +++ b/shared/crypto/decrypt.tsx @@ -9,6 +9,8 @@ import {CryptoOutput, CryptoOutputActionsBar, CryptoSignedSender} from './output import { beginRun, clearInputState, + createCommonState, + getStatusCodeMessage, maybeAutoRunTextOperation, nextInputState, nextOpenedFileState, @@ -16,10 +18,6 @@ import { resetWarnings, useCommittedState, useSeededCryptoInput, -} from './helpers' -import { - createCommonState, - getStatusCodeMessage, type CommonOutputRouteParams, type CryptoInputRouteParams, type CommonState, @@ -240,12 +238,7 @@ export const DecryptIO = () => { outputFileIcon="icon-file-64" outputTextType="plain" state={controller.state} - onChooseOutputFolder={destinationDir => { - const f = async () => { - await controller.decrypt(destinationDir) - } - C.ignorePromise(f()) - }} + onChooseOutputFolder={destinationDir => C.ignorePromise(controller.decrypt(destinationDir) as unknown as Promise)} /> diff --git a/shared/crypto/encrypt.tsx b/shared/crypto/encrypt.tsx index 3efcd1bff074..dd2d8921ded4 100644 --- a/shared/crypto/encrypt.tsx +++ b/shared/crypto/encrypt.tsx @@ -344,13 +344,8 @@ const EncryptOptionsPanel = ({ setEncryptOptions: (options: {includeSelf?: boolean; sign?: boolean}, hideIncludeSelf?: boolean) => void sign: boolean }) => { - const onSetOptions = (opts: {newIncludeSelf: boolean; newSign: boolean}) => { - const {newIncludeSelf, newSign} = opts - setEncryptOptions({includeSelf: newIncludeSelf, sign: newSign}) - } - - const direction = Kb.Styles.isTablet ? 'horizontal' : isMobile ? 'vertical' : 'horizontal' - const gap = Kb.Styles.isTablet ? 'medium' : isMobile ? 'xtiny' : 'medium' + const direction = isMobile && !Kb.Styles.isTablet ? 'vertical' : 'horizontal' + const gap = isMobile && !Kb.Styles.isTablet ? 'xtiny' : 'medium' return ( onSetOptions({newIncludeSelf: newValue, newSign: sign})} + onCheck={newValue => setEncryptOptions({includeSelf: newValue, sign})} /> )} onSetOptions({newIncludeSelf: includeSelf, newSign: newValue})} + onCheck={newValue => setEncryptOptions({includeSelf, sign: newValue})} /> ) @@ -454,9 +449,6 @@ const EncryptInputBody = ({params}: {params?: EncryptRouteParams}) => { const blurCBRef = React.useRef(() => {}) const navigateAppend = C.Router2.navigateAppend const appendEncryptRecipientsBuilder = C.Router2.appendEncryptRecipientsBuilder - const setBlurCB = (cb: () => void) => { - blurCBRef.current = cb - } const onRun = () => { const f = async () => { @@ -507,7 +499,7 @@ const EncryptInputBody = ({params}: {params?: EncryptRouteParams}) => { fileIcon={inputFileIcon} inputPlaceholder={inputPlaceholder} state={controller.state} - setBlurCB={setBlurCB} + setBlurCB={(cb: () => void) => { blurCBRef.current = cb }} textInputType="plain" onSetInput={controller.setInput} onClearInput={controller.clearInput} @@ -619,23 +611,13 @@ export const EncryptIO = () => { outputFileIcon="icon-file-saltpack-64" outputTextType="cipher" state={controller.state} - onChooseOutputFolder={destinationDir => { - const f = async () => { - await controller.runEncrypt(destinationDir) - } - C.ignorePromise(f()) - }} + onChooseOutputFolder={destinationDir => C.ignorePromise(controller.runEncrypt(destinationDir) as unknown as Promise)} /> { - const f = async () => { - await controller.saveOutputAsText() - } - C.ignorePromise(f()) - }} + onSaveAsText={() => C.ignorePromise(controller.saveOutputAsText() as unknown as Promise)} /> diff --git a/shared/crypto/output.tsx b/shared/crypto/output.tsx index b098ee3fe93c..93f13dd500b8 100644 --- a/shared/crypto/output.tsx +++ b/shared/crypto/output.tsx @@ -60,6 +60,7 @@ export const CryptoSignedSender = ({isSelfSigned, state}: SignedSenderProps) => direction="horizontal" fullWidth={true} alignItems="center" + justifyContent="center" style={Kb.Styles.collapseStyles([ styles.signedContainer, isSelfSigned ? styles.signedContainerSelf : styles.signedContainerOther, @@ -70,7 +71,6 @@ export const CryptoSignedSender = ({isSelfSigned, state}: SignedSenderProps) => direction="horizontal" gap={isSelfSigned ? 'xtiny' : 'xsmall'} alignItems="center" - style={styles.signedSender} > {isSelfSigned ? ( @@ -99,7 +99,7 @@ export const CryptoSignedSender = ({isSelfSigned, state}: SignedSenderProps) => )} ) : ( - + {isSelfSigned ? null : ( @@ -325,22 +325,21 @@ export const CryptoOutput = ({ if (state.outputType === 'file') { return ( - - + {outputFileIcon ? : null} + state.output && openLocalPathInSystemFileManagerDesktop(state.output)} > - {outputFileIcon ? : null} - state.output && openLocalPathInSystemFileManagerDesktop(state.output)} - > - {state.output} - - + {state.output} + ) } @@ -421,7 +420,6 @@ const styles = Kb.Styles.styleSheetCreate( signedContainer: Kb.Styles.platformStyles({ common: { flexShrink: 0, - justifyContent: 'center', minHeight: Kb.Styles.globalMargins.mediumLarge, }, isMobile: { @@ -446,7 +444,6 @@ const styles = Kb.Styles.styleSheetCreate( ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small), }, }), - signedSender: {alignItems: 'center'}, toastText: {color: Kb.Styles.globalColors.white}, }) as const ) diff --git a/shared/crypto/sign.tsx b/shared/crypto/sign.tsx index 05a56b8c6a62..017d05c18a17 100644 --- a/shared/crypto/sign.tsx +++ b/shared/crypto/sign.tsx @@ -10,6 +10,8 @@ import {CryptoOutput, CryptoOutputActionsBar, CryptoSignedSender, OutputInfoBann import { beginRun, clearInputState, + createCommonState, + getStatusCodeMessage, maybeAutoRunTextOperation, nextInputState, nextOpenedFileState, @@ -17,10 +19,6 @@ import { resetWarnings, useCommittedState, useSeededCryptoInput, -} from './helpers' -import { - createCommonState, - getStatusCodeMessage, type CommonOutputRouteParams, type CryptoInputRouteParams, type CommonState, @@ -149,9 +147,6 @@ export const SignInput = (_props: unknown) => { const controller = useSignState(params) const blurCBRef = React.useRef(() => {}) const navigateAppend = C.Router2.navigateAppend - const setBlurCB = (cb: () => void) => { - blurCBRef.current = cb - } const onRun = () => { const f = async () => { @@ -172,7 +167,7 @@ export const SignInput = (_props: unknown) => { fileIcon={inputFileIcon} inputPlaceholder={inputPlaceholder} state={controller.state} - setBlurCB={setBlurCB} + setBlurCB={(cb: () => void) => { blurCBRef.current = cb }} textInputType="plain" onSetInput={controller.setInput} onClearInput={controller.clearInput} @@ -250,23 +245,13 @@ export const SignIO = () => { outputFileIcon="icon-file-saltpack-64" outputTextType="cipher" state={controller.state} - onChooseOutputFolder={destinationDir => { - const f = async () => { - await controller.sign(destinationDir) - } - C.ignorePromise(f()) - }} + onChooseOutputFolder={destinationDir => C.ignorePromise(controller.sign(destinationDir) as unknown as Promise)} /> { - const f = async () => { - await controller.saveOutputAsText() - } - C.ignorePromise(f()) - }} + onSaveAsText={() => C.ignorePromise(controller.saveOutputAsText() as unknown as Promise)} /> diff --git a/shared/crypto/sub-nav/left-nav.desktop.tsx b/shared/crypto/sub-nav/left-nav.desktop.tsx index cf65da1ec87b..becc59b36100 100644 --- a/shared/crypto/sub-nav/left-nav.desktop.tsx +++ b/shared/crypto/sub-nav/left-nav.desktop.tsx @@ -1,4 +1,3 @@ -import type * as React from 'react' import * as Kb from '@/common-adapters' import * as Crypto from '@/constants/crypto' import NavRow from './nav-row' @@ -12,20 +11,14 @@ type Row = (typeof Crypto.Tabs)[number] & { type Props = { onClick: (a: string) => void selected: string - children?: React.ReactNode } -const SubNav = (props: Props) => { -const getRows = () => - Crypto.Tabs.map(t => ({ - ...t, - isSelected: props.selected === t.tab, - key: t.tab, - })) - - const _onClick = (tab: string) => { - props.onClick(tab) - } +const LeftNav = (props: Props) => { + const rows = Crypto.Tabs.map(t => ({ + ...t, + isSelected: props.selected === t.tab, + key: t.tab, + })) const renderItem = (_: number, row: Row) => { return ( @@ -35,26 +28,23 @@ const getRows = () => title={row.title} tab={row.tab} icon={row.icon} - onClick={() => _onClick(row.tab)} + onClick={() => props.onClick(row.tab)} /> ) } return ( - - - - - - - {props.children} + + + + ) } @@ -71,4 +61,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, })) -export default SubNav +export default LeftNav diff --git a/shared/crypto/sub-nav/nav-row.tsx b/shared/crypto/sub-nav/nav-row.tsx index 3b439ef4b547..b1495f01dd00 100644 --- a/shared/crypto/sub-nav/nav-row.tsx +++ b/shared/crypto/sub-nav/nav-row.tsx @@ -7,7 +7,7 @@ type Props = { // Desktop only icon?: IconType isSelected?: boolean - // Moible only + // Mobile only description?: string illustration?: IconType onClick: () => void @@ -44,7 +44,8 @@ const NavRow = (props: Props) => { direction="vertical" fullHeight={true} fullWidth={true} - style={Kb.Styles.collapseStyles([styles.textContainer])} + justifyContent="center" + style={styles.desktopItemBody} > { const mobileRow = description && illustration ? ( - } - body={ - - {title} - {description} - - } - onClick={onClick} - /> + + } + body={ + + {title} + {description} + + } + onClick={onClick} + /> + ) : null return isMobile ? mobileRow : desktopRow } const styles = Kb.Styles.styleSheetCreate(() => ({ - textContainer: { - justifyContent: 'center', + desktopItemBody: { marginLeft: Kb.Styles.globalMargins.tiny, }, })) diff --git a/shared/crypto/verify.tsx b/shared/crypto/verify.tsx index 8e683984f2a4..aaf851864728 100644 --- a/shared/crypto/verify.tsx +++ b/shared/crypto/verify.tsx @@ -9,6 +9,8 @@ import {CryptoOutput, CryptoOutputActionsBar, CryptoSignedSender} from './output import { beginRun, clearInputState, + createCommonState, + getStatusCodeMessage, maybeAutoRunTextOperation, nextInputState, nextOpenedFileState, @@ -16,10 +18,6 @@ import { resetWarnings, useCommittedState, useSeededCryptoInput, -} from './helpers' -import { - createCommonState, - getStatusCodeMessage, type CommonOutputRouteParams, type CryptoInputRouteParams, type CommonState, @@ -237,12 +235,7 @@ export const VerifyIO = () => { outputFileIcon="icon-file-64" outputTextType="plain" state={controller.state} - onChooseOutputFolder={destinationDir => { - const f = async () => { - await controller.verify(destinationDir) - } - C.ignorePromise(f()) - }} + onChooseOutputFolder={destinationDir => C.ignorePromise(controller.verify(destinationDir) as unknown as Promise)} /> diff --git a/shared/deeplinks/error.tsx b/shared/deeplinks/error.tsx index 1bca793fc79c..7b9218cd57b9 100644 --- a/shared/deeplinks/error.tsx +++ b/shared/deeplinks/error.tsx @@ -8,22 +8,17 @@ type KeybaseLinkErrorBodyProps = { export const KeybaseLinkErrorBody = (props: KeybaseLinkErrorBodyProps) => { const bannerColor = props.isError ? 'red' : 'green' return ( - <> - - - - - - + + + + + ) } -const LinkError = (props: {error?: string}) => { - const error = props.error ?? 'Invalid page! (sorry)' - const message = error - const isError = true - return -} +const LinkError = (props: {error?: string}) => ( + +) const styles = Kb.Styles.styleSheetCreate(() => ({ container: Kb.Styles.platformStyles({ diff --git a/shared/devices/add-device.tsx b/shared/devices/add-device.tsx index 82c007770a0f..db670c970999 100644 --- a/shared/devices/add-device.tsx +++ b/shared/devices/add-device.tsx @@ -5,12 +5,12 @@ import {useProvisionState} from '@/stores/provision' import * as T from '@/constants/types' import {getDeviceIconType} from './device-icon' -type OwnProps = { +type AddDeviceProps = { highlight?: Array<'computer' | 'phone' | 'paper key'> } const noHighlight = new Array<'computer' | 'phone' | 'paper key'>() -export default function AddDevice(ownProps: OwnProps) { +export default function AddDevice(ownProps: AddDeviceProps) { const highlight = ownProps.highlight ?? noHighlight const [iconNumbers, setIconNumbers] = React.useState({ desktop: 1 as T.Devices.IconNumber, diff --git a/shared/devices/device-icon.tsx b/shared/devices/device-icon.tsx index 0794c76308ea..3415dff81f81 100644 --- a/shared/devices/device-icon.tsx +++ b/shared/devices/device-icon.tsx @@ -34,15 +34,14 @@ export const getDeviceRevokeIconType = ( iconNumber: T.Devices.IconNumber ): Kb.IconType => { const size = isMobile ? 64 : 48 + if (type === 'backup') return `icon-paper-key-revoke-${size}` as Kb.IconType const maybeIcon = ( { - backup: `icon-paper-key-revoke-${size}`, desktop: `icon-computer-revoke-background-${iconNumber}-${size}`, mobile: `icon-phone-revoke-background-${iconNumber}-${size}`, } as const )[type] const fallback = ({ - backup: `icon-paper-key-revoke-${size}`, desktop: `icon-computer-revoke-${size}`, mobile: `icon-phone-revoke-${size}`, } as const)[type] diff --git a/shared/devices/device-page.tsx b/shared/devices/device-page.tsx index 84f5835e46b5..b03cd22cefdf 100644 --- a/shared/devices/device-page.tsx +++ b/shared/devices/device-page.tsx @@ -4,7 +4,9 @@ import * as T from '@/constants/types' import {formatTimeForDeviceTimeline, formatTimeRelativeToNow} from '@/util/timestamp' import {getDeviceIconType} from './device-icon' -type OwnProps = {canRevoke: boolean; device: T.Devices.Device} +type DevicePageProps = {canRevoke: boolean; device: T.Devices.Device} + +type TimelineEventType = 'Revoked' | 'LastUsed' | 'Added' const TimelineMarker = (p: {first: boolean; last: boolean; closedCircle: boolean}) => { const {first, last, closedCircle} = p @@ -36,20 +38,20 @@ const TimelineLabel = (p: { )} {!!subDesc && !subDescIsName && {subDesc}} - {spacerOnBottom && } + {spacerOnBottom && } ) } const Timeline = (p: {device: T.Devices.Device}) => { const {device} = p - const timeline = [ + const timeline: Array<{desc: string; subDesc: string; type: TimelineEventType}> = [ ...(device.revokedAt ? [ { desc: `Revoked ${formatTimeForDeviceTimeline(device.revokedAt)}`, subDesc: device.revokedByName || '', - type: 'Revoked', + type: 'Revoked' as const, }, ] : []), @@ -58,14 +60,14 @@ const Timeline = (p: {device: T.Devices.Device}) => { { desc: `Last used ${formatTimeForDeviceTimeline(device.lastUsed)}`, subDesc: formatTimeRelativeToNow(device.lastUsed), - type: 'LastUsed', + type: 'LastUsed' as const, }, ] : []), { desc: `Added ${formatTimeForDeviceTimeline(device.created)}`, subDesc: device.provisionerName || '', - type: 'Added', + type: 'Added' as const, }, ] @@ -90,7 +92,7 @@ const Timeline = (p: {device: T.Devices.Device}) => { ) } -const DevicePage = (ownProps: OwnProps) => { +const DevicePage = (ownProps: DevicePageProps) => { const {canRevoke, device} = ownProps const navigateAppend = C.Router2.navigateAppend const showRevokeDevicePage = () => { @@ -141,25 +143,27 @@ const DevicePage = (ownProps: OwnProps) => { ) } +const circleSize = 8 + const styles = Kb.Styles.styleSheetCreate( () => ({ circleClosed: { backgroundColor: Kb.Styles.globalColors.grey, borderColor: Kb.Styles.globalColors.white, - borderRadius: 8 / 2, + borderRadius: circleSize / 2, borderStyle: 'solid', borderWidth: 2, - height: 8, - width: 8, + height: circleSize, + width: circleSize, }, circleOpen: { borderColor: Kb.Styles.globalColors.grey, - borderRadius: 8 / 2, + borderRadius: circleSize / 2, borderStyle: 'solid', borderWidth: 2, - height: 8, - width: 8, + height: circleSize, + width: circleSize, }, invisible: {opacity: 0}, meta: { @@ -177,6 +181,7 @@ const styles = Kb.Styles.styleSheetCreate( height: 6, width: 2, }, + timelineSpacer: {height: 15}, }) as const ) diff --git a/shared/devices/device-revoke.tsx b/shared/devices/device-revoke.tsx index b7ace9430b14..61b4232cb064 100644 --- a/shared/devices/device-revoke.tsx +++ b/shared/devices/device-revoke.tsx @@ -8,7 +8,7 @@ import {useCurrentUserState} from '@/stores/current-user' import {rpcDeviceDetailToDevice} from './common' import {getDeviceRevokeIconType} from './device-icon' -type OwnProps = {device?: T.Devices.Device; deviceID?: T.Devices.DeviceID} +type DeviceRevokeProps = {device?: T.Devices.Device; deviceID?: T.Devices.DeviceID} const renderTLFEntry = (index: number, tlf: string) => ( @@ -25,7 +25,7 @@ const EndangeredTLFList = (props: {endangeredTLFs: Array}) => { You may lose access to these folders forever: - + {props.endangeredTLFs.map((tlf, index) => renderTLFEntry(index, tlf))} @@ -89,7 +89,7 @@ const useRevoke = (device: T.Devices.Device) => { } } -const DeviceRevoke = (ownProps: OwnProps) => { +const DeviceRevoke = (ownProps: DeviceRevokeProps) => { const loadDeviceHistory = C.useRPC(T.RPCGen.deviceDeviceHistoryListRpcPromise) const navigateUp = C.Router2.navigateUp const selectedDeviceID = ownProps.device?.deviceID ?? ownProps.deviceID ?? T.Devices.stringToDeviceID('') @@ -213,12 +213,10 @@ const styles = Kb.Styles.styleSheetCreate( italicName: {...Kb.Styles.globalStyles.italic}, listContainer: Kb.Styles.platformStyles({ common: { - ...Kb.Styles.globalStyles.flexBoxColumn, alignContent: 'center', ...Kb.Styles.border(Kb.Styles.globalColors.black_10, 1, Kb.Styles.borderRadius), flexGrow: 1, ...Kb.Styles.marginV(Kb.Styles.globalMargins.small), - width: '100%', }, isElectron: {height: 162, width: 440}, }), diff --git a/shared/devices/index.tsx b/shared/devices/index.tsx index fe98e95d96bc..2558d10c1e9a 100644 --- a/shared/devices/index.tsx +++ b/shared/devices/index.tsx @@ -151,10 +151,10 @@ const styles = Kb.Styles.styleSheetCreate( height: isMobile ? 64 : 48, ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, - paperKeyNudgeBorder: Kb.Styles.platformStyles({ + paperKeyNudgeContainer: Kb.Styles.platformStyles({ common: { ...Kb.Styles.border(Kb.Styles.globalColors.black_05, 1, Kb.Styles.borderRadius), - flex: 1, + padding: Kb.Styles.globalMargins.small, }, isElectron: { ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small), @@ -163,14 +163,6 @@ const styles = Kb.Styles.styleSheetCreate( ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall), }, }), - paperKeyNudgeContainer: Kb.Styles.platformStyles({ - common: { - padding: Kb.Styles.globalMargins.small, - }, - isMobile: { - padding: Kb.Styles.globalMargins.tiny, - }, - }), paperKeyNudgeDesc: Kb.Styles.platformStyles({ isElectron: { maxWidth: 450, @@ -187,20 +179,25 @@ const styles = Kb.Styles.styleSheetCreate( ) const PaperKeyNudge = ({onAddDevice}: {onAddDevice: () => void}) => ( - - - - - Create a paper key - - A paper key can be used to access your account in case you lose all your devices. Keep one in a - safe place (like a wallet) to keep your data safe. - - - {!isMobile && Create a paper key} - + + + + Create a paper key + + A paper key can be used to access your account in case you lose all your devices. Keep one in a + safe place (like a wallet) to keep your data safe. + + + {!isMobile && Create a paper key} ) export default ReloadableDevices diff --git a/shared/devices/paper-key.tsx b/shared/devices/paper-key.tsx index 25ab8233a84a..b0f909341bd9 100644 --- a/shared/devices/paper-key.tsx +++ b/shared/devices/paper-key.tsx @@ -38,33 +38,33 @@ const PaperKey = () => { style={styles.container} gap="medium" > - Paper key generated! - - Here is your unique paper key, it will allow you to perform important Keybase tasks in the future. - This is the only time you'll see this so be sure to write it down. - - - {paperkey ? ( - - {paperkey} - - ) : ( - - )} - - - + Paper key generated! + + Here is your unique paper key, it will allow you to perform important Keybase tasks in the future. + This is the only time you'll see this so be sure to write it down. + + + {paperkey ? ( + + {paperkey} + + ) : ( + + )} + + + ) } @@ -78,7 +78,6 @@ const styles = Kb.Styles.styleSheetCreate( maxWidth: isMobile ? undefined : 560, padding: Kb.Styles.globalMargins.medium, }, - intro: {textAlign: 'center'}, keyBox: { backgroundColor: Kb.Styles.globalColors.white, borderColor: Kb.Styles.globalColors.blueDarker, diff --git a/shared/fs/banner/conflict-banner.tsx b/shared/fs/banner/conflict-banner.tsx index 76e9a2b8b76b..499930ccc75b 100644 --- a/shared/fs/banner/conflict-banner.tsx +++ b/shared/fs/banner/conflict-banner.tsx @@ -13,8 +13,7 @@ const ConnectedBanner = (ownProps: OwnProps) => { const {path} = ownProps const errorToActionOrThrow = Kbfs.useFsErrorActionOrThrow() const openPathInSystemFileManagerDesktop = Kbfs.useOpenPathInSystemFileManagerDesktop() - const _tlf = Kbfs.useFsTlf(path) - const navigateAppend = C.Router2.navigateAppend + const tlf = Kbfs.useFsTlf(path) const onFinishResolving = () => { const f = async () => { try { @@ -28,7 +27,7 @@ const ConnectedBanner = (ownProps: OwnProps) => { C.ignorePromise(f()) } const onGoToSamePathInDifferentTlf = (tlfPath: T.FS.Path) => { - navigateAppend({name: 'fsRoot', params: {path: FS.rebasePathToDifferentTlf(path, tlfPath)}}) + C.Router2.navigateAppend({name: 'fsRoot', params: {path: FS.rebasePathToDifferentTlf(path, tlfPath)}}) } const onHelp = () => { void openUrl('https://book.keybase.io/docs/files/details#conflict-resolution') @@ -50,7 +49,7 @@ const ConnectedBanner = (ownProps: OwnProps) => { openPathInSystemFileManagerDesktop(path, errorToActionOrThrow) } - const conflictState = _tlf.conflictState + const conflictState = tlf.conflictState const finishRes = {onClick: onFinishResolving, text: ' Delete this conflict view '} const helpAction = {onClick: onHelp, text: ' What does this mean? '} const startRes = {onClick: onStartResolving, text: ' Resolve conflict '} diff --git a/shared/fs/banner/reset-banner.tsx b/shared/fs/banner/reset-banner.tsx index 6f80ce1056b2..af0e51676182 100644 --- a/shared/fs/banner/reset-banner.tsx +++ b/shared/fs/banner/reset-banner.tsx @@ -11,42 +11,35 @@ type OwnProps = {path: T.FS.Path} const ConnectedBanner = (ownProps: OwnProps) => { const {path} = ownProps - const _tlf = useFsTlf(path) + const tlf = useFsTlf(path) const errorToActionOrThrow = useFsErrorActionOrThrow() - const _onOpenWithoutResetUsers = (currPath: T.FS.Path, users: {[K in string]: boolean}) => { - const pathElems = T.FS.getPathElements(currPath) + const onOpenProfile = (username: string) => () => { + navToProfile(username) + } + const onOpenWithoutResetUsers = () => { + const pathElems = T.FS.getPathElements(path) if (pathElems.length < 3) return + const users = tlf.resetParticipants.reduce>((acc, u) => { + acc[u] = true + return acc + }, {}) const filteredPathName = folderNameWithoutUsers(pathElems[2] ?? '', users) const filteredPath = T.FS.stringToPath(['', pathElems[0], pathElems[1], filteredPathName].join('/')) FS.navToPath(filteredPath) } - const _onReAddToTeam = (id: T.RPCGen.TeamID, username: string) => { + const onReAddToTeam = (username: string) => () => { + if (!tlf.teamId) return + const {teamId} = tlf const f = async () => { try { - await T.RPCGen.teamsTeamReAddMemberAfterResetRpcPromise({id, username}) + await T.RPCGen.teamsTeamReAddMemberAfterResetRpcPromise({id: teamId, username}) } catch (error) { errorToActionOrThrow(error) } } C.ignorePromise(f()) } - - const onOpenProfile = (username: string) => () => { - navToProfile(username) - } - const onOpenWithoutResetUsers = () => - _onOpenWithoutResetUsers( - path, - _tlf.resetParticipants.reduce<{ - [x: string]: boolean - }>((acc, i: string) => { - acc[i] = true - return acc - }, {}) - ) - const onReAddToTeam = (username: string) => () => - _tlf.teamId ? _onReAddToTeam(_tlf.teamId, username) : undefined - const resetParticipants = _tlf.resetParticipants + const resetParticipants = tlf.resetParticipants return ( { switch (background) { case Background.Blue: - return styles.textWhite case Background.Green: + case Background.Black: return styles.textWhite case Background.Yellow: return styles.textBrown - case Background.Black: - return styles.textWhite - default: - return styles.textWhite } } @@ -106,8 +102,6 @@ const backgroundToBackgroundColor = (background: Background) => { return Kb.Styles.globalColors.yellow case Background.Black: return Kb.Styles.globalColors.black - default: - return Kb.Styles.globalColors.black } } diff --git a/shared/fs/browser/destination-picker.tsx b/shared/fs/browser/destination-picker.tsx index 938874c6e49b..fdf3e80584d7 100644 --- a/shared/fs/browser/destination-picker.tsx +++ b/shared/fs/browser/destination-picker.tsx @@ -116,7 +116,7 @@ const ConnectedDestinationPicker = (ownProps: OwnProps) => { FsCommon.useFsOnlineStatus() return ( - + {!isMobile && ( diff --git a/shared/fs/browser/index.tsx b/shared/fs/browser/index.tsx index 9122a746ab98..a5373a2ec303 100644 --- a/shared/fs/browser/index.tsx +++ b/shared/fs/browser/index.tsx @@ -24,7 +24,7 @@ type OwnProps = { } const Container = (ownProps: OwnProps) => { -const {path} = ownProps + const {path} = ownProps const filter = useModalHeaderState(s => s.folderViewFilter) const _pathItem = useFsPathItem(path) const tlf = useFsTlf(path) diff --git a/shared/fs/browser/offline.tsx b/shared/fs/browser/offline.tsx index 3a298d641b7f..8316e87e2761 100644 --- a/shared/fs/browser/offline.tsx +++ b/shared/fs/browser/offline.tsx @@ -5,26 +5,28 @@ import {useFsTlf} from '../common' type Props = { path: T.FS.Path - syncEnabled: boolean } -const OfflineFolder = (props: Props) => ( - - - - - - {props.syncEnabled - ? 'This folder will sync once you get back online.' - : "You haven't synced this folder."} - +const OfflineFolder = ({path}: Props) => { + const syncEnabled = useFsTlf(path).syncConfig.mode === T.FS.TlfSyncMode.Enabled + return ( + + + + + + {syncEnabled + ? 'This folder will sync once you get back online.' + : "You haven't synced this folder."} + + - -) + ) +} const styles = Kb.Styles.styleSheetCreate( () => @@ -36,14 +38,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -type OwnProps = { - path: T.FS.Path -} - -const Container = (ownProps: OwnProps) => { - const {path} = ownProps - const syncConfig = useFsTlf(path).syncConfig - return -} - -export default Container +export default OfflineFolder diff --git a/shared/fs/browser/rows/editing.tsx b/shared/fs/browser/rows/editing.tsx index 17a881ee100f..aa321745b5b7 100644 --- a/shared/fs/browser/rows/editing.tsx +++ b/shared/fs/browser/rows/editing.tsx @@ -10,14 +10,8 @@ type Props = { function Editing({editSession}: Props) { const {commitEdit, discardEdit, edit} = editSession - const onCancel = () => { - discardEdit() - } - const onSubmit = () => { - commitEdit() - } const onKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Escape') onCancel() + if (event.key === 'Escape') discardEdit() } return ( { Upload has failed.{' '} { e.stopPropagation() dismissUploadError() @@ -98,8 +98,4 @@ const StillContainer = (p: OwnProps) => { ) } -const styles = Kb.Styles.styleSheetCreate(() => ({ - redDark: {color: Kb.Styles.globalColors.redDark}, -})) - export default StillContainer diff --git a/shared/fs/browser/rows/tlf.tsx b/shared/fs/browser/rows/tlf.tsx index 3d6156721a61..c88c609dfeb5 100644 --- a/shared/fs/browser/rows/tlf.tsx +++ b/shared/fs/browser/rows/tlf.tsx @@ -18,7 +18,7 @@ const TLFContainer = (p: OwnProps) => { const {tlfType, name, mixedMode, destinationPickerSource, disabled} = p const username = useCurrentUserState(s => s.username) const path = FS.tlfTypeAndNameToPath(tlfType, name) - const _usernames = FS.getUsernamesFromTlfName(name).filter(name => name !== username) + const _usernames = FS.getUsernamesFromTlfName(name).filter(u => u !== username) const onOpen = useOpen({destinationPickerSource, path}) // Only include the user if they're the only one const usernames = !_usernames.length ? [username] : _usernames diff --git a/shared/fs/browser/sort-state.tsx b/shared/fs/browser/sort-state.tsx index eab7783e5401..84edb03fb13a 100644 --- a/shared/fs/browser/sort-state.tsx +++ b/shared/fs/browser/sort-state.tsx @@ -27,7 +27,7 @@ export const FsBrowserSortProvider = ({children}: {children: React.ReactNode}) = const username = useCurrentUserState(s => s.username) const usernameRef = React.useRef(username) const [sortSettings, setSortSettings] = React.useState>( - () => new Map() + () => new Map() ) React.useEffect(() => { @@ -35,7 +35,7 @@ export const FsBrowserSortProvider = ({children}: {children: React.ReactNode}) = return } usernameRef.current = username - setSortSettings(new Map()) + setSortSettings(new Map()) }, [username]) const setSortSetting = (path: T.FS.Path, sortSetting: T.FS.SortSetting) => { diff --git a/shared/fs/common/folder-view-filter-icon.tsx b/shared/fs/common/folder-view-filter-icon.tsx index b5cf46503c4e..b609d8554e42 100644 --- a/shared/fs/common/folder-view-filter-icon.tsx +++ b/shared/fs/common/folder-view-filter-icon.tsx @@ -6,21 +6,14 @@ import * as FS from '@/constants/fs' type Props = { onClick: () => void path: T.FS.Path - pathItem: T.FS.PathItem style?: Kb.Styles.StylesCrossPlatform } -const FolderViewFilterIcon = (props: Props) => - FS.isFolder(props.path, props.pathItem) && T.FS.getPathLevel(props.path) > 1 ? ( +const FolderViewFilterIcon = (props: Props) => { + const pathItem = useFsPathItem(props.path) + return FS.isFolder(props.path, pathItem) && T.FS.getPathLevel(props.path) > 1 ? ( ) : null - -type OwnProps = Omit - -const Container = (ownProps: OwnProps) => { - const {path} = ownProps - const pathItem = useFsPathItem(path) - return } -export default Container +export default FolderViewFilterIcon diff --git a/shared/fs/common/hooks.tsx b/shared/fs/common/hooks.tsx index e5c3e9108cbf..82e2f74f5ab3 100644 --- a/shared/fs/common/hooks.tsx +++ b/shared/fs/common/hooks.tsx @@ -827,9 +827,6 @@ export const useFsPathMetadata = (path: T.FS.Path, _options?: FsPathItemOptions) export const useFsFolderChildren = (path: T.FS.Path, _options?: {initialLoadRecursive?: boolean}) => FS.getPathItem(useLoadedPathItems(), path) -export const useFsChildren = (path: T.FS.Path, initialLoadRecursive?: boolean) => - useFsFolderChildren(path, {initialLoadRecursive}) - export const useFsFolderChildItems = ( path: T.FS.Path, options?: { diff --git a/shared/fs/common/path-item-action/confirm-delete.tsx b/shared/fs/common/path-item-action/confirm-delete.tsx index 5d7bfd35822f..cefc701812ee 100644 --- a/shared/fs/common/path-item-action/confirm-delete.tsx +++ b/shared/fs/common/path-item-action/confirm-delete.tsx @@ -5,35 +5,14 @@ import * as FS from '@/constants/fs' import {makeUUID} from '@/util/uuid' import {useFsErrorActionOrThrow} from '../error-state' -export type Props = { - onBack: () => void - onDelete: () => void - path: T.FS.Path - title: string -} - -const ReallyDeleteFile = (props: Props) => - props.path ? ( - } - onCancel={props.onBack} - onConfirm={props.onDelete} - prompt={`Are you sure you want to delete "${T.FS.getPathName(props.path)}"?`} - /> - ) : null - -type OwnProps = { +type Props = { path: T.FS.Path mode: 'row' | 'screen' } -const Container = (ownProps: OwnProps) => { - const {path, mode} = ownProps +const ConfirmDelete = ({path, mode}: Props) => { const errorToActionOrThrow = useFsErrorActionOrThrow() const navigateUp = C.Router2.navigateUp - const onBack = navigateUp const onDelete = () => { if (path !== FS.defaultPath) { const f = async () => { @@ -60,13 +39,16 @@ const Container = (ownProps: OwnProps) => { navigateUp() } } - const props = { - onBack, - onDelete, - path, - title: 'Confirmation', - } - return + return path ? ( + } + onCancel={navigateUp} + onConfirm={onDelete} + prompt={`Are you sure you want to delete "${T.FS.getPathName(path)}"?`} + /> + ) : null } -export default Container +export default ConfirmDelete diff --git a/shared/fs/common/path-status-icon.tsx b/shared/fs/common/path-status-icon.tsx index 8de7dfe28031..0c96e1d81e96 100644 --- a/shared/fs/common/path-status-icon.tsx +++ b/shared/fs/common/path-status-icon.tsx @@ -78,7 +78,7 @@ function PathStatusIcon(props: Props) { > {typeof props.statusIcon === 'number' ? ( - + ) : props.statusIcon === T.FS.UploadIcon.AwaitingToUpload || props.statusIcon === T.FS.UploadIcon.Uploading || diff --git a/shared/fs/common/pie-slice.tsx b/shared/fs/common/pie-slice.tsx index e1f9592cb15b..7321984576de 100644 --- a/shared/fs/common/pie-slice.tsx +++ b/shared/fs/common/pie-slice.tsx @@ -35,18 +35,9 @@ const Slice = (props: Props) => { ) } -const AnimatedPieSlice = (props: Props) => { - const {degrees} = props - return -} - -const PieSlice = (props: Props) => { - return props.animated ? ( - - ) : ( - - ) -} +const PieSlice = (props: Props) => ( + +) const pieSize = isMobile ? 16 : 12 const pieHalfSize = isMobile ? 8 : 6 const stylePieHalf = { diff --git a/shared/fs/common/rpc-state.tsx b/shared/fs/common/rpc-state.tsx index 9aefc8790a45..78d79b5d9033 100644 --- a/shared/fs/common/rpc-state.tsx +++ b/shared/fs/common/rpc-state.tsx @@ -68,7 +68,7 @@ const rpcFolderTypeToTlfType = (rpcFolderType: T.RPCGen.FolderType) => { } } -const rpcPathToPath = (rpcPath: T.RPCGen.KBFSPath) => T.FS.pathConcat(FS.defaultPath, rpcPath.path) +export const rpcPathToPath = (rpcPath: T.RPCGen.KBFSPath) => T.FS.pathConcat(FS.defaultPath, rpcPath.path) const rpcConflictStateToConflictState = (rpcConflictState?: T.RPCGen.ConflictState): T.FS.ConflictState => { if (rpcConflictState) { diff --git a/shared/fs/common/status.tsx b/shared/fs/common/status.tsx index ba535d0b3fb2..1d98869ee864 100644 --- a/shared/fs/common/status.tsx +++ b/shared/fs/common/status.tsx @@ -9,6 +9,7 @@ import isEqual from 'lodash/isEqual' import {clientID as fsClientID, makeUUID} from './client' import {FsDaemonProvider, useFsDaemonActions, useKbfsDaemonStatus} from './daemon' import {useFsErrorActionOrThrow} from './error-state' +import {rpcPathToPath} from './rpc-state' type FsStatusState = { generation: number @@ -38,8 +39,6 @@ const emptyFsStatusState = makeInitialFsStatusState() const FsOverallSyncStatusContext = React.createContext(undefined) const FsUploadStatusContext = React.createContext(undefined) -const rpcPathToPath = (rpcPath: T.RPCGen.KBFSPath) => T.FS.pathConcat(Constants.defaultPath, rpcPath.path) - const unsubscribe = (subscriptionID: string) => { C.ignorePromise( T.RPCGen.SimpleFSSimpleFSUnsubscribeRpcPromise({ diff --git a/shared/fs/footer/upload-container.tsx b/shared/fs/footer/upload-container.tsx index 530cbc9f5937..5de75422fb42 100644 --- a/shared/fs/footer/upload-container.tsx +++ b/shared/fs/footer/upload-container.tsx @@ -4,21 +4,14 @@ import {useUploadCountdown} from './use-upload-countdown' import {useFsUploadStatus, useKbfsDaemonStatus} from '../common' import {useNonFolderSyncingPaths} from '../common/use-non-folder-syncing-paths' -const UpoadContainer = () => { +const UploadContainer = () => { const kbfsDaemonStatus = useKbfsDaemonStatus() const uploads = useFsUploadStatus() - // We just use syncingPaths rather than merging with writingToJournal here - // since journal status comes a bit slower, and merging the two causes - // flakes on our perception of overall upload status. - // Filter out folder paths. const filePaths = useNonFolderSyncingPaths(uploads.syncingPaths) const np = useUploadCountdown({ - // We just use syncingPaths rather than merging with writingToJournal here - // since journal status comes a bit slower, and merging the two causes - // flakes on our perception of overall upload status. endEstimate: uploads.endEstimate || 0, fileName: filePaths.length === 1 ? T.FS.getPathName(filePaths[0] || T.FS.stringToPath('')) : undefined, files: filePaths.length, @@ -28,4 +21,4 @@ const UpoadContainer = () => { return } -export default UpoadContainer +export default UploadContainer diff --git a/shared/fs/nav-header/main-banner.tsx b/shared/fs/nav-header/main-banner.tsx index 9f71a709ef4f..802747c7cb41 100644 --- a/shared/fs/nav-header/main-banner.tsx +++ b/shared/fs/nav-header/main-banner.tsx @@ -54,13 +54,13 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ })) const ConnectedBanner = () => { - const _kbfsDaemonStatus = useKbfsDaemonStatus() - const _overallSyncStatus = useFsOverallSyncStatus() - const _name = useCurrentUserState(s => s.username) + const kbfsDaemonStatus = useKbfsDaemonStatus() + const overallSyncStatus = useFsOverallSyncStatus() + const name = useCurrentUserState(s => s.username) const errorToActionOrThrow = useFsErrorActionOrThrow() // Stat'ing the path nudges the service to retry sync. const onRetry = () => { - const path = T.FS.stringToPath('/keybase/private/' + _name) + const path = T.FS.stringToPath('/keybase/private/' + name) const f = async () => { try { await T.RPCGen.SimpleFSSimpleFSStatRpcPromise({ @@ -74,11 +74,7 @@ const ConnectedBanner = () => { C.ignorePromise(f()) } - const props = { - bannerType: FS.getMainBannerType(_kbfsDaemonStatus, _overallSyncStatus), - onRetry, - } - return + return } export default ConnectedBanner diff --git a/shared/fs/nav-header/title.tsx b/shared/fs/nav-header/title.tsx index 9be1f4bbee8c..8322bae4e427 100644 --- a/shared/fs/nav-header/title.tsx +++ b/shared/fs/nav-header/title.tsx @@ -98,11 +98,7 @@ const Breadcrumb = (props: Props) => { } const MaybePublicTag = ({path}: {path: T.FS.Path}) => - FS.hasPublicTag(path) ? ( - - - - ) : null + FS.hasPublicTag(path) ? : null const MainTitle = (props: Props) => ( diff --git a/shared/fs/top-bar/sort.tsx b/shared/fs/top-bar/sort.tsx index 1416c200d9c4..e49559a2b255 100644 --- a/shared/fs/top-bar/sort.tsx +++ b/shared/fs/top-bar/sort.tsx @@ -28,7 +28,7 @@ const makeSortOptionItem = (sortSetting: T.FS.SortSetting, onClick?: () => void) title: getTextFromSortSetting(sortSetting), }) -const Container = (ownProps: OwnProps) => { +const Sort = (ownProps: OwnProps) => { const {path} = ownProps const pathItem = useFsPathItem(path) const {setSortSetting, sortSetting} = useFsBrowserSort(path) @@ -37,30 +37,10 @@ const Container = (ownProps: OwnProps) => { const shownSortSetting = FS.showSortSetting(path, pathItem, kbfsDaemonStatus) ? sortSetting : undefined const makePopup = (p: Kb.Popup2Parms) => { const {attachTo, hidePopup} = p - const sortByNameAsc = - path === FS.defaultPath - ? undefined - : () => { - setSortSetting(path, T.FS.SortSetting.NameAsc) - } - const sortByNameDesc = - path === FS.defaultPath - ? undefined - : () => { - setSortSetting(path, T.FS.SortSetting.NameDesc) - } - const sortByTimeAsc = - path === FS.defaultPath - ? undefined - : () => { - setSortSetting(path, T.FS.SortSetting.TimeAsc) - } - const sortByTimeDesc = - path === FS.defaultPath - ? undefined - : () => { - setSortSetting(path, T.FS.SortSetting.TimeDesc) - } + const isRoot = path === FS.defaultPath + const sortSettings: Array = isRoot + ? [] + : [T.FS.SortSetting.NameAsc, T.FS.SortSetting.NameDesc, T.FS.SortSetting.TimeAsc, T.FS.SortSetting.TimeDesc] return ( { onHidden={hidePopup} position="bottom left" closeOnSelect={true} - items={[ - ...(sortByNameAsc ? [makeSortOptionItem(T.FS.SortSetting.NameAsc, sortByNameAsc)] : []), - ...(sortByNameDesc ? [makeSortOptionItem(T.FS.SortSetting.NameDesc, sortByNameDesc)] : []), - ...(sortByTimeAsc ? [makeSortOptionItem(T.FS.SortSetting.TimeAsc, sortByTimeAsc)] : []), - ...(sortByTimeDesc ? [makeSortOptionItem(T.FS.SortSetting.TimeDesc, sortByTimeDesc)] : []), - ]} + items={sortSettings.map(s => makeSortOptionItem(s, () => setSortSetting(path, s)))} /> ) } @@ -98,4 +73,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default Sort diff --git a/shared/fs/top-bar/sync-toggle.tsx b/shared/fs/top-bar/sync-toggle.tsx index 983d059c50ec..7a1f7e433d84 100644 --- a/shared/fs/top-bar/sync-toggle.tsx +++ b/shared/fs/top-bar/sync-toggle.tsx @@ -9,7 +9,7 @@ type OwnProps = { tlfPath: T.FS.Path } -const Container = (ownProps: OwnProps) => { +const SyncToggle = (ownProps: OwnProps) => { const {tlfPath} = ownProps const tlfPathItem = useFsFolderChildren(tlfPath) const tlf = useFsTlf(tlfPath) @@ -180,4 +180,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default SyncToggle diff --git a/shared/git/delete-repo.tsx b/shared/git/delete-repo.tsx index c35920f0b3d4..ab7a31a8c5fc 100644 --- a/shared/git/delete-repo.tsx +++ b/shared/git/delete-repo.tsx @@ -8,7 +8,7 @@ type OwnProps = { teamname?: string } -const Container = (ownProps: OwnProps) => { +const DeleteRepo = (ownProps: OwnProps) => { const _name = ownProps.name const teamname = ownProps.teamname ?? '' const [error, setError] = React.useState('') @@ -18,33 +18,21 @@ const Container = (ownProps: OwnProps) => { const deleteTeamRepo = C.useRPC(T.RPCGen.gitDeleteTeamRepoRpcPromise) const navigateUp = C.Router2.navigateUp - const _onDelete = (teamname: string | undefined, name: string, notifyTeam: boolean) => { + const onDelete = (notifyTeam: boolean) => { if (teamname) { deleteTeamRepo( - [{notifyTeam, repoName: name, teamName: {parts: teamname.split('.')}}, waitingKey], - () => { - navigateUp() - }, - err => { - setError(err.message) - } + [{notifyTeam, repoName: _name, teamName: {parts: teamname.split('.')}}, waitingKey], + navigateUp, + err => setError(err.message) ) } else { deletePersonalRepo( - [{repoName: name}, waitingKey], - () => { - navigateUp() - }, - err => { - setError(err.message) - } + [{repoName: _name}, waitingKey], + navigateUp, + err => setError(err.message) ) } } - const onClose = () => { - navigateUp() - } - const onDelete = (notifyTeam: boolean) => _onDelete(teamname, _name, notifyTeam) const [name, setName] = React.useState('') const [notifyTeam, setNotifyTeam] = React.useState(true) @@ -68,80 +56,69 @@ const Container = (ownProps: OwnProps) => { } } return ( - <> - - - {!!error && ( - - - {error} - - - )} - - Are you sure you want to delete this {teamname ? 'team ' : ''} - repository? - - - - {!!teamname && ( - - )} - - {teamname ? `${teamname}/${_name}` : _name} - - - - {teamname - ? 'This will permanently delete your remote files and history, and all members of the team will be notified. This action cannot be undone.' - : 'This will permanently delete your remote files and history. This action cannot be undone.'} - - - Enter the name of the repository to confirm: - - + + + {!!error && {error}} + + Are you sure you want to delete this {teamname ? 'team ' : ''} + repository? + + + {!!teamname && ( - )} - - - - + + {teamname ? `${teamname}/${_name}` : _name} + - - + + {teamname + ? 'This will permanently delete your remote files and history, and all members of the team will be notified. This action cannot be undone.' + : 'This will permanently delete your remote files and history. This action cannot be undone.'} + + + Enter the name of the repository to confirm: + + + {!!teamname && ( + + )} + + + + + + ) } @@ -150,6 +127,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ marginBottom: Kb.Styles.globalMargins.medium, }, buttonBar: {alignItems: 'center'}, + cancelButton: {marginRight: Kb.Styles.globalMargins.tiny}, checkbox: { alignSelf: 'flex-start', ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny), @@ -173,12 +151,10 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ padding: Kb.Styles.globalMargins.small, }, }), - error: { - alignSelf: 'stretch', - backgroundColor: Kb.Styles.globalColors.red, - marginBottom: Kb.Styles.globalMargins.small, - padding: Kb.Styles.globalMargins.tiny, - }, + headerText: {marginBottom: 27}, + repoName: {color: Kb.Styles.globalColors.redDark, textDecorationLine: 'line-through'}, + teamAvatar: {marginRight: Kb.Styles.globalMargins.xtiny}, + warningText: {marginBottom: Kb.Styles.globalMargins.medium}, })) -export default Container +export default DeleteRepo diff --git a/shared/git/index.tsx b/shared/git/index.tsx index 265c2595910a..5219bbd67bba 100644 --- a/shared/git/index.tsx +++ b/shared/git/index.tsx @@ -93,8 +93,8 @@ type ExpandedState = { expandedSet: Set } -const Container = (ownProps: OwnProps) => { -const loading = C.Waiting.useAnyWaiting(C.waitingKeyGitLoading) +const GitRoot = (ownProps: OwnProps) => { + const loading = C.Waiting.useAnyWaiting(C.waitingKeyGitLoading) const loadGit = C.useRPC(T.RPCGen.gitGetAllGitMetadataRpcPromise) const clearGitBadges = C.useRPC(T.RPCGen.gregorDismissCategoryRpcPromise) const [error, setError] = React.useState() @@ -194,10 +194,10 @@ const loading = C.Waiting.useAnyWaiting(C.waitingKeyGitLoading) {!!error && {error.message}} {isMobile && ( - + @@ -238,10 +238,10 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ header: { - flexShrink: 0, height: 48, }, + newIcon: {marginRight: Kb.Styles.globalMargins.tiny}, }) as const ) -export default Container +export default GitRoot diff --git a/shared/git/new-repo.tsx b/shared/git/new-repo.tsx index 15c352da6711..802b2393e717 100644 --- a/shared/git/new-repo.tsx +++ b/shared/git/new-repo.tsx @@ -9,7 +9,7 @@ import {useTeamsList} from '@/teams/use-teams-list' type OwnProps = {isTeam: boolean} const NewTeamSentry = '---NewTeam---' -const Container = (ownProps: OwnProps) => { +const NewRepo = (ownProps: OwnProps) => { const {isTeam} = ownProps const [error, setError] = React.useState('') const {teams: loadedTeams} = useTeamsList() @@ -17,31 +17,21 @@ const Container = (ownProps: OwnProps) => { () => loadedTeams.map(team => team.teamname).sort(Teams.sortTeamnames), [loadedTeams] ) - const waitingKey = C.waitingKeyGitLoading const navigateUp = C.Router2.navigateUp const createPersonalRepo = C.useRPC(T.RPCGen.gitCreatePersonalRepoRpcPromise) const createTeamRepo = C.useRPC(T.RPCGen.gitCreateTeamRepoRpcPromise) - const onClose = navigateUp const onCreate = (name: string, teamname: string, notifyTeam: boolean) => { if (isTeam && teamname) { createTeamRepo( - [{notifyTeam, repoName: name, teamName: {parts: teamname.split('.')}}, waitingKey], - () => { - navigateUp() - }, - err => { - setError(err.message) - } + [{notifyTeam, repoName: name, teamName: {parts: teamname.split('.')}}, C.waitingKeyGitLoading], + navigateUp, + err => setError(err.message) ) } else { createPersonalRepo( - [{repoName: name}, waitingKey], - () => { - navigateUp() - }, - err => { - setError(err.message) - } + [{repoName: name}, C.waitingKeyGitLoading], + navigateUp, + err => setError(err.message) ) } } @@ -61,7 +51,7 @@ const Container = (ownProps: OwnProps) => { const makeDropdownItem = (item?: string) => { if (!item) { return ( - + Pick a team ) @@ -69,16 +59,9 @@ const Container = (ownProps: OwnProps) => { if (item === NewTeamSentry) { return ( - - New team... - + + New team... + ) } @@ -88,22 +71,9 @@ const Container = (ownProps: OwnProps) => { isTeam={true} teamname={item} size={16} - style={{marginRight: Kb.Styles.globalMargins.tiny}} + style={styles.teamAvatar} /> - + {item} @@ -128,76 +98,67 @@ const Container = (ownProps: OwnProps) => { return name && !(isTeam && !selectedTeam) } return ( - <> - - - {!!error && ( - - - {error} - - - )} - - New {isTeam ? 'team' : 'personal'} git repository - - + + {!!error && {error}} + + New {isTeam ? 'team' : 'personal'} git repository + + + + {isTeam + ? 'Your repository will be end-to-end encrypted and accessible by all members in the team.' + : 'Your repository will be encrypted and only accessible by you.'} + + {isTeam && ( + - - {isTeam - ? 'Your repository will be end-to-end encrypted and accessible by all members in the team.' - : 'Your repository will be encrypted and only accessible by you.'} - - {isTeam && ( - - )} - + {isTeam && ( + - {isTeam && ( - - )} - - - - - - - + )} + + + + + + ) } const styles = Kb.Styles.styleSheetCreate( () => ({ - addIcon: {marginBottom: 27}, avatarBox: { paddingLeft: Kb.Styles.globalMargins.xsmall, paddingRight: Kb.Styles.globalMargins.small, @@ -225,16 +186,21 @@ const styles = Kb.Styles.styleSheetCreate( marginBottom: Kb.Styles.globalMargins.small, width: '100%', }, - dropdownItem: { - paddingLeft: Kb.Styles.globalMargins.xsmall, - }, - error: { - alignSelf: 'stretch', - backgroundColor: Kb.Styles.globalColors.red, - marginBottom: Kb.Styles.globalMargins.small, - padding: Kb.Styles.globalMargins.tiny, - }, + marginBottom27: {marginBottom: 27}, + newTeamItem: {paddingLeft: Kb.Styles.globalMargins.small}, + teamAvatar: {marginRight: Kb.Styles.globalMargins.tiny}, + teamName: Kb.Styles.platformStyles({ + common: { + overflow: 'hidden', + width: '100%', + }, + isElectron: { + display: 'block', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }, + }), }) as const ) -export default Container +export default NewRepo diff --git a/shared/git/row.tsx b/shared/git/row.tsx index b978267b4a57..508e738f16a9 100644 --- a/shared/git/row.tsx +++ b/shared/git/row.tsx @@ -106,14 +106,14 @@ function ConnectedRow(ownProps: OwnProps) { } const canEdit = canDelete && !!teamname - // TODO use ListItem return ( - + <> - - - - {teamname ? `${teamname}/${name}` : name} - - {isNew && ( - - )} + + + + {teamname ? `${teamname}/${name}` : name} + + {isNew && ( + + )} {expanded && ( @@ -155,13 +155,11 @@ function ConnectedRow(ownProps: OwnProps) { fullWidth={true} alignItems="center" relative={true} - style={{ - maxWidth: '100%', - }} + style={styles.cloneRow} > Clone: - + {`Last push ${lastEditTime}${!!teamname && !!lastEditUser ? ' by ' : ''}`} @@ -181,19 +176,18 @@ function ConnectedRow(ownProps: OwnProps) { )} {!!teamname && !!lastEditUser && ( - - openUserProfile(lastEditUser)} - /> - + openUserProfile(lastEditUser)} + containerStyle={styles.usernameContainer} + /> )} {isMobile && . } @@ -241,7 +235,7 @@ function ConnectedRow(ownProps: OwnProps) { - + ) } const styles = Kb.Styles.styleSheetCreate( () => ({ + actionRow: {marginTop: Kb.Styles.globalMargins.tiny}, + cloneRow: {maxWidth: '100%'}, + copyTextWidth: {width: '100%'}, containerMobile: Kb.Styles.platformStyles({ isMobile: { ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), @@ -319,6 +316,14 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.blueLighter3, height: 6, }, + lastEditAvatar: Kb.Styles.platformStyles({ + isElectron: {marginLeft: 4}, + }), + lastPushRow: { + flexWrap: 'wrap', + marginTop: Kb.Styles.globalMargins.tiny, + }, + repoName: {color: Kb.Styles.globalColors.black}, iconCaret: Kb.Styles.platformStyles({ common: { marginBottom: 2, @@ -345,8 +350,8 @@ const styles = Kb.Styles.styleSheetCreate( paddingTop: Kb.Styles.globalMargins.tiny, }, + usernameContainer: {marginLeft: 2}, rowStyle: { - flexShrink: 0, minHeight: Kb.Styles.globalMargins.large, paddingLeft: 0, }, diff --git a/shared/git/select-channel.tsx b/shared/git/select-channel.tsx index b79df5e68f8f..6f2c5b388fe7 100644 --- a/shared/git/select-channel.tsx +++ b/shared/git/select-channel.tsx @@ -1,9 +1,9 @@ -import {useSafeNavigation} from '@/util/safe-navigation' import * as Kb from '@/common-adapters' import * as React from 'react' import * as C from '@/constants' import * as T from '@/constants/types' import {useAllChannelMetas} from '../teams/common/channel-hooks' +import {useSafeNavigation} from '@/util/safe-navigation' type OwnProps = { teamID: T.Teams.TeamID @@ -21,7 +21,7 @@ const SelectChannel = (ownProps: OwnProps) => { const channelNames = [...channelMetas.values()].map(info => info.channelname) const [selected, setSelected] = React.useState(_selected) const [error, setError] = React.useState('') - const nav = useSafeNavigation() + const {safeNavigateUp} = useSafeNavigation() const setTeamRepoSettings = C.useRPC(T.RPCGen.gitSetTeamRepoSettingsRpcPromise) const onSubmit = (channelName: string) => setTeamRepoSettings( @@ -39,20 +39,19 @@ const SelectChannel = (ownProps: OwnProps) => { C.waitingKeyGitLoading, ], () => { - nav.safeNavigateUp() + safeNavigateUp() }, err => { setError(err.message) } ) - const onCancel = () => nav.safeNavigateUp() + const onCancel = () => C.Router2.navigateUp() const submit = () => { setError('') onSubmit(selected) } - // TODO: this modal could use a little bit of love return ( diff --git a/shared/incoming-share/index.tsx b/shared/incoming-share/index.tsx index 1eaf7f218382..482502b65682 100644 --- a/shared/incoming-share/index.tsx +++ b/shared/incoming-share/index.tsx @@ -29,14 +29,12 @@ export const OriginalOrCompressedButton = ({incomingShareItems}: IncomingSharePr .catch(() => {}) } - // If it's original only, set original in store. React.useEffect(() => { if (originalOnly) { setUseOriginalInStore(true) } }, [originalOnly, setUseOriginalInStore]) - // From service to store, but only if this is not original only. const getRPC = C.useRPC(T.RPCGen.incomingShareGetPreferenceRpcPromise) React.useEffect(() => { if (!originalOnly) { @@ -250,7 +248,7 @@ const IncomingShare = (props: IncomingShareWithSelectionProps) => { return ( <> - + @@ -288,7 +286,6 @@ const useIncomingShareItems = () => { >([]) const [incomingShareError, setIncomingShareError] = React.useState(undefined) - // iOS const rpc = C.useRPC(T.RPCGen.incomingShareGetIncomingShareItemsRpcPromise) React.useEffect(() => { if (!isIOS) { @@ -302,7 +299,6 @@ const useIncomingShareItems = () => { ) }, [rpc, setIncomingShareError, setIncomingShareItems]) - // Android const androidShare = useConfigState(s => s.androidShare) const androidShareItems = isAndroid && androidShare diff --git a/shared/login/forms/container.tsx b/shared/login/forms/container.tsx index 883fc430a21c..3cd73310ad7a 100644 --- a/shared/login/forms/container.tsx +++ b/shared/login/forms/container.tsx @@ -2,7 +2,6 @@ import type * as React from 'react' import * as Kb from '@/common-adapters' type Props = { - onBack?: () => void children?: React.ReactNode style?: Kb.Styles.StylesCrossPlatform outerStyle?: Kb.Styles.StylesCrossPlatform diff --git a/shared/login/join-or-login.tsx b/shared/login/join-or-login.tsx index 7688aab82166..0ff57906eb7f 100644 --- a/shared/login/join-or-login.tsx +++ b/shared/login/join-or-login.tsx @@ -17,22 +17,15 @@ const Intro = () => { const isOnline = useConfigState(s => s.isOnline) const loadIsOnline = useConfigState(s => s.dispatch.loadIsOnline) - - const navigateAppend = C.Router2.navigateAppend - const checkIsOnline = loadIsOnline const startProvision = useProvisionState(s => s.dispatch.startProvision) - const onLogin = () => { - startProvision() - } const requestAutoInvite = useRequestAutoInvite() - const onSignup = () => { - requestAutoInvite() - } + const onLogin = () => startProvision() + const onSignup = () => requestAutoInvite() const showProxySettings = () => { - navigateAppend({name: 'proxySettingsModal', params: {}}) + C.Router2.navigateAppend({name: 'proxySettingsModal', params: {}}) } const [showing, setShowing] = React.useState(true) - Kb.useInterval(checkIsOnline, showing ? 5000 : undefined) + Kb.useInterval(loadIsOnline, showing ? 5000 : undefined) C.Router2.useSafeFocusEffect(() => { setShowing(true) diff --git a/shared/login/loading.tsx b/shared/login/loading.tsx index e4dcf75204b5..4310fa3d4a3e 100644 --- a/shared/login/loading.tsx +++ b/shared/login/loading.tsx @@ -7,8 +7,6 @@ const SplashContainer = () => { const failedReason = useDaemonState(s => s.handshakeFailedReason) const retriesLeft = useDaemonState(s => s.handshakeRetriesLeft) const startHandshake = useDaemonState(s => s.dispatch.startHandshake) - const navigateAppend = C.Router2.navigateAppend - let status = '' let failed = '' @@ -25,7 +23,7 @@ const SplashContainer = () => { const onFeedback = isMobile ? () => { - navigateAppend({name: 'feedback', params: {}}) + C.Router2.navigateAppend({name: 'feedback', params: {}}) } : undefined const onRetry = retriesLeft === 0 ? startHandshake : undefined @@ -52,7 +50,7 @@ export const Splash = (p: SplashProps) => { }, []) return ( - + {!!status && {status}} @@ -87,11 +85,4 @@ const Feedback = ({onFeedback}: {onFeedback?: () => void}) => ) -const styles = Kb.Styles.styleSheetCreate( - () => - ({ - container: {alignItems: 'center'}, - }) as const -) - export default SplashContainer diff --git a/shared/login/recover-password/device-selector.tsx b/shared/login/recover-password/device-selector.tsx index 6f0ad7c36000..f8bd65e443be 100644 --- a/shared/login/recover-password/device-selector.tsx +++ b/shared/login/recover-password/device-selector.tsx @@ -10,23 +10,15 @@ type Props = {route: {params: {devices: ReadonlyArray}}} const RecoverPasswordDeviceSelector = ({route}: Props) => { const {devices} = route.params - const onBack = () => { - cancelRecoverPassword() - } - const onResetAccount = () => { - submitRecoverPasswordNoDevice() - } - const onSelect = (name: string) => { - submitRecoverPasswordDeviceSelect(devices.find(device => device.name === name)?.id) - } - const props = { - devices, - onBack, - onResetAccount, - onSelect, - passwordRecovery: true, - } - return + return ( + submitRecoverPasswordDeviceSelect(devices.find(d => d.name === name)?.id)} + passwordRecovery={true} + /> + ) } export default RecoverPasswordDeviceSelector diff --git a/shared/login/recover-password/error-modal.tsx b/shared/login/recover-password/error-modal.tsx index f9ed4051e39f..cfad4663d846 100644 --- a/shared/login/recover-password/error-modal.tsx +++ b/shared/login/recover-password/error-modal.tsx @@ -22,13 +22,11 @@ type Props = {route: {params: {error: string}}} const ConnectedErrorModal = ({route}: Props) => { const loggedIn = useConfigState(s => s.loggedIn) const {error} = route.params - const popStack = C.Router2.popStack - const navigateUp = C.Router2.navigateUp const onBack = () => { if (loggedIn) { - navigateUp() + C.Router2.navigateUp() } else { - popStack() + C.Router2.popStack() } } diff --git a/shared/login/recover-password/error.tsx b/shared/login/recover-password/error.tsx index 370181f9d9db..10773ce68bf4 100644 --- a/shared/login/recover-password/error.tsx +++ b/shared/login/recover-password/error.tsx @@ -9,13 +9,11 @@ type Props = {route: {params: {error: string}}} const ConnectedError = ({route}: Props) => { const loggedIn = useConfigState(s => s.loggedIn) const {error} = route.params - const popStack = C.Router2.popStack - const navigateUp = C.Router2.navigateUp const onBack = () => { if (loggedIn) { - navigateUp() + C.Router2.navigateUp() } else { - popStack() + C.Router2.popStack() } } return ( diff --git a/shared/login/recover-password/explain-device.tsx b/shared/login/recover-password/explain-device.tsx index e918de4a0cee..b93a45ce4f62 100644 --- a/shared/login/recover-password/explain-device.tsx +++ b/shared/login/recover-password/explain-device.tsx @@ -15,9 +15,8 @@ const ConnectedExplainDevice = ({route}: Props) => { username, }) } - const navigateUp = C.Router2.navigateUp const onComplete = () => { - navigateUp() + C.Router2.navigateUp() } const explainingMobile = deviceType === T.RPCGen.DeviceType.mobile diff --git a/shared/login/recover-password/paper-key.tsx b/shared/login/recover-password/paper-key.tsx index ae75829bbdb3..cd298a63f243 100644 --- a/shared/login/recover-password/paper-key.tsx +++ b/shared/login/recover-password/paper-key.tsx @@ -45,20 +45,18 @@ const PaperKey = ({route}: Props) => { - - setPaperKey(paperKey)} - value={paperKey} - /> - + setPaperKey(paperKey)} + value={paperKey} + /> {!!error && {error}} @@ -71,9 +69,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ maxWidth: isMobile ? '100%' : 460, width: '100%', }, - inputContainer: { - width: '100%', - }, inputContainer2: { marginTop: 10, }, diff --git a/shared/login/relogin/container.tsx b/shared/login/relogin/container.tsx index 4a9644f927ca..4b02227555e5 100644 --- a/shared/login/relogin/container.tsx +++ b/shared/login/relogin/container.tsx @@ -13,16 +13,11 @@ const ReloginContainer = () => { const _users = useConfigState(s => s.configuredAccounts) const perror = useConfigState(s => s.loginError) const pselectedUser = useConfigState(s => s.defaultUsername) - const onForgotPassword = (username: string) => { - startRecoverPassword({username}) - } - const navigateAppend = C.Router2.navigateAppend const onFeedback = () => { - navigateAppend({name: 'signupSendFeedbackLoggedOut', params: {}}) + C.Router2.navigateAppend({name: 'signupSendFeedbackLoggedOut', params: {}}) } const onLogin = useConfigState(s => s.dispatch.login) - const requestAutoInvite = useRequestAutoInvite() - const onSignup = () => requestAutoInvite() + const onSignup = useRequestAutoInvite() const onSomeoneElse = useProvisionState(s => s.dispatch.startProvision) const error = perror?.desc || '' const loggedInMap = new Map(_users.map(account => [account.username, account.hasStoredSecret])) @@ -85,7 +80,7 @@ const ReloginContainer = () => { error={error} needPassword={!loggedInMap.get(selectedUser) || gotNeedPasswordError} onFeedback={onFeedback} - onForgotPassword={() => onForgotPassword(selectedUser)} + onForgotPassword={() => startRecoverPassword({username: selectedUser})} onLogin={onLogin} onSignup={onSignup} onSomeoneElse={onSomeoneElse} diff --git a/shared/login/reset/password-enter.tsx b/shared/login/reset/password-enter.tsx index 158a9cb8cb4a..ec498f81b5e7 100644 --- a/shared/login/reset/password-enter.tsx +++ b/shared/login/reset/password-enter.tsx @@ -38,16 +38,14 @@ const EnterPassword = ({route}: Props) => { } buttons={[{label: 'Continue', onClick: onContinue, waiting}]} > - - - + ) } diff --git a/shared/login/signup/common.tsx b/shared/login/signup/common.tsx index 38129f534c12..96bfa4565eaa 100644 --- a/shared/login/signup/common.tsx +++ b/shared/login/signup/common.tsx @@ -8,17 +8,15 @@ type Props = { } export const Wrapper = (props: Props) => ( - - - {props.children} - + + {props.children} ) diff --git a/shared/menubar/index.desktop.tsx b/shared/menubar/index.desktop.tsx index 3d70402e3829..2023adaaa12a 100644 --- a/shared/menubar/index.desktop.tsx +++ b/shared/menubar/index.desktop.tsx @@ -313,40 +313,40 @@ const useMenuItems = ( const startingUp = daemonHandshakeState !== 'done' const common = [ - {onClick: () => { void openUrl(`https://keybase.io/${username || ''}`) }, title: 'Keybase.io'}, - { - onClick: () => { - const version = __VERSION__ - void openUrl( - `https://github.com/keybase/client/issues/new?body=Keybase%20GUI%20Version:%20${encodeURIComponent(version)}` - ) - }, - title: 'Report a bug', + {onClick: () => { void openUrl(`https://keybase.io/${username || ''}`) }, title: 'Keybase.io'}, + { + onClick: () => { + const version = __VERSION__ + void openUrl( + `https://github.com/keybase/client/issues/new?body=Keybase%20GUI%20Version:%20${encodeURIComponent(version)}` + ) }, - { - onClick: () => { - void openUrl('https://keybase.io/docs') - hideWindow?.() - }, - title: 'Help', + title: 'Report a bug', + }, + { + onClick: () => { + void openUrl('https://keybase.io/docs') + hideWindow?.() }, - { - onClick: () => { - if (!__DEV__) { - if (isLinux) { - R.remoteDispatch(RemoteGen.createStop({exitCode: T.RPCGen.ExitCode.ok})) - } else { - R.remoteDispatch(RemoteGen.createDumpLogs({reason: 'quitting through menu'})) - } + title: 'Help', + }, + { + onClick: () => { + if (!__DEV__) { + if (isLinux) { + R.remoteDispatch(RemoteGen.createStop({exitCode: T.RPCGen.ExitCode.ok})) + } else { + R.remoteDispatch(RemoteGen.createDumpLogs({reason: 'quitting through menu'})) } - hideWindow?.() - setTimeout(() => { - ctlQuit?.() - }, 2000) - }, - title: 'Quit Keybase', + } + hideWindow?.() + setTimeout(() => { + ctlQuit?.() + }, 2000) }, - ] + title: 'Quit Keybase', + }, + ] if (startingUp) { return common @@ -356,36 +356,36 @@ const useMenuItems = ( if (showBadges) { return [ - { - onClick: () => openApp(C.Tabs.gitTab), - title: 'Git', - view: , - }, - { - onClick: () => openApp(C.Tabs.devicesTab), - title: 'Devices', - view: , - }, - { - onClick: () => openApp(C.Tabs.settingsTab), - title: 'Settings', - view: , - }, - 'Divider' as const, - ...openAppItem, - ...(kbfsEnabled - ? ([ - { - onClick: () => { - R.remoteDispatch(RemoteGen.createOpenPathInSystemFileManager({path: '/keybase'})) - }, - title: `Open folders in ${Kb.Styles.fileUIName}`, + { + onClick: () => openApp(C.Tabs.gitTab), + title: 'Git', + view: , + }, + { + onClick: () => openApp(C.Tabs.devicesTab), + title: 'Devices', + view: , + }, + { + onClick: () => openApp(C.Tabs.settingsTab), + title: 'Settings', + view: , + }, + 'Divider' as const, + ...openAppItem, + ...(kbfsEnabled + ? ([ + { + onClick: () => { + R.remoteDispatch(RemoteGen.createOpenPathInSystemFileManager({path: '/keybase'})) }, - 'Divider', - ] as const) - : []), - ...common, - ] as const + title: `Open folders in ${Kb.Styles.fileUIName}`, + }, + 'Divider', + ] as const) + : []), + ...common, + ] as const } return [...openAppItem, ...common] as const } @@ -435,16 +435,14 @@ const IconBar = (p: Props & {showBadges?: boolean}) => { )) : null} - - - - + + {!!badgeCountInMenu && } {popup} diff --git a/shared/people/announcement.tsx b/shared/people/announcement.tsx index 92c185ca4821..a3bbb3164a05 100644 --- a/shared/people/announcement.tsx +++ b/shared/people/announcement.tsx @@ -18,9 +18,9 @@ type OwnProps = { url?: string } -const Container = (ownProps: OwnProps) => { +const Announcement = (props: OwnProps) => { const {appLink, badged, confirmLabel, dismissAnnouncement, dismissable, getData, iconUrl, id, text, url} = - ownProps + props const {navigateAppend, switchTab, navigateToInbox} = C.Router2 const onConfirm = () => { if (url) { @@ -68,11 +68,12 @@ const Container = (ownProps: OwnProps) => { dismissAnnouncement(id) getData(true, true) } - const _onDismiss = () => { - dismissAnnouncement(id) - getData(true, true) - } - const onDismiss = dismissable ? _onDismiss : undefined + const onDismiss = dismissable + ? () => { + dismissAnnouncement(id) + getData(true, true) + } + : undefined return ( { signupEmail={signupEmail} skipTodo={skipTodo} waiting={waiting} - // wotUpdates={wotUpdates} /> ) diff --git a/shared/people/follow-notification.tsx b/shared/people/follow-notification.tsx index 4d7e6f1d7717..2d7107a211f2 100644 --- a/shared/people/follow-notification.tsx +++ b/shared/people/follow-notification.tsx @@ -3,6 +3,8 @@ import type * as T from '@/constants/types' import * as Kb from '@/common-adapters' import {FollowButton} from '@/settings/contacts-joined' +const horizontalScrollProps = isMobile ? ({alwaysBounceHorizontal: false, horizontal: true} as const) : {} + const connectedUsernamesProps = { colorFollowing: true, inline: true, @@ -109,7 +111,7 @@ function MultiFollowNotification(props: Props) { )} {usernames.map(username => ( diff --git a/shared/people/follow-suggestions.tsx b/shared/people/follow-suggestions.tsx index 8fa3fbdbcd66..d8dbde5bdc3b 100644 --- a/shared/people/follow-suggestions.tsx +++ b/shared/people/follow-suggestions.tsx @@ -1,6 +1,8 @@ import type * as T from '@/constants/types' import * as Kb from '@/common-adapters' +const horizontalScrollProps = isMobile ? ({alwaysBounceHorizontal: false, horizontal: true} as const) : {} + export type FollowSuggestion = T.People.FollowSuggestion export type Props = { @@ -13,7 +15,7 @@ const FollowSuggestions = (props: Props) => ( Consider following... {props.suggestions.map(suggestion => ( diff --git a/shared/people/index.tsx b/shared/people/index.tsx index 54f55f57f03c..cec604bb1746 100644 --- a/shared/people/index.tsx +++ b/shared/people/index.tsx @@ -17,7 +17,6 @@ type Props = { oldItems: T.Immutable> newItems: T.Immutable> onClickUser: (username: string) => void - onOpenAccountSwitcher?: () => void resentEmail: string setResentEmail: (email: string) => void signupEmail: string @@ -79,14 +78,6 @@ const renderPeopleItem = (item: T.Immutable, props: P const shouldRenderNewItem = (item: T.Immutable, signupEmail: string) => item.type !== 'todo' || item.todoType !== 'verifyAllEmail' || !signupEmail -const PeopleItems = ({ - items, - props, -}: { - items: ReadonlyArray> - props: Props -}): Array => items.map((item): React.ReactNode => renderPeopleItem(item, props)) - function EmailVerificationBanner(props: {signupEmail: string}) { const {signupEmail} = props React.useEffect( @@ -141,25 +132,15 @@ function ResentEmailVerificationBanner(props: { } function PeoplePageList(props: Props) { -const visibleNewItems = props.newItems.filter(item => shouldRenderNewItem(item, props.signupEmail)) + const visibleNewItems = props.newItems.filter(item => shouldRenderNewItem(item, props.signupEmail)) return ( - - {/*Array.from(props.wotUpdates, ([key, item]) => ( - - ))*/} - + {visibleNewItems.map((item): React.ReactNode => renderPeopleItem(item, props))} - + {props.oldItems.map((item): React.ReactNode => renderPeopleItem(item, props))} ) } diff --git a/shared/people/item.tsx b/shared/people/item.tsx index d220139e9487..28973240b9e7 100644 --- a/shared/people/item.tsx +++ b/shared/people/item.tsx @@ -34,6 +34,7 @@ const PeopleItem = (props: Props) => ( @@ -78,7 +79,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, button: {marginBottom: Kb.Styles.globalMargins.xtiny, marginRight: Kb.Styles.globalMargins.tiny}, childrenContainer: { - flex: 1, overflow: 'hidden', position: 'relative', width: 'auto', diff --git a/shared/people/routes.tsx b/shared/people/routes.tsx index 1fec36744521..5173c5bfb1fb 100644 --- a/shared/people/routes.tsx +++ b/shared/people/routes.tsx @@ -30,13 +30,17 @@ const AccountSignOutButton = () => { navigateAppend({name: settingsLogOutTab, params: {}})} - style={{color: Kb.Styles.globalColors.red, padding: 8}} + style={styles.signOut} > Sign out ) } +const styles = Kb.Styles.styleSheetCreate(() => ({ + signOut: {color: Kb.Styles.globalColors.red, padding: 8}, +})) + export const newModalRoutes = defineRouteMap({ accountSwitcher: { getOptions: {headerRight: () => }, diff --git a/shared/people/todo.tsx b/shared/people/todo.tsx index 2783104ceeb5..2845e33365ea 100644 --- a/shared/people/todo.tsx +++ b/shared/people/todo.tsx @@ -12,28 +12,6 @@ import {useCurrentUserState} from '@/stores/current-user' import {navToProfile} from '@/constants/router' import {makeNewTeamWizard} from '@/teams/new-team/wizard/state' -const todoTypes: {[K in T.People.TodoType]: T.People.TodoType} = { - addEmail: 'addEmail', - addPhoneNumber: 'addPhoneNumber', - annoncementPlaceholder: 'annoncementPlaceholder', // misspelled in protocol - avatarTeam: 'avatarTeam', - avatarUser: 'avatarUser', - bio: 'bio', - chat: 'chat', - device: 'device', - folder: 'folder', - follow: 'follow', - gitRepo: 'gitRepo', - legacyEmailVisibility: 'legacyEmailVisibility', - none: 'none', - paperkey: 'paperkey', - proof: 'proof', - team: 'team', - teamShowcase: 'teamShowcase', - verifyAllEmail: 'verifyAllEmail', - verifyAllPhoneNumber: 'verifyAllPhoneNumber', -} - type TodoOwnProps = { badged: boolean confirmLabel: string @@ -74,8 +52,6 @@ function makeDefaultButtons( return result } -const useRouterNavigation = () => C.Router2 - type BasicTaskProps = TodoOwnProps & { dismissLabel?: string dismissTodoType?: T.People.TodoType @@ -115,7 +91,7 @@ const SettingsAccountTask = ({ dismissTodoType, ...props }: SettingsAccountTaskProps) => { - const {navigateAppend, switchTab} = useRouterNavigation() + const {navigateAppend, switchTab} = C.Router2 const onConfirm = () => { switchTab(C.Tabs.settingsTab) navigateAppend({name: settingsAccountTab, params: {}}) @@ -186,7 +162,7 @@ const TeamTask = (props: TodoOwnProps) => { } const GitRepoTask = (props: TodoOwnProps) => { - const {navigateAppend, switchTab} = useRouterNavigation() + const {navigateAppend, switchTab} = C.Router2 const onConfirm = (isTeam: boolean) => { if (isMobile) { navigateAppend({name: settingsGitTab, params: {}}) @@ -219,7 +195,7 @@ const VerifyAllEmailTask = (props: TodoOwnProps) => { const onConfirm = (email: string) => { editEmail({email, onSuccess: () => props.setResentEmail(email), verify: true}) } - const {navigateAppend, switchTab} = useRouterNavigation() + const {navigateAppend, switchTab} = C.Router2 const onManage = () => { switchTab(C.Tabs.settingsTab) navigateAppend({name: settingsAccountTab, params: {}}) @@ -251,7 +227,7 @@ const VerifyAllEmailTask = (props: TodoOwnProps) => { } const VerifyAllPhoneNumberTask = (props: TodoOwnProps) => { - const {navigateAppend, switchTab} = useRouterNavigation() + const {navigateAppend, switchTab} = C.Router2 const onConfirm = (phoneNumber: string) => { navigateAppend({name: 'settingsVerifyPhone', params: {initialResend: true, phoneNumber}}) } @@ -285,7 +261,7 @@ const VerifyAllPhoneNumberTask = (props: TodoOwnProps) => { const LegacyEmailVisibilityTask = (props: TodoOwnProps) => { const editEmail = useSettingsEmailState(s => s.dispatch.editEmail) - const {navigateAppend, switchTab} = useRouterNavigation() + const {navigateAppend, switchTab} = C.Router2 const onConfirm = (email: string) => { switchTab(C.Tabs.settingsTab) navigateAppend({name: settingsAccountTab, params: {}}) @@ -319,41 +295,41 @@ const LegacyEmailVisibilityTask = (props: TodoOwnProps) => { const TaskChooser = (props: TodoOwnProps) => { switch (props.todoType) { - case todoTypes.addEmail: + case 'addEmail': return - case todoTypes.addPhoneNumber: + case 'addPhoneNumber': return ( ) - case todoTypes.avatarTeam: + case 'avatarTeam': return - case todoTypes.avatarUser: + case 'avatarUser': return - case todoTypes.bio: + case 'bio': return - case todoTypes.proof: + case 'proof': return - case todoTypes.device: + case 'device': return - case todoTypes.follow: + case 'follow': return - case todoTypes.chat: + case 'chat': return - case todoTypes.paperkey: + case 'paperkey': return - case todoTypes.team: + case 'team': return - case todoTypes.folder: + case 'folder': return - case todoTypes.gitRepo: + case 'gitRepo': return - case todoTypes.legacyEmailVisibility: + case 'legacyEmailVisibility': return - case todoTypes.teamShowcase: + case 'teamShowcase': return - case todoTypes.verifyAllEmail: + case 'verifyAllEmail': return - case todoTypes.verifyAllPhoneNumber: + case 'verifyAllPhoneNumber': return default: return null diff --git a/shared/pinentry/index.desktop.tsx b/shared/pinentry/index.desktop.tsx index d817690be95c..e1add448c948 100644 --- a/shared/pinentry/index.desktop.tsx +++ b/shared/pinentry/index.desktop.tsx @@ -26,10 +26,6 @@ const Pinentry = (props: Props) => { } }, [_showTyping]) - const handleCheck = (showTyping: boolean) => { - setShowTyping(showTyping) - } - const handleSubmit = () => { onSubmit(password) setPassword('') @@ -40,11 +36,11 @@ const Pinentry = (props: Props) => { return ( - + {props.prompt} - {isPaperKey && } + {isPaperKey && } { )} { const styles = Kb.Styles.styleSheetCreate(() => ({ alignment: {marginLeft: Kb.Styles.globalMargins.xsmall}, + button: {alignSelf: 'center' as const}, container: { backgroundColor: Kb.Styles.globalColors.white, paddingBottom: Kb.Styles.globalMargins.medium, }, + inner: {...Kb.Styles.paddingH(30)}, inputContainer: {maxWidth: 428}, + paperKeyIcon: {alignSelf: 'center' as const}, })) export default Pinentry diff --git a/shared/profile/add-to-team.tsx b/shared/profile/add-to-team.tsx index 207d5d2888a0..c0f13276c0bd 100644 --- a/shared/profile/add-to-team.tsx +++ b/shared/profile/add-to-team.tsx @@ -52,10 +52,6 @@ const makeAddUserToTeamsResult = ( } type OwnProps = {username: string} -const Container = (ownProps: OwnProps) => { - const {username} = ownProps - return -} const AddToTeam = (ownProps: OwnProps) => { const {username: them} = ownProps @@ -213,19 +209,12 @@ const AddToTeam = (ownProps: OwnProps) => { setRolePickerOpen(false) setSelectedRole(role) } - const footerComponent = ( - <> - {sendNotificationFooter('Announce them in team chats', sendNotification, nextVal => - setSendNotification(nextVal) - )} - - ) - - const isRolePickerOpen = rolePickerOpen const onCancelRolePicker = () => { setRolePickerOpen(false) } - const onToggle = toggleTeamSelected + const footerComponent = sendNotificationFooter('Announce them in team chats', sendNotification, nextVal => + setSendNotification(nextVal) + ) const selectedTeamCount = selectedTeams.size @@ -246,20 +235,12 @@ const AddToTeam = (ownProps: OwnProps) => { )} Add - + {them} to... - + - + {!waiting ? ( teamProfileAddList.length > 0 ? ( teamProfileAddList.map(team => ( @@ -271,7 +252,7 @@ const AddToTeam = (ownProps: OwnProps) => { name={team.teamName} isOpen={team.open} onCheck={selected => { - onToggle(team.teamName, selected) + toggleTeamSelected(team.teamName, selected) }} them={them} /> @@ -288,13 +269,13 @@ const AddToTeam = (ownProps: OwnProps) => { ) ) : ( - + )} - + {them} will be added as a @@ -305,7 +286,7 @@ const AddToTeam = (ownProps: OwnProps) => { onConfirm={onConfirmRolePicker} onCancel={onCancelRolePicker} position="top center" - open={isRolePickerOpen} + open={rolePickerOpen} disabledRoles={disabledReasonsForRolePicker} > @@ -344,20 +325,16 @@ const TeamRow = (props: RowProps) => { props.onCheck(!props.checked) : undefined}> - - - + - + {props.name} @@ -366,9 +343,7 @@ const TeamRow = (props: RowProps) => { )} - - {props.disabledReason} - + {props.disabledReason} {!isMobile && } @@ -382,10 +357,11 @@ const styles = Kb.Styles.styleSheetCreate( addButton: Kb.Styles.platformStyles({ isMobile: {width: '100%'}, }), + boxGrow: {width: '100%'}, + progress: {width: 64}, + teamListInner: {flexShrink: 1, width: '100%'}, addToTeam: Kb.Styles.platformStyles({ common: { - alignItems: 'center', - flexShrink: 0, flexWrap: 'wrap', marginBottom: Kb.Styles.globalMargins.small, marginLeft: Kb.Styles.globalMargins.small, @@ -424,11 +400,18 @@ const styles = Kb.Styles.styleSheetCreate( isElectron: {maxHeight: '100%'}, }), divider: {marginLeft: 69}, + headerAvatar: Kb.Styles.platformStyles({ + isElectron: {marginLeft: Kb.Styles.globalMargins.tiny, marginRight: Kb.Styles.globalMargins.tiny}, + isMobile: {marginLeft: Kb.Styles.globalMargins.xxtiny, marginRight: Kb.Styles.globalMargins.tiny}, + }), meta: { alignSelf: 'center', marginLeft: Kb.Styles.globalMargins.xtiny, marginTop: 2, }, + teamNameDisabled: {color: Kb.Styles.globalColors.black_50}, + teamNameEnabled: {color: Kb.Styles.globalColors.black}, + teamRowAvatar: {marginRight: Kb.Styles.globalMargins.tiny}, modalFooter: Kb.Styles.platformStyles({ common: { ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small), @@ -457,4 +440,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default AddToTeam diff --git a/shared/profile/edit-avatar/index.tsx b/shared/profile/edit-avatar/index.tsx index 47e7f1b99850..dc790bc91597 100644 --- a/shared/profile/edit-avatar/index.tsx +++ b/shared/profile/edit-avatar/index.tsx @@ -21,11 +21,7 @@ type FileListLike = {length?: number; [key: number]: FileLike; [Symbol.iterator] type FileInputRef = {click?: () => void; files?: FileListLike | null; value?: string} // Desktop helpers -const validDrag = (e: React.DragEvent) => { - return Array.from(e.dataTransfer.types) - .map(t => t) - .includes('Files') -} +const validDrag = (e: React.DragEvent) => Array.from(e.dataTransfer.types).includes('Files') const getFile = async (fileList: FileListLike | undefined): Promise => { const {isDirectory, getPathForFile} = desktopFns diff --git a/shared/profile/edit-profile.tsx b/shared/profile/edit-profile.tsx index c65b988341e7..39564202888d 100644 --- a/shared/profile/edit-profile.tsx +++ b/shared/profile/edit-profile.tsx @@ -5,7 +5,7 @@ import {useCurrentUserState} from '@/stores/current-user' import * as T from '@/constants/types' import {useTrackerProfile} from '@/tracker/use-profile' -const Container = () => { +const EditProfile = () => { const username = useCurrentUserState(s => s.username) const {details: d, loadProfile} = useTrackerProfile(username) const _bio = d.bio || '' @@ -61,49 +61,47 @@ const Container = () => { } return ( - <> - - - - - - - - - - - - - + + + - {bio.length > maxBio && Bio too long, sorry} - - - + + + + + + + + + + {bio.length > maxBio && Bio too long, sorry} + + ) } @@ -119,4 +117,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ gap: {minHeight: Kb.Styles.globalMargins.small}, })) -export default Container +export default EditProfile diff --git a/shared/profile/generic/proofs-list.tsx b/shared/profile/generic/proofs-list.tsx index 43a7da815ece..ee20b37713ac 100644 --- a/shared/profile/generic/proofs-list.tsx +++ b/shared/profile/generic/proofs-list.tsx @@ -577,7 +577,7 @@ const Container = ({platform, reason = 'profile'}: Props) => { } })() - return <>{content} + return content } const ProviderPicker = ({ @@ -739,7 +739,7 @@ const EnterUsername = ({ )} - - - + ) @@ -1315,7 +1313,6 @@ const styles = Kb.Styles.styleSheetCreate( buttonBig: {flex: 2.5}, buttonSmall: {flex: 1}, center: {alignSelf: 'center'}, - centered: {alignSelf: 'center'}, colorRed: {color: Kb.Styles.globalColors.redDark}, container: Kb.Styles.platformStyles({ common: {flex: 1}, diff --git a/shared/profile/modal.tsx b/shared/profile/modal.tsx index 609a1698b35d..73bba4c1fcd9 100644 --- a/shared/profile/modal.tsx +++ b/shared/profile/modal.tsx @@ -7,27 +7,24 @@ type Props = React.PropsWithChildren<{ }> const Modal = ({children, onCancel, skipButton}: Props) => ( - <> - - - - {children} - - - {onCancel && !skipButton && ( - - - - )} - - + + + + {children} + + + {onCancel && !skipButton && ( + + + + )} + ) const styles = Kb.Styles.styleSheetCreate( () => ({ buttonBar: { - flexShrink: 0, padding: isMobile ? undefined : Kb.Styles.globalMargins.medium, }, container: { diff --git a/shared/profile/pgp/choice/index.tsx b/shared/profile/pgp/choice/index.tsx index 8c1d87edef0b..195e7b188b7b 100644 --- a/shared/profile/pgp/choice/index.tsx +++ b/shared/profile/pgp/choice/index.tsx @@ -28,6 +28,17 @@ const makeInitialForm = (): GeneratePgpArgs => ({ pgpFullName: '', }) +export const PgpMobileUnsupported = ({onCancel}: {onCancel: () => void}) => ( + + + + Add a PGP key + + For now, please use our desktop app to create PGP keys. + + +) + export default function Choice() { const {clearModals, navigateAppend, navigateUp} = C.Router2 const mountedRef = React.useRef(true) @@ -48,17 +59,7 @@ export default function Choice() { }, []) if (isMobile) { - const onCancel = () => navigateUp() - return ( - - - - Add a PGP key - - For now, please use our desktop app to create PGP keys. - - - ) + return navigateUp()} /> } const setStepSafe = (next: Step) => { diff --git a/shared/profile/pgp/import/index.tsx b/shared/profile/pgp/import/index.tsx index 0d8a76c28668..0c6321176a89 100644 --- a/shared/profile/pgp/import/index.tsx +++ b/shared/profile/pgp/import/index.tsx @@ -1,6 +1,7 @@ import * as Kb from '@/common-adapters' import * as C from '@/constants' import Modal from '@/profile/modal' +import {PgpMobileUnsupported} from '../choice' export default function Import() { const navigateUp = C.Router2.navigateUp @@ -9,29 +10,20 @@ export default function Import() { } if (isMobile) { - return ( - - - - Add a PGP key - - For now, please use our desktop app to create PGP keys. - - - ) + return } return ( - + Import a PGP key - + To register your existing PGP public key on Keybase, please run the following command from your terminal: - + {"# import a key from gpg's key chain"} keybase pgp select @@ -42,22 +34,27 @@ export default function Import() { ) } -const styleHeader = { - marginTop: Kb.Styles.globalMargins.medium, -} - -const styleBody = { - marginBottom: Kb.Styles.globalMargins.small, - marginTop: Kb.Styles.globalMargins.small, -} - -const styleTerminal = { - backgroundColor: Kb.Styles.globalColors.blueDarker2, - borderRadius: Kb.Styles.borderRadius, - boxSizing: 'content-box', - color: Kb.Styles.globalColors.white, - marginLeft: -Kb.Styles.globalMargins.medium, - marginRight: -Kb.Styles.globalMargins.medium, - padding: Kb.Styles.globalMargins.medium, - textAlign: 'left', -} as const +const styles = Kb.Styles.styleSheetCreate( + () => + ({ + body: { + marginBottom: Kb.Styles.globalMargins.small, + marginTop: Kb.Styles.globalMargins.small, + }, + header: { + marginTop: Kb.Styles.globalMargins.medium, + }, + terminal: Kb.Styles.platformStyles({ + isElectron: { + backgroundColor: Kb.Styles.globalColors.blueDarker2, + borderRadius: Kb.Styles.borderRadius, + boxSizing: 'content-box', + color: Kb.Styles.globalColors.white, + marginLeft: -Kb.Styles.globalMargins.medium, + marginRight: -Kb.Styles.globalMargins.medium, + padding: Kb.Styles.globalMargins.medium, + textAlign: 'left', + } as const, + }), + }) as const +) diff --git a/shared/profile/platform-icon.tsx b/shared/profile/platform-icon.tsx index 20c5e77c81e2..2f58ad77b248 100644 --- a/shared/profile/platform-icon.tsx +++ b/shared/profile/platform-icon.tsx @@ -20,28 +20,25 @@ const standardOffsets = { offsetRight: isMobile ? -1 : -5, } -function _specsForMobileOrDesktop() { - return { - btc: {icon: isMobile ? 'icon-bitcoin-logo-64' : 'icon-bitcoin-logo-48'}, - dns: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, - dnsOrGenericWebSite: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, - facebook: {icon: isMobile ? 'icon-facebook-logo-64' : 'icon-facebook-logo-48'}, - github: {icon: isMobile ? 'icon-github-logo-64' : 'icon-github-logo-48'}, - hackernews: {icon: isMobile ? 'icon-hacker-news-logo-64' : 'icon-hacker-news-logo-48'}, - http: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, - https: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, - pgp: {icon: isMobile ? 'icon-pgp-key-64' : 'icon-pgp-key-48', offsetBottom: -2, offsetRight: 4}, - reddit: {icon: isMobile ? 'icon-reddit-logo-64' : 'icon-reddit-logo-48'}, - rooter: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, - twitter: {icon: isMobile ? 'icon-twitter-logo-64' : 'icon-twitter-logo-48'}, - web: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, - zcash: {icon: isMobile ? 'icon-zcash-logo-64' : 'icon-zcash-logo-48'}, - } as const -} +const platformSpecs = { + btc: {icon: isMobile ? 'icon-bitcoin-logo-64' : 'icon-bitcoin-logo-48'}, + dns: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, + dnsOrGenericWebSite: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, + facebook: {icon: isMobile ? 'icon-facebook-logo-64' : 'icon-facebook-logo-48'}, + github: {icon: isMobile ? 'icon-github-logo-64' : 'icon-github-logo-48'}, + hackernews: {icon: isMobile ? 'icon-hacker-news-logo-64' : 'icon-hacker-news-logo-48'}, + http: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, + https: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, + pgp: {icon: isMobile ? 'icon-pgp-key-64' : 'icon-pgp-key-48', offsetBottom: -2, offsetRight: 4}, + reddit: {icon: isMobile ? 'icon-reddit-logo-64' : 'icon-reddit-logo-48'}, + rooter: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, + twitter: {icon: isMobile ? 'icon-twitter-logo-64' : 'icon-twitter-logo-48'}, + web: {icon: isMobile ? 'icon-website-64' : 'icon-website-48'}, + zcash: {icon: isMobile ? 'icon-zcash-logo-64' : 'icon-zcash-logo-48'}, +} as const const getSpecForPlatform = (platform: T.More.PlatformsExpandedType): IconSpec => { - const specs = _specsForMobileOrDesktop() - return {...standardOffsets, ...specs[platform]} + return {...standardOffsets, ...platformSpecs[platform]} } const PlatformIcon = ({platform, overlay, style}: Props) => { diff --git a/shared/profile/showcase-team-offer.tsx b/shared/profile/showcase-team-offer.tsx index deacfc4a4314..df7a9b28bb7f 100644 --- a/shared/profile/showcase-team-offer.tsx +++ b/shared/profile/showcase-team-offer.tsx @@ -4,7 +4,7 @@ import * as T from '@/constants/types' import {useTeamsList} from '@/teams/use-teams-list' import {useConfigState} from '@/stores/config' -const Container = () => { +const ShowcaseTeamOffer = () => { const waiting = C.useWaitingState(s => s.counts) const {reload, teams} = useTeamsList() const setGlobalError = useConfigState(s => s.dispatch.setGlobalError) @@ -22,29 +22,27 @@ const Container = () => { } return ( - <> - - {!isMobile && } - - {isMobile && } - {sortedTeams.map(teamMeta => ( - onPromote(teamMeta.id, promoted)} - showcased={teamMeta.showcasing} - waiting={!!waiting.get(C.waitingKeyTeamsTeam(teamMeta.id))} - /> - ))} - - - + + {!isMobile && } + + {isMobile && } + {sortedTeams.map(teamMeta => ( + onPromote(teamMeta.id, promoted)} + showcased={teamMeta.showcasing} + waiting={!!waiting.get(C.waitingKeyTeamsTeam(teamMeta.id))} + /> + ))} + + ) } @@ -63,9 +61,9 @@ const TeamRow = (p: RowProps) => { const {canShowcase, name, isOpen, membercount, onPromote, showcased, waiting, isExplicitMember} = p return ( - + - + {name} @@ -79,18 +77,16 @@ const TeamRow = (p: RowProps) => { {showcased || canShowcase || waiting ? ( - - onPromote(!showcased)} - small={true} - type="Success" - mode={showcased ? 'Secondary' : 'Primary'} - waiting={waiting} - /> - + onPromote(!showcased)} + small={true} + type="Success" + mode={showcased ? 'Secondary' : 'Primary'} + waiting={waiting} + /> ) : ( - + {isExplicitMember ? "Admins aren't allowing members to feature." @@ -105,8 +101,8 @@ const TeamRow = (p: RowProps) => { } const ShowcaseTeamOfferHeader = () => ( - - + + Featuring a team will encourage others to ask to join. The team's description and number of members will be public. @@ -119,7 +115,7 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: {flex: 1, overflow: 'hidden'}, - headerContainer: Kb.Styles.platformStyles({ + headerShowcaseTeamOffer: Kb.Styles.platformStyles({ isElectron: { paddingLeft: Kb.Styles.globalMargins.small, paddingRight: Kb.Styles.globalMargins.small, @@ -131,13 +127,13 @@ const styles = Kb.Styles.styleSheetCreate( isElectron: {textAlign: 'right'}, isMobile: {textAlign: 'center'}, }), - membershipTextContainer: {flexShrink: 1}, + membershipTextShowcaseTeamOffer: {flexShrink: 1}, meta: { alignSelf: 'center', marginLeft: Kb.Styles.globalMargins.xtiny, marginTop: 2, }, - noteContainer: Kb.Styles.platformStyles({ + noteShowcaseTeamOffer: Kb.Styles.platformStyles({ isMobile: {paddingTop: Kb.Styles.globalMargins.small}, }), noteText: { @@ -146,12 +142,12 @@ const styles = Kb.Styles.styleSheetCreate( paddingRight: Kb.Styles.globalMargins.large, paddingTop: Kb.Styles.globalMargins.tiny, }, - teamNameContainer: { + teamNameShowcaseTeamOffer: { flexShrink: 1, marginLeft: Kb.Styles.globalMargins.small, marginRight: Kb.Styles.globalMargins.small, }, - teamRowContainer: Kb.Styles.platformStyles({ + teamRowShowcaseTeamOffer: Kb.Styles.platformStyles({ common: { ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small), }, @@ -161,4 +157,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default ShowcaseTeamOffer diff --git a/shared/profile/user/actions/follow-button.tsx b/shared/profile/user/actions/follow-button.tsx index f80cf9201d30..62dfff4b0ad6 100644 --- a/shared/profile/user/actions/follow-button.tsx +++ b/shared/profile/user/actions/follow-button.tsx @@ -1,11 +1,5 @@ import * as React from 'react' -import * as Styles from '@/styles' -import WaitingButton from '@/common-adapters/waiting-button' - -const Kb = { - Styles, - WaitingButton, -} +import * as Kb from '@/common-adapters' type Props = { disabled?: boolean diff --git a/shared/profile/user/actions/index.tsx b/shared/profile/user/actions/index.tsx index eb061bd43022..06227bc59b13 100644 --- a/shared/profile/user/actions/index.tsx +++ b/shared/profile/user/actions/index.tsx @@ -19,37 +19,24 @@ type OwnProps = { username: string } -const Container = (ownProps: OwnProps) => { +const Actions = (ownProps: OwnProps) => { const {blocked, followThem, followsYou, guiID, hidFromFollowers, onReload, state, username} = ownProps const isBot = !!useFeaturedBot(username) - const _you = useCurrentUserState(s => s.username) + const you = useCurrentUserState(s => s.username) const navigateAppend = C.Router2.navigateAppend - const _onAddToTeam = (username: string) => navigateAppend({name: 'profileAddToTeam', params: {username}}) - const _onBrowsePublicFolder = (username: string) => - FS.navToPath(T.FS.stringToPath(`/keybase/public/${username}`)) - const _onEditProfile = () => navigateAppend({name: 'profileEdit', params: {}}) - const followUser = C.useRPC(T.RPCGen.identify3Identify3FollowUserRpcPromise) - const _onFollow = (follow: boolean) => { - followUser([{follow, guiID}, C.waitingKeyTracker], onReload, () => {}) - } - const _onInstallBot = (username: string) => { - navigateAppend({name: 'chatInstallBotPick', params: {botUsername: username}}) - } - const _onManageBlocking = (username: string) => - navigateAppend({name: 'chatBlockingModal', params: {username}}) - const _onOpenPrivateFolder = (myUsername: string, theirUsername: string) => - FS.navToPath(T.FS.stringToPath(`/keybase/private/${theirUsername},${myUsername}`)) - const onAccept = () => _onFollow(true) - const onAddToTeam = () => _onAddToTeam(username) - const onBrowsePublicFolder = () => _onBrowsePublicFolder(username) - const onEditProfile = _you === username ? _onEditProfile : undefined - const onFollow = () => _onFollow(true) - const onInstallBot = () => _onInstallBot(username) - const onManageBlocking = () => _onManageBlocking(username) - const onOpenPrivateFolder = () => _onOpenPrivateFolder(_you, username) - const onUnfollow = () => _onFollow(false) + const follow = (f: boolean) => followUser([{follow: f, guiID}, C.waitingKeyTracker], onReload, () => {}) + + const onAccept = () => follow(true) + const onAddToTeam = () => navigateAppend({name: 'profileAddToTeam', params: {username}}) + const onBrowsePublicFolder = () => FS.navToPath(T.FS.stringToPath(`/keybase/public/${username}`)) + const onEditProfile = you === username ? () => navigateAppend({name: 'profileEdit', params: {}}) : undefined + const onFollow = () => follow(true) + const onInstallBot = () => navigateAppend({name: 'chatInstallBotPick', params: {botUsername: username}}) + const onManageBlocking = () => navigateAppend({name: 'chatBlockingModal', params: {username}}) + const onOpenPrivateFolder = () => FS.navToPath(T.FS.stringToPath(`/keybase/private/${username},${you}`)) + const onUnfollow = () => follow(false) if (blocked) { return ( @@ -221,4 +208,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ dropdownButton: {minWidth: undefined}, })) -export default Container +export default Actions diff --git a/shared/profile/user/friend.tsx b/shared/profile/user/friend.tsx index 72844c74b2cf..166dbb0742f7 100644 --- a/shared/profile/user/friend.tsx +++ b/shared/profile/user/friend.tsx @@ -12,7 +12,7 @@ const followSizeToStyle = { 64: {bottom: 0, left: 44, position: 'absolute'} as const, } -const Container = (ownProps: OwnProps) => { +const Friend = (ownProps: OwnProps) => { const {username: _username, width} = ownProps const _fullname = useUsersState(s => s.infoMap.get(ownProps.username)?.fullname ?? '') const fullname = _fullname || '' @@ -28,6 +28,7 @@ const Container = (ownProps: OwnProps) => { @@ -52,7 +53,6 @@ const Container = (ownProps: OwnProps) => { const styles = Kb.Styles.styleSheetCreate(() => ({ avatar: {marginBottom: Kb.Styles.globalMargins.xxtiny}, container: { - flexShrink: 0, height: 105, justifyContent: 'flex-start', minWidth: 0, @@ -66,4 +66,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }), })) -export default Container +export default Friend diff --git a/shared/profile/user/hooks.tsx b/shared/profile/user/hooks.tsx index 5f29715ed98a..03ec5ada78f1 100644 --- a/shared/profile/user/hooks.tsx +++ b/shared/profile/user/hooks.tsx @@ -24,13 +24,6 @@ const headerBackgroundColorType = ( } } -// const filterWebOfTrustEntries = memoize( -// ( -// webOfTrustEntries: ReadonlyArray | undefined -// ): Array => -// webOfTrustEntries ? webOfTrustEntries.filter(C.Tracker.showableWotEntry) : [] -// ) - const useUserData = (username: string) => { const myName = useCurrentUserState(s => s.username) const usernameKey = username.toLowerCase() @@ -120,18 +113,11 @@ const useUserData = (username: string) => { const followThem = useFollowerState(s => s.following.has(username)) const followsYou = useFollowerState(s => s.followers.has(username)) - // const mutualFollow = followThem && followsYou - const isDarkMode = useColorScheme() === 'dark' const stateProps = (() => { if (!notAUser) { // Keybase user - const {followersCount, followingCount, followers, following, reason /*, webOfTrustEntries = []*/} = d - - // const filteredWot = filterWebOfTrustEntries(webOfTrustEntries) - // const hasAlreadyVouched = filteredWot.some(entry => entry.attestingUser === myName) - // const vouchShowButton = mutualFollow && !hasAlreadyVouched - // const vouchDisableButton = !vouchShowButton || d.state !== 'valid' || d.resetBrokeTrack + const {followersCount, followingCount, followers, following, reason} = d return { ...commonProps, @@ -153,9 +139,6 @@ const useUserData = (username: string) => { sbsAvatarUrl: undefined, serviceIcon: undefined, title: username, - // vouchDisableButton, - // vouchShowButton, - // webOfTrustEntries: filteredWot, } } else { // SBS profile. But `nonUserDetails` might not have arrived yet, @@ -178,19 +161,11 @@ const useUserData = (username: string) => { service, serviceIcon: isDarkMode ? nonUserDetails.siteIconFullDarkmode : nonUserDetails.siteIconFull, title, - vouchDisableButton: true, - vouchShowButton: false, - webOfTrustEntries: [], } } })() const _onEditAvatar = editAvatar - // const _onIKnowThem = (username: string, guiID: string) => { - // dispatch( - // RouteTreeGen.createNavigateAppend({path: [{props: {guiID, username}, selected: 'profileWotAuthor'}]}) - // ) - // } const _onReload = (isYou: boolean, state: T.Tracker.DetailsState) => { if (state !== 'valid' && !isYou) { // Might be a Keybase user or not, launch non-user profile fetch. @@ -268,10 +243,6 @@ const useUserData = (username: string) => { onAddIdentity: allowOnAddIdentity ? onAddIdentity : undefined, onBack: onBack, onEditAvatar: stateProps.userIsYou ? _onEditAvatar : undefined, - // onIKnowThem: - // stateProps.vouchShowButton && !stateProps.vouchDisableButton - // ? () => _onIKnowThem(stateProps.username, stateProps.guiID) - // : undefined, onReload: () => _onReload(stateProps.userIsYou, stateProps.state), reason: stateProps.reason, sbsAvatarUrl: stateProps.sbsAvatarUrl, @@ -286,9 +257,6 @@ const useUserData = (username: string) => { title: stateProps.title, userIsYou: stateProps.userIsYou, username: stateProps.username, - // vouchDisableButton: stateProps.vouchDisableButton, - // vouchShowButton: stateProps.vouchShowButton, - // webOfTrustEntries: stateProps.webOfTrustEntries, } } diff --git a/shared/profile/user/index.tsx b/shared/profile/user/index.tsx index 8c0914460892..18d54ae8f16b 100644 --- a/shared/profile/user/index.tsx +++ b/shared/profile/user/index.tsx @@ -373,7 +373,7 @@ const BioTeamProofs = (props: BioTeamProofsProps) => { style={styles.bioAndProofs} > - + {props.reason} @@ -692,7 +692,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ proofs: Kb.Styles.platformStyles({ isElectron: { alignSelf: 'flex-start', - flexShrink: 0, width: 350, }, isMobile: {width: '100%'}, diff --git a/shared/profile/user/teams/index.tsx b/shared/profile/user/teams/index.tsx index 46ad3d7ffc7d..63daf3753e9c 100644 --- a/shared/profile/user/teams/index.tsx +++ b/shared/profile/user/teams/index.tsx @@ -16,7 +16,7 @@ type OwnProps = { const noTeams = new Array() -const Container = (ownProps: OwnProps) => { +const Teams = (ownProps: OwnProps) => { const isYou = useCurrentUserState(s => s.username === ownProps.username) const {teams} = useTeamsList() const teamNameToID = React.useMemo(() => new Map(teams.map(team => [team.teamname, team.id] as const)), [teams]) @@ -72,14 +72,12 @@ const TeamShowcase = (props: TeamShowcaseProps) => { } const ShowcaseTeamsOffer = (p: {onEdit: () => void}) => ( - - - - - {"Feature the teams you're in"} - - - + + + + {"Feature the teams you're in"} + + ) const styles = Kb.Styles.styleSheetCreate( @@ -93,4 +91,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default Teams diff --git a/shared/profile/user/teams/openmeta.tsx b/shared/profile/user/teams/openmeta.tsx index 5bb767c8f804..a266eb80df85 100644 --- a/shared/profile/user/teams/openmeta.tsx +++ b/shared/profile/user/teams/openmeta.tsx @@ -1,17 +1,6 @@ -import Meta from '@/common-adapters/meta' -import * as Styles from '@/styles' +import * as Kb from '@/common-adapters' -const Kb = { - Meta, - Styles, -} - -type Props = { - isOpen: boolean - style?: Styles.StylesCrossPlatform -} - -const OpenMeta = ({isOpen}: Props) => +const OpenMeta = ({isOpen}: {isOpen: boolean}) => isOpen ? : null const styles = Kb.Styles.styleSheetCreate( diff --git a/shared/profile/user/teams/team-section.tsx b/shared/profile/user/teams/team-section.tsx index 6fe2abbe92d0..f14b878e241a 100644 --- a/shared/profile/user/teams/team-section.tsx +++ b/shared/profile/user/teams/team-section.tsx @@ -11,7 +11,7 @@ type Props = { } const TeamSection = ({children, right, title}: Props) => ( - + {title} {right} @@ -29,7 +29,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ common: { alignItems: 'flex-start', flex: 1, - flexShrink: 0, minWidth: 0, paddingBottom: Kb.Styles.globalMargins.small, paddingLeft: Kb.Styles.globalMargins.tiny, diff --git a/shared/profile/user/teams/teaminfo.tsx b/shared/profile/user/teams/teaminfo.tsx index 457b118d4fbc..4bbc7076315b 100644 --- a/shared/profile/user/teams/teaminfo.tsx +++ b/shared/profile/user/teams/teaminfo.tsx @@ -1,25 +1,9 @@ import * as React from 'react' -import * as Styles from '@/styles' +import * as Kb from '@/common-adapters' import * as C from '@/constants' import OpenMeta from './openmeta' -import FloatingMenu from '@/common-adapters/floating-menu' -import ConnectedUsernames from '@/common-adapters/usernames' -import {NameWithIcon} from '@/common-adapters/name-with-icon' -import Text from '@/common-adapters/text' -import {Box2} from '@/common-adapters/box' -import WaitingButton from '@/common-adapters/waiting-button' import type {MeasureRef} from '@/common-adapters/measure-ref' -const Kb = { - Box2, - ConnectedUsernames, - FloatingMenu, - NameWithIcon, - Styles, - Text, - WaitingButton, -} - export type Props = { attachTo?: React.RefObject description: string @@ -27,7 +11,7 @@ export type Props = { isOpen: boolean membersCount: number name: string - position?: Styles.Position + position?: Kb.Styles.Position onChat?: () => void onHidden: () => void onJoinTeam: (teamname: string) => void @@ -39,28 +23,8 @@ export type Props = { const TeamInfo = (props: Props) => { const [requested, setRequested] = React.useState(false) - const _isPrivate = () => { - return props.membersCount === 0 && props.description.length === 0 - } - - const _onJoinTeam = () => { - props.onJoinTeam(props.name) - setRequested(true) - } - - const _onViewTeam = () => { - props.onViewTeam() - props.onHidden() - } - - const _onChat = () => { - if (props.onChat) { - props.onChat() - props.onHidden() - } - } - - const memberText = _isPrivate() + const isPrivate = props.membersCount === 0 && props.description.length === 0 + const memberText = isPrivate ? 'This team is private. Admins will decide if they can let you in.' : `${props.membersCount} member${props.membersCount > 1 ? 's' : ''}` @@ -94,22 +58,21 @@ const TeamInfo = (props: Props) => { { props.onChat?.(); props.onHidden() }} mode="Secondary" /> )} - {/* With teamsRedesign we have external team page, always show view team button */} { props.onViewTeam(); props.onHidden() }} mode="Secondary" /> {!props.inTeam && ( { props.onJoinTeam(props.name); setRequested(true) }} type={props.isOpen ? 'Success' : 'Default'} mode={requested ? 'Secondary' : 'Primary'} /> diff --git a/shared/provision/code-page/container.tsx b/shared/provision/code-page/container.tsx index 8e557c366c69..e7838bf8ab10 100644 --- a/shared/provision/code-page/container.tsx +++ b/shared/provision/code-page/container.tsx @@ -34,8 +34,7 @@ const CodePageContainer = () => { const iconNumber = T.Devices.deviceNumberToIconNumber(otherDevice.deviceNumberOfType) const waiting = C.Waiting.useAnyWaiting(C.waitingKeyProvision) - const navigateUp = C.Router2.navigateUp - const onBack = navigateUp + const onBack = C.Router2.navigateUp const _onSubmitTextCode = (code: string) => { if (!waiting) { @@ -75,12 +74,15 @@ const CodePageContainer = () => { const tab = tabState.defaultTab === defaultTab ? tabState.tab : defaultTab const setTab = (tab: Tab) => setTabState(state => ({...state, tab})) - const tabBackground = () => (tab === 'QR' ? Kb.Styles.globalColors.blueLight : Kb.Styles.globalColors.green) - const buttonType = () => (tab === 'QR' ? 'Default' as const : 'Success' as const) - const buttonLabelStyle = () => (tab === 'QR' ? styles.primaryOnBlueLabel : styles.primaryOnGreenLabel) + const tabBackground = tab === 'QR' ? Kb.Styles.globalColors.blueLight : Kb.Styles.globalColors.green + const buttonType = tab === 'QR' ? ('Default' as const) : ('Success' as const) + const buttonLabelStyle = tab === 'QR' ? styles.primaryOnBlueLabel : styles.primaryOnGreenLabel const onSubmitTextCode = () => _onSubmitTextCode(code) + // We're in a modal unless this is a desktop being newly provisioned. + const inModal = currentDeviceType !== 'desktop' || currentDeviceAlreadyProvisioned + const body = () => { let content: React.ReactNode = null switch (tab) { @@ -106,7 +108,7 @@ const CodePageContainer = () => { { otherDevice={otherDevice} currentDeviceAlreadyProvisioned={currentDeviceAlreadyProvisioned} /> - {!inModal() && footer().content} + {!inModal && footer().content} - {!inModal() && - currentDeviceType === 'desktop' && - currentDeviceType === otherDevice.type && - !currentDeviceAlreadyProvisioned && - heyWaitBanner()} - {!inModal() && troubleshooting && ( + {!inModal && otherDevice.type === 'desktop' && heyWaitBanner()} + {!inModal && troubleshooting && ( setTroubleshooting(false)} propagateOutsideClicks={true}> {troubleshootingContent()} @@ -183,33 +181,33 @@ const CodePageContainer = () => { {tab === 'enterText' && ( )} - {tab !== 'enterText' && inModal() && !isMobile && ( + {tab !== 'enterText' && inModal && !isMobile && ( )} {showHeyWaitInFooter && heyWaitBanner()} ), - hideBorder: !inModal() || currentDeviceType !== 'desktop', + hideBorder: !inModal || currentDeviceType !== 'desktop', style: { - backgroundColor: tabBackground(), + backgroundColor: tabBackground, ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, 0, 0), }, } @@ -237,16 +235,13 @@ const CodePageContainer = () => { /> ) - // We're in a modal unless this is a desktop being newly provisioned. - const inModal = () => currentDeviceType !== 'desktop' || currentDeviceAlreadyProvisioned - - // Workaround for no modals while logged out: display just the troubleshooting modal if we're on mobile and it's open; - // When we're on desktop being newly provisioned, it's in this._body() + // Workaround for no modals while logged out: display just the troubleshooting content if we're on mobile and it's open; + // When we're on desktop being newly provisioned, it's rendered inside body() if (isMobile && troubleshooting) { return troubleshootingContent() } const content = body() - if (inModal()) { + if (inModal) { const f = footer() return ( <> @@ -295,7 +290,7 @@ const SwitchTab = (props: { } return ( - + { return ( - + You need to allow access to the camera. @@ -19,7 +19,6 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: { - alignItems: 'center', backgroundColor: Kb.Styles.globalColors.black, }, text: {color: Kb.Styles.globalColors.white_40}, diff --git a/shared/provision/error.tsx b/shared/provision/error.tsx index 9b7c58582938..87f4076c7b3a 100644 --- a/shared/provision/error.tsx +++ b/shared/provision/error.tsx @@ -8,7 +8,7 @@ import {type ProvisionRouteError, useProvisionState} from '@/stores/provision' import {startAccountReset} from '@/login/reset/account-reset' const Wrapper = (p: {onBack: () => void; children: React.ReactNode}) => ( - + Oops, something went wrong. @@ -37,24 +37,13 @@ type Props = { } } -// Normally this would be a component but I want the children to be flat so i can use a Box2 as the parent and have nice gaps const RenderError = ({route}: Props) => { const error = route.params.error const username = useProvisionState(s => s.username) - const _onAccountReset = (username: string) => { - startAccountReset(false, username) - } - const navigateUp = C.Router2.navigateUp - const onBack = () => { - navigateUp() - } - const onKBHome = () => { - void openURL('https://keybase.io/') - } - const onPasswordReset = () => { - void openURL('https://keybase.io/#password-reset') - } - const onAccountReset = () => _onAccountReset(username) + const onBack = C.Router2.navigateUp + const onKBHome = () => void openURL('https://keybase.io/') + const onPasswordReset = () => void openURL('https://keybase.io/#password-reset') + const onAccountReset = () => startAccountReset(false, username) if (!error) { return ( diff --git a/shared/provision/forgot-username.tsx b/shared/provision/forgot-username.tsx index 3f653e34b2fd..5becf7630588 100644 --- a/shared/provision/forgot-username.tsx +++ b/shared/provision/forgot-username.tsx @@ -71,7 +71,7 @@ const ForgotUsername = () => { label: 'Recover username', onClick: onSubmit, type: 'Default', - waiting: waiting, + waiting, }, ]} onBack={onBack} diff --git a/shared/provision/paper-key.tsx b/shared/provision/paper-key.tsx index 1f3c039c9d06..824590cb4cac 100644 --- a/shared/provision/paper-key.tsx +++ b/shared/provision/paper-key.tsx @@ -8,19 +8,16 @@ const Container = () => { const error = useProvisionState(s => s.error) const hint = useProvisionState(s => `${s.codePageOtherDevice.name || ''}...`) const waiting = C.Waiting.useAnyWaiting(C.waitingKeyProvision) - const navigateUp = C.Router2.navigateUp - const onBack = () => { - navigateUp() - } const onSubmit = useProvisionState(s => s.dispatch.dynamic.setPassphrase) - const props = { - error: error, - hint: hint, - onBack: onBack, - onSubmit: (paperkey: string) => !waiting && onSubmit?.(paperkey), - waiting: waiting, - } - return + return ( + !waiting && onSubmit?.(paperkey)} + waiting={waiting} + /> + ) } type Props = { @@ -33,10 +30,7 @@ type Props = { export const PaperKey = (props: Props) => { const [paperKey, setPaperKey] = React.useState('') - - const _onSubmit = () => { - props.onSubmit(paperKey) - } + const onSubmit = () => props.onSubmit(paperKey) return ( { { disabled: !paperKey, label: 'Continue', - onClick: _onSubmit, + onClick: onSubmit, type: 'Success', waiting: props.waiting, }, @@ -73,7 +67,7 @@ export const PaperKey = (props: Props) => { textType="Body" containerStyle={styles.container2} inputStyle={styles.inputText} - onEnterKeyDown={_onSubmit} + onEnterKeyDown={onSubmit} onChangeText={setPaperKey} value={paperKey} /> diff --git a/shared/provision/password.tsx b/shared/provision/password.tsx index b4ed96aa430e..1a684503bc19 100644 --- a/shared/provision/password.tsx +++ b/shared/provision/password.tsx @@ -10,18 +10,14 @@ const Password = () => { const error = useProvisionState(s => s.error) const username = useProvisionState(s => s.username) const waiting = C.Waiting.useAnyWaiting(C.waitingKeyProvision) - const navigateUp = C.Router2.navigateUp const [resetEmailSent, setResetEmailSent] = React.useState(false) - const _onForgotPassword = () => { + const onForgotPassword = () => { startRecoverPassword({abortProvisioning: true, onResetEmailSent: () => setResetEmailSent(true), username}) } - const onBack = () => { - navigateUp() - } - const _onSubmit = useProvisionState(s => s.dispatch.dynamic.setPassphrase) - const onSubmit = (password: string) => !waiting && _onSubmit?.(password) + const onBack = C.Router2.navigateUp + const setPassphrase = useProvisionState(s => s.dispatch.dynamic.setPassphrase) const [password, setPassword] = React.useState('') - const _onSubmitClick = () => onSubmit(password) + const onSubmit = () => !waiting && setPassphrase?.(password) return ( { { disabled: !password, label: 'Continue', - onClick: _onSubmitClick, + onClick: onSubmit, type: 'Default', waiting, }, @@ -68,13 +64,13 @@ const Password = () => { - + Forgot password? diff --git a/shared/provision/select-other-device-connected.tsx b/shared/provision/select-other-device-connected.tsx index 26ffeb3eeae1..8994e6739ed9 100644 --- a/shared/provision/select-other-device-connected.tsx +++ b/shared/provision/select-other-device-connected.tsx @@ -9,9 +9,7 @@ const SelectOtherDeviceContainer = () => { const submitDeviceSelect = useProvisionState(s => s.dispatch.dynamic.submitDeviceSelect) const username = useProvisionState(s => s.username) const waiting = C.Waiting.useAnyWaiting(C.waitingKeyProvision) - const navigateUp = C.Router2.navigateUp - const _onBack = navigateUp - const onBack = useSafeSubmit(_onBack, false) + const onBack = useSafeSubmit(C.Router2.navigateUp, false) const onResetAccount = () => { startAccountReset(false, username) diff --git a/shared/provision/set-public-name.tsx b/shared/provision/set-public-name.tsx index c135a5c02314..a3a07c29caab 100644 --- a/shared/provision/set-public-name.tsx +++ b/shared/provision/set-public-name.tsx @@ -11,14 +11,8 @@ const SetPublicName = () => { const devices = Provision.useProvisionState(s => s.devices) const error = Provision.useProvisionState(s => s.error) const waiting = C.Waiting.useAnyWaiting(C.waitingKeyProvision) - const navigateUp = C.Router2.navigateUp - const ponBack = useSafeSubmit(navigateUp, !!error) - const psetDeviceName = Provision.useProvisionState(s => s.dispatch.dynamic.setDeviceName) - const ponSubmit = (name: string) => { - if (!waiting) { - psetDeviceName?.(name) - } - } + const onBack = useSafeSubmit(C.Router2.navigateUp, !!error) + const submitDeviceName = Provision.useProvisionState(s => s.dispatch.dynamic.setDeviceName) const iconNumbers = T.Devices.nextDeviceIconNumbers(devices) const deviceIconNumber = isMobile ? iconNumbers.mobile : iconNumbers.desktop @@ -34,11 +28,11 @@ const SetPublicName = () => { Provision.badDeviceRE.test(cleanDeviceName) const showDisabled = disabled && !!cleanDeviceName && readyToShowError const onSubmit = () => { - ponSubmit(Provision.cleanDeviceName(cleanDeviceName)) + if (!waiting) submitDeviceName?.(Provision.cleanDeviceName(cleanDeviceName)) } - const _setDeviceName = (deviceName: string) => { + const onChangeDeviceName = (name: string) => { setReadyToShowError(false) - setDeviceName(deviceName.replace(Provision.badDeviceChars, '')) + setDeviceName(name.replace(Provision.badDeviceChars, '')) debouncedSetReadyToShowError(true) } @@ -64,10 +58,10 @@ const SetPublicName = () => { label: 'Continue', onClick: onSubmit, type: 'Success', - waiting: waiting, + waiting, }, ]} - onBack={ponBack} + onBack={onBack} title={isMobile ? 'Name this device' : 'Name this computer'} > @@ -79,7 +73,7 @@ const SetPublicName = () => { maxLength={64} placeholder="Pick a device name" onEnterKeyDown={onSubmit} - onChangeText={_setDeviceName} + onChangeText={onChangeDeviceName} value={cleanDeviceName} containerStyle={styles.nameInput} /> diff --git a/shared/provision/troubleshooting.tsx b/shared/provision/troubleshooting.tsx index 297223df6c92..013507f39699 100644 --- a/shared/provision/troubleshooting.tsx +++ b/shared/provision/troubleshooting.tsx @@ -48,9 +48,8 @@ const BigButton = ({onClick, icon, mainText, subText, waiting}: BigButtonProps) const Troubleshooting = (props: Props) => { const onBack = props.onCancel - const navUpToScreen = C.Router2.navUpToScreen const onWayBack = () => { - navUpToScreen('login') + C.Router2.navUpToScreen('login') } const device = useProvisionState(s => s.codePageOtherDevice) diff --git a/shared/provision/username-or-email.tsx b/shared/provision/username-or-email.tsx index 32858cc6a75d..36a51cd6fab3 100644 --- a/shared/provision/username-or-email.tsx +++ b/shared/provision/username-or-email.tsx @@ -44,17 +44,10 @@ const UsernameOrEmailContainer = (op: OwnProps) => { const waiting = C.Waiting.useAnyWaiting(C.waitingKeyProvision) const hasError = !!error || !!inlineError || inlineSignUpLink - const navigateUp = C.Router2.navigateUp - const onBack = useSafeSubmit(navigateUp, hasError) - const navigateAppend = C.Router2.navigateAppend - const onForgotUsername = () => navigateAppend({name: 'forgotUsername', params: {}}) + const onBack = useSafeSubmit(C.Router2.navigateUp, hasError) + const onForgotUsername = () => C.Router2.navigateAppend({name: 'forgotUsername', params: {}}) const requestAutoInvite = useRequestAutoInvite() const _setUsername = useProvisionState(s => s.dispatch.dynamic.setUsername) - const _onSubmit = (username: string) => { - if (!waiting) { - _setUsername?.(username) - } - } const [username, setUsername] = React.useState(op.username ?? _username) React.useEffect(() => { if (op.username && op.username !== _username) { @@ -62,7 +55,7 @@ const UsernameOrEmailContainer = (op: OwnProps) => { } }, [op.username, _username, _setUsername]) const onSubmit = () => { - _onSubmit(username) + if (!waiting) _setUsername?.(username) } const onGoToSignup = () => { requestAutoInvite(username) diff --git a/shared/router-v2/account-switcher/index.tsx b/shared/router-v2/account-switcher/index.tsx index af0ad4b80414..02bcbf62edc2 100644 --- a/shared/router-v2/account-switcher/index.tsx +++ b/shared/router-v2/account-switcher/index.tsx @@ -14,7 +14,7 @@ const prepareAccountRows = => accountRows.filter(account => account.username !== myUsername) -const Container = () => { +const AccountSwitcher = () => { const _fullnames = useUsersState(s => s.infoMap) const _accountRows = useConfigState(s => s.configuredAccounts) const you = useCurrentUserState(s => s.username) @@ -202,7 +202,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ common: {flexShrink: 1}, isElectron: {wordBreak: 'break-all'}, }), - signOut: {color: Kb.Styles.globalColors.red}, text2: {flexShrink: 0}, userBox: { ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), @@ -211,4 +210,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ waiting: {opacity: 0.5}, })) -export default Container +export default AccountSwitcher diff --git a/shared/router-v2/common.tsx b/shared/router-v2/common.tsx index 6b331bdc0f00..0cd552849462 100644 --- a/shared/router-v2/common.tsx +++ b/shared/router-v2/common.tsx @@ -10,9 +10,7 @@ import Header from './header/index' export const headerDefaultStyle = isMobile ? { - get backgroundColor() { - return isIOS ? Kb.Styles.globalColors.white : Kb.Styles.globalColors.white - }, + backgroundColor: Kb.Styles.globalColors.white, borderBottomColor: Kb.Styles.globalColors.black_10, borderBottomWidth: Kb.Styles.hairlineWidth, height: 44, diff --git a/shared/router-v2/header/index.desktop.tsx b/shared/router-v2/header/index.desktop.tsx index 8083ba381b8c..e112e3e639c6 100644 --- a/shared/router-v2/header/index.desktop.tsx +++ b/shared/router-v2/header/index.desktop.tsx @@ -289,8 +289,6 @@ const styles = Kb.Styles.styleSheetCreate( ...Kb.Styles.desktopStyles.windowDraggingClickable, alignItems: 'center', borderRadius: Kb.Styles.borderRadius, - display: 'inline-block', - ...Kb.Styles.size(14), marginLeft: 4, marginRight: 6, padding: Kb.Styles.globalMargins.xtiny, diff --git a/shared/router-v2/linking.tsx b/shared/router-v2/linking.tsx index e33aab16ff99..8e747eebb456 100644 --- a/shared/router-v2/linking.tsx +++ b/shared/router-v2/linking.tsx @@ -233,74 +233,64 @@ export const createLinkingConfig = ( _fallbackHandler = handleAppLink return { getInitialURL: async () => { - // Compute the startup URL from saved state, push notifications, and deep links. - // This replaces the manual NavigationState construction that was in useInitialState. - const {loggedIn, startup, androidShare} = useConfigState.getState() - if (!loggedIn) return null - - const {tab: startupTab, followUser: startupFollowUser} = startup - let startupConversation = startup.conversation - if (!isValidConversationIDKey(startupConversation)) { - startupConversation = '' - } + const {loggedIn, startup, androidShare} = useConfigState.getState() + if (!loggedIn) return null - // Lazy-require to break require cycle: linking.tsx → push.native.tsx → linking.tsx - - const {usePushState} = require('@/stores/push') as typeof UsePushStateType - const pushState = usePushState.getState() - const showMonster = - !pushState.justSignedUp && pushState.showPushPrompt && !pushState.hasPermissions + const {tab: startupTab, followUser: startupFollowUser} = startup + let startupConversation = startup.conversation + if (!isValidConversationIDKey(startupConversation)) { + startupConversation = '' + } - // Check for an incoming deep link URL (native only) - let deepLinkUrl: string | null = null - if (isMobile) { - try { - deepLinkUrl = await Linking.getInitialURL() - } catch {} - } + // Lazy-require to break require cycle: linking.tsx → push.native.tsx → linking.tsx + const {usePushState} = require('@/stores/push') as typeof UsePushStateType + const pushState = usePushState.getState() + const showMonster = + !pushState.justSignedUp && pushState.showPushPrompt && !pushState.hasPermissions + + let deepLinkUrl: string | null = null + if (isMobile) { + try { + deepLinkUrl = await Linking.getInitialURL() + } catch {} + } - const haveSavedTab = !!(startupTab || startupConversation) + const haveSavedTab = !!(startupTab || startupConversation) - // Deep link URL takes priority - if (deepLinkUrl) { - const normalized = normalizeUrl(deepLinkUrl) - if (normalized) { - if (isHandledByLinkingConfig(normalized)) return normalized - // URL not handled by linking config; use imperative navigation as fallback - setTimeout(() => handleAppLink(normalized), 1) - return null + if (deepLinkUrl) { + const normalized = normalizeUrl(deepLinkUrl) + if (normalized) { + if (isHandledByLinkingConfig(normalized)) return normalized + // URL not handled by linking config; use imperative navigation as fallback + setTimeout(() => handleAppLink(normalized), 1) + return null + } } - } - // Push permission prompt (if no saved state to restore) - if (showMonster && !haveSavedTab) { - return 'keybase://settingsPushPrompt' - } + if (showMonster && !haveSavedTab) { + return 'keybase://settingsPushPrompt' + } - // Android share intent (if no saved state to restore) - if (androidShare && !haveSavedTab) { - return 'keybase://incoming-share' - } + if (androidShare && !haveSavedTab) { + return 'keybase://incoming-share' + } - // Push notification follow user - if (startupFollowUser && !startupConversation) { - _initialURLOnce = `keybase://profile/show/${startupFollowUser}` - return _initialURLOnce - } + if (startupFollowUser && !startupConversation) { + _initialURLOnce = `keybase://profile/show/${startupFollowUser}` + return _initialURLOnce + } - // Saved conversation from last session - if (startupConversation) { - _initialURLOnce = `keybase://convid/${startupConversation}` - return _initialURLOnce - } + if (startupConversation) { + _initialURLOnce = `keybase://convid/${startupConversation}` + return _initialURLOnce + } - // Saved tab from last session - if (startupTab) { - return `keybase://${startupTab}` - } + if (startupTab) { + return `keybase://${startupTab}` + } - return null - }, + return null + }, // Prevent React Navigation from updating window.location on Electron (file:// protocol). // On native this is a no-op since there's no browser URL to update. diff --git a/shared/router-v2/screen-layout-modal.desktop.tsx b/shared/router-v2/screen-layout-modal.desktop.tsx index a4d34e8a62de..e102c32e6bd2 100644 --- a/shared/router-v2/screen-layout-modal.desktop.tsx +++ b/shared/router-v2/screen-layout-modal.desktop.tsx @@ -13,7 +13,7 @@ type ModalHeaderProps = { const ModalHeader = (props: ModalHeaderProps) => ( - + {!!props.leftButton && props.leftButton} diff --git a/shared/settings/about.tsx b/shared/settings/about.tsx index 844431d49b93..3f3759b4c3d8 100644 --- a/shared/settings/about.tsx +++ b/shared/settings/about.tsx @@ -26,7 +26,7 @@ const About = () => { } return ( - + @@ -46,9 +46,6 @@ const About = () => { ) } const styles = Kb.Styles.styleSheetCreate(() => ({ - container: { - alignItems: 'center', - }, terms: { marginBottom: Kb.Styles.globalMargins.tiny, }, diff --git a/shared/settings/account/email-phone-row.tsx b/shared/settings/account/email-phone-row.tsx index b5ce8c071c59..bb1b04c40ed3 100644 --- a/shared/settings/account/email-phone-row.tsx +++ b/shared/settings/account/email-phone-row.tsx @@ -134,7 +134,7 @@ const EmailPhoneRow = (p: {contactKey: string; onEmailVerificationSuccess: (emai return ( - + {address} diff --git a/shared/settings/advanced.tsx b/shared/settings/advanced.tsx index 019ad2837cbf..45d92f186240 100644 --- a/shared/settings/advanced.tsx +++ b/shared/settings/advanced.tsx @@ -108,7 +108,6 @@ const LockdownCheckbox = (p: { settingLockdownMode: boolean }) => { const {hasRandomPW, loaded, lockdownModeEnabled, setLockdownMode, settingLockdownMode} = p - const onChangeLockdownMode = setLockdownMode const readMoreUrlProps = Kb.useClickURL('https://keybase.io/docs/lockdown/index') const label = 'Enable account lockdown mode' + (hasRandomPW ? ' (you need to set a password first)' : '') const checked = hasRandomPW || !!lockdownModeEnabled @@ -117,7 +116,7 @@ const LockdownCheckbox = (p: { {label} @@ -234,7 +233,7 @@ const Advanced = () => { return ( - + {settingLockdownMode && } @@ -442,9 +441,6 @@ const styles = Kb.Styles.styleSheetCreate( marginTop: Kb.Styles.globalMargins.small, width: '100%', }, - scrollview: { - width: '100%', - }, section: Kb.Styles.platformStyles({ common: { ...Kb.Styles.padding( diff --git a/shared/settings/chat.tsx b/shared/settings/chat.tsx index fd0ac7bb0f7c..8c618ce1ca71 100644 --- a/shared/settings/chat.tsx +++ b/shared/settings/chat.tsx @@ -372,6 +372,7 @@ const Links = () => { { const Chat = () => { const notificationSettings = useNotificationSettings() return ( - - - - - - - - - - - + + + + + + + + + ) } const TeamRow = (p: {checked: boolean; isOpen: boolean; name: string; onCheck: (c: boolean) => void}) => { const {checked, isOpen, name, onCheck} = p return ( - - - onCheck(checked)} style={styles.teamCheckbox} /> - - - - - {name} - - {isOpen && ( - - )} - - + + onCheck(checked)} style={styles.teamCheckbox} /> + + + + {name} + + {isOpen && ( + + )} ) @@ -536,7 +531,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ container: Kb.Styles.platformStyles({ common: { ...Kb.Styles.paddingV(Kb.Styles.globalMargins.small), - width: '100%', }, }), divider: {marginBottom: Kb.Styles.globalMargins.small}, @@ -564,7 +558,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ marginTop: 2, }, teamNameContainer: { - alignSelf: 'center', flexShrink: 1, marginLeft: Kb.Styles.globalMargins.tiny, marginRight: Kb.Styles.globalMargins.small, @@ -572,9 +565,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ teamRowContainer: { ...Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, Kb.Styles.globalMargins.small, Kb.Styles.globalMargins.xtiny, isMobile ? Kb.Styles.globalMargins.large : 48), }, - teamText: { - alignSelf: 'flex-start', - }, whitelist: Kb.Styles.platformStyles({ common: { alignSelf: 'flex-start', @@ -604,7 +594,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ backgroundColor: Kb.Styles.globalColors.white, flexShrink: 0, height: 40, - justifyContent: 'space-between', marginLeft: Kb.Styles.globalMargins.tiny, padding: Kb.Styles.globalMargins.tiny, paddingRight: Kb.Styles.globalMargins.small, diff --git a/shared/settings/delete-confirm/index.tsx b/shared/settings/delete-confirm/index.tsx index 91acb1c0d897..e5ff763d5bb2 100644 --- a/shared/settings/delete-confirm/index.tsx +++ b/shared/settings/delete-confirm/index.tsx @@ -87,7 +87,7 @@ const DeleteConfirm = () => { header={ <> - + } onCancel={onCancel} @@ -104,6 +104,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ padding: Kb.Styles.globalMargins.mediumLarge, }, }), + deleteIcon: {marginRight: -60, marginTop: -20, zIndex: 1}, randomPWStatus: { padding: Kb.Styles.globalMargins.small, paddingBottom: 0, diff --git a/shared/settings/display.tsx b/shared/settings/display.tsx index 2a86baeeabd6..6ab48022dde2 100644 --- a/shared/settings/display.tsx +++ b/shared/settings/display.tsx @@ -28,7 +28,7 @@ const Display = () => { ) } return ( - + @@ -79,9 +79,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ container: { padding: Kb.Styles.globalMargins.small, }, - scrollview: { - width: '100%', - }, })) export default Display diff --git a/shared/settings/feedback/container.shared.tsx b/shared/settings/feedback/container.shared.tsx deleted file mode 100644 index e983cc31075e..000000000000 --- a/shared/settings/feedback/container.shared.tsx +++ /dev/null @@ -1,4 +0,0 @@ -export type Props = { - heading?: string - feedback?: string -} diff --git a/shared/settings/feedback/container.tsx b/shared/settings/feedback/container.tsx index e732ddea195c..c86249656231 100644 --- a/shared/settings/feedback/container.tsx +++ b/shared/settings/feedback/container.tsx @@ -8,10 +8,11 @@ import logger from '@/logger' import {Platform} from 'react-native' import {getExtraChatLogsForLogSend, useSendFeedback} from './shared' import {version, pprofDir} from '@/constants/platform' -import type {Props as OwnProps} from './container.shared' import {usePushState} from '@/stores/push' import {appVersionName, appVersionCode, logSend} from 'react-native-kb' -export type {Props} from './container.shared' + +type OwnProps = {heading?: string; feedback?: string} +export type Props = OwnProps const mobileOsVersion = Platform.Version diff --git a/shared/settings/feedback/index.tsx b/shared/settings/feedback/index.tsx index 0b3497691f9e..93447f719008 100644 --- a/shared/settings/feedback/index.tsx +++ b/shared/settings/feedback/index.tsx @@ -45,18 +45,6 @@ const Feedback = (props: Props) => { lastSendErrorRef.current = sendError }, [sending, sendError, onFeedbackDone, feedback, showInternalSuccessBanner]) - const _onChangeFeedback = (feedback: string) => { - setFeedback(feedback) - } - - const _onChangeSendLogs = (sendLogs: boolean) => { - setSendLogs(sendLogs) - } - - const _onChangeEmail = (email: string) => { - setEmail(email) - } - const _sendMaxBytes = () => clickCount >= clickThreshold const _onSendFeedback = () => { @@ -83,7 +71,7 @@ const Feedback = (props: Props) => { containerStyle={styles.input} inputStyle={styles.inputResize} multiline={true} - onChangeText={_onChangeFeedback} + onChangeText={setFeedback} placeholder="Please tell us what you were doing, your experience, or anything else we should know. Thanks!" rowsMin={4} rowsMax={isMobile ? 4 : 10} @@ -101,7 +89,7 @@ const Feedback = (props: Props) => { 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={_onChangeSendLogs} + onCheck={setSendLogs} /> @@ -110,7 +98,7 @@ const Feedback = (props: Props) => { )} diff --git a/shared/settings/notifications/index.tsx b/shared/settings/notifications/index.tsx index a3f15e5903a1..e65e55a1c30f 100644 --- a/shared/settings/notifications/index.tsx +++ b/shared/settings/notifications/index.tsx @@ -9,40 +9,20 @@ import {usePushState} from '@/stores/push' const TurnOnNotifications = () => { const mobileHasPermissions = usePushState(s => s.hasPermissions) - const requestPermissions = usePushState(s => s.dispatch.requestPermissions) + const onEnable = usePushState(s => s.dispatch.requestPermissions) if (mobileHasPermissions) return null - const onEnable = requestPermissions return ( - + - + You turned off native notifications for Keybase. It's{' '} very @@ -86,7 +66,7 @@ const Notifications = () => { onReload={onReload} reloadOnMount={true} > - + @@ -94,4 +74,25 @@ const Notifications = () => { ) } +const styles = Kb.Styles.styleSheetCreate(() => ({ + scrollView: {...Kb.Styles.globalStyles.flexBoxColumn, flex: 1}, + turnOnIllustration: { + height: 270, + left: Kb.Styles.globalMargins.medium, + position: 'absolute', + top: -20, + width: 250, + }, + turnOnOuter: { + backgroundColor: Kb.Styles.globalColors.red, + height: 330, + }, + turnOnText: { + bottom: Kb.Styles.globalMargins.medium, + left: Kb.Styles.globalMargins.small, + position: 'absolute', + right: Kb.Styles.globalMargins.small, + }, +})) + export default Notifications diff --git a/shared/settings/notifications/render.tsx b/shared/settings/notifications/render.tsx index b2eff4958f95..ef74d509b490 100644 --- a/shared/settings/notifications/render.tsx +++ b/shared/settings/notifications/render.tsx @@ -52,7 +52,7 @@ const Notifications = (props: Props) => { const hasLoadedGroups = props.groups.size > 0 const emailGroup = props.groups.get('email') return !hasLoadedGroups ? ( - + ) : ( @@ -89,7 +89,6 @@ const styles = Kb.Styles.styleSheetCreate( marginLeft: -Kb.Styles.globalMargins.small, marginTop: Kb.Styles.globalMargins.small, }, - loading: {alignItems: 'center'}, main: Kb.Styles.platformStyles({ common: {flex: 1, padding: Kb.Styles.globalMargins.small, paddingRight: 0}, isElectron: Kb.Styles.desktopStyles.scrollable, diff --git a/shared/settings/password.tsx b/shared/settings/password.tsx index 231928ed259a..881e036e1beb 100644 --- a/shared/settings/password.tsx +++ b/shared/settings/password.tsx @@ -15,6 +15,13 @@ type Props = { waitingForResponse?: boolean } +const errorSavingFunc = (password: string, passwordConfirm: string): string => { + if (password && passwordConfirm && password !== passwordConfirm) { + return 'Passwords must match.' + } + return '' +} + export const UpdatePassword = (props: Props) => { const [password, setPassword] = React.useState('') const [passwordConfirm, setPasswordConfirm] = React.useState('') @@ -31,13 +38,6 @@ export const UpdatePassword = (props: Props) => { setErrorSaving(errorSavingFunc(password, passwordConfirm)) } - const errorSavingFunc = (password: string, passwordConfirm: string): string => { - if (password && passwordConfirm && password !== passwordConfirm) { - return 'Passwords must match.' - } - return '' - } - const canSubmit = () => !errorSaving && password.length >= 8 && password === passwordConfirm const keyboardType = showTyping && isAndroid ? 'visible-password' : 'default' diff --git a/shared/settings/proxy.tsx b/shared/settings/proxy.tsx index b160e1b09ceb..867ae6b64098 100644 --- a/shared/settings/proxy.tsx +++ b/shared/settings/proxy.tsx @@ -236,14 +236,12 @@ const ProxySettingsComponent = (props: Props) => { const ProxySettingsPopup = (props: Props) => { return ( - <> - - {!isMobile && } - - - + + {!isMobile && } + + - + ) } diff --git a/shared/settings/routes.tsx b/shared/settings/routes.tsx index 1736bdf966e8..9beeba0bdcba 100644 --- a/shared/settings/routes.tsx +++ b/shared/settings/routes.tsx @@ -8,7 +8,7 @@ import * as Settings from '@/constants/settings' import {defineRouteMap} from '@/constants/types/router' import {usePushState} from '@/stores/push' import {e164ToDisplay} from '@/util/phone-numbers' -import type {Props as FeedbackRouteParams} from './feedback/container.shared' +type FeedbackRouteParams = {heading?: string; feedback?: string} export type SettingsAccountRouteParams = { addedEmailBannerEmail?: string diff --git a/shared/settings/subheading.shared.tsx b/shared/settings/subheading.shared.tsx deleted file mode 100644 index a715c061e3ce..000000000000 --- a/shared/settings/subheading.shared.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type * as React from 'react' - -export type Props = { - children?: React.ReactNode -} diff --git a/shared/signup/common.tsx b/shared/signup/common.tsx index af92c6bbc008..f5e02511c918 100644 --- a/shared/signup/common.tsx +++ b/shared/signup/common.tsx @@ -5,6 +5,11 @@ import {type ButtonProps} from '@/common-adapters/button' import {openURL} from '@/util/misc' import {useConfigState} from '@/stores/config' +export const desktopInputWidth = Kb.Styles.platformStyles({ + isElectron: {width: 368}, + isTablet: {width: 368}, +}) + type InfoIconProps = { invisible?: boolean style?: Kb.Styles.StylesCrossPlatform @@ -60,7 +65,6 @@ type HeaderProps = { showInfoIconRow: boolean style: Kb.Styles.StylesCrossPlatform negative: boolean - rightActionComponent?: React.ReactNode rightActionLabel?: string onRightAction?: () => void } @@ -106,11 +110,6 @@ const Header = (props: HeaderProps) => ( style={styles.rightActionButton} /> )} - {props.rightActionComponent && ( - - {props.rightActionComponent} - - )} ) @@ -138,11 +137,10 @@ type SignupScreenProps = { title?: string titleComponent?: React.ReactNode header?: React.ReactNode - rightActionComponent?: React.ReactNode rightActionLabel?: string onRightAction?: () => void - showHeaderInfoicon?: boolean - showHeaderInfoiconRow?: boolean + showHeaderInfoIcon?: boolean + showHeaderInfoIconRow?: boolean hideDesktopHeader?: boolean } @@ -163,14 +161,13 @@ export const SignupScreen = (props: SignupScreenProps) => { onBack={props.onBack} title={props.title} titleComponent={props.titleComponent} - showInfoIcon={!!props.showHeaderInfoicon} - showInfoIconRow={!!props.showHeaderInfoiconRow} + showInfoIcon={!!props.showHeaderInfoIcon} + showInfoIconRow={!!props.showHeaderInfoIconRow} style={Kb.Styles.collapseStyles([ props.noBackground && styles.whiteHeaderContainer, props.headerStyle, ])} negative={!!props.negativeHeader} - rightActionComponent={props.rightActionComponent} rightActionLabel={props.rightActionLabel} onRightAction={props.onRightAction} /> @@ -200,7 +197,7 @@ export const SignupScreen = (props: SignupScreenProps) => { {props.footer} )} - {!!props.banners && } + {!!props.banners && {props.banners}} {!!props.buttons && ( { direction="vertical" gap={isMobile ? 'small' : 'medium'} fullWidth={true} - style={Kb.Styles.globalStyles.flexOne} + flex={1} > ({ color: Kb.Styles.globalColors.redDark, marginLeft: 2, }, - input: Kb.Styles.platformStyles({ - isElectron: {width: 368}, - isTablet: {width: 368}, - }), + input: desktopInputWidth, })) diff --git a/shared/signup/email.tsx b/shared/signup/email.tsx index c3f0d49fd0ec..f33ad4f23303 100644 --- a/shared/signup/email.tsx +++ b/shared/signup/email.tsx @@ -1,7 +1,7 @@ import * as C from '@/constants' import * as React from 'react' import * as Kb from '@/common-adapters' -import {SignupScreen, errorBanner} from './common' +import {SignupScreen, errorBanner, desktopInputWidth} from './common' import {useAddEmail} from '@/settings/account/use-add-email' import {usePushState} from '@/stores/push' import {setSignupEmail} from '@/people/signup-email' @@ -11,12 +11,7 @@ const ConnectedEnterEmail = () => { const {error, submitEmail, waiting} = useAddEmail() const clearModals = C.Router2.clearModals const navigateAppend = C.Router2.navigateAppend - const _onSkip = () => { - setSignupEmail(C.noEmail) - } - - const onSkip = () => { - _onSkip() + const afterEmail = () => { if (_showPushPrompt) { navigateAppend({name: 'settingsPushPrompt', params: {}}, true) } else { @@ -24,14 +19,15 @@ const ConnectedEnterEmail = () => { } } + const onSkip = () => { + setSignupEmail(C.noEmail) + afterEmail() + } + const onCreate = (email: string, searchable: boolean) => { submitEmail(email, searchable, addedEmail => { setSignupEmail(addedEmail) - if (_showPushPrompt) { - navigateAppend({name: 'settingsPushPrompt', params: {}}, true) - } else { - clearModals() - } + afterEmail() }) } @@ -54,13 +50,13 @@ const ConnectedEnterEmail = () => { label: 'Finish', onClick: onContinue, type: 'Success', - waiting: waiting, + waiting, }, ]} rightActionLabel="Skip" onRightAction={onSkip} title="Your email address" - showHeaderInfoicon={true} + showHeaderInfoIcon={true} > ( direction="vertical" gap={isMobile ? 'small' : 'medium'} fullWidth={true} - style={Kb.Styles.globalStyles.flexOne} + flex={1} > @@ -120,13 +116,12 @@ export const EnterEmailBody = (props: BodyProps) => ( const styles = Kb.Styles.styleSheetCreate(() => ({ checkbox: {width: '100%'}, - input: Kb.Styles.platformStyles({ - isElectron: {width: 368}, - }), + input: desktopInputWidth, inputBox: Kb.Styles.platformStyles({ // need to set width so subtext will wrap isElectron: {width: 368}, isMobile: {width: '100%'}, + isTablet: {width: 368}, }), })) diff --git a/shared/signup/feedback.tsx b/shared/signup/feedback.tsx index 098ce288a1c2..3e14912d841b 100644 --- a/shared/signup/feedback.tsx +++ b/shared/signup/feedback.tsx @@ -26,8 +26,7 @@ const SignupFeedback = () => { } title="Send feedback" onBack={C.Router2.navigateUp} - showHeaderInfoicon={false} - showHeaderInfoiconRow={!loggedOut} + showHeaderInfoIconRow={!loggedOut} > { { const styles = Kb.Styles.styleSheetCreate(() => ({ checkbox: {width: '100%'}, container: Kb.Styles.platformStyles({ - common: Kb.Styles.globalStyles.flexOne, isTablet: {maxWidth: 386}, }), input: Kb.Styles.platformStyles({ @@ -65,10 +65,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ width: '100%', }, }), - inputBox: Kb.Styles.platformStyles({ - // need to set width so subtext will wrap - isElectron: {width: 368}, - }), + inputBox: desktopInputWidth, })) const ConnectedEnterPhoneNumber = () => { @@ -90,13 +87,6 @@ const ConnectedEnterPhoneNumber = () => { navigateAppend({name: 'signupVerifyPhoneNumber', params: {phoneNumber: submittedPhoneNumber}}) }) } - const onChangeNumberCb = (phoneNumber: string, validity: boolean) => { - if (error) { - clearError() - } - onChangePhoneNumber(phoneNumber) - onChangeValidity(validity) - } return ( { disabled, label: 'Continue', onClick: onContinue, - type: 'Success' as const, - waiting: waiting, + type: 'Success', + waiting, }, ]} banners={errorBanner(error)} rightActionLabel="Skip" onRightAction={onSkip} title="Your phone number" - showHeaderInfoicon={true} + showHeaderInfoIcon={true} > { + if (error) clearError() + onChangePhoneNumber(phoneNumber) + onChangeValidity(validity) + }} onContinue={onContinue} searchable={true} iconType={C.isLargeScreen ? 'icon-phone-number-add-96' : 'icon-phone-number-add-64'} diff --git a/shared/signup/phone-number/verify.tsx b/shared/signup/phone-number/verify.tsx index 934fcbcba3e3..7096be43ae87 100644 --- a/shared/signup/phone-number/verify.tsx +++ b/shared/signup/phone-number/verify.tsx @@ -8,7 +8,7 @@ import {usePhoneVerification} from './use-verification' type Props = {route: {params: {phoneNumber: string}}} -const Container = ({route}: Props) => { +const VerifyPhoneNumber = ({route}: Props) => { const {phoneNumber} = route.params const resendWaiting = C.Waiting.useAnyWaiting(C.waitingKeySettingsPhoneResendVerification) const verifyWaiting = C.Waiting.useAnyWaiting(C.waitingKeySettingsPhoneVerifyPhoneNumber) @@ -56,11 +56,11 @@ const Container = ({route}: Props) => { {displayPhone} - + } negativeHeader={true} - showHeaderInfoicon={true} + showHeaderInfoIcon={true} > @@ -83,4 +83,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default VerifyPhoneNumber diff --git a/shared/signup/username.tsx b/shared/signup/username.tsx index bd8ae10411b5..1fe5d73c9d92 100644 --- a/shared/signup/username.tsx +++ b/shared/signup/username.tsx @@ -1,7 +1,7 @@ import * as C from '@/constants' import * as Kb from '@/common-adapters' import * as React from 'react' -import {SignupScreen, errorBanner} from './common' +import {SignupScreen, errorBanner, desktopInputWidth} from './common' import {useProvisionState} from '@/stores/provision' import * as T from '@/constants/types' import {RPCError} from '@/util/errors' @@ -88,7 +88,7 @@ const EnterUsername = (props: EnterUsernameProps) => { props.onContinue(usernameTrimmed) } const eulaLabel = ( - + I accept the{' '} { } buttons={[ { - disabled: disabled, + disabled, label: 'Continue', onClick: onContinue, type: 'Success', @@ -165,10 +165,8 @@ const EnterUsername = (props: EnterUsernameProps) => { } const styles = Kb.Styles.styleSheetCreate(() => ({ - input: Kb.Styles.platformStyles({ - isElectron: {width: 368}, - isTablet: {width: 368}, - }), + eulaText: {alignSelf: 'center' as const}, + input: desktopInputWidth, })) export default ConnectedEnterUsername diff --git a/shared/team-building/contact-restricted.tsx b/shared/team-building/contact-restricted.tsx index 35b78ee9dfb0..7ea1578a7dd2 100644 --- a/shared/team-building/contact-restricted.tsx +++ b/shared/team-building/contact-restricted.tsx @@ -63,11 +63,7 @@ export const ContactRestricted = (props: Props) => { type={isMobile ? 'Large' : 'Small'} icon={} firstItem={idx === 0} - body={ - - {username} - - } + body={{username}} /> ))} @@ -114,12 +110,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, })) -const ContactContainer = (ownProps: Props) => { - const props = { - source: ownProps.source, - usernames: ownProps.usernames, - } - return -} - -export default ContactContainer +export default ContactRestricted diff --git a/shared/team-building/continue-button.tsx b/shared/team-building/continue-button.tsx index afdcffb300f1..6dff0bc7d50b 100644 --- a/shared/team-building/continue-button.tsx +++ b/shared/team-building/continue-button.tsx @@ -1,4 +1,4 @@ -import * as Kb from '@/common-adapters/index' +import * as Kb from '@/common-adapters' export type Props = { label: string diff --git a/shared/team-building/email-search.tsx b/shared/team-building/email-search.tsx index 28a46928c6f6..0ab81a8168d0 100644 --- a/shared/team-building/email-search.tsx +++ b/shared/team-building/email-search.tsx @@ -23,15 +23,15 @@ const EmailSearch = ({continueLabel, namespace, search}: EmailSearchProps) => { const canSubmit = !!user && !waiting && isEmailValid const onChange = (_text: string) => { - // Remove leading or trailing whitespace - const text = _text.trim() - setEmailString(text) - const valid = validateEmailAddress(text) - setEmailValidity(valid) - if (valid) { - search(text, 'email') - } + // Remove leading or trailing whitespace + const text = _text.trim() + setEmailString(text) + const valid = validateEmailAddress(text) + setEmailValidity(valid) + if (valid) { + search(text, 'email') } + } const addUsersToTeamSoFar = TB.useTBContext(s => s.dispatch.addUsersToTeamSoFar) diff --git a/shared/team-building/go-button.tsx b/shared/team-building/go-button.tsx index ffb840e045a6..73f224922103 100644 --- a/shared/team-building/go-button.tsx +++ b/shared/team-building/go-button.tsx @@ -1,4 +1,4 @@ -import * as Kb from '@/common-adapters/index' +import * as Kb from '@/common-adapters' import type * as T from '@/constants/types' export type Props = { diff --git a/shared/team-building/index.tsx b/shared/team-building/index.tsx index e1c57a5f643f..75aabcfa989c 100644 --- a/shared/team-building/index.tsx +++ b/shared/team-building/index.tsx @@ -10,7 +10,7 @@ import TeamBox from './team-box' import logger from '@/logger' import {ContactsBanner} from './contacts' import {ListBody} from './list-body' -import {serviceIdToSearchPlaceholder} from './shared' +import {serviceIdToSearchPlaceholder, getSearchResults} from './shared' import {FilteredServiceTabBar} from './filtered-service-tab-bar' import {useSharedValue} from '@/common-adapters/reanimated' @@ -41,12 +41,6 @@ const deriveSelectedUsers = (teamSoFar: ReadonlySet): Array searchResults.get(searchString.trim())?.get(selectedService) - const findUserById = (users: ReadonlyArray | undefined, userId: string) => users?.find(user => user.id === userId) @@ -69,7 +63,7 @@ const useTeamBuildingData = (searchString: string, selectedService: T.TB.Service error, teamSoFar: deriveSelectedUsers(rawTeamSoFar), userRecs, - userResults: getUserResults(searchResults, searchString, selectedService), + userResults: getSearchResults(searchResults, searchString, selectedService), } } diff --git a/shared/team-building/input.tsx b/shared/team-building/input.tsx index e6750191791d..c8bbeb17d0c9 100644 --- a/shared/team-building/input.tsx +++ b/shared/team-building/input.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import * as Kb from '@/common-adapters/index' +import * as Kb from '@/common-adapters' type Props = { onChangeText: (newText: string) => void @@ -62,15 +62,15 @@ const Input = (props: Props) => { }, [focusCounter, prevFocusCounterRef]) const onKeyDown = (e: React.KeyboardEvent) => { - handleKeyDown( - () => e.preventDefault(), - e.ctrlKey, - e.key, - onUpArrowKeyDown, - onDownArrowKeyDown, - onEnterKeyDown - ) - } + handleKeyDown( + () => e.preventDefault(), + e.ctrlKey, + e.key, + onUpArrowKeyDown, + onDownArrowKeyDown, + onEnterKeyDown + ) + } return ( diff --git a/shared/team-building/list-body.tsx b/shared/team-building/list-body.tsx index ac07a184854f..208842ab1947 100644 --- a/shared/team-building/list-body.tsx +++ b/shared/team-building/list-body.tsx @@ -215,12 +215,6 @@ const sortAndSplitRecommendations = ( return sections.filter(section => section.data.length > 0) } -const getSearchResults = ( - searchResults: TB.State['searchResults'], - searchString: string, - selectedService: T.TB.ServiceIdWithContact -) => searchResults.get(searchString.trim())?.get(selectedService) - const getSelectableResults = ( showRecs: boolean, recommendations: ReadonlyArray | undefined, @@ -274,7 +268,7 @@ const useListBodyData = ({ following, preExistingTeamMembers ) - const userResults = getSearchResults(allSearchResults, searchString, selectedService) + const userResults = Shared.getSearchResults(allSearchResults, searchString, selectedService) const searchResults = deriveSearchResults( userResults, teamSoFar, diff --git a/shared/team-building/phone-search.tsx b/shared/team-building/phone-search.tsx index f802f7d251f7..fd4c6367f850 100644 --- a/shared/team-building/phone-search.tsx +++ b/shared/team-building/phone-search.tsx @@ -1,7 +1,7 @@ import * as C from '@/constants' import * as TB from '@/stores/team-building' import * as React from 'react' -import * as Kb from '@/common-adapters/index' +import * as Kb from '@/common-adapters' import type * as T from '@/constants/types' import ContinueButton from './continue-button' import {searchWaitingKey} from '@/constants/strings' diff --git a/shared/team-building/recs-and-recos.tsx b/shared/team-building/recs-and-recos.tsx index 7a7b344528bd..3292643d1cf9 100644 --- a/shared/team-building/recs-and-recos.tsx +++ b/shared/team-building/recs-and-recos.tsx @@ -31,7 +31,7 @@ export const numSectionLabel = '0-9' const SearchHintText = () => ( - + Search anyone on Keybase by typing a username or a full name. diff --git a/shared/team-building/search-result/common-result.tsx b/shared/team-building/search-result/common-result.tsx index c663681ae17f..81362c7014bf 100644 --- a/shared/team-building/search-result/common-result.tsx +++ b/shared/team-building/search-result/common-result.tsx @@ -353,6 +353,15 @@ const Username = (props: { } export const userResultHeight = isMobile ? Kb.Styles.globalMargins.xlarge : 48 + +// Shared row padding used by UserResult, YouResult, and HellobotResult +export const rowContainerWithLargePadding = Kb.Styles.padding( + Kb.Styles.globalMargins.tiny, + Kb.Styles.globalMargins.medium, + Kb.Styles.globalMargins.tiny, + Kb.Styles.globalMargins.xsmall +) + const styles = Kb.Styles.styleSheetCreate(() => ({ actionButtonsHighlighted: Kb.Styles.platformStyles({ isElectron: { diff --git a/shared/team-building/search-result/hellobot-result.tsx b/shared/team-building/search-result/hellobot-result.tsx index d266ca16c3eb..41a98e58fce6 100644 --- a/shared/team-building/search-result/hellobot-result.tsx +++ b/shared/team-building/search-result/hellobot-result.tsx @@ -2,7 +2,7 @@ import type * as React from 'react' import {previewConversation} from '@/constants/router' import {useTBContext} from '@/stores/team-building' import * as Kb from '@/common-adapters' -import CommonResult, {type ResultProps} from './common-result' +import CommonResult, {type ResultProps, rowContainerWithLargePadding} from './common-result' const HellobotResult = function HellobotResult(props: ResultProps) { const cancelTeamBuilding = useTBContext(s => s.dispatch.cancelTeamBuilding) @@ -14,18 +14,9 @@ const HellobotResult = function HellobotResult(props: ResultProps) { } const bottomRow: React.ReactNode = Say hi, play puzzles, or ask for help - return + return ( + + ) } -const styles = Kb.Styles.styleSheetCreate(() => ({ - rowContainer: { - ...Kb.Styles.padding( - Kb.Styles.globalMargins.tiny, - Kb.Styles.globalMargins.medium, - Kb.Styles.globalMargins.tiny, - Kb.Styles.globalMargins.xsmall - ), - }, -})) - export default HellobotResult diff --git a/shared/team-building/search-result/people-result.tsx b/shared/team-building/search-result/people-result.tsx index afe14c80579f..4313b1103f95 100644 --- a/shared/team-building/search-result/people-result.tsx +++ b/shared/team-building/search-result/people-result.tsx @@ -143,11 +143,9 @@ const DropdownButton = (p: DropdownProps) => { ref={popupAnchor} direction="vertical" > - - - - - + + + {popup} ) diff --git a/shared/team-building/search-result/user-result.tsx b/shared/team-building/search-result/user-result.tsx index 52031d5ee9da..dc2434705d79 100644 --- a/shared/team-building/search-result/user-result.tsx +++ b/shared/team-building/search-result/user-result.tsx @@ -1,6 +1,6 @@ import type * as React from 'react' import * as Kb from '@/common-adapters' -import CommonResult, {type ResultProps} from './common-result' +import CommonResult, {type ResultProps, rowContainerWithLargePadding} from './common-result' import YouResult from './you-result' import HellobotResult from './hellobot-result' @@ -17,7 +17,7 @@ const UserResult = function UserResult(props: ResultProps) { return ( ({ marginRight: Kb.Styles.globalMargins.tiny, }, }), - rowContainer: { - ...Kb.Styles.padding( - Kb.Styles.globalMargins.tiny, - Kb.Styles.globalMargins.medium, - Kb.Styles.globalMargins.tiny, - Kb.Styles.globalMargins.xsmall - ), - }, })) export default UserResult diff --git a/shared/team-building/search-result/you-result.tsx b/shared/team-building/search-result/you-result.tsx index a54bf528261b..4bcec9712fb6 100644 --- a/shared/team-building/search-result/you-result.tsx +++ b/shared/team-building/search-result/you-result.tsx @@ -2,7 +2,7 @@ import type * as React from 'react' import {previewConversation} from '@/constants/router' import {useTBContext} from '@/stores/team-building' import * as Kb from '@/common-adapters' -import CommonResult, {type ResultProps} from './common-result' +import CommonResult, {type ResultProps, rowContainerWithLargePadding} from './common-result' const YouResult = function YouResult(props: ResultProps) { const cancelTeamBuilding = useTBContext(s => s.dispatch.cancelTeamBuilding) @@ -32,18 +32,14 @@ const YouResult = function YouResult(props: ResultProps) { default: } - return + return ( + + ) } -const styles = Kb.Styles.styleSheetCreate(() => ({ - rowContainer: { - ...Kb.Styles.padding( - Kb.Styles.globalMargins.tiny, - Kb.Styles.globalMargins.medium, - Kb.Styles.globalMargins.tiny, - Kb.Styles.globalMargins.xsmall - ), - }, -})) - export default YouResult diff --git a/shared/team-building/shared.tsx b/shared/team-building/shared.tsx index 817ede88ab0f..12ed0116b5b7 100644 --- a/shared/team-building/shared.tsx +++ b/shared/team-building/shared.tsx @@ -98,3 +98,9 @@ export const serviceIdToBadge = (service: T.TB.ServiceIdWithContact): boolean => export const serviceMapToArray = (services: T.TB.ServiceMap) => TeamBuilding.allServices.filter(x => x !== 'keybase' && x in services) + +export const getSearchResults = ( + searchResults: T.Immutable, + searchString: string, + selectedService: T.TB.ServiceIdWithContact +) => searchResults.get(searchString.trim())?.get(selectedService) diff --git a/shared/team-building/team-box.tsx b/shared/team-building/team-box.tsx index a275f91a592d..2708ac602698 100644 --- a/shared/team-building/team-box.tsx +++ b/shared/team-building/team-box.tsx @@ -72,17 +72,15 @@ const TeamBox = (props: Props) => { }, [prevLastRef, last]) return isMobile ? ( - - - - - - + + + + ) : ( @@ -99,7 +97,7 @@ const TeamBox = (props: Props) => { - + {!!props.teamSoFar.length && ( { imageOverrideUrl={isNewTeamWizard ? avatarFilepath : undefined} crop={isNewTeamWizard ? avatarCrop : undefined} /> - - - {displayTeamname} - - {title} - + + {displayTeamname} + + {title} ) } diff --git a/shared/teams/common/channels-widget.tsx b/shared/teams/common/channels-widget.tsx index f515aece6a08..7f6e4e94fd9e 100644 --- a/shared/teams/common/channels-widget.tsx +++ b/shared/teams/common/channels-widget.tsx @@ -52,21 +52,21 @@ const ChannelInputDesktop = (props: ChannelInputProps) => { const {channelMetas} = useAllChannelMetas(teamID) const channelItems = [...channelMetas.values()] - .filter( - c => - !selected.find(channel => channel.conversationIDKey === c.conversationIDKey) && - (!disableGeneral || c.channelname !== 'general') && - !disabledChannels?.some(dc => dc.conversationIDKey === c.conversationIDKey) - ) - .map(c => ({ - label: `#${c.channelname}`, - value: {channelname: c.channelname, conversationIDKey: c.conversationIDKey}, - })) + .filter( + c => + !selected.find(channel => channel.conversationIDKey === c.conversationIDKey) && + (!disableGeneral || c.channelname !== 'general') && + !disabledChannels?.some(dc => dc.conversationIDKey === c.conversationIDKey) + ) + .map(c => ({ + label: `#${c.channelname}`, + value: {channelname: c.channelname, conversationIDKey: c.conversationIDKey}, + })) const onSelect = (value: T.Unpacked['value']) => { - onAdd([value]) - setFilter('') - } + onAdd([value]) + setFilter('') + } const {popup, popupAnchor, onKeyDown, showPopup, hidePopup} = useAutocompleter( channelItems, diff --git a/shared/teams/delete-team.tsx b/shared/teams/delete-team.tsx index cadb1286ad1c..f9031c70d91e 100644 --- a/shared/teams/delete-team.tsx +++ b/shared/teams/delete-team.tsx @@ -69,7 +69,7 @@ const DeleteTeamContainer = (op: OwnProps) => { return ( + Before you can delete {teamname}, delete its{' '} {subteamNames.length} {pluralize('subteam', subteamNames.length)}:{' '} {subteamNames.join(', ')}. @@ -113,7 +113,7 @@ const DeleteTeamContainer = (op: OwnProps) => { const Header = (props: {teamname: string}) => ( <> - + ) @@ -146,4 +146,9 @@ const Checkboxes = (props: CheckboxesProps) => ( ) +const styles = Kb.Styles.styleSheetCreate(() => ({ + deleteIcon: {marginRight: -60, marginTop: -20, zIndex: 1}, + subteamText: {marginTop: Kb.Styles.globalMargins.medium}, +})) + export default DeleteTeamContainer diff --git a/shared/teams/invite-by-email.tsx b/shared/teams/invite-by-email.tsx index 8472538e7728..a9234d7a5958 100644 --- a/shared/teams/invite-by-email.tsx +++ b/shared/teams/invite-by-email.tsx @@ -69,13 +69,13 @@ const Container = (ownProps: OwnProps) => { direction="vertical" alignItems="center" fullWidth={true} - style={{margin: Kb.Styles.globalMargins.medium}} + style={styles.outerBox} > Invite by email - - + + Add these team members to {teamname} as: { @@ -105,7 +105,7 @@ const Container = (ownProps: OwnProps) => { value={invitees} /> {!!errorMessage && ( - + {errorMessage} )} @@ -119,20 +119,19 @@ const Container = (ownProps: OwnProps) => { } const _makeDropdownItem = (item: string) => ( - + {capitalize(item)} ) const styles = Kb.Styles.styleSheetCreate(() => ({ + addAsText: {margin: Kb.Styles.globalMargins.tiny}, + dropdown: {width: 100}, + dropdownItem: {...Kb.Styles.paddingH(Kb.Styles.globalMargins.small)}, + errorText: {color: Kb.Styles.globalColors.redDark}, header: {padding: Kb.Styles.globalMargins.tiny}, + outerBox: {margin: Kb.Styles.globalMargins.medium}, + roleRow: {margin: Kb.Styles.globalMargins.tiny}, })) export default Container diff --git a/shared/teams/main/header.tsx b/shared/teams/main/header.tsx index 95a3e6fbd0ae..76706d1e761c 100644 --- a/shared/teams/main/header.tsx +++ b/shared/teams/main/header.tsx @@ -1,11 +1,5 @@ import * as Kb from '@/common-adapters' -export type HeaderButtonProps = { - iconType: Kb.IconType - label: string - onClick: () => void -} - export type Props = { onCreateTeam: () => void onJoinTeam: () => void diff --git a/shared/teams/main/index.tsx b/shared/teams/main/index.tsx index d5c064a2a347..9cde5cafc60d 100644 --- a/shared/teams/main/index.tsx +++ b/shared/teams/main/index.tsx @@ -62,30 +62,30 @@ const sortOrderToTitle = { } const SortHeader = ({onChangeSort, sortOrder}: {onChangeSort: Props['onChangeSort']; sortOrder: Props['sortOrder']}) => { const makePopup = (p: Kb.Popup2Parms) => { - const {attachTo, hidePopup} = p - return ( - onChangeSort('role'), title: sortOrderToTitle.role}, - { - icon: 'iconfont-campfire', - onClick: () => onChangeSort('activity'), - title: sortOrderToTitle.activity, - }, - { - icon: 'iconfont-sort-alpha', - onClick: () => onChangeSort('alphabetical'), - title: sortOrderToTitle.alphabetical, - }, - ]} - closeOnSelect={true} - onHidden={hidePopup} - visible={true} - position="bottom left" - /> - ) - } + const {attachTo, hidePopup} = p + return ( + onChangeSort('role'), title: sortOrderToTitle.role}, + { + icon: 'iconfont-campfire', + onClick: () => onChangeSort('activity'), + title: sortOrderToTitle.activity, + }, + { + icon: 'iconfont-sort-alpha', + onClick: () => onChangeSort('alphabetical'), + title: sortOrderToTitle.alphabetical, + }, + ]} + closeOnSelect={true} + onHidden={hidePopup} + visible={true} + position="bottom left" + /> + ) + } const {popup, showPopup, popupAnchor} = Kb.usePopup2(makePopup) return ( @@ -102,8 +102,6 @@ const SortHeader = ({onChangeSort, sortOrder}: {onChangeSort: Props['onChangeSor const teamRowHeight = isMobile ? 72 : 48 const teamRowItemHeight = {height: teamRowHeight, type: 'fixed' as const} -type TeamItem = TeamRowItem - const Teams = function Teams(p: Props) { const {deletedTeams, teams, onCreateTeam, onJoinTeam, onChangeSort, sortOrder} = p @@ -124,7 +122,7 @@ const {deletedTeams, teams, onCreateTeam, onJoinTeam, onChangeSort, sortOrder} = const listFooter = - const renderItem = (_index: number, item: TeamItem) => { + const renderItem = (_index: number, item: TeamRowItem) => { return ( diff --git a/shared/teams/main/team-row.tsx b/shared/teams/main/team-row.tsx index 119e14763419..2ac14a130891 100644 --- a/shared/teams/main/team-row.tsx +++ b/shared/teams/main/team-row.tsx @@ -36,9 +36,9 @@ const TeamRow = function TeamRow(props: Props) { const onChat = () => previewConversation({reason: 'teamRow', teamname: teamMeta.teamname}) const makePopup = (p: Kb.Popup2Parms) => { - const {attachTo, hidePopup} = p - return - } + const {attachTo, hidePopup} = p + return + } const {popup, popupAnchor, showPopup} = Kb.usePopup2(makePopup) const crownIconType: Kb.IconType | undefined = @@ -61,10 +61,10 @@ const TeamRow = function TeamRow(props: Props) { if (isMobile) { return ( <> - + - - + + {!!badgeCount && } {crownIcon} @@ -117,10 +117,10 @@ const TeamRow = function TeamRow(props: Props) { return ( <> - + - - + + {!!badgeCount && } {crownIcon} @@ -192,16 +192,15 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ alignSelfCenter: { alignSelf: 'center', }, - avatarContainer: Kb.Styles.platformStyles({ + avatarOuter: Kb.Styles.platformStyles({ common: { minHeight: smallHeight, width: smallIconWidth, }, isPhone: {minHeight: 72}, }), - avatarInner: { + avatarRelative: { height: 32, - position: 'relative', width: 32, }, badge: { @@ -226,10 +225,11 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ bodyRight: { flex: 0.7, }, - clickableBox: Kb.Styles.platformStyles({ + rowStyle: Kb.Styles.platformStyles({ common: { backgroundColor: Kb.Styles.globalColors.white, flexShrink: 0, + position: 'relative', }, isElectron: {minHeight: smallHeight}, isPhone: {minHeight: 72}, @@ -241,9 +241,9 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ borderRadius: 100, ...Kb.Styles.size(17), position: 'absolute', + bottom: -5, + right: -5, }, - isElectron: {bottom: -5, right: -5}, - isMobile: {bottom: -5, right: -5}, }), divider: { left: 0, @@ -251,14 +251,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ right: 0, top: 0, }, - row: Kb.Styles.platformStyles({ - common: { - backgroundColor: Kb.Styles.globalColors.white, - position: 'relative', - }, - isElectron: {minHeight: smallHeight}, - isPhone: {minHeight: 72}, - }), + }) as const) export default TeamRow diff --git a/shared/teams/rename-team.tsx b/shared/teams/rename-team.tsx index 80d02e983acf..bc9e6f222fd7 100644 --- a/shared/teams/rename-team.tsx +++ b/shared/teams/rename-team.tsx @@ -35,8 +35,8 @@ const Container = (ownProps: OwnProps) => { lastWaitingRef.current = waiting }, [waiting, propError, navigateUp]) - const newFullName = () => [prefix, newName].join('.') - const disabled = () => newName.length < 2 + const newFullName = [prefix, newName].join('.') + const disabled = newName.length < 2 const validateTeamname = () => { if (newName.startsWith('_') || newName.includes('__')) { @@ -51,16 +51,16 @@ const Container = (ownProps: OwnProps) => { } const handleRename = () => { - if (waiting || disabled()) { + if (waiting || disabled) { return } - if (teamname === newFullName()) { + if (teamname === newFullName) { onCancel() return } setError('') if (validateTeamname()) { - onRename(newFullName()) + onRename(newFullName) } } @@ -124,7 +124,7 @@ const Container = (ownProps: OwnProps) => { label="Rename" onClick={handleRename} style={styles.button} - disabled={disabled()} + disabled={disabled} waiting={waiting} /> diff --git a/shared/teams/role-picker-utils.tsx b/shared/teams/role-picker-utils.tsx index 8d2d7ed7c156..c5b82d6557ab 100644 --- a/shared/teams/role-picker-utils.tsx +++ b/shared/teams/role-picker-utils.tsx @@ -1,30 +1,33 @@ import type * as T from '@/constants/types' +const msgOnlyOwnersCanChangeOwnerRole = "Only owners can change another owner's role" +const msgMustBeAdminToChangeRoles = 'You must be at least an admin to make role changes.' + const subteamsCannotHaveOwners = {owner: 'Subteams cannot have owners.'} const onlyOwnersCanTurnTeamMembersIntoOwners = {owner: 'Only owners can turn team members into owners.'} const roleChangeSub = { - admin: 'You must be at least an admin to make role changes.', + admin: msgMustBeAdminToChangeRoles, owner: 'Subteams cannot have owners.', - reader: 'You must be at least an admin to make role changes.', - writer: 'You must be at least an admin to make role changes.', + reader: msgMustBeAdminToChangeRoles, + writer: msgMustBeAdminToChangeRoles, } const roleChangeNotSub = { - admin: 'You must be at least an admin to make role changes.', - owner: 'You must be at least an admin to make role changes.', - reader: 'You must be at least an admin to make role changes.', - writer: 'You must be at least an admin to make role changes.', + admin: msgMustBeAdminToChangeRoles, + owner: msgMustBeAdminToChangeRoles, + reader: msgMustBeAdminToChangeRoles, + writer: msgMustBeAdminToChangeRoles, } const anotherRoleChangeSub = { - admin: `Only owners can change another owner's role`, + admin: msgOnlyOwnersCanChangeOwnerRole, owner: 'Subteams cannot have owners.', - reader: `Only owners can change another owner's role`, - writer: `Only owners can change another owner's role`, + reader: msgOnlyOwnersCanChangeOwnerRole, + writer: msgOnlyOwnersCanChangeOwnerRole, } const anotherRoleChangeNotSub = { - admin: `Only owners can change another owner's role`, - owner: `Only owners can change another owner's role`, - reader: `Only owners can change another owner's role`, - writer: `Only owners can change another owner's role`, + admin: msgOnlyOwnersCanChangeOwnerRole, + owner: msgOnlyOwnersCanChangeOwnerRole, + reader: msgOnlyOwnersCanChangeOwnerRole, + writer: msgOnlyOwnersCanChangeOwnerRole, } const notOwnerSub = {owner: 'Subteams cannot have owners.'} const notOwnerNotSub = {owner: `Only owners can turn members into owners`} diff --git a/shared/teams/role-picker.tsx b/shared/teams/role-picker.tsx index 87125e785422..28870a5a887e 100644 --- a/shared/teams/role-picker.tsx +++ b/shared/teams/role-picker.tsx @@ -72,7 +72,7 @@ const RoleRow = (p: RoleRowProps) => { { stickySectionHeadersEnabled={isMobile} sections={sections} contentContainerStyle={styles.listContentContainer} - style={styles.list} getItemHeight={() => 48} /> ({ container: { backgroundColor: Kb.Styles.globalColors.blueGrey, }, - list: Kb.Styles.platformStyles({}), listContentContainer: Kb.Styles.platformStyles({ isMobile: { display: 'flex', diff --git a/shared/teams/team/member/index.new.tsx b/shared/teams/team/member/index.new.tsx index 905163693bb5..0a60582a188b 100644 --- a/shared/teams/team/member/index.new.tsx +++ b/shared/teams/team/member/index.new.tsx @@ -24,10 +24,6 @@ type Props = { teamID: T.Teams.TeamID username: string } -type OwnProps = { - teamID: T.Teams.TeamID - username: string -} type TeamTreeRowNotIn = { teamID: T.Teams.TeamID @@ -274,7 +270,7 @@ const useNavUpIfRemovedFromTeam = (teamID: T.Teams.TeamID, username: string) => type Item = {type: 'section-nodes'; tri: TeamTreeRowIn} | {type: 'section-add-nodes'; tni: TeamTreeRowNotIn} type Section = Kb.SectionType -const TeamMember = (props: OwnProps) => { +const TeamMember = (props: Props) => { const username = props.username const teamID = props.teamID const isMe = username === useCurrentUserState(s => s.username) diff --git a/shared/teams/team/rows/bot-row/bot.tsx b/shared/teams/team/rows/bot-row/bot.tsx index 89462c0b2cb0..eba0116eba35 100644 --- a/shared/teams/team/rows/bot-row/bot.tsx +++ b/shared/teams/team/rows/bot-row/bot.tsx @@ -79,8 +79,8 @@ export const TeamBotRow = (props: Props) => { onClick={props.onOpenProfile} /> - {usernameDisplay} - {descriptionLabel} + {usernameDisplay} + {descriptionLabel} diff --git a/shared/teams/team/rows/emoji-row/item.tsx b/shared/teams/team/rows/emoji-row/item.tsx index 2a6a6ebd77ea..09b6ac2b8a40 100644 --- a/shared/teams/team/rows/emoji-row/item.tsx +++ b/shared/teams/team/rows/emoji-row/item.tsx @@ -68,60 +68,59 @@ const ItemRow = ({conversationIDKey, emoji, firstItem, teamID}: OwnProps) => { const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup) return ( - - + + {`:${emoji.alias}:`} + {!isMobile && emoji.creationInfo && ( + + {dateFns.format(emoji.creationInfo.time, 'EEE d MMM yyyy')} + + )} + {!isMobile && emoji.creationInfo && ( + + )} - - {`:${emoji.alias}:`} - {!isMobile && emoji.creationInfo && ( - - {dateFns.format(emoji.creationInfo.time, 'EEE d MMM yyyy')} - - )} - {!isMobile && emoji.creationInfo && ( - - )} - - {popup} - - - } - firstItem={firstItem} - fullDivider={true} - height={isMobile ? 48 : 42} - /> - + + } + firstItem={firstItem} + fullDivider={true} + height={isMobile ? 48 : 42} + style={styles.container} + /> ) } @@ -143,7 +142,7 @@ const styles = Kb.Styles.styleSheetCreate( maxWidth: 130, width: 130, }, - outerContainer: Kb.Styles.platformStyles({ + container: Kb.Styles.platformStyles({ common: {backgroundColor: Kb.Styles.globalColors.white}, isElectron: Kb.Styles.padding(0, Kb.Styles.globalMargins.small), }), diff --git a/shared/teams/team/rows/empty-row.tsx b/shared/teams/team/rows/empty-row.tsx index d9b344c83178..eadd25b09943 100644 --- a/shared/teams/team/rows/empty-row.tsx +++ b/shared/teams/team/rows/empty-row.tsx @@ -146,9 +146,7 @@ const EmptyRow = (props: Props) => { fullWidth={true} justifyContent="flex-start" > - - - + {getFirstText(props.type, teamOrChannel, teamOrChannelName, notIn)} diff --git a/shared/teams/team/rows/invite-row/invite.tsx b/shared/teams/team/rows/invite-row/invite.tsx index b3685834284e..7bc6b7260bfd 100644 --- a/shared/teams/team/rows/invite-row/invite.tsx +++ b/shared/teams/team/rows/invite-row/invite.tsx @@ -41,17 +41,17 @@ export const TeamInviteRow = (props: Props) => { const TeamInviteMenu = (props: {onCancelInvite?: () => void}) => { const {onCancelInvite} = props const makePopup = (p: Kb.Popup2Parms) => { - const {attachTo, hidePopup} = p - return ( - - ) - } + const {attachTo, hidePopup} = p + return ( + + ) + } const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup) return ( <> diff --git a/shared/teams/team/rows/loading.tsx b/shared/teams/team/rows/loading.tsx index 0481a61e5a3a..b1fcc4f4226d 100644 --- a/shared/teams/team/rows/loading.tsx +++ b/shared/teams/team/rows/loading.tsx @@ -1,15 +1,9 @@ import * as Kb from '@/common-adapters' const LoadingRow = () => ( - + Loading... ) export default LoadingRow - -const styles = Kb.Styles.styleSheetCreate(() => ({ - container: { - padding: Kb.Styles.globalMargins.small, - }, -})) diff --git a/shared/teams/team/settings-tab/index.tsx b/shared/teams/team/settings-tab/index.tsx index a6f9727328a9..d46024cd5ef7 100644 --- a/shared/teams/team/settings-tab/index.tsx +++ b/shared/teams/team/settings-tab/index.tsx @@ -280,19 +280,17 @@ export const Settings = (p: Props) => { )} {yourOperations.chat && ( )} - - {isBigTeam && ( - - - - )} - + {isBigTeam && ( + + + + )} ) @@ -300,6 +298,7 @@ export const Settings = (p: Props) => { const styles = Kb.Styles.styleSheetCreate(() => ({ grey: {color: Kb.Styles.globalColors.black_50}, + retentionPicker: {marginTop: Kb.Styles.globalMargins.small}, joinAs: Kb.Styles.platformStyles({ isElectron: {paddingRight: Kb.Styles.globalMargins.xtiny}, }), diff --git a/shared/teams/team/settings-tab/retention/index.tsx b/shared/teams/team/settings-tab/retention/index.tsx index 3c869609349d..df5cf98d7342 100644 --- a/shared/teams/team/settings-tab/retention/index.tsx +++ b/shared/teams/team/settings-tab/retention/index.tsx @@ -85,78 +85,78 @@ const RetentionPicker = (p: Props) => { const saving = !!pendingPolicy && !policyEquals(policy, pendingPolicy) const makePopup = (p: Kb.Popup2Parms) => { - const {attachTo, hidePopup} = p + const {attachTo, hidePopup} = p - const makeItems = () => { - const policies = Teams.baseRetentionPolicies.slice() - if (showInheritOption) { - policies.unshift(Teams.retentionPolicies.policyInherit) - } - return policies.reduce((arr, policy) => { - switch (policy.type) { - case 'retain': - case 'expire': - return [ - ...arr, - { - isSelected: isSelected(policy), - onClick: () => selectPolicy(policy), - title: policy.title, - } as const, - ] - case 'inherit': - if (teamPolicy) { - let title = '' - switch (teamPolicy.type) { - case 'retain': - title = 'Team default (Never)' - break - case 'expire': - case 'explode': - title = `Team default (${teamPolicy.title})` - break - default: - } - return [ - { - isSelected: isSelected(policy), - onClick: () => selectPolicy(policy), - title, - } as const, - 'Divider' as const, - ...arr, - ] - } else { - throw new Error(`Got policy of type 'inherit' without an inheritable parent policy`) + const makeItems = () => { + const policies = Teams.baseRetentionPolicies.slice() + if (showInheritOption) { + policies.unshift(Teams.retentionPolicies.policyInherit) + } + return policies.reduce((arr, policy) => { + switch (policy.type) { + case 'retain': + case 'expire': + return [ + ...arr, + { + isSelected: isSelected(policy), + onClick: () => selectPolicy(policy), + title: policy.title, + } as const, + ] + case 'inherit': + if (teamPolicy) { + let title = '' + switch (teamPolicy.type) { + case 'retain': + title = 'Team default (Never)' + break + case 'expire': + case 'explode': + title = `Team default (${teamPolicy.title})` + break + default: } - case 'explode': return [ - ...arr, { - icon: 'iconfont-timer', - iconIsVisible: true, isSelected: isSelected(policy), onClick: () => selectPolicy(policy), - title: policy.title, + title, } as const, + 'Divider' as const, + ...arr, ] - default: - return arr - } - }, new Array()) - } - const items = makeItems() - return ( - - ) + } else { + throw new Error(`Got policy of type 'inherit' without an inheritable parent policy`) + } + case 'explode': + return [ + ...arr, + { + icon: 'iconfont-timer', + iconIsVisible: true, + isSelected: isSelected(policy), + onClick: () => selectPolicy(policy), + title: policy.title, + } as const, + ] + default: + return arr + } + }, new Array()) } + const items = makeItems() + return ( + + ) + } const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup) return ( diff --git a/shared/teams/team/tabs.tsx b/shared/teams/team/tabs.tsx index 5e7f20a3ea62..0a2e45b8007b 100644 --- a/shared/teams/team/tabs.tsx +++ b/shared/teams/team/tabs.tsx @@ -39,20 +39,18 @@ const TeamTabs = (props: TeamTabsProps) => { /> ) return ( - - - {isMobile ? ( - - {tabContent} - - ) : ( - tabContent - )} - + + {isMobile ? ( + + {tabContent} + + ) : ( + tabContent + )} ) } diff --git a/shared/tracker/assertion.tsx b/shared/tracker/assertion.tsx index dd09f151610e..56efb5defba4 100644 --- a/shared/tracker/assertion.tsx +++ b/shared/tracker/assertion.tsx @@ -9,6 +9,7 @@ import {formatTimeForAssertionPopup} from '@/util/timestamp' import {useColorScheme} from 'react-native' import {navToProfile} from '@/constants/router' import {copyToClipboard} from '@/util/storeless-actions' +import {assertionColorToColor, assertionColorToTextColor, stateToIcon} from './model' type OwnProps = { assertion: T.Tracker.Assertion @@ -19,7 +20,7 @@ type OwnProps = { username: string } -const Container = (ownProps: OwnProps) => { +const Assertion = (ownProps: OwnProps) => { const isYours = useCurrentUserState(s => ownProps.username === s.username) const {assertion, isSuggestion = false, notAUser = false, onRefresh, stellarHidden = false} = ownProps const {color, metas: _metas, proofURL, sigID, siteIcon} = assertion @@ -184,6 +185,7 @@ const Container = (ownProps: OwnProps) => { className={notAUser ? undefined : 'hover-container'} ref={popupAnchor} direction="vertical" + noShrink={true} style={styles.container} fullWidth={true} > @@ -205,7 +207,7 @@ const Container = (ownProps: OwnProps) => { onShowProof={onShowProof} isSuggestion={isSuggestion} /> - + { { {!!metas.length && ( - + {metas.map(m => ( ))} @@ -267,23 +269,6 @@ const proofTypeToDesc = (proofType: string) => { } } -const stateToIcon = (state: T.Tracker.AssertionState) => { - switch (state) { - case 'checking': - return 'iconfont-proof-pending' - case 'valid': - return 'iconfont-proof-good' - case 'error': // fallthrough - case 'warning': - case 'revoked': - return 'iconfont-proof-broken' - case 'suggestion': - return 'iconfont-proof-placeholder' - default: - return 'iconfont-proof-pending' - } -} - // alternate versions of the ones from `stateToIcon` for the popup menu header const stateToDecorationIcon = (state: T.Tracker.AssertionState) => { switch (state) { @@ -316,44 +301,6 @@ const stateToValueTextStyle = (state: T.Tracker.AssertionState) => { } } -const assertionColorToTextColor = (c: T.Tracker.AssertionColor) => { - switch (c) { - case 'blue': - return Kb.Styles.globalColors.blueDark - case 'red': - return Kb.Styles.globalColors.redDark - case 'black': - return Kb.Styles.globalColors.black - case 'green': - return Kb.Styles.globalColors.greenDark - case 'gray': - return Kb.Styles.globalColors.black_50 - case 'yellow': // fallthrough - case 'orange': - default: - return Kb.Styles.globalColors.redDark - } -} - -const assertionColorToColor = (c: T.Tracker.AssertionColor) => { - switch (c) { - case 'blue': - return Kb.Styles.globalColors.blue - case 'red': - return Kb.Styles.globalColors.red - case 'black': - return Kb.Styles.globalColors.black - case 'green': - return Kb.Styles.globalColors.green - case 'gray': - return Kb.Styles.globalColors.black_50 - case 'yellow': // fallthrough - case 'orange': - default: - return Kb.Styles.globalColors.red - } -} - const StellarValue = (p: {value: string; color: T.Tracker.AssertionColor}) => { const {value, color} = p const onCopyAddress = () => { @@ -451,7 +398,7 @@ const Value = (p: { } const HoverOpacity = (p: {children: React.ReactNode}) => ( - + {p.children} ) @@ -493,10 +440,18 @@ const AssertionSiteIcon = (p: SIProps) => { ) } +const popupHeaderTextBase = { + color: Kb.Styles.globalColors.white, + paddingBottom: Kb.Styles.globalMargins.tiny, + paddingLeft: Kb.Styles.globalMargins.small, + paddingRight: Kb.Styles.globalMargins.small, + paddingTop: Kb.Styles.globalMargins.tiny, +} as const + const styles = Kb.Styles.styleSheetCreate( () => ({ - container: {flexShrink: 0, paddingBottom: 4, paddingTop: 4}, + container: {paddingBottom: 4, paddingTop: 4}, crypto: Kb.Styles.platformStyles({ isElectron: {display: 'inline-block', fontSize: 11, wordBreak: 'break-all'}, }), @@ -512,30 +467,22 @@ const styles = Kb.Styles.styleSheetCreate( borderStyle: 'solid', padding: Kb.Styles.globalMargins.small, }, - metaContainer: {flexShrink: 0, paddingLeft: 20 + Kb.Styles.globalMargins.tiny * 2 - 4}, // icon spacing plus meta has 2 padding for some reason + metaAssertion: {flexShrink: 0, paddingLeft: 20 + Kb.Styles.globalMargins.tiny * 2 - 4}, // icon spacing plus meta has 2 padding for some reason popupHeaderTextBlue: { + ...popupHeaderTextBase, backgroundColor: Kb.Styles.globalColors.blue, - color: Kb.Styles.globalColors.white, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.tiny, }, popupHeaderTextRed: { + ...popupHeaderTextBase, backgroundColor: Kb.Styles.globalColors.red, - color: Kb.Styles.globalColors.white, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.tiny, }, site: {color: Kb.Styles.globalColors.black_20}, siteIconFullDecoration: {bottom: -8, position: 'absolute', right: -10}, - statusContainer: Kb.Styles.platformStyles({ + statusAssertion: Kb.Styles.platformStyles({ isMobile: {position: 'relative', top: -2}, }), strikeThrough: {textDecorationLine: 'line-through'}, - textContainer: Kb.Styles.platformStyles({ + textAssertion: Kb.Styles.platformStyles({ common: {flexGrow: 1, flexShrink: 1, marginTop: -1}, }), tooltip: Kb.Styles.platformStyles({isElectron: {display: 'inline-flex'}}), @@ -546,4 +493,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default Assertion diff --git a/shared/tracker/bio.tsx b/shared/tracker/bio.tsx index df77459d67e3..ffd39bf2b1cd 100644 --- a/shared/tracker/bio.tsx +++ b/shared/tracker/bio.tsx @@ -14,7 +14,7 @@ type Props = { username: string } -const Container = (props: Props) => { +const Bio = (props: Props) => { const { bio, blocked, @@ -30,12 +30,10 @@ const Container = (props: Props) => { username, } = props return ( - - - - {fullname} - - + + + {fullname} + {followersCount !== undefined && ( @@ -137,8 +135,8 @@ const styles = Kb.Styles.styleSheetCreate( paddingTop: Kb.Styles.globalMargins.tiny, }, bold: {...Kb.Styles.globalStyles.fontBold}, - container: {backgroundColor: Kb.Styles.globalColors.white, flexShrink: 0}, - fullNameContainer: { + container: {backgroundColor: Kb.Styles.globalColors.white}, + fullNameBio: { ...Kb.Styles.paddingH(Kb.Styles.globalMargins.mediumLarge), }, text: Kb.Styles.platformStyles({ @@ -150,4 +148,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default Bio diff --git a/shared/tracker/index.desktop.tsx b/shared/tracker/index.desktop.tsx index 6c8f2d6771b8..a8087c7b65fd 100644 --- a/shared/tracker/index.desktop.tsx +++ b/shared/tracker/index.desktop.tsx @@ -2,6 +2,7 @@ import * as Kb from '@/common-adapters' import type * as T from '@/constants/types' import {openURL as openUrl} from '@/util/misc' import {useColorScheme} from 'react-native' +import {assertionColorToColor, assertionColorToTextColor, stateToIcon} from './model' export type Props = { assertions?: ReadonlyArray @@ -102,7 +103,7 @@ const Bio = (props: { followText = 'FOLLOWS YOU' } return ( - + {fullname} @@ -168,44 +169,6 @@ const sortAssertions = (a: T.Tracker.Assertion, b: T.Tracker.Assertion) => { return _scoreAssertionKey(b.type) - _scoreAssertionKey(a.type) } -const assertionColorToColor = (c: T.Tracker.AssertionColor) => { - switch (c) { - case 'blue': return Kb.Styles.globalColors.blue - case 'red': return Kb.Styles.globalColors.red - case 'black': return Kb.Styles.globalColors.black - case 'green': return Kb.Styles.globalColors.green - case 'gray': return Kb.Styles.globalColors.black_50 - case 'yellow': - case 'orange': - default: return Kb.Styles.globalColors.red - } -} - -const assertionColorToTextColor = (c: T.Tracker.AssertionColor) => { - switch (c) { - case 'blue': return Kb.Styles.globalColors.blueDark - case 'red': return Kb.Styles.globalColors.redDark - case 'black': return Kb.Styles.globalColors.black - case 'green': return Kb.Styles.globalColors.greenDark - case 'gray': return Kb.Styles.globalColors.black_50 - case 'yellow': - case 'orange': - default: return Kb.Styles.globalColors.redDark - } -} - -const stateToIcon = (state: T.Tracker.AssertionState) => { - switch (state) { - case 'checking': return 'iconfont-proof-pending' - case 'valid': return 'iconfont-proof-good' - case 'error': - case 'warning': - case 'revoked': return 'iconfont-proof-broken' - case 'suggestion': return 'iconfont-proof-placeholder' - default: return 'iconfont-proof-pending' - } -} - const siteIconToSrcSet = (set: T.Tracker.SiteIconSet) => set.map(i => `url("${i.path}")`).reverse().join(', ') @@ -215,7 +178,7 @@ const AssertionRow = (props: {assertion: T.Tracker.Assertion}) => { const isDarkMode = useColorScheme() === 'dark' const iconSet = isDarkMode ? a.siteIconDarkmode : a.siteIcon return ( - + {iconSet.length > 0 && ( { {props.reason} - + - - - - - {props.trackerUsername} - - + + + + {props.trackerUsername} + { {sortedAssertions?.map(a => )} {!!buttons.length && ( - + )} @@ -371,7 +332,7 @@ const reason = { const styles = Kb.Styles.styleSheetCreate( () => ({ - assertionRow: {flexShrink: 0, paddingBottom: 4, paddingTop: 4}, + assertionRow: {paddingBottom: 4, paddingTop: 4}, assertionSite: {color: Kb.Styles.globalColors.black_20}, assertionTextContainer: Kb.Styles.platformStyles({ common: {flexGrow: 1, flexShrink: 1, marginTop: -1}, @@ -396,8 +357,7 @@ const styles = Kb.Styles.styleSheetCreate( right: 0, top: avatarSize / 2, }, - avatarContainer: {flexShrink: 0}, - bioContainer: {backgroundColor: Kb.Styles.globalColors.white, flexShrink: 0}, + bioContainer: {backgroundColor: Kb.Styles.globalColors.white}, bioText: Kb.Styles.platformStyles({ common: { ...Kb.Styles.paddingH(Kb.Styles.globalMargins.mediumLarge), @@ -446,7 +406,7 @@ const styles = Kb.Styles.styleSheetCreate( zIndex: 9, }, metaContainer: {flexShrink: 0, paddingLeft: 20 + Kb.Styles.globalMargins.tiny * 2 - 4}, - nameWithIconContainer: {alignSelf: 'center'}, + nameWithIconContainer: {alignSelf: 'center' as const}, reason: Kb.Styles.platformStyles({ common: { ...reason, @@ -478,7 +438,6 @@ const styles = Kb.Styles.styleSheetCreate( }, }), spaceUnderButtons: { - flexShrink: 0, height: barHeight, }, strikeThrough: {textDecorationLine: 'line-through'}, diff --git a/shared/tracker/model.tsx b/shared/tracker/model.tsx index f0f754a87639..62bd509dd89b 100644 --- a/shared/tracker/model.tsx +++ b/shared/tracker/model.tsx @@ -1,4 +1,60 @@ import * as T from '@/constants/types' +import * as Kb from '@/common-adapters' + +export const assertionColorToColor = (c: T.Tracker.AssertionColor) => { + switch (c) { + case 'blue': + return Kb.Styles.globalColors.blue + case 'red': + return Kb.Styles.globalColors.red + case 'black': + return Kb.Styles.globalColors.black + case 'green': + return Kb.Styles.globalColors.green + case 'gray': + return Kb.Styles.globalColors.black_50 + case 'yellow': // fallthrough + case 'orange': + default: + return Kb.Styles.globalColors.red + } +} + +export const assertionColorToTextColor = (c: T.Tracker.AssertionColor) => { + switch (c) { + case 'blue': + return Kb.Styles.globalColors.blueDark + case 'red': + return Kb.Styles.globalColors.redDark + case 'black': + return Kb.Styles.globalColors.black + case 'green': + return Kb.Styles.globalColors.greenDark + case 'gray': + return Kb.Styles.globalColors.black_50 + case 'yellow': // fallthrough + case 'orange': + default: + return Kb.Styles.globalColors.redDark + } +} + +export const stateToIcon = (state: T.Tracker.AssertionState) => { + switch (state) { + case 'checking': + return 'iconfont-proof-pending' + case 'valid': + return 'iconfont-proof-good' + case 'error': // fallthrough + case 'warning': + case 'revoked': + return 'iconfont-proof-broken' + case 'suggestion': + return 'iconfont-proof-placeholder' + default: + return 'iconfont-proof-pending' + } +} export const noDetails: T.Tracker.Details = { assertions: new Map(), diff --git a/shared/tracker/use-profile.tsx b/shared/tracker/use-profile.tsx index 2e3deed93b7c..a341a2678fd3 100644 --- a/shared/tracker/use-profile.tsx +++ b/shared/tracker/use-profile.tsx @@ -24,12 +24,6 @@ type Options = { reloadOnFocus?: boolean } -const makeNonUserDetails = (): T.Tracker.NonUserDetails => ({...noNonUserDetails}) -type NonUserDetailsState = { - details: T.Tracker.NonUserDetails - username: string -} - export const useTrackerProfile = (username: string, options?: Options) => { const currentUser = useCurrentUserState( C.useShallow(s => ({ @@ -38,8 +32,8 @@ export const useTrackerProfile = (username: string, options?: Options) => { })) ) const [details, setDetails] = React.useState(() => makeDetails(username)) - const [nonUserDetails, setNonUserDetails] = React.useState(() => ({ - details: makeNonUserDetails(), + const [nonUserDetails, setNonUserDetails] = React.useState<{details: T.Tracker.NonUserDetails; username: string}>(() => ({ + details: {...noNonUserDetails}, username, })) const requestVersionRef = React.useRef(0) @@ -73,7 +67,7 @@ export const useTrackerProfile = (username: string, options?: Options) => { siteURL: '', } if (res.service) { - setNonUserDetails({details: {...makeNonUserDetails(), ...common, ...res.service}, username}) + setNonUserDetails({details: {...noNonUserDetails, ...common, ...res.service}, username}) } else { const {formatPhoneNumberInternational} = await import('@/util/phone-numbers') const formattedName = @@ -83,7 +77,7 @@ export const useTrackerProfile = (username: string, options?: Options) => { return } setNonUserDetails({ - details: {...makeNonUserDetails(), ...common, formattedName, fullName}, + details: {...noNonUserDetails, ...common, formattedName, fullName}, username, }) } @@ -278,7 +272,7 @@ export const useTrackerProfile = (username: string, options?: Options) => { const detailsForUsername = details.username === username ? details : makeDetails(username) const nonUserDetailsForUsername = - nonUserDetails.username === username ? nonUserDetails.details : makeNonUserDetails() + nonUserDetails.username === username ? nonUserDetails.details : {...noNonUserDetails} return { details: detailsForUsername, diff --git a/shared/unlock-folders/device-list.desktop.tsx b/shared/unlock-folders/device-list.desktop.tsx index 30069494cd7e..0b38667a9f39 100644 --- a/shared/unlock-folders/device-list.desktop.tsx +++ b/shared/unlock-folders/device-list.desktop.tsx @@ -16,48 +16,49 @@ const DeviceRow = ({device}: {device: UnlockFolderDevice}) => { )[device.type] return ( -
-
+ + -
- + + {device.name} -
+ ) } const DeviceList = (props: Props) => ( -
+ This computer and possibly others are unable to read some of your folders. To avoid losing data forever, please turn on one of the devices below: -
+ {props.devices.map(d => ( ))} -
-
+ + -
-
+ + ) const styles = Kb.Styles.styleSheetCreate( () => ({ buttonsContainer: { - ...Kb.Styles.globalStyles.flexBoxRow, alignSelf: 'center', marginRight: 30, marginTop: Kb.Styles.globalMargins.small, }, + deviceName: {marginLeft: 16}, + deviceRow: {marginBottom: 16}, devicesContainer: Kb.Styles.platformStyles({ isElectron: { alignSelf: 'center', @@ -75,8 +76,6 @@ const styles = Kb.Styles.styleSheetCreate( width: 236, }, iconWrapper: { - display: 'flex', - justifyContent: 'center', marginLeft: 33, width: 24, }, diff --git a/shared/unlock-folders/index.desktop.tsx b/shared/unlock-folders/index.desktop.tsx index 25982cd2766c..a8575e5054de 100644 --- a/shared/unlock-folders/index.desktop.tsx +++ b/shared/unlock-folders/index.desktop.tsx @@ -44,12 +44,12 @@ const UnlockFolders = (props: Props) => { } return ( -
-
+ + -
+ {innerComponent} -
+ ) } diff --git a/shared/unlock-folders/success.desktop.tsx b/shared/unlock-folders/success.desktop.tsx index 8ef9a9c90ffe..093d3ff96446 100644 --- a/shared/unlock-folders/success.desktop.tsx +++ b/shared/unlock-folders/success.desktop.tsx @@ -1,13 +1,13 @@ import * as Kb from '@/common-adapters' -const PaperKeyInput = ({onClose}: {onClose: () => void}) => ( -
+const Success = ({onClose}: {onClose: () => void}) => ( + Success! - + Your paper key is now rekeying folders for this computer. It takes just a couple minutes but lasts forever, like the decision to have a child @@ -15,17 +15,15 @@ const PaperKeyInput = ({onClose}: {onClose: () => void}) => ( -
+ ) const styles = Kb.Styles.styleSheetCreate( () => ({ + body: {...Kb.Styles.paddingH(40)}, container: { - ...Kb.Styles.globalStyles.flexBoxColumn, - alignItems: 'center', bottom: 30, - justifyContent: 'space-between', left: 0, position: 'absolute', right: 0, @@ -34,4 +32,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default PaperKeyInput +export default Success diff --git a/shared/wallets/index.tsx b/shared/wallets/index.tsx index 633a22ef4946..ee515b3a77b5 100644 --- a/shared/wallets/index.tsx +++ b/shared/wallets/index.tsx @@ -110,7 +110,7 @@ const Row = (p: {account: Account}) => { ) } -const Container = () => { +const WalletsScreen = () => { const [accounts, setAccounts] = React.useState>([]) const [acceptedDisclaimer, setAcceptedDisclaimer] = React.useState(false) const checkDisclaimer = C.useRPC(T.RPCStellar.localHasAcceptedDisclaimerLocalRpcPromise) @@ -144,7 +144,7 @@ const Container = () => { return ( - + {loading ? : null} Stellar Transactions Are No Longer Supported in the Keybase App {acceptedDisclaimer ? ( @@ -174,7 +174,6 @@ const styles = Kb.Styles.styleSheetCreate( accountID: Kb.Styles.platformStyles({ isElectron: {wordBreak: 'break-all'}, }), - container: {padding: Kb.Styles.globalMargins.small}, copyText: Kb.Styles.platformStyles({ isMobile: { flexShrink: 1, @@ -185,14 +184,12 @@ const styles = Kb.Styles.styleSheetCreate( alignSelf: 'flex-start', flexGrow: 1, maxWidth: isMobile ? undefined : 400, - width: '100%', }, idCopy: {height: 40}, label: {flexShrink: 0}, remove: {alignSelf: 'flex-end'}, reveal: { maxWidth: isMobile ? undefined : 400, - width: isMobile ? undefined : '100%', }, row: Kb.Styles.platformStyles({ common: { @@ -215,4 +212,4 @@ const styles = Kb.Styles.styleSheetCreate( }) as const ) -export default Container +export default WalletsScreen diff --git a/shared/wallets/really-remove-account.tsx b/shared/wallets/really-remove-account.tsx index 248cba243125..08f6bb9219fd 100644 --- a/shared/wallets/really-remove-account.tsx +++ b/shared/wallets/really-remove-account.tsx @@ -2,7 +2,7 @@ import * as C from '@/constants' import * as Kb from '@/common-adapters' import * as T from '@/constants/types' import * as React from 'react' -import WalletPopup from './wallet-popup' +import WalletPopup, {walletModalIconStyle} from './wallet-popup' import {loadAccountsWaitingKey} from '@/constants/strings' import {copyToClipboard} from '@/util/storeless-actions' @@ -78,22 +78,20 @@ const ReallyRemoveAccountPopup = (props: OwnProps) => { safeAreaViewTopStyle={styles.background} > - - - - One last thing! Make sure you keep a copy of your secret key before removing{' '} - - - {name}. - - + + One last thing! Make sure you keep a copy of your secret key before removing{' '} + + + {name}. + If you save this secret key, you can use it in other wallets outside Keybase @@ -114,11 +112,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ background: Kb.Styles.platformStyles({ common: {backgroundColor: Kb.Styles.globalColors.yellow}, }), - icon: Kb.Styles.platformStyles({ - common: {marginBottom: Kb.Styles.globalMargins.large}, - isElectron: {marginTop: Kb.Styles.globalMargins.medium}, - isMobile: {marginTop: Kb.Styles.globalMargins.xlarge}, - }), mainText: Kb.Styles.platformStyles({ common: {paddingBottom: Kb.Styles.globalMargins.small}, isElectron: {wordBreak: 'break-all'}, diff --git a/shared/wallets/remove-account.tsx b/shared/wallets/remove-account.tsx index e8288f98db6b..b673fcf9206b 100644 --- a/shared/wallets/remove-account.tsx +++ b/shared/wallets/remove-account.tsx @@ -1,6 +1,6 @@ import * as C from '@/constants' import * as Kb from '@/common-adapters' -import WalletPopup from './wallet-popup' +import WalletPopup, {walletModalIconStyle} from './wallet-popup' import {makeReallyRemoveAccountRouteParams} from './account-utils' type OwnProps = { @@ -9,7 +9,7 @@ type OwnProps = { name: string } -const Container = (ownProps: OwnProps) => { +const RemoveAccountPopup = (ownProps: OwnProps) => { const {accountID, balanceDescription, name} = ownProps const onDelete = () => { C.Router2.navigateAppend( @@ -36,7 +36,7 @@ const Container = (ownProps: OwnProps) => { This removes{' '} @@ -60,11 +60,6 @@ const Container = (ownProps: OwnProps) => { } const styles = Kb.Styles.styleSheetCreate(() => ({ - icon: Kb.Styles.platformStyles({ - common: {marginBottom: Kb.Styles.globalMargins.large}, - isElectron: {marginTop: Kb.Styles.globalMargins.medium}, - isMobile: {marginTop: Kb.Styles.globalMargins.xlarge}, - }), marginBottomTiny: {marginBottom: Kb.Styles.globalMargins.tiny}, warningText: Kb.Styles.platformStyles({ isElectron: {wordBreak: 'break-word'} as const, @@ -74,4 +69,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }), })) -export default Container +export default RemoveAccountPopup diff --git a/shared/wallets/wallet-popup.tsx b/shared/wallets/wallet-popup.tsx index 4e331ada17a8..9f5ea9c52481 100644 --- a/shared/wallets/wallet-popup.tsx +++ b/shared/wallets/wallet-popup.tsx @@ -97,4 +97,10 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ scrollViewContentContainer: {...Kb.Styles.globalStyles.flexBoxColumn, flexGrow: 1}, })) +export const walletModalIconStyle = Kb.Styles.platformStyles({ + common: {marginBottom: Kb.Styles.globalMargins.large}, + isElectron: {marginTop: Kb.Styles.globalMargins.medium}, + isMobile: {marginTop: Kb.Styles.globalMargins.xlarge}, +}) + export default WalletPopup diff --git a/skill/simplify-ui-section/SKILL.md b/skill/simplify-ui-section/SKILL.md index e51d18c43994..13ff55c882d8 100644 --- a/skill/simplify-ui-section/SKILL.md +++ b/skill/simplify-ui-section/SKILL.md @@ -204,6 +204,14 @@ Go back to **Step 1** and re-read all files in scope. Then repeat Steps 2–5 wi **Never stop after the first pass.** The first pass removes the obvious problems. The second pass finds what those problems were hiding. The third pass is usually final. +## Revisiting Previously Simplified Directories + +**Re-running this skill on already-simplified code is intentional and by design.** Do not skip a directory just because it appears in recent git history as "already simplified." + +Each simplification pass changes the landscape. What looked acceptable before may now be a smell. New patterns emerge as nearby code changes. The second run almost always finds something the first missed. + +When asked to simplify a directory that was previously touched: proceed without hesitation. Read fresh, analyze fresh. + ## The Hard Line: No Unilateral Visual Changes **This skill is structural by default. Zero UX or behavior changes without explicit user sign-off.** @@ -245,3 +253,4 @@ This pattern generalises: use `common.tsx` as the name regardless of feature fol - Don't rename exports that have external consumers without confirming first - Don't collapse files that serve genuinely different concerns just because they're small - Don't put shared helpers in `index.tsx` — sub-views importing from the feature index creates backwards dependencies +- Don't rename `.tsx` files to `.ts` — JSX may be added later and the extension signals component-adjacent code