user-story
user-story copied to clipboard
Add missing key prop and fix improper spacing in voter's list
Issue Number
fixes #209
Describe the changes you've made
Added key prop that points to the user's id which is unique to each user, hence resolving the unique key prop error.
Regarding the improper spacing, I've created a new class vote-item that offsets the margin-left to 0 that otherwise would be 3em set by the .author-information class. So, only wherever this class is used the margin will be offset, hence no other parts of UI will be broken. This class is applied to the div container of the voter items in the voter's list (div containing the avatar and the username). This is used in 2 places.
- In the stories list component (within the
Votecomponent). - Story page timeline component.
Above are the two places where the voter's list modal can be rendered.
I've also reduced the
padding-rightfrom6emto3em. These changes have fixed the appearance and thekeyprop warning. The results were further tested on both desktop mode and throttled to smartphone resolution mode. At both the stances, the appearance seemed to be alright.
Describe if there is any unusual behavior (Any Warning) of your code(Write NA if there isn't)
NA
Additional context (OPTIONAL)

Test plan (OPTIONAL)
A good test plan should give instructions that someone else can easily follow.
- Click on the vote count of any story with more than 1 vote.
- The modal should show the list of voters with proper spacing and no error logged on the console.
Checklist
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] All new and existing tests passed.
- [x] The title of my pull request is a short description of the requested changes.
Provide a Deployed link of route/page that needs to review
Preview: Deploy preview link here with the appropriate route