Beautify profile

[BenGWeeks]

Hi there,

I have made some updates to the profile section of the app as per the following:

Namely:

• Added a banner image (static for now, and can also use a "Nostrich" image if @yeg0rpetrov [npub1z4m7gkva6yxgvdyclc7zp0vz4ta0s2d9jh8g83w03tp5vdf3kzdsxana6p] can provide it)
• Made the nPub key visible to reduce the risk of falling for fake profiles (and used nPub rather than hex for consistency as that is more familiar, I believe)
• Added "Copy" icon next to the nPub key that says "Copied" then reverts after 3 seconds
• Updated the buttons in the profile
• Updated the "?" to an icon for Followers until the proper method implemented
• Updated above for both Light and Dark (further tweaks for Light mode could be investigated for accessibility)
• Fixes issue where the Lightning button appears on profile even if no LNUrl specific

The updates are in line with the designs in Figma that you can see here:

https://www.figma.com/proto/ORaT1T0Ywfbm0sIjwy5Rgq/Damus-UX?node-id=1%3A2&scaling=scale-down&page-id=0%3A1&starting-point-node-id=29%3A7210

Password: keypair

Happy to do some more if they are aligned with what you want the app to look like.

Considerations:

• Unlike the Figma designs, I have left the central area of the app black rather than the dark grey in the designs, as it otherwise wouldn't look consistent with the rest of the app.
• Dependent on the banner image we get back from @yeg0rpetrov (npub1z4m7gkva6yxgvdyclc7zp0vz4ta0s2d9jh8g83w03tp5vdf3kzdsxana6p), we may want to change the "< Home" text color.
• I think it would be good for the Following, Followers and Relays to open below the Divider where the Posts are (and add "Posts" as a heading too.
• It would be good to change the person with a tick icon to say "Followed" (in a "capsule" like the nPub), as I only figured out what that was from looking a the code (I wondered if that was the NIP05 verified icon). However, I didn't update this, as it looks like it's currently used elsewhere.
• If there were a "isNIP05Verified()" method, it would be great to put the icon for that into the profile (see tickmark in Figma)
• I had issues getting the fork updates with changes made to Master. I believe it was mainly the work getting markdown and links working etc., from https://github.com/damus-io/damus/commit/6f5f86114b0948cac286f2b1594e8f3f831e9032#diff-adad0c7b810d3ffebda36c14142e534ac2d9f643e3b31d0f16c7418e4a223ed3 - so please check nothing missed.

The intention is these are consistent with the other "Beautify *" PR's (namely #196 and #191).

Regards,

Ben

[BenGWeeks]

Some further revisions could be:

• Implement the cog at the top to be specific to the view you are on (I believe this is the intention of use of the toolbar and how Twitter does it, I notice) instead of the "Edit" button below.
• Take a look at lines 127 to 131 (see below) in ProfileView to use the new Theme class to specify a custom navigation colour for the profile page and set a drop shadow, if possible, so more readable against various backgrounds that could be used in the future.
• Consider using the format of "nPubxxxxxx:yyyyyy" (or similar) to be more easily visible; that seems a popular format too.

init(damus_state: DamusState, zoom_size: CGFloat = 350) {
        self.damus_state = damus_state
        self.zoom_size = zoom_size
        Theme.navigationBarColors(background: nil, titleColor: .white, tintColor: nil)
    }

[jb55]

I'm finding these hard to merge because of so many changes at once, for instance: we don't have banners yet so I already can't merge this because of that. but if we had PRs for just the key display change we can at least start adding things incrementally .

[BenGWeeks]

The banner is just a static image (for now).

[BenGWeeks]

Most of the lines are just coming from the lines auto-created in the JSON definitions for the color sets.

[BenGWeeks]

Are you getting merge conflicts?

[jb55]

I really like the key thing. Merged!

[BenGWeeks]

Awesome :-) Did you have a chance to look at the following lines in ProfileView?

// We just want to have a white "< Home" text here, however,
    // setting the initialiser is causing issues, and it's late.
    // Ref: https://blog.techchee.com/navigation-bar-title-style-color-and-custom-back-button-in-swiftui/
    /*
    init(damus_state: DamusState, zoom_size: CGFloat = 350) {
        self.damus_state = damus_state
        self.zoom_size = zoom_size
        Theme.navigationBarColors(background: nil, titleColor: .white, tintColor: nil)
    }*/

Idea is to set the toolbar navigation "< Home" colour to white (top left above the banner) JUST for this screen (I would have thought it would have been a lot easier!).

Pull request is showing as "Closed" rather than "Merged" but changes are in Master - is that to resolve conflicts you had?

[jb55]

@BenGWeeks I may have screwed up the alignment of the buttons

[BenGWeeks]

Seems ok now (might tweak buttons a couple of pixels up).

Banner uses negative offsets to align profile picture which seems like logical solution but never liked negative positioning from CSS days but seems ok.