Adapt exiting UI to the new designs of the chat input bottom bar when sending a paid button. 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
Add Price button shows up reducing field box width
3. Entered large text state
When text entered in the message field becomes multiline:
Price and Send buttons stay aligned to bottom on the bottom bar
4. Paid message state
Tapping on Add Price button reveals price field and changes colors of all elements
5. Paid large message with large price state
As price string becomes bigger the price view will become wider and the message input field box will become narrower. Keep existing UI constraints and logic to accomplish this.
6. Open thread state
Add Price button will be collapsed and show just icon instead of icon and label (Add Price) since space is reduced
Add Price button should be removed on threads for now (as it is right now)
Khaalid-oh
commented
4 months ago
Adapt exiting UI to the new designs of the chat input bottom bar when sending a paid button. 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:
4. Paid message state
5. Paid large message with large price state
6. Open thread state