Adapt exiting UI to the new designs on the message field container view. Existing UI is built based on expansion/collapse requirements (like moving chat view up when entered text is large/multiline, price view becoming wider as price is entered reducing width of input text field, etc) so it's recommended to adapt existing views to new designs instead of building UI from scratch.
Base branch: test-flight
General requirements
All assets needs to be taken from Figma (export in 3x and create them adding versions for 1x, 2x and 3x in Assets section of the project)
All colors need to be taken from Figma (some of them already exists in the project, some others need to be created). All new colors need to be created for both dark and light mode in the Color section of the app
All sizes, margins, etc need to be taken from Figma.
Acceptance Criteria
[ ] Apply all designs with right sizes, colors and assets for both dark and light mode
[ ] Record a video with loom for review when task is completed
Adapt exiting UI to the new designs on the message field container view. Existing UI is built based on expansion/collapse requirements (like moving chat view up when entered text is large/multiline, price view becoming wider as price is entered reducing width of input text field, etc) so it's recommended to adapt existing views to new designs instead of building UI from scratch.
Base branch: test-flight
General requirements
All assets needs to be taken from Figma (export in 3x and create them adding versions for 1x, 2x and 3x in Assets section of the project)
All colors need to be taken from Figma (some of them already exists in the project, some others need to be created). All new colors need to be created for both dark and light mode in the Color section of the app
All sizes, margins, etc need to be taken from Figma.
Acceptance Criteria
[ ] Apply all designs with right sizes, colors and assets for both dark and light mode
[ ] Record a video with loom for review when task is completed
Designs video: https://github.com/stakwork/sphinx-mac/assets/13258550/335267aa-8028-457f-8316-2299d1b0eda8 Design prototype: https://www.figma.com/proto/suipHjIGKg38rbWo0qHGqV/Desktop-Design-System---Dark-Version?node-id=4252-25997&t=XLPtO9cCnva4Jxax-1&scaling=min-zoom&page-id=4242%3A135730&starting-point-node-id=4252%3A25997&show-proto-sidebar=1 Figma designs: https://www.figma.com/design/suipHjIGKg38rbWo0qHGqV/Desktop-Design-System---Dark-Version?node-id=4242-135730&t=z4I07OL9PbmdiBB5-0
Specifications
1. Bottom bar default elements
2. Entered text state
When text is entered in the message field:
3. Entered multiline text state
When text entered in the message field becomes multiline: