Adapt exiting UI to the new designs of the record audio and send buttons. 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
Record Audio button changes color, size and asset (Recording view stays the same but needs to be adapted to existing position of the record audio button on the bottom bar)
2. Entered text state
When text is entered in the message field:
Record audio button is replaced by Send button (send button size, color and asset might change)
3. Entered large text state
When text entered in the message field becomes multiline:
Send buttons stay aligned to bottom on the bottom bar
Khaalid-oh
commented
4 months ago
Adapt exiting UI to the new designs of the record audio and send buttons. 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
Figma designs: https://www.figma.com/design/suipHjIGKg38rbWo0qHGqV/Desktop-Design-System---Dark-Version?node-id=4242-135730&t=z4I07OL9PbmdiBB5-0 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 Designs video: https://github.com/stakwork/sphinx-mac/assets/13258550/335267aa-8028-457f-8316-2299d1b0eda8
Specifications
1. Bottom bar default elements
2. Entered text state
When text is entered in the message field:
3. Entered large text state
When text entered in the message field becomes multiline: