User and Settings pages makeover

[zuzana-kunckova]

Issue Description

For the Beta version, we are working on redesigning the Settings page and redesigning and reactifying the User (profile) page.

Settings page

This is already reactified but needs to be redesigned according to the new mockup. Several new input fields have been added, these need to be reflected on the actual page. All available React components can be found in this folder: https://github.com/freeCodeCamp/freeCodeCamp/tree/staging/common/app/routes/settings

User profile page

This page will display the information set up in the settings page. Current user page consists of the avatar, location, short bio, heatmap and a list of completed challenges, as well as links to 'My settings', 'Sign me out of FCC' and 'Email us at FCC'. This page will need to be redesigned to accommodate the extra information set up in the settings page. It will also need to be reactified.
The user page is currently run from this file: https://github.com/freeCodeCamp/freeCodeCamp/blob/staging/server/views/account/show.jade

Checklist of tasks that need completing

• - design the Settings page to accomodate new input fields - the most recent design can be viewed here: https://www.dropbox.com/s/29b2vdd97xyf4qw/wireframeComponents9.pdf?dl=0
• - update Settings page according to the new design (@chiefoleka, @pdotsani, @Exclusiveyash)
• - create a new layout for User profile page (@zk433) - the design is available here: https://www.dropbox.com/s/lrygghps3akzpl7/wireframeComponents8.2.pdf?dl=0
• - reactify the User profile page according to the new design (@jonathan-grah, @zk433)
• - update the server settings accordingly (@jonathan-grah)
• - design new certificates (@jonathan-grah)
• - implement new certificates, while allowing old certificates to be used (@jonathan-grah)

Other open issues relevant to the User and Settings pages (tick off when completed)

• Reactify User Profile Page #15729 - Reactify the User page
• Create or find a Calendar Heatmap React component #15826 - Converting the current heatmap into a React component
• Streak is still inaccurate for many campers #7925 - Streak is inaccurate for some people
• Updating profile from GitHub should redirect to profile with flash message #15859 - Updating profile from GitHub should redirect to profile with flash message
• [Beta] Settings page doesn't redirect to error for non-user #15809 - [Beta] Settings page doesn't redirect to error for non-user
• Update Linking Twitter or LinkedIn handles on settings page. #10807 - Update Linking Twitter or LinkedIn handles on settings page
• Remove email button from profile view #15956 - Remove email button from profile view
• Get new certificates working with new curriculum #12794 - Get new certificates working with new curriculum

There are more open issues that are related to the settings, I have linked the ones I thought were the most relevant. Please feel free to add others.

Things to keep in mind while working on the new pages

• use react-bootstrap
• use SCSS for styling
• FCC design style guide can be found here https://freecodecamp.github.io/design-style-guide/

[QuincyLarson]

@zk433 Awesome! Thank you for compiling all of the information about this redesign / reactification here in one place!

Could you add links to the current versions of the mocks here on this issue? Then we can replace those files as they evolve (as you said, they're pretty much there, but more fine tuning may come up as we build this out).

[zuzana-kunckova]

@QuincyLarson, I edited the original post with the link to the pdf. Also added few more details about things to keep in mind when working on these pages.

[raisedadead]

@zk433 I am not sure this meant?

• - update the server settings accordingly

Do you mean the backend APIs need to be updated as required? If yes can you please guide with the user properties that are to be handled?

Reference can be seen in the user schema common/models/user.json, let me know if you need assistance.

[zuzana-kunckova]

@martindavid , @codejockie, @Velveeta, @pdotsani, the User Profile page has been designed (see the first post with the link). Are you still interested in getting involved?

@raisedadead , I'll look into the user schema, I will let you know once I make some sence of it.

[Velveeta]

I'm still interested. If I'm reading this properly, though, the link you're referring to is the jade template for the profile page? And you just wanted that recreated via React? Or am I completely off the mark?

[zuzana-kunckova]

Sorry, I think I wasn't clear. The link I was referring to was this one: https://www.dropbox.com/s/gsc6e8xyf1sa055/userpage-wf2.1.pdf?dl=0

The current page is running from the jade file, but for the fCC beta, we are redesigning and reactifying it. I prepared a pdf with the layout, now it needs to be coded up using React and connected to the Settings page so that all the information will be pulled from there.

[Velveeta]

Perfect, I can start trying to dig in to this today :) Given the scope of items on this page view, and the number of people looking to assist, we can probably chunk this up here some, and allow people to take pieces of it, and then bring them all together in the final layout... I can throw out an initial breakdown here (sort of pseudo-tickets, without logging individual issues for each one), and people can just check them off as they begin work on a piece, so that nobody else grabs that item... I'll note some initial implementation strategy also, which people can collaborate on if they disagree, but which should help minimize the pain of integrating these pieces in the end.

[zuzana-kunckova]

Great idea, go for it! And thank you for contributing!

@Velveeta, before I forget, the heatmap component is already being reactified under another issue #15826.

[Velveeta]

Here's a quick and dirty breakdown, component-wise, with no thought as to what the data props should be called, but those kinds of details are easy to change as needed when we integrate everything into the overall view... Feel free to throw out comments if you feel the need to, and otherwise, please only check off an item if you're about to actively begin work on it (it might also be nice to edit the comment and add your username next to the line item so we know who's working on what).

[Velveeta]

• Buttons
  • Update My Settings
  • Sign me out of freeCodeCamp
• Avatar
  • User Avatar component (probably with default image if not yet set)
• Icons (Being worked on by @Velveeta at this branch)
  • Email
  • LinkedIn
  • GitHub
  • Website
  • Twitter
• HeatMap (being worked on in #15826)
• Portfolio
  • List item components
• Timeline (probably a 2-column layout with a border between columns for use in the timeline display itself)
  • List item components (2-column layout, vertically centered with each other, maybe with a bullet that can just be aligned over the border-line itself?)
• Data tables
  • For use in the Projects and Challenges displays, these can be simple specialized components that just render their tables with appropriate css styles for the row striping.

[zuzana-kunckova]

@Velveeta Great job!
Yes, it is LinkedIn :)
Calendar - do you mean the heatmap? Check out issue #15826 - somebody should already be working on it.

[Velveeta]

Thanks for pointing those out, I updated the list to reflect it :)

[pdotsani]

@Velveeta I'm interested in working on the user profile page as well. Let me know what I can do to help.

[Velveeta]

I'm by no means in charge of this whole thing, just trying to make sure multiple people can collaborate in a way that'll reduce stepping on toes :) As stated in the above comment outlining planned contributions, feel free to break off a chunk of work, and submit a PR for it... When you pluck a work segment, just check off the box for it so that nobody else starts working on that piece :)

[martindavid]

@zk433 Yes, I'm still keen to work on it. So, everything is based on @Velveeta list, right? I'll read through the code and see which one I can do. Atm, I'd interest to work on Button and Timeline.

[zuzana-kunckova]

Hi @Velveeta , @pdotsani , @martindavid , have you started working on any of the items?

I checked with @QuincyLarson about how best to approach such collaboration (multiple items on one page) and his advise was to pair program, that way you can collaborate without duplicating effort or creating merge conflicts. So I just wanted to check if you started working and if you are having any issues.

Let us know, don't suffer in silence 😃 .

[Velveeta]

I did mark off the icon items yesterday as work I was carving off for myself, since they're most likely going to descend from a base "icon" type of class and just going to be subtly differentiated, and I marked it off on the checklist above. I don't see any other worked marked off yet, and I didn't get too far before getting sucked back in to work items.

As far as pair programming, that's a great idea, but I'm not sure how well it works in such a disconnected environment as we have here... I'm totally open to pair up with somebody that's wanting to learn more about React programming, or wanting to knowledge-dump themselves, but we'll have to plan out a time/day to sync up on it for a screen-share :)

[zuzana-kunckova]

@Velveeta I would love to pair program with you (or work with you somehow)! I want to learn more about React, I know the theory but the practise is somewhat lacking 😄 . Could you please send me an email (zk0433@gmail.com) if you are interested in working with me? Thank you.

[zuzana-kunckova]

The original post has been updated with the most recent designs of the Settings and User Profile pages, as well as new related issues (specifically #12794 to get the new certificates working with the new curriculum).

[raisedadead]

Except for #15826 and #7925 all other user stories are done or are stale now. Closing, please open fresh issues if anything was missed.