MTG2000 commented 2 years ago

Fixes #108, #107, #88, #87, #119

netlify[bot] commented 2 years ago

Deploy Preview for makers-bolt-fun ready!

Name	Link
Latest commit	20e2b1ea75998d69fd544d9cc086a4baa86579a6
Latest deploy log	https://app.netlify.com/sites/makers-bolt-fun/deploys/62ffca076b99b000087afc23
Deploy Preview	https://deploy-preview-118--makers-bolt-fun.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] commented 2 years ago

Deploy Preview for makers-bolt-fun-preview ready!

Name	Link
Latest commit	20e2b1ea75998d69fd544d9cc086a4baa86579a6
Latest deploy log	https://app.netlify.com/sites/makers-bolt-fun-preview/deploys/62ffca073bd5bb0008c54c9f
Deploy Preview	https://deploy-preview-118--makers-bolt-fun-preview.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify[bot] commented 2 years ago

Deploy Preview for makers-bolt-fun-stories ready!

Name	Link
Latest commit	20e2b1ea75998d69fd544d9cc086a4baa86579a6
Latest deploy log	https://app.netlify.com/sites/makers-bolt-fun-stories/deploys/62ffca07bbfbaa0008a188f5
Deploy Preview	https://deploy-preview-118--makers-bolt-fun-stories.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

MTG2000 commented 2 years ago

Fixes also these issues:

91 #120

barefoot-88 commented 2 years ago

@MTG2000 Here is some QA feedback to be implemented before we merge this PR. I'll break it up into sections and try to reference the issues where possible.

Edit profile (Issue #108 )

Left Column (Navigation)

My profile (any information relating to the users profile)
Settings & Preferences (Nostr, Linked Accounts (later), etc) This component is sticky whilst the user scrolls.

Middle Column (Information)

Selected page cards showing information (sometimes editable)

Right Column (Profile Preview + Save/Cancel CTAs)

Within this card you have...

Profile preview (Avatar, Name, Description, Role)
CTAs (Save Changes, Cancel) This component is sticky whilst the user scrolls.

Save Changes/Cancel button

When the user enters this Edit profile state, the "Save Changes" button is disabled. Once the user makes a change to any element on that page, the button becomes enabled and the user can click it.
If the user makes a change and tries to navigate to another tab (i.e Settings & Preferences), a message pops up saying, "Are you sure you want to continue without saving your changes?" with two buttons "Save Changes" + "Continue without saving".
If the user makes a change and clicks the "Cancel" button, a message appears with the same message as above, forcing the user to save or continue consciously and not accidentally lose progress.
If the user clicks "Save Changes", the button should show a loading state indicating that an action is in progress. Once saved, this should be displayed in a message in the right hand column, giving the user an indication that its been saved and they can continue with another action.
If the user tries to save a change but there is an error (e.g Invalid Lightning Address), we should show this error message as "Unable to save changes, please review highlighted fields."

No changes (Save disabled)

Change made (Save enabled)

Saving changes (In progress)

Changes saved (Success)

Changes failed (Error)

Navigation (Issue #107 )

Please review the following QA changes to the navigation issue.

Mobile

"Connect ⚡️" sits in the primary navigation (top-right) when the menu is both closed and open. When logged in, this shows the users avatar.
"Logout 👋" becomes list item when navigation menu is opened (user is logged in). It should sit at the bottom below Donate.
For the time being, since we keep the primary CTA on the relevant page for mobile view (e.g "Write a Story"), we can remove this CTA in the open navigation menu.

Web

When the user is not signed in, the Primary CTA in the top navigation bar is "Connect ⚡️", using an outline styled button (see design).
Once the user is logged in, their avatar is displayed and the primary CTA is located next to it (top-right) in a purple filled button. This button changes based on which page the user is currently viewing (e.g Stories = "Write a Story", Apps = "Submit an app"). The only exception to this for the time being should be the Hackathons page, as a user doesn't need to be logged in to submit an event, in this scenario there would be no primary CTA in the top nav bar (unless the user isn't logged in, as we'd display the "Connect ⚡️" CTA).

User not signed in

User Signed In

Categories Carousel (Apps page) (Issue #88 )

Please can we implement this carousel chevron as designed in #88 . As you can see, this should also be hovering there, rather than just showing up when the user hovers over it.

How it works We should implement it so that it is a single click in either direction. When normal, the chevron shows on the end of the row (right hand side), and when clicked it takes you to the end of the row (lying flush with the edge of the container). The chevron then appears on the left hand side so the user knows they can navigate back to the start position.

Normal state

After being clicked Chevron moves over to the left hand side. Final category item is flush to the side of the page.

Category page layout (#125 )

If you have time, it would also be great to fix this issue re. the page layout and margins for Categories

barefoot-88 commented 2 years ago

@MTG2000 Please review...

Navigation

Mobile Menu

Only show "Logout" menu option when user's account is connected
Remove extra padding (32px) from Menu list-items
Remove "Connect your lightning wallet" CTA
Fix the shape of the Hackathons icon-circle (currently looks slightly stretched vertically...)

Web nav

Use more subtle outline button (border = 1px, colour = cool-grey/300, text colour = cool-grey/800)

vs

Edit profile ⏳

... waiting for lnurl-auth response...

MTG2000 commented 2 years ago

@barefoot-88 Should be fixed now

barefoot-88 commented 2 years ago

A few things I noticed when clicking through on mobile...

a). Profile names run off the edge of the screen.

b). Padding of profile components should be 16px, not 24px (always follow this rule on mobile)...

Profile details card
Makers' Stories card
Nostr Comments card (edit state)

c). Profile edit state: buttons should be vertically stacked

Save changes
Cancel

d). Hottest projects page: should have the same margins, header card, etc as the other categories pages...

MTG2000 commented 2 years ago

@barefoot-88 @johnsBeharry Is there anything remaining in this PR before we can merge it?

johnsBeharry commented 2 years ago

@MTG2000 I'll do another review, but in the mean time is #109 dependent on this PR getting merged?

MTG2000 commented 2 years ago

is #109 dependent on this PR getting merged?

Nope, not really.

peakshift / makers.bolt.fun

Navigation component, redesigned profile edit, better carousel #118

Deploy Preview for makers-bolt-fun ready!

Deploy Preview for makers-bolt-fun-preview ready!

Deploy Preview for makers-bolt-fun-stories ready!

91 #120