frontend: use mui theming #2851
Merged
Conversation
This file contains 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
lucechal14
approved these changes
Dec 1, 2023
### Description Replace hardcoded colors with theme palette references ### Testing Performed Manual
Replace hardcoded colors with theme palette references for components in AppLayout Also updated the `landing` component Testing Performed manual, unit tests
Replace hardcoded colors with theme palette references for components in input Testing Performed manual, unit tests ### Before (left) vs After (right) **Checkbox Panel**  **Checkbox**  **DateTimePicker**  **Form**  **MultiSelect**  **RadioGroup**  **Radio**  **Select**  **Switch**  **TextField**  **TimePicker**  **ToggleButtonGroup** 
Replace hardcoded colors with theme palette references for components in NPS Testing Performed manual, unit tests Before (top) vs After (bottom) **Banner**  **Header**  **Wizard** 
This PR updates the following components to use the current theme colors, additionally, updates matching colors across the whole app to mantain consistency. _before/after screenshots_ **Accordion**  **Button** Button Group (Primary)  Button Group (Destructive)  Icon Button  **Card** Normal  Hover  **Chip**        **Confirmation**  **Tab**     _Note_ This PR mainly aims to update ungrouped components within frontend/packages/core/src/, while updating all instances of widespread colors as to avoid possible mismatches from working them on a directory basis. Odd instances of hardcoded colors elsewhere will be addressed in future PRs. ### Testing Performed manual, unit testing
This PR updates the following components to use the current theme colors, additionally, updates matching colors across the whole app to mantain consistency. _before/after screenshots_ ### Dialog <img width="1470" alt="image" src="https://github.com/lyft/clutch/assets/5430603/17f8f76a-02ca-480e-bae8-38d8bcde54ff"> <img width="1480" alt="image" src="https://github.com/lyft/clutch/assets/5430603/92483239-2054-45d2-a1a2-8bdd022cc72d"> ### Icon <img width="550" alt="image" src="https://github.com/lyft/clutch/assets/5430603/abab2f22-4469-40ed-b066-51f6f20fbfca"> <img width="547" alt="image" src="https://github.com/lyft/clutch/assets/5430603/41144f74-77ea-4055-a2cf-113e7f23e62f"> <img width="555" alt="image" src="https://github.com/lyft/clutch/assets/5430603/4edde15f-cbcd-4446-9e85-418ec2e00d99"> ### Text <img width="993" alt="image" src="https://github.com/lyft/clutch/assets/5430603/98f09ddd-ffde-4fb8-b573-becd69ee495a"> _Note_ This PR mainly aims to update ungrouped components within frontend/packages/core/src/, while updating all instances of widespread colors as to avoid possible mismatches from working them on a directory basis. Odd instances of hardcoded colors elsewhere will be addressed in future PRs. ### Testing Performed manual, unit testing
Replace hardcoded colors with theme palette references for components in worklows Testing Performed manual, unit tests FYI for reviewers, this PR mainly aims to update components within frontend/workflows, while updating all instances of widespread colors as to avoid possible mismatches from working them on a directory basis. Odd instances of hardcoded colors elsewhere will be addressed in future PRs.
This PR adds a brand color that matches the color used in the Clutch logo, and updates the Not Found component to use this color from the current theme. Replaced string theme variation values (light, dark) with a shared variable. Fixed a miss-written theme usage in the project links component. ### Not found No noticeable change was made: before/after <img width="1482" alt="image" src="https://github.com/lyft/clutch/assets/5430603/48663ff9-a3ec-45c1-84cb-106f3c418823"> ### Testing Performed manual, unit testing
|
This PR has been marked as stale after 7 or more days of inactivity. Please have a maintainer add the |
frontend: update useTheme imports for workflows
Active state of the tab component was the same as the hover state, now is darker.
Covers the following issues found in components in an ongoing theming update: App Layout - Header: Search autocomplete highlight color is too dark before:  after:  Feedback: Darken text in feedback components for legibility before:  after:  Input - Switch: gray colors make it look disabled before:  after:  Card: Landing card, icon character should be dark before:  after:  Accordion: Missing label (white text) before:  after:  Dialog: Pressed state should be a darker shade normal state:  before:  after:  Testing Performed manual, unit tests
Project card close button was hite hich didn't make much contrast with the background so it was changed to black. Before: <img width="372" alt="Screenshot 2024-01-12 at 10 50 17 a m" src="https://github.com/lyft/clutch/assets/25833665/4bd73ea5-eeb9-4d18-a919-420ae8767563"> After: <img width="365" alt="Screenshot 2024-01-12 at 10 49 53 a m" src="https://github.com/lyft/clutch/assets/25833665/2e81642b-2641-41d0-a771-f9e906367c81">
Covers the following issues found in components in an ongoing theming update: Links became always underlined before: <img width="442" alt="image" src="https://github.com/lyft/clutch/assets/5430603/5fe90a1f-e96c-4769-a226-e18b75f5b0fa"> after: <img width="443" alt="image" src="https://github.com/lyft/clutch/assets/5430603/87be5306-2f52-4421-9845-eeba9bbc6061"> Checkbox panel, label not visible due to text being white before: <img width="355" alt="image" src="https://github.com/lyft/clutch/assets/5430603/beb22993-0828-4df7-b1d8-bc3d66f14cdf"> after: <img width="358" alt="image" src="https://github.com/lyft/clutch/assets/5430603/c214d80e-fe2b-414f-99f6-4c80df210672"> App Layout - Search: disable blue outline that appears on focus before: <img width="455" alt="image" src="https://github.com/lyft/clutch/assets/5430603/b9d73ca0-b8c0-48b2-99c0-fc7cf1d838bd"> after: <img width="458" alt="image" src="https://github.com/lyft/clutch/assets/5430603/27fce5a5-b1c7-49be-9e5f-72751e564fa2"> ### Testing Performed manual, unit tests
…eme.palette (#2899) using theme.palette.contrastColor for white and black values
Palette usage instances were pointing to the secondary palette instead of the error one. before: <img width="368" alt="image" src="https://github.com/lyft/clutch/assets/5430603/37bb7a83-c78a-4fca-a04f-93cbbccb20ca"> after: <img width="358" alt="image" src="https://github.com/lyft/clutch/assets/5430603/a4d9591c-dafd-41c6-8910-f7752a54af03"> before: <img width="971" alt="image" src="https://github.com/lyft/clutch/assets/5430603/b1d86efb-379a-4f65-940a-8bababf62996"> after: <img width="978" alt="image" src="https://github.com/lyft/clutch/assets/5430603/791cf77f-be12-4b24-9c5a-a1ef46c3cb4f"> Also noticed there are some redundant usages of style providers around the app, so removed those. ### Testing Performed manual, unit tests
When using the `theme` prop in `styled` components, it is not typed,
causing it to not have type checking.
This PR replaces all instances of `({ theme })` an adds its type as `({
theme }: { theme: Theme })`
### Testing Performed
manual, unit tests
Readability of tabs when hovered was reduced with the updated shade, this pr adjusts it by making the using a lighter color shade for the background. before:  after:  ### Testing Performed manual, unit tests
Given the update from #2851 and since it is a major update to clutch, this PR updates the current version of clutch-sh/core (2.0.0-beta) to 3.0.0-beta to better represent the changes. Additionally updates the dependency versions in packages within the current repo. ### Testing Performed manual
jdslaugh
approved these changes
Feb 1, 2024
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.
This PR modifies the usage of themes, removing emotion's implementation to keep only a MUI theme with the Clutch design system's colors.
Testing Performed
manual