Build layouts for pending contact state

[jordan-ae]

#125

[tomastiminskas]

@jordan-ae It looks well over all. Just some corrections/adjustments needed:

• Dotted line and clock icon should have the same color. Please take the color code from Figma designs (here is doc with Figma instructions if it's your first time using it: https://github.com/stakwork/sphinx/issues/234)
• Clock icon should be OVER the dotted line which means the dotted line shouldn't be visible inside the clock. For that you might need to add a background circle under the clock and over the dotted line with the same blue background color the chat has.
• Circular Image/Initials circle and dotted line seems smaller than the original design in Figma. Those needs to be adjusted based on the dimensions on designs.
• Check spaces between dotted circle and name, and between name and subtitle below the name. At first sight I can say that the space between name and subtitle should be bigger
• When the lock icon is visible next to the name, the name should still be horizontally centered and the lock should be next the name. In your screenshots the box containing both is horizontally centered instead
• Where the place holder profile image is, you should also add a circle with a solid color background and the initials label as on the screenshots in the ticket. That will be used in case user has no profile picture, in that case we are showing initials over user color circle.
• Finally you should add proof of work for the chats list row for a pending contact (I added a screenshot on the ticket and the references about which files need to be adapted for that). It's basically the addition of the dotted line around the profile image circle and the clock icon on the left of the subtitle label.

On all cases it's important to consider all dimensions, fonts, sizes, colors from Figma. Otherwise I will need to keep asking for corrections, but it's going well overall so I'm sure we will get to an accurate result. Thanks in advance

[tomastiminskas]

@jordan-ae all the correction I asked for look great. Just the chats list row seems broken. I just checked and we already have a second line text and an icon in that line in the existing layout. So you need to add that or modify that part of the layout.

You will just need to change text and icon (with color icon) when applying the logic. But no need to change the structure of that part. I'm saying this because I see that part of the layout is broken. Both lines are not vertically centered and the lock icon is out of place (so if you revert that I think we are ok)

The only change that you should keep there is the addition of the dotted line.

I will create a second ticket to implement the logic to use these new layout so you can finish the feature