Button overhaul - #537
Open
nghtctrl wants to merge 26 commits into
Open
Conversation
…on for some of them that has icons
… a single centered element
… between the button on the same row
Contributor
There was a problem hiding this comment.
Pull request overview
This PR overhauls button styling and usage across the renderer to improve contrast on white/grey surfaces and to make long button labels truncate consistently (supporting several UI truncation/mobile issues like TT-7449/TT-7522/TT-7587/TT-7565).
Changes:
- Reworked the MUI theme’s
MuiButton/MuiIconButtonvariants and defaults (defaulting tocontained+secondary). - Introduced a new shared
control/Buttonwrapper that appliesTypography noWrapfor consistent ellipsis truncation. - Replaced all usages of legacy
PriButton/AltButtonwith the newButtonand removed the old components/tests.
Reviewed changes
Copilot reviewed 143 out of 143 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/renderer/src/theme.ts | Updates palette tokens and redefines MUI Button/IconButton default props + variants for new contrast rules. |
| src/renderer/src/routes/Welcome.tsx | Replaces AltButton with shared Button; adjusts layout sx for action area. |
| src/renderer/src/routes/SwitchTeams.tsx | Replaces MUI Button usage with shared control/Button; updates icon-only button usage. |
| src/renderer/src/routes/ScriptureBurrito.tsx | Replaces Pri/Alt buttons with new Button and sets color for primary actions. |
| src/renderer/src/routes/ProjectsScreen.tsx | Switches to shared Button import. |
| src/renderer/src/routes/Loading.tsx | Replaces Pri/Alt buttons with new Button and sets primary action color. |
| src/renderer/src/routes/EmailUnverified.tsx | Converts PriButtons to shared Buttons and uses shared row layout sx. |
| src/renderer/src/routes/Access.tsx | Replaces Pri/Alt usage with Button and updates header/action layouts. |
| src/renderer/src/hoc/BigDialog.tsx | Converts dialog action buttons to shared Button + row layout. |
| src/renderer/src/hoc/BigDialog.test.tsx | Updates control mocks for new Button and rowSx. |
| src/renderer/src/control/UserListItem.tsx | Replaces styled MUI Button with shared Button + startIcon usage. |
| src/renderer/src/control/UploadProgress.tsx | Switches to shared Button import. |
| src/renderer/src/control/RecordButton.tsx | Uses shared Button and updates sx to apply bold weight consistently with Typography wrapper. |
| src/renderer/src/control/ProjButtons.tsx | Switches to shared Button import. |
| src/renderer/src/control/PriButton.tsx | Removes deprecated PriButton component. |
| src/renderer/src/control/LastEdit.tsx | Replaces AltButton with shared Button. |
| src/renderer/src/control/index.ts | Stops exporting Pri/Alt buttons; exports new Button instead. |
| src/renderer/src/control/ConfButton.tsx | Uses shared Button and opts out of Typography wrapper where needed. |
| src/renderer/src/control/Button.tsx | Adds new shared Button wrapper with optional Typography opt-out. |
| src/renderer/src/control/AltButton.tsx | Removes deprecated AltButton component. |
| src/renderer/src/control/AltButton.test.tsx | Removes AltButton tests (component removed). |
| src/renderer/src/control/AddSectionPassageButtons.tsx | Switches to shared Button import. |
| src/renderer/src/control/ActionToggle.tsx | Updates styled button typing to use IButtonProps from shared Button. |
| src/renderer/src/components/WSSegmentParameters.tsx | Replaces Pri/Alt with shared Button and shared row layout. |
| src/renderer/src/components/WSAudioPlayer.tsx | Replaces button components with shared Button and aligns icon usage to startIcon/endIcon. |
| src/renderer/src/components/WSAudioPlayer.hotkeys.test.tsx | Updates control mocks to reflect new Button. |
| src/renderer/src/components/WhichExportDlg.tsx | Switches to shared Button import and cleans comment formatting. |
| src/renderer/src/components/UserTable.tsx | Replaces PriButton usage with shared Button and startIcon pattern. |
| src/renderer/src/components/UserAdd.tsx | Switches to shared Button import. |
| src/renderer/src/components/TranscriptionViewCell.tsx | Switches to shared Button and uses startIcon for view icon. |
| src/renderer/src/components/TranscriptionTab.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/TranscriptionShow.tsx | Switches to shared Button import. |
| src/renderer/src/components/TranscribeReject.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/Transcriber.tsx | Replaces Pri/Alt with shared Button and row layout sx; adjusts primary/secondary coloring logic. |
| src/renderer/src/components/TranscribeAddNote.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/TokenDialog.tsx | Switches to shared Button import. |
| src/renderer/src/components/TitleRecord.tsx | Replaces StepEditor buttons with shared Button + row layout. |
| src/renderer/src/components/Team/TeamItem.tsx | Replaces AltButton with shared Button + row layout grouping. |
| src/renderer/src/components/Team/TeamDialog.tsx | Switches to shared Button import and disables Typography for non-text content. |
| src/renderer/src/components/Team/TeamActions.tsx | Replaces AltButtons with shared Button and updates icon-only buttons. |
| src/renderer/src/components/Team/ProjectDialog/ProjectSort.tsx | Replaces PriButton with shared Button and groups actions with row layout. |
| src/renderer/src/components/Team/ProjectCard.tsx | Switches to shared Button import. |
| src/renderer/src/components/Team/PersonalItem.tsx | Replaces AltButtons with shared Button and groups with row layout. |
| src/renderer/src/components/Team/PendingUploadsDialog.tsx | Switches to shared Button import. |
| src/renderer/src/components/Team/CategoryListEdit.tsx | Replaces StepEditor buttons with shared Button and row layout. |
| src/renderer/src/components/Team/CategoryEdit.tsx | Switches to shared Button import. |
| src/renderer/src/components/StepEditor/StepEditor.tsx | Switches to shared Button import (from control barrel). |
| src/renderer/src/components/StepEditor/RecordStepSettings.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/StepEditor/DiscussStepSettings.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/SpeakerName.tsx | Switches to shared Button; changes color/icon/label logic for speaker selection. |
| src/renderer/src/components/Sheet/PlanView.tsx | Switches to shared Button and uses startIcon for publish status. |
| src/renderer/src/components/Sheet/PlanTabSelect.tsx | Switches to shared Button import. |
| src/renderer/src/components/Sheet/PlanSheet.tsx | Switches to shared Button via control barrel (and removes MUI Button import). |
| src/renderer/src/components/Sheet/PlanActionMenu.tsx | Switches to shared Button and disables Typography for icon-only “more” trigger. |
| src/renderer/src/components/Sheet/PassageCard.tsx | Switches to shared Button and uses endIcon chevron; updates sx for truncation/positioning. |
| src/renderer/src/components/Sheet/PassageCard.cy.tsx | Updates Cypress assertions for new chevron icon. |
| src/renderer/src/components/Sheet/filterMenu.tsx | Replaces Pri/Alt with shared Button and sets close as primary-colored Button. |
| src/renderer/src/components/Sheet/AudacityManager.tsx | Switches to shared Button import. |
| src/renderer/src/components/ResourceEdit/ResRefTable.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/ResourceEdit/ResourceOverview.tsx | Replaces Pri/Alt with shared Button and reorganizes action row layout. |
| src/renderer/src/components/ResourceEdit/ResourceOverview.test.tsx | Updates control mocks for Button + rowSx and disabled propagation. |
| src/renderer/src/components/PwaUpdatePrompt.tsx | Switches to shared Button import. |
| src/renderer/src/components/ProjectDownloadAlert.tsx | Replaces Pri/Alt with shared Button and sets primary confirmation action. |
| src/renderer/src/components/ProfileDialog.tsx | Switches to shared Button import. |
| src/renderer/src/components/Peers/GroupDialog.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/PassageRecordDlg.tsx | Replaces Pri/Alt with shared Button and sets save as primary-colored action. |
| src/renderer/src/components/PassageDetail/StepNavigationConfirmDialog.tsx | Switches to shared Button import. |
| src/renderer/src/components/PassageDetail/SelectRecording.tsx | Switches to shared Button import. |
| src/renderer/src/components/PassageDetail/RecordButtons.tsx | Replaces AltButton with shared Button within a ButtonGroup. |
| src/renderer/src/components/PassageDetail/PassageDetailRecord.tsx | Replaces Pri/Alt with shared Button, adds icons, and sets primary save action color. |
| src/renderer/src/components/PassageDetail/PassageDetailRecord.test.tsx | Updates control mocks for new Button-only usage. |
| src/renderer/src/components/PassageDetail/PassageDetailPlayer.tsx | Switches to shared Button import. |
| src/renderer/src/components/PassageDetail/PassageDetailLwcTranslation.tsx | Switches to shared Button import. |
| src/renderer/src/components/PassageDetail/PassageDetailItem.tsx | Replaces PriButton with shared Button and uses startIcon for upload action. |
| src/renderer/src/components/PassageDetail/PassageDetailGuidedPhraseRecord.tsx | Switches to shared Button import. |
| src/renderer/src/components/PassageDetail/mobile/record/ProvideRightsMobile.tsx | Replaces Pri/Alt with shared Button and adjusts mobile action layout. |
| src/renderer/src/components/PassageDetail/mobile/record/AudioVersionCard.tsx | Switches to shared Button import. |
| src/renderer/src/components/PassageDetail/mobile/PassageDetailMobileFooter.tsx | Switches to shared Button import and changes nav buttons to outlined with icons. |
| src/renderer/src/components/PassageDetail/mobile/MobileWorkflowSteps.tsx | Switches to shared Button import and relies on shared truncation. |
| src/renderer/src/components/PassageDetail/mobile/MobileStepComplete.tsx | Switches to shared Button import and relies on shared truncation. |
| src/renderer/src/components/PassageDetail/mobile/MarkVerses/MarkVersesTable.tsx | Switches to shared Button import and removes custom sizing overrides in favor of theme sizing. |
| src/renderer/src/components/PassageDetail/mobile/MarkVerses/EditReferenceDropdown.tsx | Switches to shared Button import. |
| src/renderer/src/components/PassageDetail/lwcTranslation/LwcTranslationControls.tsx | Replaces PriButton with shared Button and uses primary coloring for next clause. |
| src/renderer/src/components/PassageDetail/lwcTranslation/LwcTranslationControls.test.tsx | Updates control mocks to use Button. |
| src/renderer/src/components/PassageDetail/lwcTranscription/LwcTranscriptionEditor.test.tsx | Updates control mocks to use Button. |
| src/renderer/src/components/PassageDetail/lwcTranscription/BoldClauseTranscriptionEditor.tsx | Replaces PriButton with shared Button and sets primary coloring for next clause. |
| src/renderer/src/components/PassageDetail/Internalization/SelectSections.tsx | Switches to shared Button import. |
| src/renderer/src/components/PassageDetail/Internalization/SelectProjectResource.tsx | Replaces AltButton with shared Button. |
| src/renderer/src/components/PassageDetail/Internalization/ResourceItem.tsx | Refactors conditional button rendering to single shared Button. |
| src/renderer/src/components/PassageDetail/Internalization/ProjectResourceConfigure.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/PassageDetail/Internalization/PassageDetailsArtifactsMobile.tsx | Replaces AltButton with shared Button and cleans up layout/comment formatting. |
| src/renderer/src/components/PassageDetail/Internalization/PassageDetailArtifacts.tsx | Replaces AltButton with shared Button; uses theme layout spacing for grid. |
| src/renderer/src/components/PassageDetail/Internalization/FindBibleBrain.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/PassageDetail/Internalization/FindAquifer.tsx | Replaces PriButton with shared Button and sets primary coloring for add actions. |
| src/renderer/src/components/PassageDetail/Internalization/FaithbridgeIframe.tsx | Replaces Pri/Alt with shared Button; updates tests to avoid control barrel ESM issues. |
| src/renderer/src/components/PassageDetail/Internalization/CreateAiRes.tsx | Replaces AltButton with shared Button. |
| src/renderer/src/components/PassageDetail/Internalization/AddResource.tsx | Simplifies AddResource props and replaces AltButton with shared Button. |
| src/renderer/src/components/PassageDetail/ConsultantCheckCompare.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/PassageDetail/ConsultantCheckCompare.test.tsx | Updates control mocks and button queries for new Button usage. |
| src/renderer/src/components/PassageDetail/ConsultantCheck.tsx | Replaces Pri/Alt with shared Button and uses primary coloring for “checked”. |
| src/renderer/src/components/PassageDetail/ConsultantCheck.test.tsx | Updates control mocks and test names to reflect new Button usage. |
| src/renderer/src/components/PassageDetail/carefulSpeech/CarefulSpeechControls.tsx | Replaces PriButton with shared Button and adjusts styling/primary emphasis logic. |
| src/renderer/src/components/PassageDetail/carefulSpeech/CarefulSpeechControls.test.tsx | Updates control mocks to use Button. |
| src/renderer/src/components/PassageDataTable.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/ParatextLinkedButton.tsx | Switches to shared Button import. |
| src/renderer/src/components/MediaUploadContent.tsx | Switches to shared Button import. |
| src/renderer/src/components/Invite.tsx | Switches to shared Button import. |
| src/renderer/src/components/InvitationTable.tsx | Replaces Pri/Alt with shared Button, uses row layout, and converts icons to startIcon. |
| src/renderer/src/components/Integration.tsx | Replaces PriButton with shared Button and converts Sync icon to startIcon. |
| src/renderer/src/components/ImportTab.tsx | Replaces AltButton with shared Button. |
| src/renderer/src/components/GraphicPicker.tsx | Replaces Pri/Alt with shared Button and sets primary action color. |
| src/renderer/src/components/GraphicPicker.test.tsx | Updates control mocks for new Button signature. |
| src/renderer/src/components/GraphicImageFilter.tsx | Replaces AltButton with shared Button. |
| src/renderer/src/components/FilterContent.tsx | Switches to shared Button import. |
| src/renderer/src/components/ExtendableDeleteExpansion.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/ErrorPage.tsx | Replaces PriButton with shared Button and groups actions with row layout. |
| src/renderer/src/components/ErrorFallback.tsx | Replaces PriButton with shared Button and sets primary color for clear action. |
| src/renderer/src/components/Discussions/DiscussionCard.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/Discussions/CommentEditor.tsx | Switches to shared Button import and disables Typography for icon-only buttons. |
| src/renderer/src/components/DeleteExpansion.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/ConfirmPublishDialog.tsx | Switches to shared Button import. |
| src/renderer/src/components/BurritoUpload.tsx | Switches to shared Button import. |
| src/renderer/src/components/BurritoHeader.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/AudioTab/VersionDlg.tsx | Replaces PriButton with shared Button and removes redundant Typography wrapper. |
| src/renderer/src/components/AudioTab/AudioTab.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/AudioExportMenu.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/AssignSection.tsx | Replaces Pri/Alt with shared Button (save as primary-colored). |
| src/renderer/src/components/AssignmentTable.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/components/App/HeadStatus.tsx | Switches to shared Button import. |
| src/renderer/src/components/AltActionBar.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/components/AlertDialog.tsx | Switches to shared Button import and relies on theme defaults. |
| src/renderer/src/components/AboutDialog.tsx | Switches to shared Button import via control barrel. |
| src/renderer/src/business/voice/VoiceStatement.tsx | Replaces AltButton with shared Button via control barrel. |
| src/renderer/src/business/voice/SelectVoice.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/business/voice/SelectSponsor.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/business/asr/SelectAsrLanguage.tsx | Replaces Pri/Alt with shared Button and row layout grouping. |
| src/renderer/src/business/asr/AsrProgress.tsx | Replaces AltButton with shared Button. |
| src/renderer/src/burrito/VernacularAudioMissingTranscriptionDialog.tsx | Switches to shared Button import. |
| src/renderer/src/burrito/MetaValue.tsx | Switches to shared Button import. |
| src/renderer/src/burrito/BurritoWrapper.tsx | Replaces AltButton with shared Button via control barrel. |
| src/renderer/src/burrito/BurritoStep.tsx | Replaces AltButton with shared Button and row layout grouping. |
| src/renderer/src/tests/ProjectResourceConfigure.test.tsx | Updates control mocks for Button and rowSx. |
| src/renderer/src/tests/FaithbridgeIframe.test.tsx | Adds dedicated control stubs to avoid ESM import issues and match new Button exports. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
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.
Changes:
"contained"with the"secondary"color (the white button color). The coloring of the button can be modified via setting thecolorparameter to either"primary"(the black button color) or"secondary".control/that runs its label through Typography so long text truncates to an ellipsis.These changes address the following issues: