Simplify UI across shared/ — Box2 props, style utilities, dead code (…#29275
Merged
chrisnojima merged 1 commit intoJun 1, 2026
Merged
Conversation
…29275) 143 files changed: move layout properties from stylesheets to Box2 props (fullWidth, padding, alignItems, noShrink, relative, flex, etc.), replace inline style objects with Kb.Styles utilities (size, paddingH/V, marginH/V, bottomDivider, textEllipsis), and remove dead style keys and unused imports. Also fix pre-existing `electron` → `isElectron` bug in add-to-channels.tsx.
There was a problem hiding this comment.
Pull request overview
This PR performs a broad UI cleanup across shared/ by migrating common layout styling (padding, sizing, alignment, width/height/relative positioning, overflow, shrink behavior) from ad-hoc style objects/styleSheet keys into Box2 props and standard Kb.Styles utilities. It also removes dead style keys/unused imports and fixes a platform-style key bug (electron → isElectron) in the teams “add to channels” flow.
Changes:
- Replace many
style-driven layout properties withBox2props (fullWidth,fullHeight,flex,padding,relative,noShrink,overflow,centerChildren, etc.). - Consolidate common style patterns using
Kb.Styleshelpers (e.g.size,paddingV/H,marginH/V,bottomDivider,topDivider). - Remove dead style keys/unused styles, and fix an incorrect
platformStyleskey (electron→isElectron) inshared/teams/team/member/add-to-channels.tsx.
Reviewed changes
Copilot reviewed 143 out of 143 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| shared/wallets/wallet-popup.tsx | Remove dead isMobile style key. |
| shared/unlock-folders/paper-key-input.desktop.tsx | Move container padding to Box2 padding prop; remove redundant style key. |
| shared/unlock-folders/index.desktop.tsx | Replace width: '100%' with Box2 fullWidth. |
| shared/unlock-folders/device-list.desktop.tsx | Replace align/justify with centerChildren convenience prop. |
| shared/teams/team/settings-tab/retention/index.tsx | Replace explicit width/height with Kb.Styles.size. |
| shared/teams/team/new-header.tsx | Remove redundant width: '100%' when fullWidth is used. |
| shared/teams/team/member/add-to-channels.tsx | Fix platformStyles key (electron→isElectron) and remove dead/empty styles. |
| shared/teams/new-team/wizard/add-subteam-members.tsx | Move alignItems into Box2 props; remove redundant style field. |
| shared/teams/new-team/index.tsx | Move container padding to Box2 padding; remove redundant container style. |
| shared/teams/main/banner.tsx | Move position: relative to Box2 relative. |
| shared/teams/join-team/container.tsx | Replace width: '100%' with fullWidth props on containers. |
| shared/teams/edit-team-description.tsx | Replace width: '100%' with fullWidth. |
| shared/teams/confirm-modals/really-leave-team/index.tsx | Replace width/height with Kb.Styles.size. |
| shared/teams/confirm-modals/confirm-kick-out.tsx | Move overflow: hidden to Box2 overflow prop. |
| shared/teams/common/enable-contacts.tsx | Move padding to Box2 padding; remove redundant style key. |
| shared/team-building/user-bubble.tsx | Move position: relative and alignment to Box2 props; simplify platformStyles. |
| shared/team-building/recs-and-recos.tsx | Move position: relative/width to Box2 props and remove redundant style entries. |
| shared/team-building/phone-search.tsx | Move padding from style to Box2 padding. |
| shared/team-building/email-search.tsx | Move padding from style to Box2 padding. |
| shared/signup/common.tsx | Replace styles.background with Box2 flex={1}. |
| shared/settings/typography.tsx | Replace repeated “samples/controls padding” styles with Box2 padding props; simplify styles. |
| shared/settings/proxy.tsx | Move popup padding to Box2 padding. |
| shared/settings/password.tsx | Move padding to Box2 padding. |
| shared/settings/notifications/render.tsx | Move flex: 1 to Box2 flex prop; simplify platform style. |
| shared/settings/notifications/push-prompt.tsx | Move padding to Box2 padding. |
| shared/settings/icons.tsx | Move padding to Box2 padding and use Kb.Styles.size for fixed-size cells. |
| shared/settings/files/index.tsx | Move padding to Box2 padding; remove redundant style key. |
| shared/settings/feedback/index.tsx | Move padding to Box2 padding; simplify platformStyles. |
| shared/settings/chat.tsx | Move flexShrink: 0 to Box2 noShrink. |
| shared/settings/archive/index.tsx | Replace shrink/size styles with noShrink and Kb.Styles.size. |
| shared/settings/account/index.tsx | Simplify fixed-size style to Kb.Styles.size. |
| shared/settings/account/email-phone-row.tsx | Replace height/width pair with Kb.Styles.size. |
| shared/router-v2/tab-bar.desktop.tsx | Move flexShrink: 0 to Box2 noShrink; replace width/height with Kb.Styles.size. |
| shared/router-v2/screen-layout-modal.desktop.tsx | Replace flex: 1 in styles with Box2 flex props. |
| shared/router-v2/header/index.desktop.tsx | Replace explicit borderBottom styles with Kb.Styles.bottomDivider. |
| shared/router-v2/account-switcher/index.tsx | Replace width: '100%' with Box2 fullWidth. |
| shared/provision/troubleshooting.tsx | Replace flexOne and flex: 1 style usage with Box2 flex props. |
| shared/provision/select-other-device.tsx | Move alignSelf: center to Box2 prop; simplify platformStyles. |
| shared/provision/paper-key.tsx | Replace width: '100%' with Box2 fullWidth. |
| shared/provision/code-page/container.tsx | Replace styles.codePageContainer with Box2 flex={1} and align props; simplify dead styles. |
| shared/profile/user/teams/teaminfo.tsx | Move padding to Box2 padding. |
| shared/profile/user/teams/team-section.tsx | Move alignment/flex from styles to Box2 props. |
| shared/profile/user/index.tsx | Move position: relative to Box2 relative and alignSelf to props; simplify styles. |
| shared/profile/showcase-team-offer.tsx | Move container flex/overflow to Box2 props; remove redundant style. |
| shared/profile/revoke.tsx | Move padding/fullWidth to Box2 props; remove redundant style fields. |
| shared/profile/generic/proofs-list.tsx | Move padding/relative to Box2 props and delete redundant style wrappers. |
| shared/profile/edit-profile.tsx | Move padding to Box2 padding; simplify platformStyles. |
| shared/profile/edit-avatar/index.tsx | Move flex/alignment/fullWidth to Box2 props; remove redundant style fields. |
| shared/profile/add-to-team.tsx | Move container/layout sizing to Box2 props; remove redundant style fields. |
| shared/menubar/index.desktop.tsx | Replace align/justify pair with centerChildren. |
| shared/login/reset/modal.tsx | Move flex: 1 to Box2 flex prop. |
| shared/login/reset/confirm.tsx | Move alignSelf/padding to Box2 props; simplify platformStyles. |
| shared/login/relogin/index.tsx | Move alignItems/padding/alignSelf to Box2 props; remove redundant style fields. |
| shared/login/recover-password/paper-key.tsx | Remove redundant width: '100%' style. |
| shared/git/row.tsx | Replace paddingTop/paddingBottom pair with Kb.Styles.paddingV. |
| shared/fs/nav-header/mobile-header.tsx | Move alignItems to Box2 prop; remove redundant style field. |
| shared/fs/footer/upload.tsx | Move overflow: hidden to Box2 overflow prop. |
| shared/fs/footer/upload-container.native.tsx | Move overflow: hidden to Box2 overflow prop. |
| shared/fs/footer/downloads.tsx | Move overflow: hidden to Box2 overflow prop. |
| shared/fs/filepreview/text-view.tsx | Move padding to Box2 padding. |
| shared/fs/filepreview/normal-preview.tsx | Replace width: '100%' with Box2 fullWidth. |
| shared/fs/common/path-item-action/confirm.tsx | Move padding to Box2 padding; remove redundant style key. |
| shared/fs/browser/rows/rows.tsx | Replace flexShrink: 0 with Box2 noShrink. |
| shared/fs/banner/system-file-manager-integration-banner/container.tsx | Move padding to Box2 padding. |
| shared/fs/banner/reset-banner.tsx | Move padding to Box2 padding. |
| shared/devices/paper-key.tsx | Move padding to Box2 padding. |
| shared/devices/add-device.tsx | Move padding to Box2 padding. |
| shared/crypto/sub-nav/left-nav.desktop.tsx | Replace flexShrink: 0 with Box2 noShrink. |
| shared/crypto/output.tsx | Replace flexShrink: 0 with Box2 noShrink; simplify placeholder centering. |
| shared/common-adapters/wave-button.tsx | Replace flexShrink: 0 style with Box2 noShrink. |
| shared/common-adapters/toast.tsx | Move alignItems: center to Box2 alignItems. |
| shared/common-adapters/tabs.tsx | Replace borderBottom styles with Styles.bottomDivider; move flex to prop. |
| shared/common-adapters/search-filter.tsx | Replace desktop width: '100%' style with fullWidth prop. |
| shared/common-adapters/rounded-box.tsx | Move alignSelf and padding from style to Box2 props. |
| shared/common-adapters/reload.tsx | Replace borderBottom styles with Styles.bottomDivider. |
| shared/common-adapters/profile-card.tsx | Move position: relative to Box2 relative. |
| shared/common-adapters/popup/index.tsx | Move position: relative to Box2 relative. |
| shared/common-adapters/markdown/maybe-mention/unknown.tsx | Move padding to Box2 padding. |
| shared/common-adapters/list-item.tsx | Move position: relative and card padding/overflow to Box2 props. |
| shared/common-adapters/input3.tsx | Move container padding/alignment to Box2 props. |
| shared/common-adapters/floating-picker.tsx | Move alignItems: stretch to Box2 props; simplify styles. |
| shared/common-adapters/floating-menu/menu-layout/index.tsx | Move position: relative/shrink/paddingV to Box2 props and Styles.paddingV. |
| shared/common-adapters/error-boundary.tsx | Move fill/padding/relative to Box2 props; remove redundant container style. |
| shared/common-adapters/emoji/custom-emoji.tsx | Move justifyContent: center to Box2 prop. |
| shared/common-adapters/dropdown.tsx | Move width/shrink/justify into Box2 props for menu items; simplify styles. |
| shared/common-adapters/divider.tsx | Move flex: 1 to Box2 flex prop. |
| shared/common-adapters/copy-text.tsx | Move alignment/fullWidth/relative to Box2 props; remove redundant style fields. |
| shared/common-adapters/button.tsx | Replace duplicated paddingLeft/Right pairs with Styles.paddingH. |
| shared/common-adapters/box-grow.tsx | Move position: relative/alignSelf into Box2 props. |
| shared/chat/inbox/row/teams-divider.tsx | Replace width/shrink/justify with Box2 props (fullWidth, noShrink, justifyContent). |
| shared/chat/inbox/row/small-team/index.tsx | Replace height: '100%' usage with fullHeight and justifyContent props. |
| shared/chat/inbox/row/build-team.tsx | Replace width/shrink with fullWidth/noShrink props. |
| shared/chat/inbox/row/big-teams-label.tsx | Minor JSX simplification; no functional change. |
| shared/chat/inbox/row/big-teams-divider.tsx | Move flex/relative/fullWidth/fullHeight into Box2 props; remove redundant style fields. |
| shared/chat/inbox/row/big-team-header.tsx | Replace flexShrink: 0 with Box2 noShrink. |
| shared/chat/inbox/row/big-team-channel.tsx | Move alignItems into Box2 prop. |
| shared/chat/inbox/new-chat-button.tsx | Move overflow/relative into Box2 props. |
| shared/chat/inbox/index.tsx | Move height/relative/flex/alignment into Box2 props; simplify platformStyles. |
| shared/chat/inbox/filter-row.tsx | Replace position/width with Box2 fullWidth/relative. |
| shared/chat/inbox-search/index.tsx | Replace height/relative/size styles with Box2 props; simplify platformStyles. |
| shared/chat/emoji-picker/index.tsx | Replace Styles.centered() with centerChildren prop. |
| shared/chat/emoji-picker/container.tsx | Move padding to Box2 padding; remove redundant style key. |
| shared/chat/delete-history-warning.tsx | Replace Styles.centered() with centerChildren prop. |
| shared/chat/conversation/you-are-reset.tsx | Move padding to Box2 padding. |
| shared/chat/conversation/search.tsx | Move padding to Box2 padding. |
| shared/chat/conversation/reply-preview.tsx | Move padding to Box2 padding; remove redundant style key. |
| shared/chat/conversation/messages/wrapper/wrapper.tsx | Move alignment/stretch to Box2 props; remove redundant style fields. |
| shared/chat/conversation/messages/wrapper/exploding-meta.tsx | Replace width/height with Kb.Styles.size. |
| shared/chat/conversation/messages/text/unfurl/unfurl-list/index.tsx | Move alignSelf/flex into Box2 props; delete redundant style fields. |
| shared/chat/conversation/messages/text/unfurl/unfurl-list/image/video.tsx | Move alignSelf into Box2 props; remove dead styles. |
| shared/chat/conversation/messages/text/unfurl/unfurl-list/giphy.tsx | Move alignSelf and sizing to Box2 props/Kb.Styles.size. |
| shared/chat/conversation/messages/text/unfurl/unfurl-list/generic.tsx | Move alignSelf into Box2 props; simplify style declarations. |
| shared/chat/conversation/messages/text/unfurl/prompt-list/prompt.tsx | Move alignSelf into props; remove redundant style entries. |
| shared/chat/conversation/messages/text/coinflip/results.tsx | Replace flexShrink: 0 with noShrink; use Kb.Styles.size for coin. |
| shared/chat/conversation/messages/system-git-push/container.tsx | Replace height: '100%' with fullHeight props. |
| shared/chat/conversation/messages/separator.tsx | Replace flexShrink: 0 with noShrink. |
| shared/chat/conversation/messages/reset-user.tsx | Move padding to Box2 padding. |
| shared/chat/conversation/messages/react-button.tsx | Move alignment/centering to Box2 props. |
| shared/chat/conversation/messages/message-popup/header.tsx | Replace width: '100%' with fullWidth. |
| shared/chat/conversation/messages/message-popup/exploding-header.tsx | Move padding/alignment to Box2 props; remove redundant styles. |
| shared/chat/conversation/messages/cards/team-journey/container.tsx | Fix JSX prop style (alignItems string) and move alignment to props; remove dead isElectron empty style. |
| shared/chat/conversation/messages/cards/new-chat.tsx | Move padding to Box2 padding; remove redundant style key. |
| shared/chat/conversation/messages/cards/make-team.tsx | Move padding to Box2 padding; remove redundant style key. |
| shared/chat/conversation/messages/cards/hello-bot.tsx | Move padding to Box2 padding; remove redundant style key. |
| shared/chat/conversation/messages/attachment/video/index.tsx | Move alignSelf into Box2 prop; simplify style. |
| shared/chat/conversation/messages/attachment/shared.tsx | Ensure title container alignment uses Box2 props; remove redundant alignSelf style. |
| shared/chat/conversation/messages/attachment/image/index.tsx | Move alignSelf into Box2 props; remove redundant styles. |
| shared/chat/conversation/messages/attachment/file.tsx | Move alignment into Box2 prop; remove redundant style field. |
| shared/chat/conversation/input-area/suggestors/commands.tsx | Move alignItems into Box2 props and simplify collapseStyles usage. |
| shared/chat/conversation/input-area/normal/set-explode-popup/index.tsx | Replace manual align/justify with centerChildren; remove dead const style. |
| shared/chat/conversation/input-area/normal/input.tsx | Move alignment/noShrink into Box2 props; remove redundant style fields. |
| shared/chat/conversation/input-area/location-popup.tsx | Move padding into Box2 padding; remove redundant style field. |
| shared/chat/conversation/input-area/filepicker-popup/index.tsx | Replace align/justify with centerChildren. |
| shared/chat/conversation/info-panel/settings/index.tsx | Move padding into Box2 padding; remove redundant style key. |
| shared/chat/conversation/info-panel/attachments.tsx | Move padding into Box2 padding; remove redundant style keys. |
| shared/chat/conversation/header-area/index.tsx | Replace align+justify with centerChildren. |
| shared/chat/conversation/giphy/index.tsx | Replace inline margin object with Kb.Styles.marginH. |
| shared/chat/conversation/command-status.tsx | Move padding to Box2 padding; remove redundant container style. |
| shared/chat/conversation/bottom-banner.tsx | Move justifyContent into Box2 prop. |
| shared/chat/conversation/bot/search.tsx | Move padding to Box2 padding; remove redundant style key usage. |
| shared/chat/conversation/bot/install.tsx | Move flex: 1 to Box2 flex prop; remove redundant style field. |
| shared/chat/conversation/bot/channel-picker.tsx | Move flex: 1 into Box2 flex prop and simplify style collapse. |
| shared/chat/blocking/block-modal.tsx | Move padding into Box2 padding; remove redundant style key. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
chrisnojima
merged commit 4c5e645
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.
…#29275)
143 files changed: move layout properties from stylesheets to Box2 props (fullWidth, padding, alignItems, noShrink, relative, flex, etc.), replace inline style objects with Kb.Styles utilities (size, paddingH/V, marginH/V, bottomDivider, textEllipsis), and remove dead style keys and unused imports. Also fix pre-existing
electron→isElectronbug in add-to-channels.tsx.