Simplify UI across shared/ — Box2 props, style utilities, dead code#29274
Merged
chrisnojima merged 1 commit intoJun 1, 2026
Merged
Conversation
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
There was a problem hiding this comment.
Pull request overview
Batch UI/style simplification across shared/ to standardize layout patterns by moving common layout/style concerns into Box2 props and Styles helper utilities, while removing redundant wrappers and dead style entries. This aligns many screens/components with the newer style-utility approach (e.g. Styles.size, paddingH/V, marginH/V, bottomDivider, border, rounded, etc.) and reduces duplicated inline styling.
Changes:
- Migrated frequent layout concerns (e.g.
alignItems,flexShrink,position: 'relative',overflow: 'hidden', padding/margin) from style objects intoBox2props and sharedStylesutilities. - Removed redundant wrapper
Box2layers and unused/dead style keys; collapsed nested layout where props can be applied directly. - Standardized common-adapters styling (e.g. spacers, dividers, rounded corners) to shared helpers for consistency.
Reviewed changes
Copilot reviewed 196 out of 199 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| shared/wallets/wallet-popup.tsx | Replaced inline flexGrow with shared flexGrow style utility usage. |
| shared/wallets/really-remove-account.tsx | Simplified mobile padding via paddingH. |
| shared/wallets/index.tsx | Moved flexShrink: 0 to Box2 noShrink prop. |
| shared/unlock-folders/index.desktop.tsx | Moved position: 'relative' into Box2 relative prop. |
| shared/unlock-folders/device-list.desktop.tsx | Simplified padding via paddingH. |
| shared/tracker/index.desktop.tsx | Consolidated layout props and replaced padding/border patterns with utilities. |
| shared/tracker/bio.tsx | Simplified padding with Styles.padding. |
| shared/tracker/assertion.tsx | Standardized padding/divider styles via helpers. |
| shared/teams/team/settings-tab/index.tsx | Moved alignItems from style into Box2 prop. |
| shared/teams/team/settings-tab/channel-popup.tsx | Inlined filter setter into onChange. |
| shared/teams/team/rows/subteam-row/add.tsx | Inlined filter setter into onChange. |
| shared/teams/team/rows/member-row.tsx | Removed unused props/variables and collapsed redundant wrappers. |
| shared/teams/team/rows/invite-row/request.tsx | Collapsed nested layout containers and centered content via props. |
| shared/teams/team/rows/invite-row/invite.tsx | Collapsed nested layout containers and centered content via props. |
| shared/teams/team/rows/bot-row/bot.tsx | Moved flex/height/relative concerns into Box2 props; removed dead styles. |
| shared/teams/team/member/index.new.tsx | Removed dead styles and moved full sizing to props. |
| shared/teams/team/member/add-to-channels.tsx | Replaced flexOne style with flex={1} prop. |
| shared/teams/role-picker.tsx | Fixed indentation, replaced borders with bottomDivider, moved shrink behavior to props. |
| shared/teams/new-team/wizard/new-team-info.tsx | Replaced flexOne style with flex={1} prop. |
| shared/teams/new-team/wizard/make-big-team.tsx | Expanded inline JSX for readability; no functional change. |
| shared/teams/main/team-row.tsx | Replaced manual size/padding with Styles.size / paddingV. |
| shared/teams/main/footer.tsx | Removed redundant wrappers; replaced flexOne style with flex={1}. |
| shared/teams/join-team/join-from-invite.tsx | Replaced flexOne style with flex={1}. |
| shared/teams/external-team.tsx | Moved container padding into Box2 prop; simplified platformStyles usage. |
| shared/teams/confirm-modals/delete-channel.tsx | Passed navigateUp directly as onCancel; removed wrapper function. |
| shared/teams/confirm-modals/confirm-remove-from-channel.tsx | Passed safeNavigateUp directly as onCancel; removed wrapper function. |
| shared/teams/common/selection-popup.tsx | Removed redundant branching in channel selection popup (single selectable tab). |
| shared/teams/add-members-wizard/confirm.tsx | Pure formatting/indentation cleanup and minor function formatting. |
| shared/teams/add-members-wizard/add-from-where.tsx | Expanded inline JSX for readability; no functional change. |
| shared/team-building/team-box.tsx | Standardized border divider via bottomDivider. |
| shared/team-building/service-tab-bar.tsx | Moved flexShrink into props; standardized divider/border/padding utilities. |
| shared/team-building/recs-and-recos.tsx | Standardized padding via Styles.padding. |
| shared/team-building/page.tsx | Simplified overlay padding with paddingH. |
| shared/team-building/email-search.tsx | Removed redundant empty common style key. |
| shared/team-building/contacts.tsx | Moved alignment into props and standardized margins via helpers. |
| shared/signup/phone-number/verify.tsx | Replaced flex: 1 with shared flexOne utility object. |
| shared/signup/common.tsx | Replaced header border styles with bottomDivider. |
| shared/settings/sub-nav/left-nav.tsx | Formatting cleanup; replaced flexBoxColumn with explicit flexDirection. |
| shared/settings/screenprotector/index.tsx | Moved padding into Box2 prop; removed dead stylesheet. |
| shared/settings/proxy.tsx | Moved padding into Box2 prop; removed redundant style keys. |
| shared/settings/password.tsx | Formatting cleanup for footer button layout. |
| shared/settings/notifications/render.tsx | Replaced separate justify/align with centerChildren. |
| shared/settings/notifications/push-prompt.tsx | Formatting cleanup for footer button layout. |
| shared/settings/notifications/index.tsx | Replaced flex: 1 with shared flexOne utility object. |
| shared/settings/logout.tsx | Standardized padding/margins via helpers. |
| shared/settings/group.tsx | Standardized vertical margin via marginV. |
| shared/settings/files/index.tsx | Standardized spinner size and padding via helpers. |
| shared/settings/feedback/index.tsx | Removed redundant wrapper Box2 nodes around inputs. |
| shared/settings/display.tsx | Moved padding into Box2 prop; removed dead stylesheet. |
| shared/settings/delete-confirm/check-passphrase.tsx | Standardized padding helper usage. |
| shared/settings/db-nuke.confirm.tsx | Moved padding into Box2 prop. |
| shared/settings/contacts-joined.tsx | Standardized margins via marginV / marginH. |
| shared/settings/chat.tsx | Moved alignSelf into props; removed redundant fragments and dead style key. |
| shared/settings/archive/modal.tsx | Removed redundant wrapper Box2 around text. |
| shared/settings/archive/index.tsx | Replaced {flex: 1} inline styles with flex prop; removed redundant alignSelf. |
| shared/settings/advanced.tsx | Standardized margins via marginV. |
| shared/settings/account/index.tsx | Replaced flexGrow: 1 with shared flexGrow utility object. |
| shared/settings/account/add-modals.tsx | Formatting cleanup; simplified padding assignment. |
| shared/settings/about.tsx | Replaced separate justify/align with centerChildren. |
| shared/provision/select-other-device.tsx | Standardized padding via paddingH. |
| shared/provision/error.tsx | Minor ordering cleanup in styles object. |
| shared/provision/code-page/qr-scan/not-authorized.tsx | Replaced separate justify/align with centerChildren. |
| shared/provision/code-page/qr-image.tsx | Replaced inline {height,width} with Styles.size. |
| shared/provision/code-page/container.tsx | Moved overflow/relative into Box2 props; standardized size/margin helpers. |
| shared/profile/user/teams/team-section.tsx | Removed redundant fullWidth style key and dead style entry. |
| shared/profile/user/teams/team-row.tsx | Standardized loading icon size via Styles.size. |
| shared/profile/user/shared-teams.tsx | Standardized vertical padding via paddingV. |
| shared/profile/user/index.tsx | Moved alignment/sizing to props; removed dead style keys. |
| shared/profile/showcase-team-offer.tsx | Standardized padding/margins via helpers. |
| shared/profile/revoke.tsx | Standardized icon sizing via Styles.size. |
| shared/profile/pgp/import/index.tsx | Standardized margins via marginV / marginH. |
| shared/profile/pgp/choice/index.tsx | Replaced hardcoded borderRadius with shared rounded style. |
| shared/profile/generic/proofs-list.tsx | Moved padding into props; standardized borders/sizes/margins with helpers. |
| shared/profile/edit-avatar/index.tsx | Removed redundant wrapper; removed redundant width style on button. |
| shared/profile/add-to-team.tsx | Ensured inner list container is full-width via prop; standardized margins. |
| shared/people/item.tsx | Replaced manual divider style with bottomDivider. |
| shared/people/follow-notification.tsx | Standardized padding via paddingH; removed redundant flexBoxRow spread. |
| shared/people/announcement.tsx | Standardized icon sizing via Styles.size. |
| shared/menubar/main2.desktop.tsx | Removed adapter import; replaced flexBoxColumn with explicit flex styling. |
| shared/menubar/index.desktop.tsx | Removed redundant wrapper; moved padding into props; standardized padding utilities. |
| shared/login/signup/common.tsx | Standardized padding via paddingH. |
| shared/login/reset/modal.tsx | Replaced flexOne usage with flex props; simplified platform style. |
| shared/login/relogin/index.tsx | Removed redundant width styles; replaced flexOne style with flex props. |
| shared/login/relogin/dropdown.native.tsx | Replaced flexBoxRow with explicit flexDirection and padding helpers. |
| shared/login/recover-password/error-modal.tsx | Moved padding into Box2 prop; removed dead style key. |
| shared/incoming-share/index.tsx | Collapsed nested containers; moved flex to outer container. |
| shared/git/new-repo.tsx | Moved full-height/flex sizing into Box2 props; removed redundant styles. |
| shared/git/delete-repo.tsx | Moved full-height/flex sizing into Box2 props; removed redundant styles. |
| shared/fs/top-bar/sync-toggle.tsx | Standardized padding via paddingH. |
| shared/fs/top-bar/loading.tsx | Standardized size via Styles.size. |
| shared/fs/simple-screens/oops.tsx | Simplified margins; used flexGrow style directly. |
| shared/fs/nav-header/title.tsx | Standardized padding via paddingH. |
| shared/fs/nav-header/mobile-header.tsx | Replaced manual divider + minHeight with bottomDivider(44). |
| shared/fs/filepreview/text-view.tsx | Standardized padding via Styles.padding. |
| shared/fs/filepreview/normal-preview.tsx | Consolidated duplicated platformStyles into common + overrides. |
| shared/fs/filepreview/default-view.tsx | Ensured container can grow with flex={1}; simplified style keys. |
| shared/fs/common/sfmi-popup.tsx | Standardized padding via paddingH. |
| shared/fs/common/pie-slice.tsx | Standardized sizing via Styles.size. |
| shared/fs/common/item-icon.tsx | Standardized 0-size and badge sizing via Styles.size. |
| shared/fs/browser/rows/rows.tsx | Removed emptyContainer style key; used flexGrow style directly. |
| shared/fs/browser/rows/common.tsx | Standardized horizontal margins via marginH. |
| shared/fs/browser/index.tsx | Replaced inline {flexGrow: 1} with shared flexGrow style. |
| shared/fs/browser/destination-picker.tsx | Standardized padding via paddingH. |
| shared/fs/banner/system-file-manager-integration-banner/kext-permission-popup.tsx | Standardized padding via Styles.padding. |
| shared/devices/paper-key.tsx | Moved padding into Box2 prop; removed redundant style padding. |
| shared/devices/device-revoke.tsx | Standardized flexGrow/padding via utilities. |
| shared/devices/device-page.tsx | Standardized sizing via Styles.size. |
| shared/devices/add-device.tsx | Moved padding into Box2 prop; removed dead container style key. |
| shared/crypto/sub-nav/index.tsx | Standardized padding via paddingH. |
| shared/crypto/recipients.tsx | Standardized padding via Styles.padding; removed redundant flexBoxRow usage. |
| shared/crypto/output.tsx | Standardized padding via paddingH. |
| shared/crypto/input.tsx | Standardized padding via paddingH. |
| shared/common-adapters/toast.tsx | Removed fixed width from native toast container styling. |
| shared/common-adapters/switch-toggle.tsx | Standardized sizing via Styles.size. |
| shared/common-adapters/swipeable-row.native.tsx | Moved inline styles into stylesheet; reused fillAbsolute and overflow style. |
| shared/common-adapters/search-filter.tsx | Moved conditional width style into stylesheet; used alignItems prop. |
| shared/common-adapters/radio-button.tsx | Standardized vertical padding via paddingV. |
| shared/common-adapters/progress-bar.tsx | Replaced hardcoded borderRadius with shared rounded style. |
| shared/common-adapters/popup/index.tsx | Replaced hardcoded borderRadius with shared rounded style. |
| shared/common-adapters/name-with-icon.tsx | Replaced inline {height,width} with Styles.size. |
| shared/common-adapters/info-note.tsx | Deduped line styles via stylesheet and collapseStyles. |
| shared/common-adapters/floating-menu/menu-layout/index.tsx | Deduped icon badge style and standardized margins/paddings via helpers. |
| shared/common-adapters/emoji/native-emoji.tsx | Standardized sizing via Styles.size. |
| shared/common-adapters/emoji/custom-emoji.tsx | Standardized sizing via Styles.size. |
| shared/common-adapters/drag-and-drop.tsx | Moved position: relative into Box2 prop; simplified container style merging. |
| shared/common-adapters/copyable-text.tsx | Moved inline text/toast styles into stylesheet; standardized padding/rounded helper usage. |
| shared/common-adapters/copy-text.tsx | Standardized margins/padding via helpers. |
| shared/common-adapters/button.tsx | Standardized progress indicator sizing via Styles.size. |
| shared/common-adapters/button-bar.tsx | Converted spacer sizing to Styles.size + noShrink. |
| shared/common-adapters/bottom-accessory.tsx | Moved inline container style into stylesheet; used native cast helper. |
| shared/common-adapters/banner.tsx | Standardized padding via Styles.padding. |
| shared/common-adapters/badge.tsx | Standardized horizontal padding via paddingH. |
| shared/chat/send-to-chat/index.tsx | Standardized padding via paddingH. |
| shared/chat/selectable-small-team.tsx | Replaced flexOne style with flex={1} prop. |
| shared/chat/payments/status/index.tsx | Standardized padding via paddingH. |
| shared/chat/location-map.tsx | Simplified centering offsets using marginH / marginV. |
| shared/chat/inbox/unread-shortcut.tsx | Standardized padding via paddingV. |
| shared/chat/inbox/search-row.tsx | Removed redundant height style; ensured fullHeight via prop. |
| shared/chat/inbox/row/teams-divider.tsx | Standardized margins via marginH; removed redundant flexBoxColumn. |
| shared/chat/inbox/row/start-new-chat.tsx | Standardized padding via paddingH. |
| shared/chat/inbox/row/small-team/index.tsx | Removed redundant width: '100%' from fillAbsolute child. |
| shared/chat/inbox/row/big-teams-divider.tsx | Standardized padding via paddingH. |
| shared/chat/inbox/row/big-team-header.tsx | Standardized margins via marginH. |
| shared/chat/inbox/new-chat-button.tsx | Standardized padding via paddingH. |
| shared/chat/inbox/index.tsx | Removed redundant width: '100%'; standardized padding via helpers. |
| shared/chat/inbox/filter-row.tsx | Standardized padding via paddingH. |
| shared/chat/inbox-and-conversation-header.tsx | Replaced flexOne style with flex={1} prop. |
| shared/chat/emoji-picker/index.tsx | Standardized bookmark padding; removed redundant flexBoxColumn in emoji style. |
| shared/chat/emoji-picker/container.tsx | Replaced flexOne style with flex={1} prop; standardized paddingV. |
| shared/chat/delete-history-warning.tsx | Standardized margins via marginH / marginV. |
| shared/chat/create-channel/index.tsx | Standardized padding via paddingH. |
| shared/chat/conversation/search.tsx | Moved flexShrink: 0 into noShrink prop; removed dead style keys. |
| shared/chat/conversation/reply-preview.tsx | Standardized margins via marginH; standardized title padding. |
| shared/chat/conversation/pinned-message.tsx | Standardized padding via Styles.padding. |
| shared/chat/conversation/normal/index.tsx | Moved overlay style into stylesheet (overlayTop). |
| shared/chat/conversation/messages/user-notice.tsx | Removed unused prop from type. |
| shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx | Simplified negative margins to margin: -32. |
| shared/chat/conversation/messages/text/coinflip/results.tsx | Removed redundant alignItems="center" when centerChildren is present. |
| shared/chat/conversation/messages/text/coinflip/participants.tsx | Standardized padding/margins via helpers. |
| shared/chat/conversation/messages/system-simple-to-complex/container.tsx | Moved inline styles into stylesheet for reuse. |
| shared/chat/conversation/messages/system-profile-reset-notice.tsx | Moved repeated inline color style into stylesheet. |
| shared/chat/conversation/messages/system-git-push/container.tsx | Standardized margins via marginV. |
| shared/chat/conversation/messages/separator.tsx | Moved relative positioning into Box2 prop; removed redundant style wrapper. |
| shared/chat/conversation/messages/retention-notice.tsx | Standardized padding via Styles.padding. |
| shared/chat/conversation/messages/reset-user.tsx | Moved alignment/fullWidth into props; simplified styles. |
| shared/chat/conversation/messages/reactions-rows.tsx | Moved alignItems into props; removed dead style key. |
| shared/chat/conversation/messages/reaction-tooltip.tsx | Moved centering/shrink behavior into props; standardized padding. |
| shared/chat/conversation/messages/placeholder/wrapper.tsx | Moved alignment/fullWidth into props; removed redundant style keys. |
| shared/chat/conversation/messages/message-popup/reactionitem.tsx | Moved alignment into props; standardized padding via paddingH. |
| shared/chat/conversation/messages/message-popup/header.tsx | Removed redundant wrappers; standardized divider + padding utilities. |
| shared/chat/conversation/messages/message-popup/exploding-header.tsx | Reduced branching; standardized repeated styles into stylesheet. |
| shared/chat/conversation/messages/emoji-row.tsx | Standardized margins via marginV and sizing via size. |
| shared/chat/conversation/messages/account-payment/container.tsx | Moved alignment into props; removed dead style key. |
| shared/chat/conversation/list-area/jump-to-recent.tsx | Ensured fullWidth via prop; removed redundant width in style. |
| shared/chat/conversation/input-area/suggestors/common.tsx | Standardized padding via Styles.padding. |
| shared/chat/conversation/input-area/preview.tsx | Standardized padding via paddingV. |
| shared/chat/conversation/input-area/normal/input.tsx | Standardized border/margins via helpers; standardized sizing via size. |
| shared/chat/conversation/input-area/filepicker-popup/index.tsx | Moved alignment into props; standardized paddingV. |
| shared/chat/conversation/info-panel/settings/min-writer-role.tsx | Moved alignment/fullWidth into props; removed redundant style keys. |
| shared/chat/conversation/info-panel/menu.tsx | Replaced manual divider style with bottomDivider; moved alignSelf style into stylesheet. |
| shared/chat/conversation/info-panel/index.tsx | Removed redundant style merge; relied on container style + centerChildren. |
| shared/chat/conversation/info-panel/header.tsx | Moved row alignment into props; standardized margins/padding helpers. |
| shared/chat/conversation/info-panel/bot.tsx | Standardized margins via marginH / marginV. |
| shared/chat/conversation/info-panel/attachments.tsx | Moved alignSelf into props; standardized icon size via size. |
| shared/chat/conversation/info-panel/add-to-channel.tsx | Standardized margins via marginH / marginV. |
| shared/chat/conversation/info-panel/add-people.tsx | Standardized margins via marginH. |
| shared/chat/conversation/header-area/index.tsx | Moved shrink and alignment into props; standardized padding helpers. |
| shared/chat/conversation/giphy/index.tsx | Standardized margins via marginH; standardized padding via helper. |
| shared/chat/conversation/command-status.tsx | Standardized margins via marginH. |
| shared/chat/conversation/command-markdown.tsx | Standardized padding/divider/border usage via helpers. |
| shared/chat/conversation/bottom-banner.tsx | Replaced centered helper spread with explicit justifyContent. |
| shared/chat/conversation/bot/search.tsx | Moved repeated padding style into stylesheet constant. |
| shared/chat/conversation/attachment-get-titles.tsx | Removed redundant alignItems: 'center' style key. |
| shared/chat/blocking/invitation-to-block.tsx | Standardized padding via paddingV. |
| shared/chat/blocking/block-modal.tsx | Moved alignment into props; removed redundant width/alignSelf style keys. |
| shared/chat/audio/audio-send.native.tsx | Moved alignment into props; removed redundant style key. |
| shared/app/runtime-stats.tsx | Removed redundant fragment wrapper; preserved layout. |
| shared/app/out-of-date.tsx | Moved padding into Box2 props; removed redundant padding from styles. |
| shared/app/global-errors.tsx | Replaced centered helper spread with centerChildren + gap props. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
chrisnojima
merged commit 0219c24
into
nojima/HOTPOT-next-670-clean-2
1 of 2 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
Net: -325 lines