From 2b7f633b06106e2b4885c8cc811cbcdc37cf4ef7 Mon Sep 17 00:00:00 2001 From: chrisnojima Date: Mon, 1 Jun 2026 13:01:53 -0400 Subject: [PATCH] =?UTF-8?q?Simplify=20UI=20across=20shared/=20=E2=80=94=20?= =?UTF-8?q?Box2=20props,=20style=20utilities,=20dead=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Batch simplification pass across ~150 files in chat, common-adapters, teams, fs, settings, profile, login, team-building, provision, crypto, signup, unlock-folders, people, devices, tracker, wallets, git, app, menubar, pinentry, and incoming-share. Key changes: - Box2 props: migrate alignItems/centerChildren/fullWidth/noShrink/flex/ padding/relative/overflow out of style objects - Style utilities: Styles.size(), paddingH/V(), marginH/V(), padding(), bottomDivider(), border(), fillAbsolute(), rounded(), textEllipsis - Remove redundant wrapper Box2 layers and dead style entries - Collapse double-nested Box2s where inner props can merge to outer Net: -325 lines --- shared/app/global-errors.tsx | 10 +- shared/app/out-of-date.tsx | 6 +- shared/app/runtime-stats.tsx | 8 +- shared/chat/audio/audio-send.native.tsx | 3 +- shared/chat/blocking/block-modal.tsx | 4 +- shared/chat/blocking/invitation-to-block.tsx | 3 +- .../conversation/attachment-get-titles.tsx | 1 - shared/chat/conversation/bot/search.tsx | 5 +- shared/chat/conversation/bottom-banner.tsx | 3 +- shared/chat/conversation/command-markdown.tsx | 17 +- shared/chat/conversation/command-status.tsx | 3 +- shared/chat/conversation/giphy/index.tsx | 7 +- .../chat/conversation/header-area/index.tsx | 16 +- .../conversation/info-panel/add-people.tsx | 4 +- .../info-panel/add-to-channel.tsx | 6 +- .../conversation/info-panel/attachments.tsx | 8 +- shared/chat/conversation/info-panel/bot.tsx | 10 +- .../chat/conversation/info-panel/header.tsx | 10 +- shared/chat/conversation/info-panel/index.tsx | 2 +- shared/chat/conversation/info-panel/menu.tsx | 7 +- .../info-panel/settings/min-writer-role.tsx | 4 +- .../input-area/filepicker-popup/index.tsx | 6 +- .../conversation/input-area/normal/input.tsx | 17 +- .../chat/conversation/input-area/preview.tsx | 3 +- .../input-area/suggestors/common.tsx | 5 +- .../conversation/list-area/jump-to-recent.tsx | 3 +- .../messages/account-payment/container.tsx | 7 +- .../chat/conversation/messages/emoji-row.tsx | 6 +- .../message-popup/exploding-header.tsx | 34 +-- .../messages/message-popup/header.tsx | 77 +++--- .../messages/message-popup/reactionitem.tsx | 6 +- .../messages/placeholder/wrapper.tsx | 4 +- .../messages/reaction-tooltip.tsx | 22 +- .../conversation/messages/reactions-rows.tsx | 3 +- .../chat/conversation/messages/reset-user.tsx | 15 +- .../messages/retention-notice.tsx | 8 +- .../chat/conversation/messages/separator.tsx | 4 +- .../messages/system-git-push/container.tsx | 3 +- .../messages/system-profile-reset-notice.tsx | 8 +- .../system-simple-to-complex/container.tsx | 9 +- .../messages/text/coinflip/participants.tsx | 6 +- .../messages/text/coinflip/results.tsx | 5 +- .../text/unfurl/unfurl-list/image/video.tsx | 5 +- .../conversation/messages/user-notice.tsx | 1 - shared/chat/conversation/normal/index.tsx | 7 +- shared/chat/conversation/pinned-message.tsx | 4 +- shared/chat/conversation/reply-preview.tsx | 8 +- shared/chat/conversation/search.tsx | 8 +- shared/chat/create-channel/index.tsx | 6 +- shared/chat/delete-history-warning.tsx | 6 +- shared/chat/emoji-picker/container.tsx | 9 +- shared/chat/emoji-picker/index.tsx | 4 +- shared/chat/inbox-and-conversation-header.tsx | 2 +- shared/chat/inbox/filter-row.tsx | 3 +- shared/chat/inbox/index.tsx | 7 +- shared/chat/inbox/new-chat-button.tsx | 3 +- shared/chat/inbox/row/big-team-header.tsx | 3 +- shared/chat/inbox/row/big-teams-divider.tsx | 3 +- shared/chat/inbox/row/small-team/index.tsx | 1 - shared/chat/inbox/row/start-new-chat.tsx | 3 +- shared/chat/inbox/row/teams-divider.tsx | 5 +- shared/chat/inbox/search-row.tsx | 3 +- shared/chat/inbox/unread-shortcut.tsx | 3 +- shared/chat/location-map.tsx | 6 +- shared/chat/payments/status/index.tsx | 12 +- shared/chat/selectable-small-team.tsx | 2 +- shared/chat/send-to-chat/index.tsx | 3 +- shared/common-adapters/badge.tsx | 6 +- shared/common-adapters/banner.tsx | 5 +- shared/common-adapters/bottom-accessory.tsx | 11 +- shared/common-adapters/button-bar.tsx | 16 +- shared/common-adapters/button.tsx | 4 +- shared/common-adapters/copy-text.tsx | 9 +- shared/common-adapters/copyable-text.tsx | 25 +- shared/common-adapters/drag-and-drop.tsx | 6 +- shared/common-adapters/emoji/custom-emoji.tsx | 6 +- shared/common-adapters/emoji/native-emoji.tsx | 3 +- .../floating-menu/menu-layout/index.tsx | 47 ++-- shared/common-adapters/info-note.tsx | 47 ++-- shared/common-adapters/name-with-icon.tsx | 2 +- shared/common-adapters/popup/index.tsx | 2 +- shared/common-adapters/progress-bar.tsx | 4 +- shared/common-adapters/radio-button.tsx | 3 +- shared/common-adapters/search-filter.tsx | 4 +- .../common-adapters/swipeable-row.native.tsx | 16 +- shared/common-adapters/switch-toggle.tsx | 3 +- shared/common-adapters/toast.tsx | 1 - shared/crypto/input.tsx | 3 +- shared/crypto/output.tsx | 3 +- shared/crypto/recipients.tsx | 11 +- shared/crypto/sub-nav/index.tsx | 3 +- shared/devices/add-device.tsx | 3 +- shared/devices/device-page.tsx | 6 +- shared/devices/device-revoke.tsx | 5 +- shared/devices/paper-key.tsx | 2 +- .../kext-permission-popup.tsx | 5 +- shared/fs/browser/destination-picker.tsx | 3 +- shared/fs/browser/index.tsx | 2 +- shared/fs/browser/rows/common.tsx | 5 +- shared/fs/browser/rows/rows.tsx | 5 +- shared/fs/common/item-icon.tsx | 9 +- shared/fs/common/pie-slice.tsx | 3 +- shared/fs/common/sfmi-popup.tsx | 6 +- shared/fs/filepreview/default-view.tsx | 6 +- shared/fs/filepreview/normal-preview.tsx | 10 +- shared/fs/filepreview/text-view.tsx | 5 +- shared/fs/nav-header/mobile-header.tsx | 10 +- shared/fs/nav-header/title.tsx | 5 +- shared/fs/simple-screens/oops.tsx | 7 +- shared/fs/top-bar/loading.tsx | 5 +- shared/fs/top-bar/sync-toggle.tsx | 3 +- shared/git/delete-repo.tsx | 6 +- shared/git/new-repo.tsx | 4 +- shared/incoming-share/index.tsx | 6 +- shared/login/recover-password/error-modal.tsx | 5 +- shared/login/relogin/dropdown.native.tsx | 5 +- shared/login/relogin/index.tsx | 15 +- shared/login/reset/modal.tsx | 12 +- shared/login/signup/common.tsx | 2 +- shared/menubar/index.desktop.tsx | 15 +- shared/menubar/main2.desktop.tsx | 4 +- shared/people/announcement.tsx | 2 +- shared/people/follow-notification.tsx | 4 +- shared/people/item.tsx | 4 +- shared/profile/add-to-team.tsx | 9 +- shared/profile/edit-avatar/index.tsx | 3 +- shared/profile/generic/proofs-list.tsx | 33 +-- shared/profile/pgp/choice/index.tsx | 2 +- shared/profile/pgp/import/index.tsx | 6 +- shared/profile/revoke.tsx | 2 +- shared/profile/showcase-team-offer.tsx | 11 +- shared/profile/user/index.tsx | 10 +- shared/profile/user/shared-teams.tsx | 2 +- shared/profile/user/teams/team-row.tsx | 5 +- shared/profile/user/teams/team-section.tsx | 3 +- shared/provision/code-page/container.tsx | 30 +-- shared/provision/code-page/qr-image.tsx | 5 +- .../code-page/qr-scan/not-authorized.tsx | 2 +- shared/provision/error.tsx | 2 +- shared/provision/select-other-device.tsx | 3 +- shared/settings/about.tsx | 2 +- shared/settings/account/add-modals.tsx | 46 ++-- shared/settings/account/index.tsx | 2 +- shared/settings/advanced.tsx | 3 +- shared/settings/archive/index.tsx | 6 +- shared/settings/archive/modal.tsx | 4 +- shared/settings/chat.tsx | 52 ++-- shared/settings/contacts-joined.tsx | 11 +- shared/settings/db-nuke.confirm.tsx | 2 +- .../delete-confirm/check-passphrase.tsx | 7 +- shared/settings/display.tsx | 8 +- shared/settings/feedback/index.tsx | 40 ++- shared/settings/files/index.tsx | 8 +- shared/settings/group.tsx | 2 +- shared/settings/logout.tsx | 10 +- shared/settings/notifications/index.tsx | 2 +- shared/settings/notifications/push-prompt.tsx | 16 +- shared/settings/notifications/render.tsx | 2 +- shared/settings/password.tsx | 18 +- shared/settings/proxy.tsx | 6 +- shared/settings/screenprotector/index.tsx | 50 ++-- shared/settings/sub-nav/left-nav.tsx | 229 +++++++++--------- shared/signup/common.tsx | 6 +- shared/signup/phone-number/verify.tsx | 2 +- shared/team-building/contacts.tsx | 6 +- shared/team-building/email-search.tsx | 1 - shared/team-building/page.tsx | 3 +- shared/team-building/recs-and-recos.tsx | 6 +- shared/team-building/service-tab-bar.tsx | 19 +- shared/team-building/team-box.tsx | 4 +- .../add-members-wizard/add-from-where.tsx | 28 ++- shared/teams/add-members-wizard/confirm.tsx | 84 +++---- shared/teams/common/selection-popup.tsx | 16 +- .../confirm-remove-from-channel.tsx | 4 +- .../teams/confirm-modals/delete-channel.tsx | 6 +- shared/teams/external-team.tsx | 9 +- shared/teams/join-team/join-from-invite.tsx | 2 +- shared/teams/main/footer.tsx | 10 +- shared/teams/main/team-row.tsx | 11 +- .../teams/new-team/wizard/make-big-team.tsx | 14 +- .../teams/new-team/wizard/new-team-info.tsx | 2 +- shared/teams/role-picker.tsx | 16 +- shared/teams/team/member/add-to-channels.tsx | 2 +- shared/teams/team/member/index.new.tsx | 10 +- shared/teams/team/rows/bot-row/bot.tsx | 11 +- shared/teams/team/rows/invite-row/invite.tsx | 12 +- shared/teams/team/rows/invite-row/request.tsx | 50 ++-- shared/teams/team/rows/member-row.tsx | 33 +-- shared/teams/team/rows/subteam-row/add.tsx | 3 +- .../teams/team/settings-tab/channel-popup.tsx | 3 +- shared/teams/team/settings-tab/index.tsx | 4 +- shared/tracker/assertion.tsx | 11 +- shared/tracker/bio.tsx | 5 +- shared/tracker/index.desktop.tsx | 25 +- shared/unlock-folders/device-list.desktop.tsx | 3 +- shared/unlock-folders/index.desktop.tsx | 3 +- shared/wallets/index.tsx | 2 +- shared/wallets/really-remove-account.tsx | 3 +- shared/wallets/wallet-popup.tsx | 4 +- 199 files changed, 807 insertions(+), 1214 deletions(-) diff --git a/shared/app/global-errors.tsx b/shared/app/global-errors.tsx index 34096f4029c2..816a4ffa4733 100644 --- a/shared/app/global-errors.tsx +++ b/shared/app/global-errors.tsx @@ -132,12 +132,12 @@ const GlobalError = () => { const message = daemonError.message || 'Keybase is currently unreachable. Trying to reconnect you…' return ( - + {message} - + @@ -214,7 +214,7 @@ const GlobalError = () => { return ( - + {summary} @@ -271,9 +271,7 @@ const styles = Kb.Styles.styleSheetCreate(() => { ...Kb.Styles.padding(8, Kb.Styles.globalMargins.xlarge), }, innerContainer: { - ...Kb.Styles.globalStyles.flexBoxCenter, backgroundColor: Kb.Styles.globalColors.black, - gap: Kb.Styles.globalMargins.small, minHeight: maxHeightForSize('Small'), ...Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, Kb.Styles.globalMargins.small), }, @@ -309,11 +307,9 @@ const styles = Kb.Styles.styleSheetCreate(() => { ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall), }, overlayFill: { - ...Kb.Styles.globalStyles.flexBoxCenter, backgroundColor: Kb.Styles.globalColors.white, }, overlayRow: { - ...Kb.Styles.globalStyles.flexBoxCenter, backgroundColor: Kb.Styles.globalColors.blue, padding: 8, }, diff --git a/shared/app/out-of-date.tsx b/shared/app/out-of-date.tsx index c0c143554e0c..b3afda52c3f5 100644 --- a/shared/app/out-of-date.tsx +++ b/shared/app/out-of-date.tsx @@ -11,13 +11,11 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ ...Kb.Styles.globalStyles.fillAbsolute, backgroundColor: Kb.Styles.globalColors.red, bottom: undefined, - padding: Kb.Styles.globalMargins.small, zIndex: 9999, }, messageContainer: { backgroundColor: Kb.Styles.globalColors.white_90, borderRadius: Kb.Styles.borderRadius, - padding: Kb.Styles.globalMargins.medium, }, })) @@ -62,11 +60,11 @@ const OutOfDate = () => { const message = isMobile ? mobileMessage : outOfDate.message return !critical ? null : ( - + Your version of Keybase is critically out of date! - + {message} {isMobile && } diff --git a/shared/app/runtime-stats.tsx b/shared/app/runtime-stats.tsx index ae2bc1d8ff0b..8ea9a5c47f6d 100644 --- a/shared/app/runtime-stats.tsx +++ b/shared/app/runtime-stats.tsx @@ -224,9 +224,8 @@ const RuntimeStatsDesktop = ({stats}: Props) => { const [moreLogs, setMoreLogs] = React.useState(false) return ( - <> - - setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}> + + setMoreLogs(m => !m)} direction="vertical" style={styles.container} gap="xxtiny" fullWidth={true}> {!moreLogs && stats.processStats?.map((stat, i) => { return ( @@ -303,8 +302,7 @@ const RuntimeStatsDesktop = ({stats}: Props) => { )*/} - - + ) } diff --git a/shared/chat/audio/audio-send.native.tsx b/shared/chat/audio/audio-send.native.tsx index 078cbb46f642..a580a9d40cf4 100644 --- a/shared/chat/audio/audio-send.native.tsx +++ b/shared/chat/audio/audio-send.native.tsx @@ -40,7 +40,7 @@ const AudioSend = (props: Props) => { ) return ( - + @@ -55,7 +55,6 @@ const AudioSend = (props: Props) => { const styles = Kb.Styles.styleSheetCreate(() => ({ container: { - alignItems: 'center', borderStyle: 'solid', borderTopColor: Kb.Styles.globalColors.black_10, borderTopWidth: 1, diff --git a/shared/chat/blocking/block-modal.tsx b/shared/chat/blocking/block-modal.tsx index faf333f238ea..2cebcb5e2107 100644 --- a/shared/chat/blocking/block-modal.tsx +++ b/shared/chat/blocking/block-modal.tsx @@ -406,7 +406,7 @@ const BlockModal = (ownProps: OwnProps) => { if (loadingWaiting) { return ( - + ) @@ -520,7 +520,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ greyBox: { backgroundColor: Kb.Styles.globalColors.blueGrey, color: Kb.Styles.globalColors.black_50, - width: '100%', ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall), }, grow: {flexGrow: 1}, @@ -534,7 +533,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, }), loadingAnimationBox: { - alignSelf: 'center', padding: Kb.Styles.globalMargins.medium, }, modalFooter: Kb.Styles.platformStyles({ diff --git a/shared/chat/blocking/invitation-to-block.tsx b/shared/chat/blocking/invitation-to-block.tsx index 34840a423940..92ba6df5a805 100644 --- a/shared/chat/blocking/invitation-to-block.tsx +++ b/shared/chat/blocking/invitation-to-block.tsx @@ -171,8 +171,7 @@ const styles = Kb.Styles.styleSheetCreate( }, dismissContainer: { backgroundColor: Kb.Styles.globalColors.blueGrey, - paddingBottom: Kb.Styles.globalMargins.xsmall, - paddingTop: Kb.Styles.globalMargins.xsmall, + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.xsmall), }, dismissIcon: { position: 'absolute', diff --git a/shared/chat/conversation/attachment-get-titles.tsx b/shared/chat/conversation/attachment-get-titles.tsx index f5cdc54c5bea..22aef7cbe621 100644 --- a/shared/chat/conversation/attachment-get-titles.tsx +++ b/shared/chat/conversation/attachment-get-titles.tsx @@ -263,7 +263,6 @@ const styles = Kb.Styles.styleSheetCreate( }), container: Kb.Styles.platformStyles({ common: { - alignItems: 'center', flexGrow: 1, ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), width: '100%', diff --git a/shared/chat/conversation/bot/search.tsx b/shared/chat/conversation/bot/search.tsx index 1357bd0e78f6..9deac4c45112 100644 --- a/shared/chat/conversation/bot/search.tsx +++ b/shared/chat/conversation/bot/search.tsx @@ -140,7 +140,7 @@ const SearchBotPopupInner = (props: Props & {conversationIDKey: T.Chat.Conversat renderItem: ({index, item}: {index: number; item: Item}) => { return item.type === 'dummy' && item.value === resultEmptyPlaceholder ? ( No results were found @@ -170,7 +170,7 @@ const SearchBotPopupInner = (props: Props & {conversationIDKey: T.Chat.Conversat {item.type === 'dummy' && item.value === userEmptyPlaceholder ? ( Enter a bot username above @@ -220,6 +220,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ modal: Kb.Styles.platformStyles({ isElectron: {height: 500}, }), + paddedItem: Kb.Styles.padding(Kb.Styles.globalMargins.tiny), })) export default SearchBotPopup diff --git a/shared/chat/conversation/bottom-banner.tsx b/shared/chat/conversation/bottom-banner.tsx index 63812440db74..fdc4b3aa4a9e 100644 --- a/shared/chat/conversation/bottom-banner.tsx +++ b/shared/chat/conversation/bottom-banner.tsx @@ -172,10 +172,9 @@ const styles = Kb.Styles.styleSheetCreate( ({ bannerStyle: Kb.Styles.platformStyles({ common: { - ...Kb.Styles.globalStyles.flexBoxColumn, - ...Kb.Styles.centered(), backgroundColor: Kb.Styles.globalColors.red, flexWrap: 'wrap', + justifyContent: 'center', ...Kb.Styles.padding(8, 24), }, isElectron: { diff --git a/shared/chat/conversation/command-markdown.tsx b/shared/chat/conversation/command-markdown.tsx index b266fb0316df..4022633446dd 100644 --- a/shared/chat/conversation/command-markdown.tsx +++ b/shared/chat/conversation/command-markdown.tsx @@ -25,10 +25,7 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ bodyContainer: { - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.xsmall, - paddingRight: Kb.Styles.globalMargins.xsmall, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall), }, container: Kb.Styles.platformStyles({ isElectron: { @@ -36,8 +33,7 @@ const styles = Kb.Styles.styleSheetCreate( border: `1px solid ${Kb.Styles.globalColors.black_20}`, borderRadius: Kb.Styles.borderRadius, marginBottom: Kb.Styles.globalMargins.xtiny, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), }, isMobile: { backgroundColor: Kb.Styles.globalColors.white, @@ -51,13 +47,8 @@ const styles = Kb.Styles.styleSheetCreate( }), title: { backgroundColor: Kb.Styles.globalColors.black_05, - borderBottomWidth: 1, - borderColor: Kb.Styles.globalColors.black_10, - borderStyle: 'solid', - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.xsmall, - paddingRight: Kb.Styles.globalMargins.xsmall, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.bottomDivider(), + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall), }, }) as const ) diff --git a/shared/chat/conversation/command-status.tsx b/shared/chat/conversation/command-status.tsx index 2e7e799286f3..ac9b394bf827 100644 --- a/shared/chat/conversation/command-status.tsx +++ b/shared/chat/conversation/command-status.tsx @@ -106,8 +106,7 @@ const styles = Kb.Styles.styleSheetCreate( border: `1px solid ${Kb.Styles.globalColors.black_20}`, borderRadius: Kb.Styles.borderRadius, marginBottom: Kb.Styles.globalMargins.xtiny, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), overflow: 'hidden', }, isMobile: { diff --git a/shared/chat/conversation/giphy/index.tsx b/shared/chat/conversation/giphy/index.tsx index d16d513a1de1..5dfa8dfc6e36 100644 --- a/shared/chat/conversation/giphy/index.tsx +++ b/shared/chat/conversation/giphy/index.tsx @@ -162,8 +162,7 @@ const styles = Kb.Styles.styleSheetCreate( }, outerContainer: { marginBottom: Kb.Styles.globalMargins.xtiny, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), }, poweredBy: { bottom: 0, @@ -176,9 +175,7 @@ const styles = Kb.Styles.styleSheetCreate( border: `1px solid ${Kb.Styles.globalColors.black_20}`, borderRadius: Kb.Styles.borderRadius, maxHeight: 300, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.tiny, - paddingRight: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.padding(0, Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.tiny), }, }), }) as const diff --git a/shared/chat/conversation/header-area/index.tsx b/shared/chat/conversation/header-area/index.tsx index cd3db53eef35..8eaffbcbdaea 100644 --- a/shared/chat/conversation/header-area/index.tsx +++ b/shared/chat/conversation/header-area/index.tsx @@ -42,6 +42,7 @@ const HeaderAreaRightImpl = (props: HeaderConversationProps) => { @@ -196,7 +197,7 @@ const ChannelHeader = (props: HeaderConversationProps) => { return ( - + { {smallTeam && } {!smallTeam && ( - + #{channelname} @@ -252,7 +253,7 @@ const UsernameHeader = (props: HeaderConversationProps) => { {theirFullname} )} - + ({ addButtonContainer: { - alignSelf: undefined, marginBottom: Kb.Styles.globalMargins.small, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), }, }) as const ) diff --git a/shared/chat/conversation/info-panel/add-to-channel.tsx b/shared/chat/conversation/info-panel/add-to-channel.tsx index 17d1922dd79f..e5ed9b189c80 100644 --- a/shared/chat/conversation/info-panel/add-to-channel.tsx +++ b/shared/chat/conversation/info-panel/add-to-channel.tsx @@ -172,10 +172,8 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, filterInput: Kb.Styles.platformStyles({ isElectron: { - marginBottom: Kb.Styles.globalMargins.tiny, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, - marginTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), + ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny), }, }), list: Kb.Styles.platformStyles({isMobile: {height: '100%'}}), diff --git a/shared/chat/conversation/info-panel/attachments.tsx b/shared/chat/conversation/info-panel/attachments.tsx index f8b3390681c9..259a32e2173e 100644 --- a/shared/chat/conversation/info-panel/attachments.tsx +++ b/shared/chat/conversation/info-panel/attachments.tsx @@ -208,7 +208,7 @@ const MediaThumb = (props: MediaThumbProps) => { )} {thumb.typ === ThumbTyp.VIDEO && ( - + )} @@ -360,15 +360,11 @@ const styles = Kb.Styles.styleSheetCreate( } as const, }), durationContainer: { - alignSelf: 'flex-start', bottom: Kb.Styles.globalMargins.xtiny, position: 'absolute', right: Kb.Styles.globalMargins.xtiny, }, - filmIcon: { - height: 16, - width: 16, - }, + filmIcon: Kb.Styles.size(16), flexWrap: {flexWrap: 'wrap'}, linkContainer: {padding: Kb.Styles.globalMargins.tiny}, linkStyle: Kb.Styles.platformStyles({ diff --git a/shared/chat/conversation/info-panel/bot.tsx b/shared/chat/conversation/info-panel/bot.tsx index 7191fec70364..856d5215f800 100644 --- a/shared/chat/conversation/info-panel/bot.tsx +++ b/shared/chat/conversation/info-panel/bot.tsx @@ -182,17 +182,13 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ addBot: { - alignSelf: undefined, marginBottom: Kb.Styles.globalMargins.xtiny, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), marginTop: Kb.Styles.globalMargins.small, }, botHeaders: { - marginBottom: Kb.Styles.globalMargins.tiny, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, - marginTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), + ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny), }, container: Kb.Styles.platformStyles({ isElectron: { diff --git a/shared/chat/conversation/info-panel/header.tsx b/shared/chat/conversation/info-panel/header.tsx index cc2a24ea2765..f091d3ed5d1d 100644 --- a/shared/chat/conversation/info-panel/header.tsx +++ b/shared/chat/conversation/info-panel/header.tsx @@ -45,7 +45,7 @@ const TeamHeader = (props: {conversationIDKey: T.Chat.ConversationIDKey}) => { return ( - + {popup} {isSmallTeam ? ( <> @@ -172,16 +172,13 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ addMembers: { - alignSelf: undefined, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), }, channelName: Kb.Styles.platformStyles({ isElectron: {wordBreak: 'break-all'}, }), description: { - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, flexOne: {flex: 1}, floatingMenuContainerStyle: Kb.Styles.platformStyles({ @@ -198,7 +195,6 @@ const styles = Kb.Styles.styleSheetCreate( }), meta: {alignSelf: 'center'}, smallContainer: { - alignItems: 'center', paddingLeft: Kb.Styles.globalMargins.small, }, }) as const diff --git a/shared/chat/conversation/info-panel/index.tsx b/shared/chat/conversation/info-panel/index.tsx index 2781a99ee52d..610411215c7d 100644 --- a/shared/chat/conversation/info-panel/index.tsx +++ b/shared/chat/conversation/info-panel/index.tsx @@ -105,7 +105,7 @@ const InfoPanelConnector = ({conversationIDKey: _conversationIDKey, tab}: Props) return ( diff --git a/shared/chat/conversation/info-panel/menu.tsx b/shared/chat/conversation/info-panel/menu.tsx index 539c741aba10..674cd10e311c 100644 --- a/shared/chat/conversation/info-panel/menu.tsx +++ b/shared/chat/conversation/info-panel/menu.tsx @@ -463,7 +463,7 @@ const TeamHeader = (props: TeamHeaderProps) => { {teamHumanCount ? ( { ref={isMobile ? null : popupAnchor} onClick={showPopup} > - + {upperFirst(minWriterRole)} @@ -181,10 +181,8 @@ const styles = Kb.Styles.styleSheetCreate( }), hidden: {display: 'none'}, label: { - alignItems: 'center', minHeight: isMobile ? 40 : 32, paddingLeft: Kb.Styles.globalMargins.xsmall, - width: '100%', }, saveIndicator: Kb.Styles.platformStyles({ common: { diff --git a/shared/chat/conversation/input-area/filepicker-popup/index.tsx b/shared/chat/conversation/input-area/filepicker-popup/index.tsx index 7ca02e70ae66..e2449765307a 100644 --- a/shared/chat/conversation/input-area/filepicker-popup/index.tsx +++ b/shared/chat/conversation/input-area/filepicker-popup/index.tsx @@ -9,7 +9,7 @@ type Props = { } const Prompt = () => ( - + Select attachment ) @@ -18,9 +18,7 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ promptContainer: { - alignItems: 'center', - paddingBottom: 24, - paddingTop: 24, + ...Kb.Styles.paddingV(24), }, }) as const ) diff --git a/shared/chat/conversation/input-area/normal/input.tsx b/shared/chat/conversation/input-area/normal/input.tsx index c3052a7b15c6..aa22a075d2fc 100644 --- a/shared/chat/conversation/input-area/normal/input.tsx +++ b/shared/chat/conversation/input-area/normal/input.tsx @@ -901,12 +901,8 @@ const desktopStyles = Kb.Styles.styleSheetCreate( inputWrapper: { alignSelf: 'stretch', backgroundColor: Kb.Styles.globalColors.white, - borderColor: Kb.Styles.globalColors.black_20, - borderRadius: Kb.Styles.borderRadius, - borderStyle: 'solid', - borderWidth: 1, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.border(Kb.Styles.globalColors.black_20, 1, Kb.Styles.borderRadius), + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), paddingRight: Kb.Styles.globalMargins.xtiny, }, inputWrapperEditing: {backgroundColor: Kb.Styles.globalColors.yellowOrYellowAlt}, @@ -1454,15 +1450,13 @@ const nativeStyles = Kb.Styles.styleSheetCreate( ...Kb.Styles.padding(0, 0, Kb.Styles.globalMargins.tiny, 0), }, editingButton: { - marginLeft: Kb.Styles.globalMargins.tiny, - marginRight: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.tiny), }, exploding: { backgroundColor: Kb.Styles.globalColors.black, borderRadius: Kb.Styles.globalMargins.mediumLarge / 2, - height: 28, + ...Kb.Styles.size(28), margin: Kb.Styles.globalMargins.xtiny, - width: 28, }, explodingContainer: {borderTopColor: Kb.Styles.globalColors.black}, explodingSendBtn: { @@ -1483,10 +1477,9 @@ const nativeStyles = Kb.Styles.styleSheetCreate( position: 'absolute', }, iconContainer: { - height: 28, + ...Kb.Styles.size(28), marginRight: -Kb.Styles.globalMargins.xtiny, marginTop: Kb.Styles.globalMargins.tiny, - width: 28, }, iconTop: { position: 'absolute', diff --git a/shared/chat/conversation/input-area/preview.tsx b/shared/chat/conversation/input-area/preview.tsx index e46dfb9a5cf0..1a98428c0341 100644 --- a/shared/chat/conversation/input-area/preview.tsx +++ b/shared/chat/conversation/input-area/preview.tsx @@ -47,8 +47,7 @@ const styles = Kb.Styles.styleSheetCreate( ({ container: { backgroundColor: Kb.Styles.globalColors.blue, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny), }, }) as const ) diff --git a/shared/chat/conversation/input-area/suggestors/common.tsx b/shared/chat/conversation/input-area/suggestors/common.tsx index 1c500be2a461..90c530cc7437 100644 --- a/shared/chat/conversation/input-area/suggestors/common.tsx +++ b/shared/chat/conversation/input-area/suggestors/common.tsx @@ -123,10 +123,7 @@ export const styles = Kb.Styles.styleSheetCreate( }), suggestionBase: { alignItems: 'center', - paddingBottom: Kb.Styles.globalMargins.xtiny, - paddingLeft: Kb.Styles.globalMargins.tiny, - paddingRight: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, Kb.Styles.globalMargins.tiny), }, }) as const ) diff --git a/shared/chat/conversation/list-area/jump-to-recent.tsx b/shared/chat/conversation/list-area/jump-to-recent.tsx index b84933f2bcc6..fe3aec7b1346 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 ( - + { ) const contents = loading ? ( - + loading... @@ -156,13 +156,13 @@ const ConnectedAccountPayment = (ownProps: OwnProps) => { - + {!!icon && ( { const styles = Kb.Styles.styleSheetCreate( () => ({ - alignItemsCenter: {alignItems: 'center'}, amountContainer: Kb.Styles.platformStyles({ isElectron: { alignItems: 'center', diff --git a/shared/chat/conversation/messages/emoji-row.tsx b/shared/chat/conversation/messages/emoji-row.tsx index 3c57ec97c436..573774a2d458 100644 --- a/shared/chat/conversation/messages/emoji-row.tsx +++ b/shared/chat/conversation/messages/emoji-row.tsx @@ -170,15 +170,13 @@ const styles = Kb.Styles.styleSheetCreate( }), disabled: {opacity: 0.3}, divider: { - marginBottom: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny), marginLeft: Kb.Styles.globalMargins.xsmall, marginRight: Kb.Styles.globalMargins.xtiny, - marginTop: Kb.Styles.globalMargins.tiny, }, emojiBox: { - height: Kb.Styles.globalMargins.small, + ...Kb.Styles.size(Kb.Styles.globalMargins.small), marginRight: Kb.Styles.globalMargins.xxtiny, - width: Kb.Styles.globalMargins.small, }, hoverEmoji: {position: 'absolute'}, icon: { diff --git a/shared/chat/conversation/messages/message-popup/exploding-header.tsx b/shared/chat/conversation/messages/message-popup/exploding-header.tsx index df0d3c7d8286..24e553fd9209 100644 --- a/shared/chat/conversation/messages/message-popup/exploding-header.tsx +++ b/shared/chat/conversation/messages/message-popup/exploding-header.tsx @@ -66,7 +66,7 @@ const ExplodingPopupHeader = (props: Props) => { {botUsername ? ( also encrypted for - + { ])} > - + {props.explodesAt === 0 ? 'EXPLODED MESSAGE' : 'EXPLODING MESSAGE'} @@ -118,31 +118,25 @@ const ExplodingPopupHeader = (props: Props) => { fontSize={isMobile ? 20 : 16} color={Kb.Styles.globalColors.white} /> - + {msToDHMS(props.explodesAt - now)} )} ) - return isMobile ? ( - + return ( + + {isMobile ? null : icon} {banner} {info} - - - ) : ( - - {icon} - {banner} - {info} - + ) } const headerIconType = isMobile ? 'icon-fancy-bomb-mobile-226-96' : 'icon-fancy-bomb-desktop-150-72' -const headerIconHeight = isMobile ? 48 : 48 +const headerIconHeight = 48 const oneMinuteInS = 60 const styles = Kb.Styles.styleSheetCreate( @@ -150,14 +144,12 @@ const styles = Kb.Styles.styleSheetCreate( ({ headerIcon: { height: headerIconHeight, - marginBottom: Kb.Styles.globalMargins.xtiny, - marginTop: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.xtiny), }, messageInfoContainer: { padding: Kb.Styles.globalMargins.xsmall, }, popupContainer: Kb.Styles.platformStyles({ - common: {alignItems: 'center'}, isElectron: { maxWidth: 240, minWidth: 200, @@ -166,10 +158,7 @@ const styles = Kb.Styles.styleSheetCreate( popupHeaderText: { 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, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small), }, revokedAt: { borderBottomLeftRadius: 3, @@ -182,7 +171,10 @@ const styles = Kb.Styles.styleSheetCreate( }, isMobile: {height: 46}, }), + fullWidth: {width: '100%'}, + timerText: {alignSelf: 'center', color: Kb.Styles.globalColors.white}, user: {alignItems: 'center'}, + whiteText: {color: Kb.Styles.globalColors.white}, }) as const ) diff --git a/shared/chat/conversation/messages/message-popup/header.tsx b/shared/chat/conversation/messages/message-popup/header.tsx index 034799965470..15a5b3c3e608 100644 --- a/shared/chat/conversation/messages/message-popup/header.tsx +++ b/shared/chat/conversation/messages/message-popup/header.tsx @@ -62,45 +62,39 @@ const MessagePopupHeader = (props: Props) => { {isMobile ? null : } {isMobile ? null : ( - - - ENCRYPTED & SIGNED - - + + ENCRYPTED & SIGNED + )} - - - + + + + {deviceName} + + {botUsername && ( + + also encrypted for + - {deviceName} - - - {botUsername && ( - - also encrypted for - - - - )} @@ -119,13 +113,7 @@ const MessagePopupHeader = (props: Props) => { )} - + ) } @@ -133,7 +121,6 @@ const MessagePopupHeader = (props: Props) => { const styles = Kb.Styles.styleSheetCreate( () => ({ - alignItemsCenter: {alignItems: 'center'}, headerContainer: Kb.Styles.platformStyles({ common: { paddingTop: Kb.Styles.globalMargins.tiny, @@ -155,10 +142,12 @@ const styles = Kb.Styles.styleSheetCreate( popupHeaderText: { 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, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small), + }, + divider: { + marginBottom: isMobile ? Kb.Styles.globalMargins.tiny : 0, + marginTop: Kb.Styles.globalMargins.tiny, + width: '100%', }, revokedAtContainerLast: { borderBottomLeftRadius: 3, diff --git a/shared/chat/conversation/messages/message-popup/reactionitem.tsx b/shared/chat/conversation/messages/message-popup/reactionitem.tsx index 4d7584e97914..7c53609e59a7 100644 --- a/shared/chat/conversation/messages/message-popup/reactionitem.tsx +++ b/shared/chat/conversation/messages/message-popup/reactionitem.tsx @@ -21,7 +21,7 @@ const ReactionItem = (props: Props) => { }, 100) } return ( - + {topReacjis.map((r, idx) => ( onReact(r.name)} style={styles.clickableBox}> @@ -41,9 +41,7 @@ const styles = Kb.Styles.styleSheetCreate( width: 40, }, container: { - alignItems: 'center', - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, }) as const ) diff --git a/shared/chat/conversation/messages/placeholder/wrapper.tsx b/shared/chat/conversation/messages/placeholder/wrapper.tsx index 627084e7e7ee..f972482b751b 100644 --- a/shared/chat/conversation/messages/placeholder/wrapper.tsx +++ b/shared/chat/conversation/messages/placeholder/wrapper.tsx @@ -14,7 +14,7 @@ function WrapperPlaceholder(p: Props) { return ( - + @@ -25,9 +25,7 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: { - alignItems: 'center', height: isMobile ? 22 : 17, // to match a line of text - width: '100%', }, }) as const ) diff --git a/shared/chat/conversation/messages/reaction-tooltip.tsx b/shared/chat/conversation/messages/reaction-tooltip.tsx index f89edd1aa835..fef734d6780b 100644 --- a/shared/chat/conversation/messages/reaction-tooltip.tsx +++ b/shared/chat/conversation/messages/reaction-tooltip.tsx @@ -115,6 +115,8 @@ const ReactionTooltip = (p: OwnProps) => { gapStart={true} gapEnd={true} fullWidth={true} + centerChildren={true} + noShrink={true} style={styles.buttonContainer} > ({ addReactionButtonBar: { - paddingBottom: Kb.Styles.globalMargins.medium, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.small, + ...Kb.Styles.padding( + Kb.Styles.globalMargins.small, + Kb.Styles.globalMargins.small, + Kb.Styles.globalMargins.medium + ), }, addReactionButtonIcon: {marginRight: Kb.Styles.globalMargins.tiny}, buttonContainer: { - alignItems: 'center', backgroundColor: Kb.Styles.globalColors.white, borderTopLeftRadius: 3, borderTopRightRadius: 3, - flexShrink: 0, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny), }, closeButton: {padding: Kb.Styles.globalMargins.small}, emojiText: { @@ -241,10 +241,8 @@ const styles = Kb.Styles.styleSheetCreate( userContainer: { alignSelf: 'stretch', backgroundColor: Kb.Styles.globalColors.white, - paddingBottom: Kb.Styles.globalMargins.xtiny, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.xtiny), width: '100%', }, }) as const diff --git a/shared/chat/conversation/messages/reactions-rows.tsx b/shared/chat/conversation/messages/reactions-rows.tsx index da5df1ae7c3f..9fa8a1048ece 100644 --- a/shared/chat/conversation/messages/reactions-rows.tsx +++ b/shared/chat/conversation/messages/reactions-rows.tsx @@ -26,7 +26,7 @@ function ReactionsRowContainer(p: OwnProps) { ) return emojis.length === 0 ? null : ( - + {emojis.map((emoji, idx) => { const reaction = reactions?.get(emoji) return reaction ? ( @@ -104,7 +104,6 @@ const styles = Kb.Styles.styleSheetCreate( ({ button: {marginBottom: Kb.Styles.globalMargins.tiny}, container: { - alignItems: 'flex-start', flexWrap: 'wrap', paddingRight: 66, paddingTop: Kb.Styles.globalMargins.tiny, diff --git a/shared/chat/conversation/messages/reset-user.tsx b/shared/chat/conversation/messages/reset-user.tsx index 6782baa98a67..5a49e9bf7bc4 100644 --- a/shared/chat/conversation/messages/reset-user.tsx +++ b/shared/chat/conversation/messages/reset-user.tsx @@ -34,9 +34,9 @@ const ResetUser = () => { const viewProfile = () => _viewProfile(username) return ( - + - + {username} @@ -95,18 +95,13 @@ const styles = Kb.Styles.styleSheetCreate( maxWidth: 320, }, buttonContainer: { - alignItems: 'center', - marginBottom: Kb.Styles.globalMargins.small, - marginTop: Kb.Styles.globalMargins.small, - width: '100%', + ...Kb.Styles.marginV(Kb.Styles.globalMargins.small), }, container: { - alignItems: 'center', backgroundColor: Kb.Styles.globalColors.red, marginBottom: -Kb.Styles.globalMargins.small, marginTop: Kb.Styles.globalMargins.small, padding: Kb.Styles.globalMargins.small, - width: '100%', }, lastSentence: { marginTop: Kb.Styles.globalMargins.medium, @@ -125,10 +120,6 @@ const styles = Kb.Styles.styleSheetCreate( isMobile: {...Kb.Styles.size(64)}, }), textContainer: Kb.Styles.platformStyles({ - common: { - alignItems: 'center', - width: '100%', - }, isElectron: { ...Kb.Styles.paddingH(Kb.Styles.globalMargins.large), }, diff --git a/shared/chat/conversation/messages/retention-notice.tsx b/shared/chat/conversation/messages/retention-notice.tsx index 589bc5d4c4a1..80c453972738 100644 --- a/shared/chat/conversation/messages/retention-notice.tsx +++ b/shared/chat/conversation/messages/retention-notice.tsx @@ -81,10 +81,10 @@ const styles = Kb.Styles.styleSheetCreate( ({ container: { backgroundColor: Kb.Styles.globalColors.blueLighter3, - paddingBottom: Kb.Styles.globalMargins.small, - paddingLeft: Kb.Styles.globalMargins.medium, - paddingRight: Kb.Styles.globalMargins.medium, - paddingTop: Kb.Styles.globalMargins.small, + ...Kb.Styles.padding( + Kb.Styles.globalMargins.small, + Kb.Styles.globalMargins.medium + ), }, iconBox: {marginBottom: Kb.Styles.globalMargins.xtiny}, }) as const diff --git a/shared/chat/conversation/messages/separator.tsx b/shared/chat/conversation/messages/separator.tsx index 96b45b21422c..3218ffc8db13 100644 --- a/shared/chat/conversation/messages/separator.tsx +++ b/shared/chat/conversation/messages/separator.tsx @@ -63,6 +63,7 @@ function SeparatorConnector(p: Props) { return ( ({ container: Kb.Styles.platformStyles({ - common: { - position: 'relative', - }, isElectron: { marginBottom: 0, paddingTop: 5, diff --git a/shared/chat/conversation/messages/system-git-push/container.tsx b/shared/chat/conversation/messages/system-git-push/container.tsx index ef756431be65..c5534afa5f98 100644 --- a/shared/chat/conversation/messages/system-git-push/container.tsx +++ b/shared/chat/conversation/messages/system-git-push/container.tsx @@ -181,8 +181,7 @@ const styles = Kb.Styles.styleSheetCreate( }, hashAndMessage: { height: 18, - marginBottom: Kb.Styles.globalMargins.xtiny, - marginTop: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.xtiny), }, marker: { flexShrink: 0, diff --git a/shared/chat/conversation/messages/system-profile-reset-notice.tsx b/shared/chat/conversation/messages/system-profile-reset-notice.tsx index 2db6ad2076d0..f7f374565578 100644 --- a/shared/chat/conversation/messages/system-profile-reset-notice.tsx +++ b/shared/chat/conversation/messages/system-profile-reset-notice.tsx @@ -18,13 +18,13 @@ const SystemProfileResetNotice = () => { } return ( - + {username} reset their profile View older conversation @@ -33,4 +33,8 @@ const SystemProfileResetNotice = () => { ) } +const styles = Kb.Styles.styleSheetCreate(() => ({ + text: {color: Kb.Styles.globalColors.black_50}, +})) + export default SystemProfileResetNotice diff --git a/shared/chat/conversation/messages/system-simple-to-complex/container.tsx b/shared/chat/conversation/messages/system-simple-to-complex/container.tsx index edcb7ab292a4..cefd5e894bbc 100644 --- a/shared/chat/conversation/messages/system-simple-to-complex/container.tsx +++ b/shared/chat/conversation/messages/system-simple-to-complex/container.tsx @@ -24,7 +24,7 @@ function SystemSimpleToComplexContainer(p: OwnProps) { direction="vertical" alignSelf="flex-start" gap="tiny" - style={{marginLeft: Kb.Styles.globalMargins.tiny, marginTop: Kb.Styles.globalMargins.xtiny}} + style={styles.bulletList} > @@ -41,7 +41,7 @@ function SystemSimpleToComplexContainer(p: OwnProps) { Browse other channels @@ -55,6 +55,11 @@ const bullet = '\u2022 ' const styles = Kb.Styles.styleSheetCreate(() => ({ bullet: {marginRight: Kb.Styles.globalMargins.small}, + bulletList: { + marginLeft: Kb.Styles.globalMargins.tiny, + marginTop: Kb.Styles.globalMargins.xtiny, + }, + link: {color: Kb.Styles.globalColors.blueDark}, })) export default SystemSimpleToComplexContainer diff --git a/shared/chat/conversation/messages/text/coinflip/participants.tsx b/shared/chat/conversation/messages/text/coinflip/participants.tsx index 0c2c289fa5aa..1ba77fd49b19 100644 --- a/shared/chat/conversation/messages/text/coinflip/participants.tsx +++ b/shared/chat/conversation/messages/text/coinflip/participants.tsx @@ -69,12 +69,10 @@ const styles = Kb.Styles.styleSheetCreate( }), partContainer: { maxHeight: 200, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, participants: { - marginBottom: Kb.Styles.globalMargins.tiny, - marginTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny), }, }) as const ) diff --git a/shared/chat/conversation/messages/text/coinflip/results.tsx b/shared/chat/conversation/messages/text/coinflip/results.tsx index 9548135d1669..3f81a4cc4393 100644 --- a/shared/chat/conversation/messages/text/coinflip/results.tsx +++ b/shared/chat/conversation/messages/text/coinflip/results.tsx @@ -282,7 +282,7 @@ const CoinFlipResultShuffle = (props: ShuffleType) => ( const CoinFlipResultShuffleItem = (props: {index: number; item: string}) => ( - + ( diff --git a/shared/chat/conversation/normal/index.tsx b/shared/chat/conversation/normal/index.tsx index 7dc130e4a8e1..91f6c383cba5 100644 --- a/shared/chat/conversation/normal/index.tsx +++ b/shared/chat/conversation/normal/index.tsx @@ -88,7 +88,7 @@ const DesktopConversation = function DesktopConversation() { {threadLoadedOffline && } - + {!showThreadSearch && } @@ -175,6 +175,11 @@ const desktopStyles = Kb.Styles.styleSheetCreate( offline: { padding: Kb.Styles.globalMargins.xxtiny, }, + overlayTop: { + left: 0, + position: 'absolute' as const, + top: 0, + }, threadSearchStyle: { position: 'absolute' as const, top: 0, diff --git a/shared/chat/conversation/pinned-message.tsx b/shared/chat/conversation/pinned-message.tsx index 5686921785ca..1244aea325a7 100644 --- a/shared/chat/conversation/pinned-message.tsx +++ b/shared/chat/conversation/pinned-message.tsx @@ -199,9 +199,7 @@ const styles = Kb.Styles.styleSheetCreate( label: {color: Kb.Styles.globalColors.blueDark}, popup: Kb.Styles.platformStyles({ common: { - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.small, + ...Kb.Styles.padding(Kb.Styles.globalMargins.small, Kb.Styles.globalMargins.small, 0), }, isElectron: {maxWidth: 200}, }), diff --git a/shared/chat/conversation/reply-preview.tsx b/shared/chat/conversation/reply-preview.tsx index ecde4f2efa60..1d55888971df 100644 --- a/shared/chat/conversation/reply-preview.tsx +++ b/shared/chat/conversation/reply-preview.tsx @@ -83,8 +83,7 @@ const styles = Kb.Styles.styleSheetCreate( outerContainer: Kb.Styles.platformStyles({ isElectron: { marginBottom: Kb.Styles.globalMargins.xtiny, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), position: 'relative', }, }), @@ -103,10 +102,7 @@ const styles = Kb.Styles.styleSheetCreate( }), title: { backgroundColor: Kb.Styles.globalColors.blueGrey, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.xsmall, - paddingRight: Kb.Styles.globalMargins.xsmall, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.xsmall), }, username: {alignSelf: 'center'}, }) as const diff --git a/shared/chat/conversation/search.tsx b/shared/chat/conversation/search.tsx index d8feaaac7edc..7ba9cf22b943 100644 --- a/shared/chat/conversation/search.tsx +++ b/shared/chat/conversation/search.tsx @@ -401,7 +401,7 @@ const ThreadSearchDesktopInner = function ThreadSearchDesktopInner(p: CommonProp containerStyle={styles.bareInput} /> - + {inProgress && } {hasResults && ( @@ -461,7 +461,7 @@ const ThreadSearchMobileInner = function ThreadSearchMobileInner(p: CommonProps) return ( - + Cancel @@ -480,7 +480,7 @@ const ThreadSearchMobileInner = function ThreadSearchMobileInner(p: CommonProps) containerStyle={styles.bareInput} /> - + {inProgress && } {hasResults && ( @@ -513,7 +513,6 @@ const styles = Kb.Styles.styleSheetCreate( ({ bareInput: {backgroundColor: Kb.Styles.globalColors.transparent, flex: 1, padding: 0, width: 'auto'}, done: {color: Kb.Styles.globalColors.blueDark}, - doneContainer: {flexShrink: 0}, hitList: Kb.Styles.platformStyles({ isElectron: { backgroundColor: Kb.Styles.globalColors.blueLighter3, @@ -551,7 +550,6 @@ const styles = Kb.Styles.styleSheetCreate( }, progress: {height: 16}, results: {color: Kb.Styles.globalColors.black_50}, - resultsContainer: {flexShrink: 0}, time: {flexShrink: 0}, }) as const ) diff --git a/shared/chat/create-channel/index.tsx b/shared/chat/create-channel/index.tsx index 528e886a48f8..987b1e3e8ae7 100644 --- a/shared/chat/create-channel/index.tsx +++ b/shared/chat/create-channel/index.tsx @@ -120,12 +120,10 @@ const desktopStyles = Kb.Styles.styleSheetCreate( }, backIcon: {marginRight: Kb.Styles.globalMargins.xtiny}, box: { - paddingLeft: Kb.Styles.globalMargins.large, - paddingRight: Kb.Styles.globalMargins.large, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.large), }, boxTop: { - paddingLeft: Kb.Styles.globalMargins.large, - paddingRight: Kb.Styles.globalMargins.large, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.large), paddingTop: Kb.Styles.globalMargins.medium, }, }) as const diff --git a/shared/chat/delete-history-warning.tsx b/shared/chat/delete-history-warning.tsx index c6fa211253bf..3f68536ca25a 100644 --- a/shared/chat/delete-history-warning.tsx +++ b/shared/chat/delete-history-warning.tsx @@ -90,10 +90,8 @@ const styles = Kb.Styles.styleSheetCreate( }), padding: Kb.Styles.platformStyles({ isElectron: { - marginBottom: 40, - marginLeft: 80, - marginRight: 80, - marginTop: 40, + ...Kb.Styles.marginH(80), + ...Kb.Styles.marginV(40), }, isMobile: {paddingTop: Kb.Styles.globalMargins.xlarge}, }), diff --git a/shared/chat/emoji-picker/container.tsx b/shared/chat/emoji-picker/container.tsx index d2fc1e653555..46ccdf737468 100644 --- a/shared/chat/emoji-picker/container.tsx +++ b/shared/chat/emoji-picker/container.tsx @@ -150,7 +150,7 @@ const WrapperMobile = (props: Props) => { onExpandChange={setSkinTonePickerExpanded} setSkinTone={setSkinTone} /> - + {!props.small && !skinTonePickerExpanded && canManageEmoji && ( { size={36} /> {hoveredEmoji.teamname ? ( - + {':' + hoveredEmoji.short_name + ':'} @@ -251,7 +251,7 @@ const EmojiPickerDesktopInner = (props: Props) => { ) : ( - + {startCase(hoveredEmoji.name?.toLowerCase() ?? hoveredEmoji.short_name)} @@ -280,9 +280,8 @@ const styles = Kb.Styles.styleSheetCreate( }, }), cancelContainerMobile: { - paddingBottom: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny), paddingLeft: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.tiny, }, contain: Kb.Styles.platformStyles({ isElectron: { diff --git a/shared/chat/emoji-picker/index.tsx b/shared/chat/emoji-picker/index.tsx index 8f346a3c2929..b61da179f4a8 100644 --- a/shared/chat/emoji-picker/index.tsx +++ b/shared/chat/emoji-picker/index.tsx @@ -424,9 +424,8 @@ const styles = Kb.Styles.styleSheetCreate( }, bookmarkContainer: { height: 44, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny), paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.tiny, - paddingRight: Kb.Styles.globalMargins.tiny, }, bookmarkScrollView: { flexGrow: 0, @@ -434,7 +433,6 @@ const styles = Kb.Styles.styleSheetCreate( height: 44, }, emoji: { - ...Kb.Styles.globalStyles.flexBoxColumn, ...Kb.Styles.centered(), borderRadius: 2, height: emojiWidthWithPadding, diff --git a/shared/chat/inbox-and-conversation-header.tsx b/shared/chat/inbox-and-conversation-header.tsx index a8060730cc4d..c35a5e7c9ed8 100644 --- a/shared/chat/inbox-and-conversation-header.tsx +++ b/shared/chat/inbox-and-conversation-header.tsx @@ -200,7 +200,7 @@ const Header = () => { {fullName} ) : withoutSelf ? ( - + {withoutSelf.map((part, i) => ( diff --git a/shared/chat/inbox/filter-row.tsx b/shared/chat/inbox/filter-row.tsx index e9e6559f2d4e..764758648ec8 100644 --- a/shared/chat/inbox/filter-row.tsx +++ b/shared/chat/inbox/filter-row.tsx @@ -140,8 +140,7 @@ const styles = Kb.Styles.styleSheetCreate( borderRadius: Kb.Styles.borderRadius, flexShrink: 1, height: 32, - paddingLeft: Kb.Styles.globalMargins.xsmall, - paddingRight: Kb.Styles.globalMargins.xsmall, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.xsmall), }, searchPlaceholderIcon: Kb.Styles.platformStyles({ isElectron: {marginRight: Kb.Styles.globalMargins.tiny, marginTop: 2}, diff --git a/shared/chat/inbox/index.tsx b/shared/chat/inbox/index.tsx index 0952b8fc5990..5b4c26a7c9be 100644 --- a/shared/chat/inbox/index.tsx +++ b/shared/chat/inbox/index.tsx @@ -588,7 +588,6 @@ const desktopStyles = Kb.Styles.styleSheetCreate( body: { flex: 1, minHeight: 0, - width: '100%', }, container: Kb.Styles.platformStyles({ isElectron: { @@ -721,10 +720,8 @@ const nativeStyles = Kb.Styles.styleSheetCreate( }, noChatsContainer: { alignItems: 'center', - paddingBottom: Kb.Styles.globalMargins.large, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.large, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.large), }, }) as const ) diff --git a/shared/chat/inbox/new-chat-button.tsx b/shared/chat/inbox/new-chat-button.tsx index a478caa38d74..fccd105c7878 100644 --- a/shared/chat/inbox/new-chat-button.tsx +++ b/shared/chat/inbox/new-chat-button.tsx @@ -92,8 +92,7 @@ const styles = Kb.Styles.styleSheetCreate( }, rainbowButton: { margin: 2, - paddingLeft: Kb.Styles.globalMargins.tiny, - paddingRight: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny), }, rainbowButtonContainer: Kb.Styles.platformStyles({ common: { diff --git a/shared/chat/inbox/row/big-team-header.tsx b/shared/chat/inbox/row/big-team-header.tsx index c2f8d73829e6..b9df63e0b7fc 100644 --- a/shared/chat/inbox/row/big-team-header.tsx +++ b/shared/chat/inbox/row/big-team-header.tsx @@ -97,8 +97,7 @@ const styles = Kb.Styles.styleSheetCreate( alignSelf: 'center', color: Kb.Styles.globalColors.black_50, letterSpacing: 0.2, - marginLeft: Kb.Styles.globalMargins.tiny, - marginRight: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.tiny), }, teamRowContainer: Kb.Styles.platformStyles({ common: { diff --git a/shared/chat/inbox/row/big-teams-divider.tsx b/shared/chat/inbox/row/big-teams-divider.tsx index 89af6dafaf50..178d72346418 100644 --- a/shared/chat/inbox/row/big-teams-divider.tsx +++ b/shared/chat/inbox/row/big-teams-divider.tsx @@ -106,8 +106,7 @@ const styles = Kb.Styles.styleSheetCreate( dividerBoxInline: { flex: 1, height: '100%', - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, dividerBox: Kb.Styles.platformStyles({ common: { diff --git a/shared/chat/inbox/row/small-team/index.tsx b/shared/chat/inbox/row/small-team/index.tsx index 8eea5576ee7c..bc904e6a1d86 100644 --- a/shared/chat/inbox/row/small-team/index.tsx +++ b/shared/chat/inbox/row/small-team/index.tsx @@ -476,7 +476,6 @@ const styles = Kb.Styles.styleSheetCreate( contentBox: { ...Kb.Styles.globalStyles.fillAbsolute, alignItems: 'center', - width: '100%', }, conversationRow: { flexGrow: 1, diff --git a/shared/chat/inbox/row/start-new-chat.tsx b/shared/chat/inbox/row/start-new-chat.tsx index efab32a00508..9393bb269e02 100644 --- a/shared/chat/inbox/row/start-new-chat.tsx +++ b/shared/chat/inbox/row/start-new-chat.tsx @@ -40,8 +40,7 @@ const styles = Kb.Styles.styleSheetCreate( ? undefined : Kb.Styles.globalColors.blueGrey, minHeight: 48, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, iconCompose: Kb.Styles.platformStyles({ common: { diff --git a/shared/chat/inbox/row/teams-divider.tsx b/shared/chat/inbox/row/teams-divider.tsx index eb2e6187e4ee..80486cf1dd2a 100644 --- a/shared/chat/inbox/row/teams-divider.tsx +++ b/shared/chat/inbox/row/teams-divider.tsx @@ -68,7 +68,6 @@ const styles = Kb.Styles.styleSheetCreate( }, containerButton: Kb.Styles.platformStyles({ common: { - ...Kb.Styles.globalStyles.flexBoxColumn, flexShrink: 0, height: RowSizes.dividerHeight(true), justifyContent: 'center', @@ -80,7 +79,6 @@ const styles = Kb.Styles.styleSheetCreate( }, }), containerNoButton: { - ...Kb.Styles.globalStyles.flexBoxColumn, flexShrink: 0, height: RowSizes.dividerHeight(false), justifyContent: 'center', @@ -88,8 +86,7 @@ const styles = Kb.Styles.styleSheetCreate( }, dividerText: { alignSelf: 'flex-start', - marginLeft: Kb.Styles.globalMargins.tiny, - marginRight: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.tiny), }, }) as const ) diff --git a/shared/chat/inbox/search-row.tsx b/shared/chat/inbox/search-row.tsx index 92ce1eaea986..42f01d2e00f8 100644 --- a/shared/chat/inbox/search-row.tsx +++ b/shared/chat/inbox/search-row.tsx @@ -50,7 +50,7 @@ export default function InboxSearchRow(ownProps: OwnProps) { if (showNewChatButton) { return ( - + {filter} @@ -69,7 +69,6 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ row: { - height: '100%', paddingRight: Kb.Styles.globalMargins.tiny, }, }) as const diff --git a/shared/chat/inbox/unread-shortcut.tsx b/shared/chat/inbox/unread-shortcut.tsx index 69c4d6c32f9e..f13104ef6ed6 100644 --- a/shared/chat/inbox/unread-shortcut.tsx +++ b/shared/chat/inbox/unread-shortcut.tsx @@ -54,9 +54,8 @@ const styles = Kb.Styles.styleSheetCreate( unreadShortcutInline: { backgroundColor: Kb.Styles.globalColors.orange_90, flex: 1, - paddingBottom: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny), paddingLeft: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.tiny, }, }) as const ) diff --git a/shared/chat/location-map.tsx b/shared/chat/location-map.tsx index 4fee0e7bb827..b0a73c5b62ef 100644 --- a/shared/chat/location-map.tsx +++ b/shared/chat/location-map.tsx @@ -68,10 +68,8 @@ const styles = Kb.Styles.styleSheetCreate( loading: { bottom: '50%', left: '50%', - marginBottom: -12, - marginLeft: -12, - marginRight: -12, - marginTop: -12, + ...Kb.Styles.marginH(-12), + ...Kb.Styles.marginV(-12), position: 'absolute', right: '50%', top: '50%', diff --git a/shared/chat/payments/status/index.tsx b/shared/chat/payments/status/index.tsx index a5ad5ac3e76b..952348ff2e35 100644 --- a/shared/chat/payments/status/index.tsx +++ b/shared/chat/payments/status/index.tsx @@ -120,15 +120,13 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.purple_10OrPurple, borderRadius: Kb.Styles.globalMargins.xxtiny, color: Kb.Styles.globalColors.purpleDarkOrWhite, - paddingLeft: Kb.Styles.globalMargins.xtiny, - paddingRight: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.xtiny), }, completed: { backgroundColor: Kb.Styles.globalColors.purple_10OrPurple, borderRadius: Kb.Styles.globalMargins.xxtiny, color: Kb.Styles.globalColors.purpleDarkOrWhite, - paddingLeft: Kb.Styles.globalMargins.xtiny, - paddingRight: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.xtiny), }, container: Kb.Styles.platformStyles({ isElectron: { @@ -139,15 +137,13 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.red_10OrRed, borderRadius: Kb.Styles.globalMargins.xxtiny, color: Kb.Styles.globalColors.redDarkOrWhite, - paddingLeft: Kb.Styles.globalMargins.xtiny, - paddingRight: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.xtiny), }, pending: { backgroundColor: Kb.Styles.globalColors.greyLight, borderRadius: Kb.Styles.globalMargins.xxtiny, color: Kb.Styles.globalColors.black_50OrWhite, - paddingLeft: Kb.Styles.globalMargins.xtiny, - paddingRight: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.xtiny), }, }) as const ) diff --git a/shared/chat/selectable-small-team.tsx b/shared/chat/selectable-small-team.tsx index 7d557f37d406..c7deb53809d9 100644 --- a/shared/chat/selectable-small-team.tsx +++ b/shared/chat/selectable-small-team.tsx @@ -73,7 +73,7 @@ const SelectableSmallTeam = (props: Props) => { participantTwo={props.participants[1]} /> )} - + ({ + container: { + ...Styles.globalStyles.fillAbsolute, + alignItems: 'stretch', + flexDirection: 'row', + }, +})) + const BottomAccessoryMobile = ({children}: {children: React.ReactNode}) => { const navigation = useNavigation() const isFocused = useIsFocused() @@ -18,7 +27,7 @@ const BottomAccessoryMobile = ({children}: {children: React.ReactNode}) => { const parent = navigation.getParent() as BottomTabNavigationProp | undefined parent?.setOptions({ bottomAccessory: (): React.ReactNode => ( - + {children} ), diff --git a/shared/common-adapters/button-bar.tsx b/shared/common-adapters/button-bar.tsx index 8199f72fdfbd..3b48d81d9d71 100644 --- a/shared/common-adapters/button-bar.tsx +++ b/shared/common-adapters/button-bar.tsx @@ -59,17 +59,9 @@ const ButtonBar = (props: Props) => { } // Note explicitly not using globalMargins here. We don't necessarily want this spacing to change ever -const BigSpacer = () => -const bigSpacerStyle = { - flexShrink: 0, - height: 8, - width: 8, -} -const SmallSpacer = () => -const smallSpacerStyle = { - flexShrink: 0, - height: isMobile ? 8 : 4, - width: isMobile ? 8 : 4, -} +const BigSpacer = () => +const bigSpacerStyle = Styles.size(8) +const SmallSpacer = () => +const smallSpacerStyle = Styles.size(isMobile ? 8 : 4) export default ButtonBar diff --git a/shared/common-adapters/button.tsx b/shared/common-adapters/button.tsx index 70fe52aac88d..bed7b66a36f9 100644 --- a/shared/common-adapters/button.tsx +++ b/shared/common-adapters/button.tsx @@ -126,8 +126,8 @@ const progressContainerStyle = { ...Styles.centered(), } satisfies Styles._StylesCrossPlatform -const progressNormal = {height: isMobile ? 32 : 24, width: isMobile ? 32 : 24} -const progressSmall = {height: isMobile ? 28 : 20, width: isMobile ? 28 : 20} +const progressNormal = Styles.size(isMobile ? 32 : 24) +const progressSmall = Styles.size(isMobile ? 28 : 20) const Progress = ({small, white}: {small?: boolean; white: boolean}) => { const {default: Animation} = require('./animation') as {default: typeof AnimationType} diff --git a/shared/common-adapters/copy-text.tsx b/shared/common-adapters/copy-text.tsx index db4a3764f516..8340191fa1e0 100644 --- a/shared/common-adapters/copy-text.tsx +++ b/shared/common-adapters/copy-text.tsx @@ -236,12 +236,10 @@ const styles = Styles.styleSheetCreate( text: Styles.platformStyles({ common: { ...Styles.globalStyles.fontTerminal, + ...Styles.marginH(Styles.globalMargins.tiny), + ...Styles.marginV(Styles.globalMargins.xtiny), color: Styles.globalColors.blueDark, flexShrink: 1, - marginBottom: Styles.globalMargins.xtiny, - marginLeft: Styles.globalMargins.tiny, - marginRight: Styles.globalMargins.tiny, - marginTop: Styles.globalMargins.xtiny, minWidth: 0, textAlign: 'left', }, @@ -262,8 +260,7 @@ const styles = Styles.styleSheetCreate( textAlign: 'center', }, isMobile: { - paddingLeft: 10, - paddingRight: 10, + ...Styles.paddingH(10), paddingTop: 5, }, }), diff --git a/shared/common-adapters/copyable-text.tsx b/shared/common-adapters/copyable-text.tsx index a8a2b33e3ed8..b6d0decae826 100644 --- a/shared/common-adapters/copyable-text.tsx +++ b/shared/common-adapters/copyable-text.tsx @@ -46,12 +46,12 @@ const CopyableText = (props: Props) => { style={props.style} > - + {props.value} - + {hasCopied ? 'Copied!' : 'Tap to copy'} @@ -69,7 +69,7 @@ const styles = Styles.styleSheetCreate( ...Styles.globalStyles.fontTerminal, alignItems: 'flex-start', backgroundColor: Styles.globalColors.greyLight, - borderRadius: 3, + ...Styles.globalStyles.rounded, color: Styles.globalColors.black, fontSize: 13, padding: 10, @@ -94,11 +94,10 @@ const styles = Styles.styleSheetCreate( }, }), copyToast: { + ...Styles.paddingH(Styles.globalMargins.medium), backgroundColor: Styles.globalColors.black_50, borderRadius: Styles.globalMargins.large, height: Styles.globalMargins.medium + Styles.globalMargins.tiny, - paddingLeft: Styles.globalMargins.medium, - paddingRight: Styles.globalMargins.medium, }, copyToastContainer: { bottom: Styles.globalMargins.small, @@ -106,16 +105,14 @@ const styles = Styles.styleSheetCreate( position: 'absolute', right: 0, }, + copyToastText: { + color: Styles.globalColors.white, + }, + text: { + ...Styles.globalStyles.fontTerminal, + color: Styles.globalColors.black, + }, }) as const ) -const styleText = { - ...Styles.globalStyles.fontTerminal, - color: Styles.globalColors.black, -} - -const styleCopyToastText = { - color: Styles.globalColors.white, -} - export default CopyableText diff --git a/shared/common-adapters/drag-and-drop.tsx b/shared/common-adapters/drag-and-drop.tsx index 6d89e5872117..4a6bc6ec407d 100644 --- a/shared/common-adapters/drag-and-drop.tsx +++ b/shared/common-adapters/drag-and-drop.tsx @@ -109,8 +109,9 @@ const DragAndDrop = (props: Props): React.ReactNode => { direction="vertical" fullHeight={props.fullHeight} fullWidth={props.fullWidth} + relative={true} onDragOver={_onDragOver as never} - style={Styles.collapseStyles([styles.containerStyle, props.containerStyle])} + style={props.containerStyle} > {props.children} {showDropOverlay && _dropOverlay()} @@ -119,9 +120,6 @@ const DragAndDrop = (props: Props): React.ReactNode => { } const styles = Styles.styleSheetCreate(() => ({ - containerStyle: { - position: 'relative', - }, dropOverlay: Styles.platformStyles({ isElectron: { ...Styles.globalStyles.fillAbsolute, diff --git a/shared/common-adapters/emoji/custom-emoji.tsx b/shared/common-adapters/emoji/custom-emoji.tsx index 5236ecc22d43..7f3492c75dec 100644 --- a/shared/common-adapters/emoji/custom-emoji.tsx +++ b/shared/common-adapters/emoji/custom-emoji.tsx @@ -22,9 +22,8 @@ const CustomEmoji = (props: Props) => { if (isMobile) { const dimensions = { - height: size, + ...Kb.Styles.size(size), transform: [{translateY: isAndroid ? 4 : 2}], - width: size, ...style, } return @@ -37,8 +36,7 @@ const CustomEmoji = (props: Props) => { style={Kb.Styles.collapseStyles([ styles.emoji, { - height: size, - width: size, + ...Kb.Styles.size(size), ...style, }, ])} diff --git a/shared/common-adapters/emoji/native-emoji.tsx b/shared/common-adapters/emoji/native-emoji.tsx index 0ef7bb324343..687a5b63df41 100644 --- a/shared/common-adapters/emoji/native-emoji.tsx +++ b/shared/common-adapters/emoji/native-emoji.tsx @@ -54,8 +54,7 @@ function EmojiWrapper(props: Props) { isElectron: { display: 'inline-block', fontSize: size, - height: size, - width: size, + ...Styles.size(size), } as const, }) )} diff --git a/shared/common-adapters/floating-menu/menu-layout/index.tsx b/shared/common-adapters/floating-menu/menu-layout/index.tsx index b60584907879..480b663231b5 100644 --- a/shared/common-adapters/floating-menu/menu-layout/index.tsx +++ b/shared/common-adapters/floating-menu/menu-layout/index.tsx @@ -360,6 +360,15 @@ const styleRowText = (props: { return {color, ...(props.disabled ? {opacity: 0.6} : {})} } +const sharedIconBadgeStyle = { + ...Styles.paddingH(0), + ...Styles.size(Styles.globalMargins.tiny), + backgroundColor: Styles.globalColors.blue, + minWidth: 0, + position: 'relative', + right: Styles.globalMargins.xtiny, +} as const + const desktopStyles = Styles.styleSheetCreate( () => ({ @@ -368,23 +377,13 @@ const desktopStyles = Styles.styleSheetCreate( marginLeft: 'auto', }, divider: { - marginBottom: 8, - marginTop: 8, + ...Styles.marginV(8), }, dividerFirst: { marginBottom: 8, }, icon: {marginLeft: Styles.globalMargins.xtiny}, - iconBadge: { - backgroundColor: Styles.globalColors.blue, - height: Styles.globalMargins.tiny, - minWidth: 0, - paddingLeft: 0, - paddingRight: 0, - position: 'relative', - right: Styles.globalMargins.xtiny, - width: Styles.globalMargins.tiny, - }, + iconBadge: sharedIconBadgeStyle, itemBodyText: {color: undefined}, itemContainer: { ...Styles.globalStyles.flexBoxColumn, @@ -433,20 +432,10 @@ const nativeStyles = Styles.styleSheetCreate( }, divider: {marginBottom: Styles.globalMargins.tiny}, dividerInScrolleView: { - marginBottom: Styles.globalMargins.tiny, - marginTop: Styles.globalMargins.tiny, + ...Styles.marginV(Styles.globalMargins.tiny), }, firstIsUnWrapped: {paddingTop: 0}, - iconBadge: { - backgroundColor: Styles.globalColors.blue, - height: Styles.globalMargins.tiny, - minWidth: 0, - paddingLeft: 0, - paddingRight: 0, - position: 'relative', - right: Styles.globalMargins.xtiny, - width: Styles.globalMargins.tiny, - }, + iconBadge: sharedIconBadgeStyle, iconContainer: { width: 20, }, @@ -458,8 +447,7 @@ const nativeStyles = Styles.styleSheetCreate( }, itemContainerWithSubTitle: {height: itemContainerHeight}, itemContainerWrapped: { - paddingLeft: Styles.globalMargins.small, - paddingRight: Styles.globalMargins.small, + ...Styles.paddingH(Styles.globalMargins.small), }, menuBox: { backgroundColor: Styles.globalColors.white, @@ -470,9 +458,7 @@ const nativeStyles = Styles.styleSheetCreate( menuGroup: { justifyContent: 'flex-end', }, - progressIndicator: { - ...Styles.globalStyles.fillAbsolute, - }, + progressIndicator: Styles.globalStyles.fillAbsolute, safeArea: {backgroundColor: Styles.globalColors.white}, safeProvider: { flex: 0, @@ -480,8 +466,7 @@ const nativeStyles = Styles.styleSheetCreate( }, scrollView: { flexGrow: 1, - marginBottom: Styles.globalMargins.tiny, - marginTop: Styles.globalMargins.tiny, + ...Styles.marginV(Styles.globalMargins.tiny), }, }) as const ) diff --git a/shared/common-adapters/info-note.tsx b/shared/common-adapters/info-note.tsx index fd5bd6201e16..41b1b04bb7a0 100644 --- a/shared/common-adapters/info-note.tsx +++ b/shared/common-adapters/info-note.tsx @@ -9,24 +9,35 @@ export type Props = { color?: string } -const InfoNote = (props: Props) => ( - - - - - +const InfoNote = (props: Props) => { + const lineStyle = Styles.collapseStyles([styles.line, props.color ? {backgroundColor: props.color} : undefined]) + return ( + + + + + + + {props.children} - {props.children} - -) + ) +} + +const styles = Styles.styleSheetCreate(() => ({ + line: { + backgroundColor: Styles.globalColors.black_10, + height: 1, + width: 24, + }, +})) export default InfoNote diff --git a/shared/common-adapters/name-with-icon.tsx b/shared/common-adapters/name-with-icon.tsx index ee0a27d0affd..a948f1ed3cab 100644 --- a/shared/common-adapters/name-with-icon.tsx +++ b/shared/common-adapters/name-with-icon.tsx @@ -133,7 +133,7 @@ export const NameWithIcon = (props: NameWithIconProps) => { ? size === 'big' ? styles.hbIconStyle : styles.hIconStyle - : {height: adapterProps.iconSize, width: adapterProps.iconSize} + : Styles.size(adapterProps.iconSize) } fontSize={props.horizontal ? (isMobile ? 48 : 32) : adapterProps.iconSize} /> diff --git a/shared/common-adapters/popup/index.tsx b/shared/common-adapters/popup/index.tsx index 0f431a9e25a1..8e0b1222ea7a 100644 --- a/shared/common-adapters/popup/index.tsx +++ b/shared/common-adapters/popup/index.tsx @@ -194,7 +194,7 @@ const desktopStyles = Styles.styleSheetCreate(() => ({ positioned: Styles.platformStyles({ isElectron: { ...Styles.desktopStyles.boxShadow, - borderRadius: 3, + ...Styles.globalStyles.rounded, overflowX: 'hidden', overflowY: 'auto', }, diff --git a/shared/common-adapters/progress-bar.tsx b/shared/common-adapters/progress-bar.tsx index f405c80001a7..29c17cf72d70 100644 --- a/shared/common-adapters/progress-bar.tsx +++ b/shared/common-adapters/progress-bar.tsx @@ -37,13 +37,13 @@ const styles = Styles.styleSheetCreate(() => ({ flatRight: {borderBottomRightRadius: 0, borderTopRightRadius: 0}, inner: { backgroundColor: Styles.globalColors.blue, - borderRadius: 3, + ...Styles.globalStyles.rounded, height: 4, }, outer: Styles.platformStyles({ common: { backgroundColor: Styles.globalColors.greyLight, - borderRadius: 3, + ...Styles.globalStyles.rounded, height: 4, width: 64, }, diff --git a/shared/common-adapters/radio-button.tsx b/shared/common-adapters/radio-button.tsx index 0eb4e4d99e03..5caf14db99e5 100644 --- a/shared/common-adapters/radio-button.tsx +++ b/shared/common-adapters/radio-button.tsx @@ -94,8 +94,7 @@ const nativeStyles = Styles.styleSheetCreate( () => ({ container: { - paddingBottom: Styles.globalMargins.xtiny, - paddingTop: Styles.globalMargins.xtiny, + ...Styles.paddingV(Styles.globalMargins.xtiny), }, inner: { borderColor: Styles.globalColors.white, diff --git a/shared/common-adapters/search-filter.tsx b/shared/common-adapters/search-filter.tsx index 3fc189409d4c..fc2f92544136 100644 --- a/shared/common-adapters/search-filter.tsx +++ b/shared/common-adapters/search-filter.tsx @@ -252,7 +252,8 @@ function SearchFilter(props: Props & {ref?: React.Ref}) { {leftIcon()} @@ -354,6 +355,7 @@ const styles = Styles.styleSheetCreate(() => ({ isElectron: {marginTop: 2}, }), input: {backgroundColor: Styles.globalColors.transparent}, + insideFull: {width: '100%'}, inputContainer: { ...Styles.globalStyles.flexGrow, backgroundColor: Styles.globalColors.transparent, diff --git a/shared/common-adapters/swipeable-row.native.tsx b/shared/common-adapters/swipeable-row.native.tsx index 293df3a6dd20..f64ca24bbaa9 100644 --- a/shared/common-adapters/swipeable-row.native.tsx +++ b/shared/common-adapters/swipeable-row.native.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import * as Styles from '@/styles' import {Animated, PanResponder, View, type GestureResponderEvent, type PanResponderGestureState, type ViewStyle} from 'react-native' export type SwipeableMethods = { @@ -123,11 +124,9 @@ const SwipeableRow = React.forwardRef(function Swipeabl const animStyle = React.useMemo(() => ({transform: [{translateX: translationX}]}), [translationX]) return ( - + {renderRightActions && ( - + { @@ -148,3 +147,12 @@ const SwipeableRow = React.forwardRef(function Swipeabl }) export default SwipeableRow + +const styles = Styles.styleSheetCreate(() => ({ + actionsContainer: { + ...Styles.globalStyles.fillAbsolute, + flexDirection: 'row-reverse', + overflow: 'hidden', + }, + outerOverflow: {overflow: 'hidden'}, +})) diff --git a/shared/common-adapters/switch-toggle.tsx b/shared/common-adapters/switch-toggle.tsx index 828bc344dde1..5c87928bc98b 100644 --- a/shared/common-adapters/switch-toggle.tsx +++ b/shared/common-adapters/switch-toggle.tsx @@ -16,8 +16,7 @@ const desktopEnabledOffset = 10 const desktopInnerStyle: React.CSSProperties = { backgroundColor: Styles.globalColors.white, borderRadius: 6, - height: 12, - width: 12, + ...Styles.size(12), } const SwitchToggle = (props: Props) => { diff --git a/shared/common-adapters/toast.tsx b/shared/common-adapters/toast.tsx index 0eda0de53ac6..17caee59a759 100644 --- a/shared/common-adapters/toast.tsx +++ b/shared/common-adapters/toast.tsx @@ -198,7 +198,6 @@ const nativeStyles = Styles.styleSheetCreate(() => ({ margin: Styles.globalMargins.xtiny, overflow: 'hidden', ...Styles.padding(Styles.globalMargins.xtiny, Styles.globalMargins.tiny), - width: 140, }, wrapper: { ...Styles.globalStyles.fillAbsolute, diff --git a/shared/crypto/input.tsx b/shared/crypto/input.tsx index c2b4aeadaba2..9d6c943cf824 100644 --- a/shared/crypto/input.tsx +++ b/shared/crypto/input.tsx @@ -356,8 +356,7 @@ const styles = Kb.Styles.styleSheetCreate( overflowY: 'hidden', }, isMobile: { - paddingLeft: Kb.Styles.globalMargins.xsmall, - paddingRight: Kb.Styles.globalMargins.xsmall, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.xsmall), paddingTop: Kb.Styles.globalMargins.xsmall, }, }), diff --git a/shared/crypto/output.tsx b/shared/crypto/output.tsx index ba5349741a52..191550e87762 100644 --- a/shared/crypto/output.tsx +++ b/shared/crypto/output.tsx @@ -429,8 +429,7 @@ const styles = Kb.Styles.styleSheetCreate( }), signedContainerOther: Kb.Styles.platformStyles({ isElectron: { - paddingLeft: Kb.Styles.globalMargins.tiny, - paddingRight: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny), paddingTop: Kb.Styles.globalMargins.tiny, }, isMobile: { diff --git a/shared/crypto/recipients.tsx b/shared/crypto/recipients.tsx index 0cbd8e4db729..b06fe9363c15 100644 --- a/shared/crypto/recipients.tsx +++ b/shared/crypto/recipients.tsx @@ -56,14 +56,15 @@ const styles = Kb.Styles.styleSheetCreate( }, recipientsContainer: { minHeight: recipientsRowHeight, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.xsmall, - paddingRight: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.padding( + Kb.Styles.globalMargins.tiny, + Kb.Styles.globalMargins.tiny, + Kb.Styles.globalMargins.tiny, + Kb.Styles.globalMargins.xsmall + ), }, removeRecipients: { ...Kb.Styles.globalStyles.flexGrow, - ...Kb.Styles.globalStyles.flexBoxRow, justifyContent: 'flex-end', marginRight: Kb.Styles.globalMargins.tiny, textAlign: 'right', diff --git a/shared/crypto/sub-nav/index.tsx b/shared/crypto/sub-nav/index.tsx index ab2dd983633a..3a7571d2a8d6 100644 --- a/shared/crypto/sub-nav/index.tsx +++ b/shared/crypto/sub-nav/index.tsx @@ -140,8 +140,7 @@ const styles = Kb.Styles.styleSheetCreate( box: {backgroundColor: Kb.Styles.globalColors.white}, container: { backgroundColor: Kb.Styles.globalColors.blueGrey, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), paddingTop: Kb.Styles.globalMargins.xsmall, }, nav: {width: 180}, diff --git a/shared/devices/add-device.tsx b/shared/devices/add-device.tsx index 358a67c59877..2619ced57012 100644 --- a/shared/devices/add-device.tsx +++ b/shared/devices/add-device.tsx @@ -60,7 +60,7 @@ export default function AddDevice(ownProps: AddDeviceProps) { direction="vertical" gap="medium" alignItems="center" - style={styles.container} + padding="small" gapStart={true} gapEnd={true} > @@ -129,7 +129,6 @@ const DeviceOption = ({highlight, iconNumber, onClick, type}: DeviceOptionProps) ) const styles = Kb.Styles.styleSheetCreate(() => ({ - container: {padding: Kb.Styles.globalMargins.small}, deviceOption: Kb.Styles.platformStyles({ common: { ...Kb.Styles.border(Kb.Styles.globalColors.black_05, 1, Kb.Styles.borderRadius), diff --git a/shared/devices/device-page.tsx b/shared/devices/device-page.tsx index cdef74571cde..a124cb07769f 100644 --- a/shared/devices/device-page.tsx +++ b/shared/devices/device-page.tsx @@ -156,16 +156,14 @@ const styles = Kb.Styles.styleSheetCreate( borderRadius: circleSize / 2, borderStyle: 'solid', borderWidth: 2, - height: circleSize, - width: circleSize, + ...Kb.Styles.size(circleSize), }, circleOpen: { borderColor: Kb.Styles.globalColors.grey, borderRadius: circleSize / 2, borderStyle: 'solid', borderWidth: 2, - height: circleSize, - width: circleSize, + ...Kb.Styles.size(circleSize), }, invisible: {opacity: 0}, meta: { diff --git a/shared/devices/device-revoke.tsx b/shared/devices/device-revoke.tsx index 61b4232cb064..66a40775121a 100644 --- a/shared/devices/device-revoke.tsx +++ b/shared/devices/device-revoke.tsx @@ -204,7 +204,7 @@ const styles = Kb.Styles.styleSheetCreate( ({ endangeredTLFContainer: Kb.Styles.platformStyles({ isElectron: {alignSelf: 'center'}, - isMobile: {flexGrow: 1}, + isMobile: {...Kb.Styles.globalStyles.flexGrow}, }), headerName: { color: Kb.Styles.globalColors.redDark, @@ -221,9 +221,8 @@ const styles = Kb.Styles.styleSheetCreate( isElectron: {height: 162, width: 440}, }), row: { - paddingBottom: Kb.Styles.globalMargins.xxtiny, + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.xxtiny), paddingLeft: Kb.Styles.globalMargins.xtiny, - paddingTop: Kb.Styles.globalMargins.xxtiny, }, tlf: Kb.Styles.platformStyles({ isElectron: {wordBreak: 'break-word'} as const, diff --git a/shared/devices/paper-key.tsx b/shared/devices/paper-key.tsx index b0f909341bd9..8f0c1a05a800 100644 --- a/shared/devices/paper-key.tsx +++ b/shared/devices/paper-key.tsx @@ -37,6 +37,7 @@ const PaperKey = () => { centerChildren={true} style={styles.container} gap="medium" + padding="medium" > Paper key generated! @@ -76,7 +77,6 @@ const styles = Kb.Styles.styleSheetCreate( container: { alignSelf: 'center', maxWidth: isMobile ? undefined : 560, - padding: Kb.Styles.globalMargins.medium, }, keyBox: { backgroundColor: Kb.Styles.globalColors.white, diff --git a/shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx b/shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx index 7e5bd8507e70..b9a74b077a95 100644 --- a/shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx +++ b/shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx @@ -81,10 +81,7 @@ const styles = Kb.Styles.styleSheetCreate( container: { maxWidth: 700, minWidth: 700, - paddingBottom: Kb.Styles.globalMargins.mediumLarge, - paddingLeft: Kb.Styles.globalMargins.large, - paddingRight: Kb.Styles.globalMargins.large, - paddingTop: Kb.Styles.globalMargins.mediumLarge, + ...Kb.Styles.padding(Kb.Styles.globalMargins.mediumLarge, Kb.Styles.globalMargins.large), width: 700, }, enablingContainer: { diff --git a/shared/fs/browser/destination-picker.tsx b/shared/fs/browser/destination-picker.tsx index 39714ddff740..b6a6872d8893 100644 --- a/shared/fs/browser/destination-picker.tsx +++ b/shared/fs/browser/destination-picker.tsx @@ -214,8 +214,7 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.blueLighter3, flexShrink: 0, height: RowCommon.normalRowHeight, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, actionText: { color: Kb.Styles.globalColors.blueDark, diff --git a/shared/fs/browser/index.tsx b/shared/fs/browser/index.tsx index a5373a2ec303..2e00ad2cc985 100644 --- a/shared/fs/browser/index.tsx +++ b/shared/fs/browser/index.tsx @@ -33,7 +33,7 @@ const Container = (ownProps: OwnProps) => { const offlineUnsynced = FS.isOfflineUnsynced(_kbfsDaemonStatus, _pathItem, path) const writable = _pathItem.writable return ( - + item.rowType === RowTypes.RowType.Header && item.node) } - + {emptyMode === 'empty' ? 'This folder is empty.' : 'Sorry, no folder or file was found.'} @@ -167,9 +167,6 @@ const styles = Kb.Styles.styleSheetCreate( marginLeft: 102, }, }), - emptyContainer: { - ...Kb.Styles.globalStyles.flexGrow, - }, rowContainer: { flexShrink: 0, height: normalRowHeight, diff --git a/shared/fs/common/item-icon.tsx b/shared/fs/common/item-icon.tsx index 69345cdd65f7..57982f74f5c5 100644 --- a/shared/fs/common/item-icon.tsx +++ b/shared/fs/common/item-icon.tsx @@ -220,8 +220,7 @@ const styles = Kb.Styles.styleSheetCreate( ({ badgeContainer: { // Make width/height explicit 0 so they don't affect nearby stuff. - height: 0, - width: 0, + ...Kb.Styles.size(0), }, }) as const ) @@ -286,11 +285,10 @@ const badgeStyles = { top: -(Kb.Styles.globalMargins.large + Kb.Styles.globalMargins.tiny), }, rightBottomBadge: { - height: Kb.Styles.globalMargins.small, + ...Kb.Styles.size(Kb.Styles.globalMargins.small), left: Kb.Styles.globalMargins.mediumLarge - Kb.Styles.globalMargins.xxtiny, position: 'absolute', top: -Kb.Styles.globalMargins.small - Kb.Styles.globalMargins.xtiny, - width: Kb.Styles.globalMargins.small, }, }) as const ), @@ -305,11 +303,10 @@ const badgeStyles = { rightBottomBadge: { // this doesn't work for the folder icon, but it's fine as we don't // have such badge on folder icon of 96 size. - height: Kb.Styles.globalMargins.medium, + ...Kb.Styles.size(Kb.Styles.globalMargins.medium), left: Kb.Styles.globalMargins.xlarge, position: 'absolute', top: -(Kb.Styles.globalMargins.medium + Kb.Styles.globalMargins.xtiny), - width: Kb.Styles.globalMargins.medium, }, }) as const ), diff --git a/shared/fs/common/pie-slice.tsx b/shared/fs/common/pie-slice.tsx index 7321984576de..7273aed61dd2 100644 --- a/shared/fs/common/pie-slice.tsx +++ b/shared/fs/common/pie-slice.tsx @@ -54,9 +54,8 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: { - height: pieSize, + ...Kb.Styles.size(pieSize), position: 'relative' as const, - width: pieSize, }, filledNegative: { backgroundColor: Kb.Styles.globalColors.greyLight, diff --git a/shared/fs/common/sfmi-popup.tsx b/shared/fs/common/sfmi-popup.tsx index 6f1938aa5458..ccd9fdaa591c 100644 --- a/shared/fs/common/sfmi-popup.tsx +++ b/shared/fs/common/sfmi-popup.tsx @@ -98,8 +98,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ marginTop: Kb.Styles.globalMargins.small, }, fancyFinderIcon: { - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), paddingTop: Kb.Styles.globalMargins.medium, }, popup: { @@ -110,8 +109,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ width: 260, }, text: { - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), paddingTop: Kb.Styles.globalMargins.tiny, }, })) diff --git a/shared/fs/filepreview/default-view.tsx b/shared/fs/filepreview/default-view.tsx index 68feaed030bc..09401925c87c 100644 --- a/shared/fs/filepreview/default-view.tsx +++ b/shared/fs/filepreview/default-view.tsx @@ -40,6 +40,7 @@ const Container = (ownProps: OwnProps) => { fullWidth={true} fullHeight={true} centerChildren={true} + flex={1} style={styles.innerContainer} > @@ -111,11 +112,8 @@ const styles = Kb.Styles.styleSheetCreate( }, innerContainer: Kb.Styles.platformStyles({ common: { - ...Kb.Styles.globalStyles.flexBoxColumn, - ...Kb.Styles.globalStyles.flexGrow, - alignItems: 'center', backgroundColor: Kb.Styles.globalColors.white, - flex: 1, + ...Kb.Styles.globalStyles.flexGrow, }, isMobile: { ...Kb.Styles.paddingH(Kb.Styles.globalMargins.large), diff --git a/shared/fs/filepreview/normal-preview.tsx b/shared/fs/filepreview/normal-preview.tsx index d2704982cafe..44fe840e7a31 100644 --- a/shared/fs/filepreview/normal-preview.tsx +++ b/shared/fs/filepreview/normal-preview.tsx @@ -25,16 +25,12 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: Kb.Styles.platformStyles({ - isElectron: { - backgroundColor: Kb.Styles.globalColors.blueLighter3, - flexShrink: 1, - width: '100%', - }, - isMobile: { - backgroundColor: Kb.Styles.globalColors.black, + common: { flexShrink: 1, width: '100%', }, + isElectron: {backgroundColor: Kb.Styles.globalColors.blueLighter3}, + isMobile: {backgroundColor: Kb.Styles.globalColors.black}, }), }) as const ) diff --git a/shared/fs/filepreview/text-view.tsx b/shared/fs/filepreview/text-view.tsx index 01ffce9ae671..325895f656d3 100644 --- a/shared/fs/filepreview/text-view.tsx +++ b/shared/fs/filepreview/text-view.tsx @@ -71,10 +71,7 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.white, color: Kb.Styles.globalColors.black, maxWidth: '100%', - paddingBottom: Kb.Styles.globalMargins.small, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.small, + ...Kb.Styles.padding(Kb.Styles.globalMargins.small), width: 800, }, text: Kb.Styles.platformStyles({ diff --git a/shared/fs/nav-header/mobile-header.tsx b/shared/fs/nav-header/mobile-header.tsx index b36b2522d9a4..ab0a5eefa12e 100644 --- a/shared/fs/nav-header/mobile-header.tsx +++ b/shared/fs/nav-header/mobile-header.tsx @@ -125,16 +125,10 @@ const styles = Kb.Styles.styleSheetCreate( isIOS: {height: 44}, }), filename: {marginLeft: Kb.Styles.globalMargins.xtiny}, - filesTabStatusIcon: { - height: Kb.Styles.globalMargins.small, - width: Kb.Styles.globalMargins.small, - }, + filesTabStatusIcon: Kb.Styles.size(Kb.Styles.globalMargins.small), headerContainer: { backgroundColor: Kb.Styles.globalColors.white, - borderBottomColor: Kb.Styles.globalColors.black_10, - borderBottomWidth: 1, - borderStyle: 'solid', - minHeight: 44, + ...Kb.Styles.bottomDivider(44), }, }) as const ) diff --git a/shared/fs/nav-header/title.tsx b/shared/fs/nav-header/title.tsx index 8322bae4e427..ae43365705cc 100644 --- a/shared/fs/nav-header/title.tsx +++ b/shared/fs/nav-header/title.tsx @@ -150,9 +150,6 @@ const styles = Kb.Styles.styleSheetCreate( alignSelf: 'center', marginLeft: Kb.Styles.globalMargins.xsmall, }, - slash: { - paddingLeft: Kb.Styles.globalMargins.xxtiny, - paddingRight: Kb.Styles.globalMargins.xxtiny, - }, + slash: Kb.Styles.paddingH(Kb.Styles.globalMargins.xxtiny), }) as const ) diff --git a/shared/fs/simple-screens/oops.tsx b/shared/fs/simple-screens/oops.tsx index e737552700c8..547c6bc22942 100644 --- a/shared/fs/simple-screens/oops.tsx +++ b/shared/fs/simple-screens/oops.tsx @@ -124,11 +124,8 @@ const styles = Kb.Styles.styleSheetCreate( isElectron: {marginTop: Kb.Styles.globalMargins.small}, isMobile: {marginTop: Kb.Styles.globalMargins.medium}, }), - explainTextTeam: { - marginLeft: Kb.Styles.globalMargins.xtiny, - marginRight: Kb.Styles.globalMargins.xtiny, - }, - main: {...Kb.Styles.globalStyles.flexGrow}, + explainTextTeam: Kb.Styles.marginH(Kb.Styles.globalMargins.xtiny), + main: Kb.Styles.globalStyles.flexGrow, textYouDontHave: Kb.Styles.platformStyles({ isElectron: {marginTop: Kb.Styles.globalMargins.medium}, isMobile: { diff --git a/shared/fs/top-bar/loading.tsx b/shared/fs/top-bar/loading.tsx index 937fc7daf271..a2171e5f64c0 100644 --- a/shared/fs/top-bar/loading.tsx +++ b/shared/fs/top-bar/loading.tsx @@ -12,10 +12,7 @@ type OwnProps = {path: T.FS.Path} const styles = Kb.Styles.styleSheetCreate( () => ({ - progressIndicator: { - height: 18, - width: 18, - }, + progressIndicator: Kb.Styles.size(18), }) as const ) diff --git a/shared/fs/top-bar/sync-toggle.tsx b/shared/fs/top-bar/sync-toggle.tsx index 7a1f7e433d84..bddce3ae8db3 100644 --- a/shared/fs/top-bar/sync-toggle.tsx +++ b/shared/fs/top-bar/sync-toggle.tsx @@ -166,8 +166,7 @@ const styles = Kb.Styles.styleSheetCreate( popupContainer: Kb.Styles.platformStyles({ common: { paddingBottom: Kb.Styles.globalMargins.small, - paddingLeft: Kb.Styles.globalMargins.medium, - paddingRight: Kb.Styles.globalMargins.medium, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.medium), }, isElectron: { paddingTop: Kb.Styles.globalMargins.small, diff --git a/shared/git/delete-repo.tsx b/shared/git/delete-repo.tsx index ab7a31a8c5fc..06fb4db41864 100644 --- a/shared/git/delete-repo.tsx +++ b/shared/git/delete-repo.tsx @@ -57,7 +57,7 @@ const DeleteRepo = (ownProps: OwnProps) => { } return ( - + {!!error && {error}} Are you sure you want to delete this {teamname ? 'team ' : ''} @@ -137,10 +137,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ marginBottom: Kb.Styles.globalMargins.tiny, }, container: Kb.Styles.platformStyles({ - common: { - flex: 1, - height: '100%', - }, isElectron: { maxHeight: 560, padding: Kb.Styles.globalMargins.large, diff --git a/shared/git/new-repo.tsx b/shared/git/new-repo.tsx index 802b2393e717..4bae174de876 100644 --- a/shared/git/new-repo.tsx +++ b/shared/git/new-repo.tsx @@ -99,7 +99,7 @@ const NewRepo = (ownProps: OwnProps) => { } return ( - + {!!error && {error}} New {isTeam ? 'team' : 'personal'} git repository @@ -171,8 +171,6 @@ const styles = Kb.Styles.styleSheetCreate( }, container: Kb.Styles.platformStyles({ common: { - flex: 1, - height: '100%', padding: isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.large, }, isElectron: {maxWidth: 400}, diff --git a/shared/incoming-share/index.tsx b/shared/incoming-share/index.tsx index 886ba39ed865..32ead4b39625 100644 --- a/shared/incoming-share/index.tsx +++ b/shared/incoming-share/index.tsx @@ -247,10 +247,8 @@ const IncomingShare = (props: IncomingShareWithSelectionProps) => { return ( <> - - - - + + {footer ? ( diff --git a/shared/login/recover-password/error-modal.tsx b/shared/login/recover-password/error-modal.tsx index cfad4663d846..20405b4d2468 100644 --- a/shared/login/recover-password/error-modal.tsx +++ b/shared/login/recover-password/error-modal.tsx @@ -12,9 +12,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ ...Kb.Styles.roundedBottom(), }, }), - padding: { - padding: Kb.Styles.globalMargins.small, - }, })) type Props = {route: {params: {error: string}}} @@ -32,7 +29,7 @@ const ConnectedErrorModal = ({route}: Props) => { return ( <> - + {error} diff --git a/shared/login/relogin/dropdown.native.tsx b/shared/login/relogin/dropdown.native.tsx index d0c4101b3dc3..eaa7f41ce09f 100644 --- a/shared/login/relogin/dropdown.native.tsx +++ b/shared/login/relogin/dropdown.native.tsx @@ -132,16 +132,15 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: { - ...Kb.Styles.globalStyles.flexBoxRow, alignItems: 'center', backgroundColor: Kb.Styles.globalColors.white, borderColor: Kb.Styles.globalColors.black_10, borderRadius: Kb.Styles.borderRadius, borderWidth: 1, + flexDirection: 'row', height: 48, maxWidth: '100%', - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), width: '100%', }, icon: {width: 10}, diff --git a/shared/login/relogin/index.tsx b/shared/login/relogin/index.tsx index adeb02120047..72fef68c66c6 100644 --- a/shared/login/relogin/index.tsx +++ b/shared/login/relogin/index.tsx @@ -141,12 +141,10 @@ const desktopStyles = Kb.Styles.styleSheetCreate( inputRow: { marginBottom: 0, marginTop: Kb.Styles.globalMargins.tiny, - width: '100%', }, loginSubmitButton: { marginTop: 0, maxHeight: 32, - width: '100%', }, other: {color: Kb.Styles.globalColors.black}, provisioned: {color: Kb.Styles.globalColors.orange}, @@ -166,7 +164,6 @@ const desktopStyles = Kb.Styles.styleSheetCreate( alignItems: 'center', marginLeft: Kb.Styles.globalMargins.xsmall, minHeight: 40, - width: '100%', }, }) as const ) @@ -189,8 +186,8 @@ const NativeLoginRender = (props: Props) => { setScrollViewHeight(evt.nativeEvent.layout.height)} - style={Kb.Styles.globalStyles.flexOne} > @@ -224,10 +221,7 @@ const NativeLoginRender = (props: Props) => { { Problems logging in? - + { direction="horizontal" alignItems="center" fullHeight={true} - style={Kb.Styles.globalStyles.flexOne} + flex={1} > - + Account reset initiated - + {error ? ( @@ -132,9 +132,7 @@ const ResetModalImpl = ({endTime}: {endTime: number}) => { const styles = Kb.Styles.styleSheetCreate(() => ({ body: Kb.Styles.platformStyles({ - common: { - ...Kb.Styles.globalStyles.flexOne, - }, + common: {flex: 1}, isElectron: {minHeight: 220}, }), desktopCover: {backgroundColor: Kb.Styles.globalColors.black_20}, @@ -168,7 +166,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, isElectron: { - ...Kb.Styles.globalStyles.flexOne, + flex: 1, ...Kb.Styles.paddingV(Kb.Styles.globalMargins.xlarge), }, }), diff --git a/shared/login/signup/common.tsx b/shared/login/signup/common.tsx index 96bfa4565eaa..54e0851b8312 100644 --- a/shared/login/signup/common.tsx +++ b/shared/login/signup/common.tsx @@ -44,6 +44,6 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ buttonBar: {maxWidth: 460, padding: 0, paddingTop: Kb.Styles.globalMargins.medium}, - wrapper: {paddingLeft: Kb.Styles.globalMargins.medium, paddingRight: Kb.Styles.globalMargins.medium}, + wrapper: {...Kb.Styles.paddingH(Kb.Styles.globalMargins.medium)}, }) as const ) diff --git a/shared/menubar/index.desktop.tsx b/shared/menubar/index.desktop.tsx index 24524c166e55..66e528b3040d 100644 --- a/shared/menubar/index.desktop.tsx +++ b/shared/menubar/index.desktop.tsx @@ -250,8 +250,7 @@ const FilesPreview = (p: {remoteTlfUpdates: ReadonlyArray; fol Recent files - - {remoteTlfUpdates.map(update => { + {remoteTlfUpdates.map(update => { const tlf = T.FS.pathToString(update.tlf) const {participants, teamname} = FsUtil.tlfToParticipantsOrTeamname(tlf) const tlfType = T.FS.getPathVisibility(update.tlf) || T.FS.TlfType.Private @@ -301,7 +300,6 @@ const FilesPreview = (p: {remoteTlfUpdates: ReadonlyArray; fol ) })} - ) } @@ -516,7 +514,7 @@ const LoggedOut = (p: {daemonHandshakeState: T.Config.DaemonHandshakeState; logg fullWidth={true} fullHeight={true} centerChildren={true} - style={styles.loggedOutContainer} + padding="small" > ({ marginLeft: Kb.Styles.globalMargins.mediumLarge, }, loadingContainer: {height: 200}, - loggedOutContainer: {padding: Kb.Styles.globalMargins.small}, loggedOutText: {alignSelf: 'center', marginTop: 6}, logo: { alignSelf: 'center', @@ -695,16 +692,12 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, tlfParticipants: {fontSize: 12}, tlfRowContainer: { - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, 0, Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.tiny), }, tlfSectionHeader: { backgroundColor: Kb.Styles.globalColors.blueGrey, color: Kb.Styles.globalColors.black_50, - paddingBottom: Kb.Styles.globalMargins.xtiny, - paddingLeft: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.xtiny, + ...Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, 0, Kb.Styles.globalMargins.xtiny, Kb.Styles.globalMargins.tiny), }, tlfSectionHeaderContainer: {backgroundColor: Kb.Styles.globalColors.white}, tlfTime: {marginRight: Kb.Styles.globalMargins.tiny}, diff --git a/shared/menubar/main2.desktop.tsx b/shared/menubar/main2.desktop.tsx index 9d7d5db59a74..783998e6ee85 100644 --- a/shared/menubar/main2.desktop.tsx +++ b/shared/menubar/main2.desktop.tsx @@ -1,4 +1,3 @@ -import * as Kb from '@/common-adapters' import Menubar from './index.desktop' import loadRemoteComponent from '../desktop/remote/component-loader.desktop' import {RemoteDarkModeSync} from '../desktop/remote/remote-component.desktop' @@ -12,10 +11,11 @@ const RemoteMenubar = (p: Props) => ( // This is to keep that arrow and gap on top w/ transparency const style = { - ...Kb.Styles.globalStyles.flexBoxColumn, borderTopLeftRadius: 4, borderTopRightRadius: 4, + display: 'flex', flex: 1, + flexDirection: 'column', marginTop: 0, position: 'relative', } as const diff --git a/shared/people/announcement.tsx b/shared/people/announcement.tsx index a3bbb3164a05..1c68cf2fc27e 100644 --- a/shared/people/announcement.tsx +++ b/shared/people/announcement.tsx @@ -101,7 +101,7 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ container: {alignSelf: 'flex-start'}, - icon: {flexShrink: 0, height: 32, width: 32}, + icon: {flexShrink: 0, ...Kb.Styles.size(32)}, }) as const ) diff --git a/shared/people/follow-notification.tsx b/shared/people/follow-notification.tsx index 531bc7ceb207..3e12317fae32 100644 --- a/shared/people/follow-notification.tsx +++ b/shared/people/follow-notification.tsx @@ -142,11 +142,9 @@ const styles = Kb.Styles.styleSheetCreate( common: { ...Kb.Styles.globalStyles.flexBoxRow, paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), }, isMobile: { - ...Kb.Styles.globalStyles.flexBoxRow, flexWrap: 'wrap', height: 32, overflow: 'hidden', diff --git a/shared/people/item.tsx b/shared/people/item.tsx index 28973240b9e7..6ed7e2b86022 100644 --- a/shared/people/item.tsx +++ b/shared/people/item.tsx @@ -86,9 +86,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ container: Kb.Styles.platformStyles({ common: { backgroundColor: Kb.Styles.globalColors.white, - borderBottomColor: Kb.Styles.globalColors.black_10, - borderBottomWidth: 1, - borderStyle: 'solid', + ...Kb.Styles.bottomDivider(), ...Kb.Styles.paddingV(Kb.Styles.globalMargins.xsmall), position: 'relative', }, diff --git a/shared/profile/add-to-team.tsx b/shared/profile/add-to-team.tsx index 03c06428a205..e2b30faa2869 100644 --- a/shared/profile/add-to-team.tsx +++ b/shared/profile/add-to-team.tsx @@ -240,7 +240,7 @@ const AddToTeam = (ownProps: OwnProps) => { - + {!waiting ? ( teamProfileAddList.length > 0 ? ( teamProfileAddList.map(team => ( @@ -359,13 +359,12 @@ const styles = Kb.Styles.styleSheetCreate( }), boxGrow: {width: '100%'}, progress: {width: 64}, - teamListInner: {flexShrink: 1, width: '100%'}, + teamListInner: {flexShrink: 1}, addToTeam: Kb.Styles.platformStyles({ common: { flexWrap: 'wrap', marginBottom: Kb.Styles.globalMargins.small, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), }, isElectron: {marginTop: Kb.Styles.globalMargins.small}, }), @@ -401,7 +400,7 @@ const styles = Kb.Styles.styleSheetCreate( }), divider: {marginLeft: 69}, headerAvatar: Kb.Styles.platformStyles({ - isElectron: {marginLeft: Kb.Styles.globalMargins.tiny, marginRight: Kb.Styles.globalMargins.tiny}, + isElectron: {...Kb.Styles.marginH(Kb.Styles.globalMargins.tiny)}, isMobile: {marginLeft: Kb.Styles.globalMargins.xxtiny, marginRight: Kb.Styles.globalMargins.tiny}, }), meta: { diff --git a/shared/profile/edit-avatar/index.tsx b/shared/profile/edit-avatar/index.tsx index 595ae0248317..4a7d7e9f32ba 100644 --- a/shared/profile/edit-avatar/index.tsx +++ b/shared/profile/edit-avatar/index.tsx @@ -381,7 +381,7 @@ const NativeAvatarUploadWrapper = (p: Props) => { ) : null} - {renderImageZoomer()} + {renderImageZoomer()} ({ button: { marginTop: Kb.Styles.globalMargins.tiny, - width: '100%', }, container: Kb.Styles.platformStyles({ common: { diff --git a/shared/profile/generic/proofs-list.tsx b/shared/profile/generic/proofs-list.tsx index d451f65492c3..fe1a81d0b354 100644 --- a/shared/profile/generic/proofs-list.tsx +++ b/shared/profile/generic/proofs-list.tsx @@ -667,7 +667,7 @@ const ProviderPicker = ({ /> - + @@ -1147,7 +1147,7 @@ const Unreachable = ({ const UsernameTips = ({platform}: {platform: T.More.PlatformsExpandedType}) => platform === 'hackernews' ? ( - + • You must have karma ≥ 2 • You must enter your uSeRName with exact case @@ -1320,9 +1320,6 @@ const styles = Kb.Styles.styleSheetCreate( borderRadius: Kb.Styles.borderRadius, overflow: 'hidden', }, - isMobile: { - width: '100%', - }, }), containerBox: { height: isMobile ? 56 : 48, @@ -1336,10 +1333,8 @@ const styles = Kb.Styles.styleSheetCreate( }, grey: {color: Kb.Styles.globalColors.black_20}, icon: { - height: 32, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, - width: 32, + ...Kb.Styles.size(32), + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), }, iconArrow: {marginRight: Kb.Styles.globalMargins.small}, iconBadgeContainer: { @@ -1353,20 +1348,15 @@ const styles = Kb.Styles.styleSheetCreate( }, inputBox: { ...Kb.Styles.padding(Kb.Styles.globalMargins.small, Kb.Styles.globalMargins.small), - borderColor: Kb.Styles.globalColors.black_10, - borderRadius: Kb.Styles.borderRadius, - borderStyle: 'solid' as const, - borderWidth: 1, + ...Kb.Styles.border(Kb.Styles.globalColors.black_10, 1, Kb.Styles.borderRadius), minHeight: 40, }, inputContainer: { alignSelf: 'stretch', backgroundColor: Kb.Styles.globalColors.black_10, borderRadius: Kb.Styles.borderRadius, - marginBottom: Kb.Styles.globalMargins.xsmall, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, - marginTop: Kb.Styles.globalMargins.xsmall, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.xsmall), + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), padding: Kb.Styles.globalMargins.tiny, width: 'auto', }, @@ -1388,9 +1378,6 @@ const styles = Kb.Styles.styleSheetCreate( proof: { maxWidth: '100%', }, - providerButtonBar: { - padding: Kb.Styles.globalMargins.medium, - }, scroll: {maxWidth: '100%'}, scrollContent: { paddingBottom: Kb.Styles.globalMargins.small, @@ -1399,10 +1386,7 @@ const styles = Kb.Styles.styleSheetCreate( marginBottom: Kb.Styles.globalMargins.tiny, position: 'relative', }, - serviceIconFull: { - height: 64, - width: 64, - }, + serviceIconFull: Kb.Styles.size(64), serviceIconHeaderContainer: { marginTop: Kb.Styles.globalMargins.medium, }, @@ -1419,7 +1403,6 @@ const styles = Kb.Styles.styleSheetCreate( color: Kb.Styles.globalColors.black_50, marginRight: Kb.Styles.globalMargins.tiny, }, - tips: {padding: Kb.Styles.globalMargins.small}, title: { ...rightColumnStyle, color: Kb.Styles.globalColors.black, diff --git a/shared/profile/pgp/choice/index.tsx b/shared/profile/pgp/choice/index.tsx index 195e7b188b7b..344b5372331a 100644 --- a/shared/profile/pgp/choice/index.tsx +++ b/shared/profile/pgp/choice/index.tsx @@ -329,7 +329,7 @@ const styles = Kb.Styles.styleSheetCreate( ...Kb.Styles.globalStyles.fontTerminal, backgroundColor: Kb.Styles.globalColors.greyLight, border: `solid 1px ${Kb.Styles.globalColors.black_10}`, - borderRadius: 3, + ...Kb.Styles.globalStyles.rounded, color: Kb.Styles.globalColors.black, flexGrow: 1, fontSize: 12, diff --git a/shared/profile/pgp/import/index.tsx b/shared/profile/pgp/import/index.tsx index 0c6321176a89..67117701b895 100644 --- a/shared/profile/pgp/import/index.tsx +++ b/shared/profile/pgp/import/index.tsx @@ -38,8 +38,7 @@ const styles = Kb.Styles.styleSheetCreate( () => ({ body: { - marginBottom: Kb.Styles.globalMargins.small, - marginTop: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.small), }, header: { marginTop: Kb.Styles.globalMargins.medium, @@ -50,8 +49,7 @@ const styles = Kb.Styles.styleSheetCreate( borderRadius: Kb.Styles.borderRadius, boxSizing: 'content-box', color: Kb.Styles.globalColors.white, - marginLeft: -Kb.Styles.globalMargins.medium, - marginRight: -Kb.Styles.globalMargins.medium, + ...Kb.Styles.marginH(-Kb.Styles.globalMargins.medium), padding: Kb.Styles.globalMargins.medium, textAlign: 'left', } as const, diff --git a/shared/profile/revoke.tsx b/shared/profile/revoke.tsx index 18ab547e10c0..867a325d6260 100644 --- a/shared/profile/revoke.tsx +++ b/shared/profile/revoke.tsx @@ -133,7 +133,7 @@ const styles = Kb.Styles.styleSheetCreate( }), reminderText: {marginTop: Kb.Styles.globalMargins.tiny}, revokeIcon: {bottom: -8, position: 'absolute', right: -10}, - siteIcon: isMobile ? {height: 64, width: 64} : {height: 48, width: 48}, + siteIcon: isMobile ? Kb.Styles.size(64) : Kb.Styles.size(48), }) as const ) diff --git a/shared/profile/showcase-team-offer.tsx b/shared/profile/showcase-team-offer.tsx index df7a9b28bb7f..16accd8c220c 100644 --- a/shared/profile/showcase-team-offer.tsx +++ b/shared/profile/showcase-team-offer.tsx @@ -117,8 +117,7 @@ const styles = Kb.Styles.styleSheetCreate( container: {flex: 1, overflow: 'hidden'}, headerShowcaseTeamOffer: Kb.Styles.platformStyles({ isElectron: { - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), paddingTop: Kb.Styles.globalMargins.mediumLarge, }, }), @@ -137,15 +136,11 @@ const styles = Kb.Styles.styleSheetCreate( isMobile: {paddingTop: Kb.Styles.globalMargins.small}, }), noteText: { - paddingBottom: Kb.Styles.globalMargins.small, - paddingLeft: Kb.Styles.globalMargins.large, - paddingRight: Kb.Styles.globalMargins.large, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.large, Kb.Styles.globalMargins.small), }, teamNameShowcaseTeamOffer: { flexShrink: 1, - marginLeft: Kb.Styles.globalMargins.small, - marginRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginH(Kb.Styles.globalMargins.small), }, teamRowShowcaseTeamOffer: Kb.Styles.platformStyles({ common: { diff --git a/shared/profile/user/index.tsx b/shared/profile/user/index.tsx index 851345e1eeb7..b19c7f635e8d 100644 --- a/shared/profile/user/index.tsx +++ b/shared/profile/user/index.tsx @@ -207,7 +207,7 @@ const TeamSections = (props: { direction="horizontal" fullWidth={true} gap="small" - style={styles.teamSections} + alignItems="flex-start" > {!props.notAUser && } @@ -590,7 +590,7 @@ const User = (props: {username: string}) => { style={Kb.Styles.collapseStyles([containerStyle, colorTypeToStyle(p.backgroundColorType)])} testID={TestIDs.PROFILE_PAGE} > - + ({ isElectron: {justifyContent: 'flex-start'}, isMobile: {justifyContent: 'center'}, }), - innerContainer: { - ...Kb.Styles.size('100%'), - }, progress: {position: 'absolute'}, proofs: Kb.Styles.platformStyles({ isElectron: { @@ -721,9 +718,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ common: {backgroundColor: Kb.Styles.globalColors.white, paddingBottom: Kb.Styles.globalMargins.xtiny}, isMobile: {minHeight: '100%'}, }), - teamSections: { - alignItems: 'flex-start', - }, textEmpty: { ...Kb.Styles.paddingV(Kb.Styles.globalMargins.large), }, diff --git a/shared/profile/user/shared-teams.tsx b/shared/profile/user/shared-teams.tsx index 07f7c4520f66..8df244d1c426 100644 --- a/shared/profile/user/shared-teams.tsx +++ b/shared/profile/user/shared-teams.tsx @@ -63,5 +63,5 @@ const SharedTeams = ({sharedTeams, username}: Props) => { export default SharedTeams const styles = Kb.Styles.styleSheetCreate(() => ({ - loadingRow: Kb.Styles.padding(Kb.Styles.globalMargins.tiny, 0), + loadingRow: Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny), })) diff --git a/shared/profile/user/teams/team-row.tsx b/shared/profile/user/teams/team-row.tsx index 3f6e05575a9f..c2bc0f446422 100644 --- a/shared/profile/user/teams/team-row.tsx +++ b/shared/profile/user/teams/team-row.tsx @@ -26,10 +26,7 @@ const TeamRow = ({isOpen, loading = false, name, onClick, popup, popupAnchor}: P ) const styles = Kb.Styles.styleSheetCreate(() => ({ - loading: { - height: 16, - width: 16, - }, + loading: Kb.Styles.size(16), row: { alignItems: 'center', }, diff --git a/shared/profile/user/teams/team-section.tsx b/shared/profile/user/teams/team-section.tsx index f14b878e241a..43e642c8c25f 100644 --- a/shared/profile/user/teams/team-section.tsx +++ b/shared/profile/user/teams/team-section.tsx @@ -17,7 +17,7 @@ const TeamSection = ({children, right, title}: Props) => ( {right} - + {children} @@ -40,7 +40,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ maxHeight: maxVisibleRows * teamRowHeight, }, }), - scrollContent: Kb.Styles.globalStyles.fullWidth, })) export default TeamSection diff --git a/shared/provision/code-page/container.tsx b/shared/provision/code-page/container.tsx index 85343515d048..4ad0923e454a 100644 --- a/shared/provision/code-page/container.tsx +++ b/shared/provision/code-page/container.tsx @@ -108,6 +108,8 @@ const CodePageContainer = () => { + return } export default QrImage diff --git a/shared/provision/code-page/qr-scan/not-authorized.tsx b/shared/provision/code-page/qr-scan/not-authorized.tsx index bcfa7205f7ea..07583b3090c6 100644 --- a/shared/provision/code-page/qr-scan/not-authorized.tsx +++ b/shared/provision/code-page/qr-scan/not-authorized.tsx @@ -3,7 +3,7 @@ import {openAppSettings} from '@/util/storeless-actions' const QRScanNotAuthorized = () => { return ( - + You need to allow access to the camera. diff --git a/shared/provision/error.tsx b/shared/provision/error.tsx index 87f4076c7b3a..63b94142b6b3 100644 --- a/shared/provision/error.tsx +++ b/shared/provision/error.tsx @@ -297,9 +297,9 @@ const styles = Kb.Styles.styleSheetCreate( width: 240, }, list: { + ...Kb.Styles.globalStyles.flexBoxColumn, marginBottom: 10, marginLeft: Kb.Styles.globalMargins.tiny, - ...Kb.Styles.globalStyles.flexBoxColumn, maxWidth: 460, }, }) as const diff --git a/shared/provision/select-other-device.tsx b/shared/provision/select-other-device.tsx index 4f1bada9d192..8f3e7ae0c08b 100644 --- a/shared/provision/select-other-device.tsx +++ b/shared/provision/select-other-device.tsx @@ -149,8 +149,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ ...Kb.Styles.paddingV(Kb.Styles.globalMargins.small), }, isMobile: { - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), paddingTop: Kb.Styles.globalMargins.small, }, }), diff --git a/shared/settings/about.tsx b/shared/settings/about.tsx index a790736fedf7..658e2ae9cb18 100644 --- a/shared/settings/about.tsx +++ b/shared/settings/about.tsx @@ -27,7 +27,7 @@ const About = () => { } return ( - + diff --git a/shared/settings/account/add-modals.tsx b/shared/settings/account/add-modals.tsx index e3f17750f530..2f2f0b860c50 100644 --- a/shared/settings/account/add-modals.tsx +++ b/shared/settings/account/add-modals.tsx @@ -166,18 +166,18 @@ export const Phone = () => { /> - - {!isMobile && ( - - )} - - + + {!isMobile && ( + + )} + + ) @@ -238,16 +238,16 @@ export const VerifyPhone = ({initialResend, phoneNumber}: VerifyPhoneProps) => { /> - - - + + + ) @@ -277,7 +277,7 @@ const styles = Kb.Styles.styleSheetCreate( minHeight: undefined, }, footer: { - ...Kb.Styles.padding(Kb.Styles.globalMargins.small), + padding: Kb.Styles.globalMargins.small, }, modalFooter: Kb.Styles.platformStyles({ common: { diff --git a/shared/settings/account/index.tsx b/shared/settings/account/index.tsx index e4d6cf7a96ec..72317deba4d2 100644 --- a/shared/settings/account/index.tsx +++ b/shared/settings/account/index.tsx @@ -333,7 +333,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }), password: { ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, 0), - flexGrow: 1, + ...Kb.Styles.globalStyles.flexGrow, }, primaryOnYellow: {backgroundColor: Kb.Styles.globalColors.white}, primaryOnYellowLabel: {color: Kb.Styles.globalColors.brown_75OrYellow}, diff --git a/shared/settings/advanced.tsx b/shared/settings/advanced.tsx index 1c0f3b451fb6..f7db69871843 100644 --- a/shared/settings/advanced.tsx +++ b/shared/settings/advanced.tsx @@ -438,8 +438,7 @@ const styles = Kb.Styles.styleSheetCreate( color: Kb.Styles.globalColors.redDark, }, proxyDivider: { - marginBottom: Kb.Styles.globalMargins.small, - marginTop: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.small), width: '100%', }, section: Kb.Styles.platformStyles({ diff --git a/shared/settings/archive/index.tsx b/shared/settings/archive/index.tsx index 1d72dc5ccbb4..5e5d706b7431 100644 --- a/shared/settings/archive/index.tsx +++ b/shared/settings/archive/index.tsx @@ -300,7 +300,7 @@ function KBFSJob(p: {index: number; job: KBFSArchiveJob}) { {job.gitRepo ?? job.kbfsPath} - {isMobile ? null : } + {isMobile ? null : } {isMobile ? null : job.bytesTotal ? ( {FS.humanReadableFileSize(job.bytesTotal)} ) : null} @@ -319,7 +319,7 @@ function KBFSJob(p: {index: number; job: KBFSArchiveJob}) { > {String(Math.round(progress * 100)) + '%'} - + {errorStr && ( @@ -445,7 +445,7 @@ const Archive = () => { {isMobile ? null : Archive} - + { "Easily backup your Keybase data by choosing 'backup' in chat and files or click to backup all." } diff --git a/shared/settings/archive/modal.tsx b/shared/settings/archive/modal.tsx index 879d94ae2291..d7a29c5046ad 100644 --- a/shared/settings/archive/modal.tsx +++ b/shared/settings/archive/modal.tsx @@ -328,9 +328,7 @@ const ArchiveModal = (p: Props) => { const output = isMobile ? null : ( - - Save To - + Save To {outpath} diff --git a/shared/settings/chat.tsx b/shared/settings/chat.tsx index d3e549ee00b6..6d5de80c7604 100644 --- a/shared/settings/chat.tsx +++ b/shared/settings/chat.tsx @@ -276,7 +276,7 @@ const Security = ({allowEdit, groups, refresh, toggle}: NotificationSettingsStat )} )} - + contactSettingsSaved( @@ -412,7 +412,8 @@ const Links = () => { { Sounds - <> - {showDesktopSound && ( - - )} - {showMobileSound && ( - - )} - + {showDesktopSound && ( + + )} + {showMobileSound && ( + + )} ) @@ -474,17 +473,15 @@ const Misc = ({allowEdit, groups, toggle}: NotificationSettingsState) => { Misc - <> - {!!groups.get('misc')?.settings && ( - - )} - + {!!groups.get('misc')?.settings && ( + + )} ) @@ -524,7 +521,6 @@ const TeamRow = (p: {checked: boolean; isOpen: boolean; name: string; onCheck: ( } const styles = Kb.Styles.styleSheetCreate(() => ({ - btnContainer: {alignSelf: 'flex-start'}, checkboxIndented: Kb.Styles.platformStyles({ isElectron: {paddingLeft: Kb.Styles.globalMargins.medium}, isMobile: {paddingBottom: Kb.Styles.globalMargins.medium, paddingLeft: Kb.Styles.globalMargins.small}, diff --git a/shared/settings/contacts-joined.tsx b/shared/settings/contacts-joined.tsx index 4051933fb305..0ad429c04852 100644 --- a/shared/settings/contacts-joined.tsx +++ b/shared/settings/contacts-joined.tsx @@ -103,15 +103,10 @@ const styles = Kb.Styles.styleSheetCreate( marginBottom: Kb.Styles.globalMargins.tiny, marginTop: Kb.Styles.globalMargins.xtiny, }, - divider: { - marginBottom: Kb.Styles.globalMargins.tiny, - marginTop: Kb.Styles.globalMargins.tiny, - }, + divider: {...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny)}, woot: { - marginBottom: Kb.Styles.globalMargins.small, - marginLeft: Kb.Styles.globalMargins.medium, - marginRight: Kb.Styles.globalMargins.medium, - marginTop: Kb.Styles.globalMargins.small, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.small), + ...Kb.Styles.marginH(Kb.Styles.globalMargins.medium), }, }) as const ) diff --git a/shared/settings/db-nuke.confirm.tsx b/shared/settings/db-nuke.confirm.tsx index fc4ca26d2324..262e97b7b5f7 100644 --- a/shared/settings/db-nuke.confirm.tsx +++ b/shared/settings/db-nuke.confirm.tsx @@ -16,7 +16,7 @@ const DbNukeConfirm = () => { centerChildren={true} fullWidth={true} flex={1} - style={{padding: Kb.Styles.globalMargins.medium}} + padding="medium" > Are you sure you want to blast away your local database? diff --git a/shared/settings/delete-confirm/check-passphrase.tsx b/shared/settings/delete-confirm/check-passphrase.tsx index 5c067affd8f5..d985ca0662b0 100644 --- a/shared/settings/delete-confirm/check-passphrase.tsx +++ b/shared/settings/delete-confirm/check-passphrase.tsx @@ -90,12 +90,7 @@ const styles = Kb.Styles.styleSheetCreate( buttonBar: {minHeight: undefined}, checkbox: {paddingTop: Kb.Styles.globalMargins.tiny}, container: { - ...Kb.Styles.padding( - Kb.Styles.globalMargins.medium, - Kb.Styles.globalMargins.small, - Kb.Styles.globalMargins.medium, - Kb.Styles.globalMargins.small - ), + ...Kb.Styles.padding(Kb.Styles.globalMargins.medium, Kb.Styles.globalMargins.small), backgroundColor: Kb.Styles.globalColors.blueGrey, }, deleteButton: {marginTop: Kb.Styles.globalMargins.large}, diff --git a/shared/settings/display.tsx b/shared/settings/display.tsx index 065dce398c55..d0c25e1b0038 100644 --- a/shared/settings/display.tsx +++ b/shared/settings/display.tsx @@ -30,7 +30,7 @@ const Display = () => { } return ( - + Appearance @@ -76,10 +76,4 @@ const Display = () => { ) } -const styles = Kb.Styles.styleSheetCreate(() => ({ - container: { - padding: Kb.Styles.globalMargins.small, - }, -})) - export default Display diff --git a/shared/settings/feedback/index.tsx b/shared/settings/feedback/index.tsx index c4eb89d426d4..e4ad67c5a58d 100644 --- a/shared/settings/feedback/index.tsx +++ b/shared/settings/feedback/index.tsx @@ -64,21 +64,19 @@ const Feedback = (props: Props) => { )} - - - + {_sendMaxBytes() && ( @@ -95,13 +93,11 @@ const Feedback = (props: Props) => { {props.loggedOut && ( - - - + )} diff --git a/shared/settings/files/index.tsx b/shared/settings/files/index.tsx index 5a79b952583d..aab884e8af10 100644 --- a/shared/settings/files/index.tsx +++ b/shared/settings/files/index.tsx @@ -299,17 +299,13 @@ const styles = Kb.Styles.styleSheetCreate( paddingLeft: Kb.Styles.globalMargins.xsmall, width: '100%', }, - spinner: { - height: 16, - width: 16, - }, + spinner: Kb.Styles.size(16), switch: { marginTop: Kb.Styles.globalMargins.small, }, syncContent: Kb.Styles.platformStyles({ common: { - paddingLeft: Kb.Styles.globalMargins.xsmall, - paddingRight: Kb.Styles.globalMargins.xsmall, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.xsmall), paddingTop: Kb.Styles.globalMargins.medium, }, isTablet: { diff --git a/shared/settings/group.tsx b/shared/settings/group.tsx index c97ca33f6089..7ce293a0be61 100644 --- a/shared/settings/group.tsx +++ b/shared/settings/group.tsx @@ -61,7 +61,7 @@ const Group = (props: GroupProps) => ( const styles = Kb.Styles.styleSheetCreate( () => ({ - label: {marginBottom: Kb.Styles.globalMargins.xtiny, marginTop: Kb.Styles.globalMargins.xtiny}, + label: {...Kb.Styles.marginV(Kb.Styles.globalMargins.xtiny)}, }) as const ) diff --git a/shared/settings/logout.tsx b/shared/settings/logout.tsx index fe54dcbdfbf8..ed8c5658fcff 100644 --- a/shared/settings/logout.tsx +++ b/shared/settings/logout.tsx @@ -162,12 +162,7 @@ const styles = Kb.Styles.styleSheetCreate( buttonBar: {minHeight: undefined}, checkbox: {paddingTop: Kb.Styles.globalMargins.tiny}, container: { - ...Kb.Styles.padding( - Kb.Styles.globalMargins.medium, - Kb.Styles.globalMargins.small, - Kb.Styles.globalMargins.medium, - Kb.Styles.globalMargins.small - ), + ...Kb.Styles.padding(Kb.Styles.globalMargins.medium, Kb.Styles.globalMargins.small), backgroundColor: Kb.Styles.globalColors.blueGrey, }, headerText: { @@ -191,8 +186,7 @@ const styles = Kb.Styles.styleSheetCreate( }), progress: { alignSelf: 'center', - marginBottom: Kb.Styles.globalMargins.xlarge, - marginTop: Kb.Styles.globalMargins.xlarge, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.xlarge), }, smallProgress: {alignSelf: 'center'}, }) as const diff --git a/shared/settings/notifications/index.tsx b/shared/settings/notifications/index.tsx index e65e55a1c30f..5e445c270bb8 100644 --- a/shared/settings/notifications/index.tsx +++ b/shared/settings/notifications/index.tsx @@ -75,7 +75,7 @@ const Notifications = () => { } const styles = Kb.Styles.styleSheetCreate(() => ({ - scrollView: {...Kb.Styles.globalStyles.flexBoxColumn, flex: 1}, + scrollView: {...Kb.Styles.globalStyles.flexBoxColumn, ...Kb.Styles.globalStyles.flexOne}, turnOnIllustration: { height: 270, left: Kb.Styles.globalMargins.medium, diff --git a/shared/settings/notifications/push-prompt.tsx b/shared/settings/notifications/push-prompt.tsx index 97d41203d2f2..2ff751d8ad74 100644 --- a/shared/settings/notifications/push-prompt.tsx +++ b/shared/settings/notifications/push-prompt.tsx @@ -23,14 +23,14 @@ const PushPrompt = () => { - + ) diff --git a/shared/settings/notifications/render.tsx b/shared/settings/notifications/render.tsx index c1189773a29c..94fd2abd2aed 100644 --- a/shared/settings/notifications/render.tsx +++ b/shared/settings/notifications/render.tsx @@ -53,7 +53,7 @@ const Notifications = (props: Props) => { const hasLoadedGroups = props.groups.size > 0 const emailGroup = props.groups.get('email') return !hasLoadedGroups ? ( - + ) : ( diff --git a/shared/settings/password.tsx b/shared/settings/password.tsx index 881e036e1beb..7a1b8b55fc60 100644 --- a/shared/settings/password.tsx +++ b/shared/settings/password.tsx @@ -122,15 +122,15 @@ export const UpdatePassword = (props: Props) => { - - props.onSave(password)} - waiting={props.waitingForResponse} - /> - + + props.onSave(password)} + waiting={props.waitingForResponse} + /> + ) diff --git a/shared/settings/proxy.tsx b/shared/settings/proxy.tsx index 867ae6b64098..3f5d9ce94a14 100644 --- a/shared/settings/proxy.tsx +++ b/shared/settings/proxy.tsx @@ -175,7 +175,7 @@ const ProxySettingsComponent = (props: Props) => { fullWidth={true} flex={1} gap="small" - style={styles.warningContainer} + padding="medium" > @@ -238,7 +238,7 @@ const ProxySettingsPopup = (props: Props) => { return ( {!isMobile && } - + @@ -251,7 +251,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ padding: Kb.Styles.globalMargins.small, }, proxySetting: {marginBottom: Kb.Styles.globalMargins.small}, - proxySettingPopupBox: {padding: Kb.Styles.globalMargins.xlarge}, radioButton: {marginRight: Kb.Styles.globalMargins.medium}, text: Kb.Styles.platformStyles({ isElectron: { @@ -259,7 +258,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, }), warningBody: {maxWidth: 420}, - warningContainer: {padding: Kb.Styles.globalMargins.medium}, warningHeader: {maxWidth: 420}, })) diff --git a/shared/settings/screenprotector/index.tsx b/shared/settings/screenprotector/index.tsx index 89c65e949bd8..196d47e61fa2 100644 --- a/shared/settings/screenprotector/index.tsx +++ b/shared/settings/screenprotector/index.tsx @@ -62,15 +62,13 @@ const Screenprotector = () => { } return ( - - - - + + ) } @@ -94,29 +92,21 @@ const Screenprotector = () => { } return ( - - - - + + ) } -const styles = Kb.Styles.styleSheetCreate(() => ({ - container: { - ...Kb.Styles.padding(Kb.Styles.globalMargins.small), - }, -})) - export default Screenprotector diff --git a/shared/settings/sub-nav/left-nav.tsx b/shared/settings/sub-nav/left-nav.tsx index d98c19b08ba0..02051b0a949b 100644 --- a/shared/settings/sub-nav/left-nav.tsx +++ b/shared/settings/sub-nav/left-nav.tsx @@ -14,140 +14,139 @@ type Props = { } const LeftNav = (props: Props) => { -const {navigate} = props + const {navigate} = props const badgeNumbers = useNotifState(s => s.navBadges) const badgeNotifications = usePushState(s => (isElectron ? 0 : !s.hasPermissions ? 1 : 0)) return ( - {Kb.Styles.isTablet && ( - <> - - - - - - )} - - - - - {Kb.Styles.isTablet && props.contactsLabel && ( + {Kb.Styles.isTablet && ( + <> - )} - - + + + + + )} + + + + + {Kb.Styles.isTablet && props.contactsLabel && ( + )} + + + + + {!Kb.Styles.isTablet && ( - - {!Kb.Styles.isTablet && ( - - )} + )} + + {__DEV__ && ( - {__DEV__ && ( - - )} - {__DEV__ && ( - - )} - + )} + {__DEV__ && ( - {/* TODO: Do something with logoutInProgress once Offline is - removed from the settings page. */} - navigate(Settings.settingsLogOutTab)} /> + )} + + + {/* TODO: Do something with logoutInProgress once Offline is + removed from the settings page. */} + navigate(Settings.settingsLogOutTab)} /> ) } @@ -155,8 +154,8 @@ const {navigate} = props const styles = Kb.Styles.styleSheetCreate(() => ({ container: Kb.Styles.platformStyles({ common: { - ...Kb.Styles.globalStyles.flexBoxColumn, backgroundColor: Kb.Styles.globalColors.blueGrey, + flexDirection: 'column', }, isElectron: { height: '100%', diff --git a/shared/signup/common.tsx b/shared/signup/common.tsx index 61ad2416fccc..924c350144ac 100644 --- a/shared/signup/common.tsx +++ b/shared/signup/common.tsx @@ -315,10 +315,6 @@ const styles = Kb.Styles.styleSheetCreate( whiteBackground: { backgroundColor: Kb.Styles.globalColors.white, }, - whiteHeaderContainer: { - borderBottomColor: Kb.Styles.globalColors.black_10, - borderBottomWidth: 1, - borderStyle: 'solid', - }, + whiteHeaderContainer: Kb.Styles.bottomDivider(), }) as const ) diff --git a/shared/signup/phone-number/verify.tsx b/shared/signup/phone-number/verify.tsx index 7096be43ae87..f682fed38e30 100644 --- a/shared/signup/phone-number/verify.tsx +++ b/shared/signup/phone-number/verify.tsx @@ -72,7 +72,7 @@ const styles = Kb.Styles.styleSheetCreate( ({ backButton: { color: Kb.Styles.globalColors.white, - flex: 1, + ...Kb.Styles.globalStyles.flexOne, }, container: {backgroundColor: Kb.Styles.globalColors.blue}, headerContainer: { diff --git a/shared/team-building/contacts.tsx b/shared/team-building/contacts.tsx index e5615caa4cb7..9453597f3288 100644 --- a/shared/team-building/contacts.tsx +++ b/shared/team-building/contacts.tsx @@ -145,7 +145,7 @@ export const ContactsImportButton = () => { return ( - + @@ -171,8 +171,7 @@ const styles = Kb.Styles.styleSheetCreate( bannerButtonContainer: { alignSelf: 'flex-start', flexWrap: 'wrap', - marginBottom: Kb.Styles.globalMargins.tiny, - marginTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny), }, bannerIcon: { marginLeft: Kb.Styles.globalMargins.xtiny, @@ -184,7 +183,6 @@ const styles = Kb.Styles.styleSheetCreate( marginTop: Kb.Styles.globalMargins.tiny, }, iconContactBookContainer: { - alignItems: 'center', marginLeft: Kb.Styles.globalMargins.xsmall, width: 48, }, diff --git a/shared/team-building/email-search.tsx b/shared/team-building/email-search.tsx index 0ab81a8168d0..20162956b1b7 100644 --- a/shared/team-building/email-search.tsx +++ b/shared/team-building/email-search.tsx @@ -124,7 +124,6 @@ const styles = Kb.Styles.styleSheetCreate( }, }), input: Kb.Styles.platformStyles({ - common: {}, isElectron: { ...Kb.Styles.padding(0, Kb.Styles.globalMargins.xsmall), height: 38, diff --git a/shared/team-building/page.tsx b/shared/team-building/page.tsx index 81013711f994..4f037c8f6c7d 100644 --- a/shared/team-building/page.tsx +++ b/shared/team-building/page.tsx @@ -130,8 +130,7 @@ const getOptions = ({route}: OwnProps) => { overlayAvoidTabs: true, overlayStyle: { alignSelf: 'flex-start', - paddingLeft: Kb.Styles.globalMargins.xsmall, - paddingRight: Kb.Styles.globalMargins.xsmall, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.xsmall), paddingTop: Kb.Styles.globalMargins.mediumLarge, } as const, overlayTransparent: true, diff --git a/shared/team-building/recs-and-recos.tsx b/shared/team-building/recs-and-recos.tsx index 3292643d1cf9..18776719beb5 100644 --- a/shared/team-building/recs-and-recos.tsx +++ b/shared/team-building/recs-and-recos.tsx @@ -187,10 +187,6 @@ const styles = Kb.Styles.styleSheetCreate( width: '100%', }, }), - searchHint: { - paddingLeft: Kb.Styles.globalMargins.xlarge, - paddingRight: Kb.Styles.globalMargins.xlarge, - paddingTop: Kb.Styles.globalMargins.xlarge, - }, + searchHint: Kb.Styles.padding(Kb.Styles.globalMargins.xlarge, Kb.Styles.globalMargins.xlarge, 0), }) as const ) diff --git a/shared/team-building/service-tab-bar.tsx b/shared/team-building/service-tab-bar.tsx index 51b13cfee1ae..40484aca8738 100644 --- a/shared/team-building/service-tab-bar.tsx +++ b/shared/team-building/service-tab-bar.tsx @@ -375,7 +375,7 @@ const ServiceTabBarDesktop = (props: Props) => { lastSelectedUnlockedService ) return ( - + {frontServices.map(service => ( { type="Card" firstItem={true} icon={} - body={From KeybaseSearch users by username.} + body={ + + From Keybase + Search users by username. + + } onClick={onContinueKeybase} /> } - body={A list of email addressesEnter one or multiple email addresses.} + body={ + + A list of email addresses + Enter one or multiple email addresses. + + } onClick={onContinueEmail} /> {isMobile && ( @@ -64,7 +74,12 @@ const AddFromWhere = ({wizard}: Props) => { type="Card" firstItem={true} icon={} - body={From your contactsAdd your friends, family, or colleagues.} + body={ + + From your contacts + Add your friends, family, or colleagues. + + } onClick={onContinueContacts} /> )} @@ -72,7 +87,12 @@ const AddFromWhere = ({wizard}: Props) => { type="Card" firstItem={true} icon={} - body={A list of phone numbersEnter one or multiple phone numbers} + body={ + + A list of phone numbers + Enter one or multiple phone numbers + + } onClick={onContinuePhone} /> diff --git a/shared/teams/add-members-wizard/confirm.tsx b/shared/teams/add-members-wizard/confirm.tsx index e9f79b6a21dc..f6c16e4905ad 100644 --- a/shared/teams/add-members-wizard/confirm.tsx +++ b/shared/teams/add-members-wizard/confirm.tsx @@ -186,13 +186,13 @@ const AddMembersConfirm = ({wizard: initialWizard}: Props) => { {!!error && {error}} - + ) @@ -244,37 +244,37 @@ const AlreadyInTeam = ({assertions}: {assertions: ReadonlyArray}) => { const AddMoreMembers = ({wizard}: {wizard: AddMembersWizard}) => { const nav = useSafeNavigation() const makePopup = (p: Kb.Popup2Parms) => { - const {attachTo, hidePopup} = p - const onAddKeybase = () => - nav.safeNavigateAppend({ - name: 'teamsTeamBuilder', - params: { - addMembersWizard: wizard, - filterServices: ['keybase', 'twitter', 'facebook', 'github', 'reddit', 'hackernews'], - goButtonLabel: 'Add', - namespace: 'teams', - teamID: wizard.teamID, - title: '', - }, - }) - const onAddContacts = () => nav.safeNavigateAppend({name: 'teamAddToTeamContacts', params: {wizard}}) - const onAddPhone = () => nav.safeNavigateAppend({name: 'teamAddToTeamPhone', params: {wizard}}) - const onAddEmail = () => nav.safeNavigateAppend({name: 'teamAddToTeamEmail', params: {wizard}}) - return ( - - ) - } + const {attachTo, hidePopup} = p + const onAddKeybase = () => + nav.safeNavigateAppend({ + name: 'teamsTeamBuilder', + params: { + addMembersWizard: wizard, + filterServices: ['keybase', 'twitter', 'facebook', 'github', 'reddit', 'hackernews'], + goButtonLabel: 'Add', + namespace: 'teams', + teamID: wizard.teamID, + title: '', + }, + }) + const onAddContacts = () => nav.safeNavigateAppend({name: 'teamAddToTeamContacts', params: {wizard}}) + const onAddPhone = () => nav.safeNavigateAppend({name: 'teamAddToTeamPhone', params: {wizard}}) + const onAddEmail = () => nav.safeNavigateAppend({name: 'teamAddToTeamEmail', params: {wizard}}) + return ( + + ) + } const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup) return ( @@ -476,11 +476,11 @@ const DefaultChannels = ({ const allKeybaseUsers = !wizard.addingMembers.some(member => member.assertion.includes('@')) const onChangeFromDefault = () => updateWizard(setWizardDefaultChannels(wizard, [])) const onAdd = (toAdd: ReadonlyArray) => { - updateWizard(setWizardDefaultChannels(wizard, toAdd)) - } + updateWizard(setWizardDefaultChannels(wizard, toAdd)) + } const onRemove = (toRemove: T.Teams.ChannelNameID) => { - updateWizard(setWizardDefaultChannels(wizard, undefined, toRemove)) - } + updateWizard(setWizardDefaultChannels(wizard, undefined, toRemove)) + } return ( Join channels diff --git a/shared/teams/common/selection-popup.tsx b/shared/teams/common/selection-popup.tsx index 5f0702737afa..0f98df94999d 100644 --- a/shared/teams/common/selection-popup.tsx +++ b/shared/teams/common/selection-popup.tsx @@ -153,25 +153,15 @@ const TeamSelectionPopup = (props: TeamProps) => { } const ChannelSelectionPopup = (props: ChannelProps) => { - const {conversationIDKey, selectedTab, teamID} = props + const {conversationIDKey, teamID} = props const {clearSelectedMembers, selectedMembers} = useChannelSelectionState() const selectedCount = selectedMembers.size - const onCancel = () => { - switch (selectedTab) { - // eslint-disable-next-line - case 'channelMembers': - clearSelectedMembers() - return - } - } - - const selectableTabName = channelSelectableTabNames[selectedTab] return ( diff --git a/shared/teams/confirm-modals/confirm-remove-from-channel.tsx b/shared/teams/confirm-modals/confirm-remove-from-channel.tsx index 750874f844af..0f6a6d3ddd16 100644 --- a/shared/teams/confirm-modals/confirm-remove-from-channel.tsx +++ b/shared/teams/confirm-modals/confirm-remove-from-channel.tsx @@ -26,8 +26,6 @@ const ConfirmRemoveFromChannel = (props: Props) => { const nav = useSafeNavigation() const navigation = useNavigation() - const onCancel = () => nav.safeNavigateUp() - const removeFromChannel = C.useRPC(T.RPCChat.localRemoveFromConversationLocalRpcPromise) const onRemove = () => { @@ -62,7 +60,7 @@ const ConfirmRemoveFromChannel = (props: Props) => { { C.ignorePromise(f()) }, [channelIDs, deleteChannel, navigation]) - const onCancel = () => { - C.Router2.navigateUp() - } - return ( { error={waitingError?.message ?? ''} header={
} onConfirm={onDelete} - onCancel={onCancel} + onCancel={C.Router2.navigateUp} prompt={ Delete {deleteMsg}? diff --git a/shared/teams/external-team.tsx b/shared/teams/external-team.tsx index 0b18d78049a5..dc6317520145 100644 --- a/shared/teams/external-team.tsx +++ b/shared/teams/external-team.tsx @@ -55,7 +55,7 @@ const ExternalTeam = (props: Props) => { } return ( - + {waiting ? ( ({ - container: { - padding: Kb.Styles.globalMargins.small, - }, contentContainer: Kb.Styles.platformStyles({ common: { paddingBottom: Kb.Styles.globalMargins.small, @@ -235,9 +232,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ paddingTop: Kb.Styles.globalMargins.tiny, }, }), - crownIcon: Kb.Styles.platformStyles({ - common: {marginRight: Kb.Styles.globalMargins.xtiny}, - }), + crownIcon: {marginRight: Kb.Styles.globalMargins.xtiny}, error: {color: Kb.Styles.globalColors.redDark}, headerContainer: { ...Kb.Styles.padding(0, Kb.Styles.globalMargins.small), diff --git a/shared/teams/join-team/join-from-invite.tsx b/shared/teams/join-team/join-from-invite.tsx index 0a5cd568e39e..78458015c1ae 100644 --- a/shared/teams/join-team/join-from-invite.tsx +++ b/shared/teams/join-team/join-from-invite.tsx @@ -166,7 +166,7 @@ const JoinFromInviteInner = ({inviteDetails: initialInviteDetails, inviteID = '' {!!(error || missingInviteKeyError) && {error || missingInviteKeyError}} - + { <> {props.empty && ( - - - - + + You are not a part of any team, lone wolf. - + )} - + {(isMobile || !props.empty) && ( Keybase team chats are encrypted – unlike Slack – and work for any size group, from casual diff --git a/shared/teams/main/team-row.tsx b/shared/teams/main/team-row.tsx index 69c3d52b8659..32ee0e69aa95 100644 --- a/shared/teams/main/team-row.tsx +++ b/shared/teams/main/team-row.tsx @@ -199,28 +199,23 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, isPhone: {minHeight: 72}, }), - avatarRelative: { - height: 32, - width: 32, - }, + avatarRelative: Kb.Styles.size(32), badge: { position: 'absolute', right: -5, top: -5, }, bodyDesktop: { + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny), flexGrow: 1, minHeight: smallHeight, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.tiny, }, bodyLeft: { paddingRight: Kb.Styles.globalMargins.tiny, }, bodyMobile: { + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny), minHeight: 72, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.tiny, }, bodyRight: { flex: 0.7, diff --git a/shared/teams/new-team/wizard/make-big-team.tsx b/shared/teams/new-team/wizard/make-big-team.tsx index b7e5cf17b403..a3a79f66fbb9 100644 --- a/shared/teams/new-team/wizard/make-big-team.tsx +++ b/shared/teams/new-team/wizard/make-big-team.tsx @@ -35,14 +35,24 @@ const MakeBigTeam = ({wizard: initialWizard}: Props) => { type="Card" firstItem={true} icon={} - body={Yes, make it a big teamWith multiple roles and channels. Big team chats appear in the lower section in the inbox.} + body={ + + Yes, make it a big team + With multiple roles and channels. Big team chats appear in the lower section in the inbox. + + } onClick={() => onSubmit(true)} /> } - body={No, keep it a simple conversation for nowYou can always make it a big team later.} + body={ + + No, keep it a simple conversation for now + You can always make it a big team later. + + } onClick={() => onSubmit(false)} /> diff --git a/shared/teams/new-team/wizard/new-team-info.tsx b/shared/teams/new-team/wizard/new-team-info.tsx index fe33e9dc0d68..83a2ff57e1f3 100644 --- a/shared/teams/new-team/wizard/new-team-info.tsx +++ b/shared/teams/new-team/wizard/new-team-info.tsx @@ -169,7 +169,7 @@ const NewTeamInfo = ({wizard: teamWizardState}: Props) => { + Make it an open team Anyone can join without admin approval. {(!isMobile || openTeam) && ( diff --git a/shared/teams/role-picker.tsx b/shared/teams/role-picker.tsx index a485139e0755..2b66f908c378 100644 --- a/shared/teams/role-picker.tsx +++ b/shared/teams/role-picker.tsx @@ -87,7 +87,7 @@ const RoleRow = (p: RoleRowProps) => { direction="vertical" fullWidth={true} alignItems="flex-start" - relative={true} + relative={true} style={p.selected ? undefined : styles.row} > {p.disabledReason ? ( @@ -233,12 +233,12 @@ const roleAbilities = ( direction="horizontal" alignItems="flex-start" fullWidth={true} - style={{ - flexShrink: 0, - ...(addFinalPadding && i === abilities.length - 1 + noShrink={true} + style={ + addFinalPadding && i === abilities.length - 1 ? {paddingBottom: Kb.Styles.globalMargins.tiny} - : undefined), - }} + : undefined + } > ) : ( - + { const sections: Array
= nodesNotIn.length > 0 ? [nodesInSection, nodesNotInSection] : [nodesInSection] return ( - + {errors.length > 0 && ( {loading ? : <>} @@ -866,10 +866,6 @@ const BlockDropdown = (props: {username: string}) => { } const styles = Kb.Styles.styleSheetCreate(() => ({ - container: { - ...Kb.Styles.globalStyles.flexBoxColumn, - width: '100%', - }, contentCollapsedFixedHeight: Kb.Styles.platformStyles({ common: {height: 48}, isPhone: {height: 64}, @@ -926,10 +922,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ isElectron: {paddingBottom: Kb.Styles.globalMargins.tiny}, isTablet: {paddingBottom: Kb.Styles.globalMargins.tiny}, }), - membershipIcon: { - flexShrink: 0, - paddingTop: Kb.Styles.globalMargins.xtiny, - }, membershipTeamText: {justifyContent: 'center'}, membershipTeamTextExpanded: Kb.Styles.platformStyles({ isMobile: {paddingTop: Kb.Styles.globalMargins.tiny}, diff --git a/shared/teams/team/rows/bot-row/bot.tsx b/shared/teams/team/rows/bot-row/bot.tsx index eba0116eba35..c44c99d8b2bb 100644 --- a/shared/teams/team/rows/bot-row/bot.tsx +++ b/shared/teams/team/rows/bot-row/bot.tsx @@ -70,8 +70,8 @@ export const TeamBotRow = (props: Props) => { // TODO: switch this to a ListItem so that we get dividers, free styling, etc return ( - - + + { {descriptionLabel} - + {(active || C.isLargeScreen) && ( // Desktop & mobile large screen - display on the far right of the first row // Also when user is active @@ -115,9 +115,6 @@ export const TeamBotRow = (props: Props) => { const styles = Kb.Styles.styleSheetCreate(() => ({ container: { backgroundColor: Kb.Styles.globalColors.white, - flex: 1, - height: '100%', - position: 'relative', }, containerReset: { backgroundColor: Kb.Styles.globalColors.blueLighter2, @@ -125,7 +122,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ fullNameLabel: {marginRight: Kb.Styles.globalMargins.xtiny}, innerContainerTop: { ...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall, Kb.Styles.globalMargins.small), - flexShrink: 0, height: isMobile ? 56 : 48, }, menuButtonDesktop: { @@ -143,7 +139,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }, menuIconContainer: { flexShrink: 1, - height: '100%', }, nameContainer: {marginLeft: Kb.Styles.globalMargins.small}, })) diff --git a/shared/teams/team/rows/invite-row/invite.tsx b/shared/teams/team/rows/invite-row/invite.tsx index 7bc6b7260bfd..a4e726236c35 100644 --- a/shared/teams/team/rows/invite-row/invite.tsx +++ b/shared/teams/team/rows/invite-row/invite.tsx @@ -22,13 +22,11 @@ export const TeamInviteRow = (props: Props) => { type="Small" icon={} body={ - - - - {label} - - {!!text2 && {text2}} - + + + {label} + + {!!text2 && {text2}} } action={} diff --git a/shared/teams/team/rows/invite-row/request.tsx b/shared/teams/team/rows/invite-row/request.tsx index 1edb0f968b3b..ac02cf11c098 100644 --- a/shared/teams/team/rows/invite-row/request.tsx +++ b/shared/teams/team/rows/invite-row/request.tsx @@ -88,34 +88,32 @@ export const TeamRequestRow = (props: Props) => { type="Small" icon={} body={ - - - - - - {isMobile ? ( - C.isLargeScreen && ( - - {fullName !== '' && `${fullName}`} - - ) - ) : ( - - {fullName !== '' && `${fullName} • `} - {reset - ? fullName - ? 'Reset their account' - : 'reset their account' - : formatTimeRelativeToNow(ctime * 1000)} + + + + + {isMobile ? ( + C.isLargeScreen && ( + + {fullName !== '' && `${fullName}`} - )} - - {!!props.error && {props.error}} + ) + ) : ( + + {fullName !== '' && `${fullName} • `} + {reset + ? fullName + ? 'Reset their account' + : 'reset their account' + : formatTimeRelativeToNow(ctime * 1000)} + + )} + {!!props.error && {props.error}} } action={ diff --git a/shared/teams/team/rows/member-row.tsx b/shared/teams/team/rows/member-row.tsx index bf00ffc3a98d..7628c80e0b69 100644 --- a/shared/teams/team/rows/member-row.tsx +++ b/shared/teams/team/rows/member-row.tsx @@ -8,7 +8,7 @@ import {useSafeNavigation} from '@/util/safe-navigation' import {useCurrentUserState} from '@/stores/current-user' import {navToProfile} from '@/constants/router' import {useLoadedTeam} from '../use-loaded-team' -import {reAddToTeam, removeMember} from '@/teams/actions' +import {removeMember} from '@/teams/actions' import {getRolePickerDisabledReasons} from '@/teams/role-picker-utils' export type Props = { @@ -19,14 +19,11 @@ export type Props = { onChat: () => void onClick: () => void onOpenProfile: () => void - onReAddToTeam: () => void onRemoveFromTeam: () => void roleType: T.Teams.TeamRoleType status: T.Teams.MemberStatus teamID: T.Teams.TeamID username: string - waitingForAdd: boolean - waitingForRemove: boolean you: string youCanEditRole: boolean youCanManageMembers: boolean @@ -78,7 +75,6 @@ export const TeamMemberRow = (props: Props) => { resetLabel = ' • Needs to update Keybase' } - const roleLabel = !!active && Teams.typeToLabel[roleType] const isYou = props.you === props.username const teamID = props.teamID @@ -92,8 +88,7 @@ export const TeamMemberRow = (props: Props) => { } const canEnterMemberPage = props.youCanManageMembers && active && !props.needsPUK - const pOnClick = props.onClick - const onClick = anySelected ? () => onSelect(!selected) : canEnterMemberPage ? pOnClick : undefined + const onClick = anySelected ? () => onSelect(!selected) : canEnterMemberPage ? props.onClick : undefined const checkCircle = ( { - - - - + {fullNameLabel} {crown} @@ -145,7 +137,7 @@ export const TeamMemberRow = (props: Props) => { label={ {crown} - {roleLabel} + {!!active && Teams.typeToLabel[roleType]} } /> @@ -165,7 +157,7 @@ export const TeamMemberRow = (props: Props) => { title: 'Add to channels...', }, ...(youCanEditRole - ? [{icon: 'iconfont-crown-admin', onClick: pOnClick, title: 'Edit role...'}] + ? [{icon: 'iconfont-crown-admin', onClick: props.onClick, title: 'Edit role...'}] : []), ] as Kb.MenuItems) : []), @@ -306,8 +298,6 @@ const Container = (ownProps: OwnProps) => { role => role !== roleType && disabledReasons[role] === undefined ) const youCanEditRole = youCanManageMembers && status === 'active' && !needsPUK && hasEditableRoleChoice - const waitingForAdd = C.Waiting.useAnyWaiting(C.waitingKeyTeamsAddMember(teamID, username)) - const waitingForRemove = C.Waiting.useAnyWaiting(C.waitingKeyTeamsRemoveMember(teamID, username)) const setUserBlocks = C.useRPC(T.RPCGen.userSetUserBlocksRpcPromise) const onBlock = () => { if (username) { @@ -340,14 +330,11 @@ const Container = (ownProps: OwnProps) => { onChat={onChat} onClick={onClick} onOpenProfile={onOpenProfile} - onReAddToTeam={() => reAddToTeam(teamID, username)} onRemoveFromTeam={() => removeMember(teamID, username)} roleType={roleType} status={status} teamID={teamID} username={username} - waitingForAdd={waitingForAdd} - waitingForRemove={waitingForRemove} you={you} youCanEditRole={youCanEditRole} youCanManageMembers={youCanManageMembers} diff --git a/shared/teams/team/rows/subteam-row/add.tsx b/shared/teams/team/rows/subteam-row/add.tsx index 2f86dfdf07d2..50a025982f11 100644 --- a/shared/teams/team/rows/subteam-row/add.tsx +++ b/shared/teams/team/rows/subteam-row/add.tsx @@ -17,7 +17,6 @@ const AddSubteam = ({setSubteamFilter, subteamFilter, teamID}: Props) => { name: 'teamWizard2TeamInfo', params: {wizard: makeNewTeamWizard({parentTeamID: teamID, teamType: 'subteam'})}, }) - const onChangeFilter = (filter: string) => setSubteamFilter(filter) // clear filter on unmount React.useEffect( () => () => { @@ -32,7 +31,7 @@ const AddSubteam = ({setSubteamFilter, subteamFilter, teamID}: Props) => { { const {disabledChannels, onCancel, onComplete, teamID} = props const [filter, setFilter] = React.useState('') const filterLCase = filter.toLowerCase() - const onChangeFilter = (value: string) => setFilter(value) const {channelMetas} = useAllChannelMetas(teamID) const channels = [...channelMetas.values()].map(ci => ({ @@ -65,7 +64,7 @@ const ChannelPopup = (props: Props) => { channelsFiltered.length )}`} size="full-width" - onChange={onChangeFilter} + onChange={setFilter} style={styles.searchFilter} placeholderCentered={true} icon="iconfont-search" diff --git a/shared/teams/team/settings-tab/index.tsx b/shared/teams/team/settings-tab/index.tsx index d46024cd5ef7..4adbfd31b113 100644 --- a/shared/teams/team/settings-tab/index.tsx +++ b/shared/teams/team/settings-tab/index.tsx @@ -38,7 +38,7 @@ const SetMemberShowcase = (props: { newPublicityMember: boolean setNewPublicityMember: (s: boolean) => void }) => ( - + ({ maxWidth: 600, padding: Kb.Styles.globalMargins.small, }, - memberShowcase: {alignItems: 'flex-start', paddingRight: Kb.Styles.globalMargins.small}, + memberShowcase: {paddingRight: Kb.Styles.globalMargins.small}, openDropdown: {width: 70}, openTeam: { flexShrink: 1, diff --git a/shared/tracker/assertion.tsx b/shared/tracker/assertion.tsx index 4104121d6d64..dadb5e74e795 100644 --- a/shared/tracker/assertion.tsx +++ b/shared/tracker/assertion.tsx @@ -442,16 +442,13 @@ 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, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small), } as const const styles = Kb.Styles.styleSheetCreate( () => ({ - container: {paddingBottom: 4, paddingTop: 4}, + container: {...Kb.Styles.paddingV(4)}, crypto: Kb.Styles.platformStyles({ isElectron: {display: 'inline-block', fontSize: 11, wordBreak: 'break-all'}, }), @@ -462,9 +459,7 @@ const styles = Kb.Styles.styleSheetCreate( // desktop is handled by css halfOpacity: Kb.Styles.platformStyles({isMobile: {opacity: 0.5}}), menuHeader: { - borderBottomColor: Kb.Styles.globalColors.black_10, - borderBottomWidth: 1, - borderStyle: 'solid', + ...Kb.Styles.bottomDivider(), padding: Kb.Styles.globalMargins.small, }, metaAssertion: {flexShrink: 0, paddingLeft: 20 + Kb.Styles.globalMargins.tiny * 2 - 4}, // icon spacing plus meta has 2 padding for some reason diff --git a/shared/tracker/bio.tsx b/shared/tracker/bio.tsx index ffd39bf2b1cd..01b1d3c9650f 100644 --- a/shared/tracker/bio.tsx +++ b/shared/tracker/bio.tsx @@ -129,10 +129,7 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.red_20, borderRadius: Kb.Styles.borderRadius, margin: Kb.Styles.globalMargins.small, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small), }, bold: {...Kb.Styles.globalStyles.fontBold}, container: {backgroundColor: Kb.Styles.globalColors.white}, diff --git a/shared/tracker/index.desktop.tsx b/shared/tracker/index.desktop.tsx index a8087c7b65fd..fa896fa85374 100644 --- a/shared/tracker/index.desktop.tsx +++ b/shared/tracker/index.desktop.tsx @@ -267,7 +267,7 @@ const Tracker = (props: Props) => { - + ({ - assertionRow: {paddingBottom: 4, paddingTop: 4}, + assertionRow: {...Kb.Styles.paddingV(4)}, assertionSite: {color: Kb.Styles.globalColors.black_20}, assertionTextContainer: Kb.Styles.platformStyles({ common: {flexGrow: 1, flexShrink: 1, marginTop: -1}, @@ -344,8 +341,7 @@ const styles = Kb.Styles.styleSheetCreate( assertions: { backgroundColor: Kb.Styles.globalColors.white, flexShrink: 0, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.small), paddingTop: Kb.Styles.globalMargins.small, }, avatar: {borderRadius: '50%'} as const, @@ -368,10 +364,7 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.red_20, borderRadius: Kb.Styles.borderRadius, margin: Kb.Styles.globalMargins.small, - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingLeft: Kb.Styles.globalMargins.small, - paddingRight: Kb.Styles.globalMargins.small, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small), }, bold: {...Kb.Styles.globalStyles.fontBold}, buttons: Kb.Styles.platformStyles({ @@ -380,7 +373,6 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.white_90, flexShrink: 0, height: barHeight, - position: 'absolute', top: undefined, }, isElectron: {boxShadow: 'rgba(0, 0, 0, 0.15) 0px 0px 3px'}, @@ -396,17 +388,14 @@ const styles = Kb.Styles.styleSheetCreate( backgroundColor: Kb.Styles.globalColors.white, }, fullNameContainer: { - paddingLeft: Kb.Styles.globalMargins.mediumLarge, - paddingRight: Kb.Styles.globalMargins.mediumLarge, + ...Kb.Styles.paddingH(Kb.Styles.globalMargins.mediumLarge), }, header: { - paddingBottom: Kb.Styles.globalMargins.tiny, - paddingTop: Kb.Styles.globalMargins.tiny, + ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny), position: 'absolute', zIndex: 9, }, metaContainer: {flexShrink: 0, paddingLeft: 20 + Kb.Styles.globalMargins.tiny * 2 - 4}, - nameWithIconContainer: {alignSelf: 'center' as const}, reason: Kb.Styles.platformStyles({ common: { ...reason, diff --git a/shared/unlock-folders/device-list.desktop.tsx b/shared/unlock-folders/device-list.desktop.tsx index 0b38667a9f39..1e741fc92dde 100644 --- a/shared/unlock-folders/device-list.desktop.tsx +++ b/shared/unlock-folders/device-list.desktop.tsx @@ -82,8 +82,7 @@ const styles = Kb.Styles.styleSheetCreate( infoText: { marginBottom: 8, marginTop: 5, - paddingLeft: 55, - paddingRight: 55, + ...Kb.Styles.paddingH(55), }, }) as const ) diff --git a/shared/unlock-folders/index.desktop.tsx b/shared/unlock-folders/index.desktop.tsx index a8575e5054de..ed65e81311f3 100644 --- a/shared/unlock-folders/index.desktop.tsx +++ b/shared/unlock-folders/index.desktop.tsx @@ -44,7 +44,7 @@ const UnlockFolders = (props: Props) => { } return ( - + @@ -58,7 +58,6 @@ const styles = Kb.Styles.styleSheetCreate( ({ container: { height: 300, - position: 'relative', width: 500, }, diff --git a/shared/wallets/index.tsx b/shared/wallets/index.tsx index ee515b3a77b5..76314ff21e35 100644 --- a/shared/wallets/index.tsx +++ b/shared/wallets/index.tsx @@ -38,6 +38,7 @@ const Row = (p: {account: Account}) => { direction="vertical" alignSelf="flex-start" alignItems="flex-start" + noShrink={true} style={styles.row} fullWidth={isMobile} > @@ -195,7 +196,6 @@ const styles = Kb.Styles.styleSheetCreate( common: { backgroundColor: Kb.Styles.globalColors.blueGreyLight, borderRadius: Kb.Styles.borderRadius, - flexShrink: 0, }, isElectron: { padding: 8, diff --git a/shared/wallets/really-remove-account.tsx b/shared/wallets/really-remove-account.tsx index 08f6bb9219fd..53763e3ee567 100644 --- a/shared/wallets/really-remove-account.tsx +++ b/shared/wallets/really-remove-account.tsx @@ -119,8 +119,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ toastText: Kb.Styles.platformStyles({ common: {color: Kb.Styles.globalColors.white}, isMobile: { - paddingLeft: 10, - paddingRight: 10, + ...Kb.Styles.paddingH(10), paddingTop: 5, }, }), diff --git a/shared/wallets/wallet-popup.tsx b/shared/wallets/wallet-popup.tsx index 9f5ea9c52481..dee04d16b8db 100644 --- a/shared/wallets/wallet-popup.tsx +++ b/shared/wallets/wallet-popup.tsx @@ -91,10 +91,10 @@ const styles = Kb.Styles.styleSheetCreate(() => ({ }), scrollView: { ...Kb.Styles.globalStyles.flexBoxColumn, - flexGrow: 1, + ...Kb.Styles.globalStyles.flexGrow, ...Kb.Styles.size('100%'), }, - scrollViewContentContainer: {...Kb.Styles.globalStyles.flexBoxColumn, flexGrow: 1}, + scrollViewContentContainer: {...Kb.Styles.globalStyles.flexBoxColumn, ...Kb.Styles.globalStyles.flexGrow}, })) export const walletModalIconStyle = Kb.Styles.platformStyles({