Addons-frontend: Add-ons developer and Theme artist options are not available on the user's info card

[ioanarusiczki]

As a followup for #4283
STR:

1. Load AMO dev and click on View Profile.
2. Check if Add-ons developer and Theme Artist are present on the right upper part of the card as in here

Expected result:
The check boxes and the two options are present.

Actual result:
The two options are not displayed.

Notes:
This issue is reproducible on AMO dev with FF59 (Win10).

[tofumatt]

Those are not checkboxes; they're placeholder icons that would accompany each descriptor. 😄

[ioanarusiczki]

@tofumatt @my bad ! Yes, you cannot check or uncheck those! I hurried to describe them.

[tsl143]

@tofumatt , do we have any design doc for this, precisely I need following:
Icons for developer and theme artist, font-size, font-weight

[tofumatt]

@tsl143 They are in the Sketch file in the assets/ folder, though you'll need Sketch (only available on MacOS) to view it.

[tsl143]

I dont have sketch, so I tried online viewers, I got following, but still cant get hands on any icon for both.

[tsl143]

Or there is no image, we need to put just squares?

[tofumatt]

Oh, it could be that we need @pwalm to fill in those icons.

[willdurand]

@pwalm would you have some more information/icons?

[pwalm]

Like this! (sorry about the missing icons)

icons.zip

[AdityaSrivast]

I would like to work on it.This is my first time. What do I have to do?

[rebmullin]

cool @AdityaSrivast : )

Have you cloned the repo yet? There are instructions in the readme on how to set up the project if you haven't done that already. Let us know if you need any help with this..

Once you have that set up, to get started you can take a look at the UserProfile component. I think you'll want to add the logic/HTML here for this (note: there is an associated sass file to address any styles needed for this).

Regarding adding the icons, you may have to include the Icon component too and I believe if you place the svgs found in the zip (attached above) in the img directory they should appear (hopefully :) You may want to take a look to see how we've done it for other icons.

Definitely feel free to reach out with any questions : )

[AdityaSrivast]

@rebmullin Can I work on it now? I am facing problem in finding out the corresponding HTML file for the code. Please help me how to find out the same. Sorry for late response. Will try to report back in 2 days.

[rebmullin]

sure thing @AdityaSrivast, that'd be great : )

Regarding finding the correct file - have you found the UserProfile file? In here you will find the following snippet of code:

 const userProfileHeader = (
   <React.Fragment>
     <UserAvatar className="UserProfile-avatar" user={user} />

     <h1 className="UserProfile-name">
       {user ? user.name : <LoadingText />}
     </h1>
   </React.Fragment>
 );

you will probably want to add the logic/HTML for this here and then style according to the mocks shown above

does that help?

[AdityaSrivast]

@rebmullin The code uses advanced reactjs and I am just a n00b for it at the moment. I may not be able to fix this out in the manner code is being written. But thanks a lot for your trust in me. I will surely learn quickly and contribute to the community in near future. It will be great if you can guide me for the learning, for eg., sources to be referred or any course, etc.

[tsl143]

No Problem @AdityaSrivast , I will take this up :) cheers.

[rebmullin]

Hi @AdityaSrivast, of course and no worries : )

Regarding learning react, I would suggest looking at the reactjs docs and going through their tutorial. In addition, I suggest googling for additional resources/tutorials. I think there is a lot out there now and depending on your preferred style of learning you should be able to find some good docs/tutorials that suit you. Once you have some basic understanding, I would suggest diving into the code: ). I think that is the best way to learn and you can always ask questions.

Look forward to hearing from you in the near future : )

[ioanarusiczki]

Verified fixed on AMO dev with FF60 (Win10)
@willdurand The static themes in this context should be included into Theme artist. For now if a static theme is submitted and approved is considered into Add-ons developer.