Style a React List Component
In this lesson, we style our list component so that we can see who wrote the message and visually distinguish the current viewers messages from other peoples.
Instructor: [0:01] Now that we have comments rendering, let's add a little style. I'm going to move my editor to one side and my browser to another. I'll close these. First, let's get rid of this console log. Then I'm going to switch to comment two and I'll save it.
[0:27] I'm doing this because this comment is made from a fake github account that I created. This comment is made from my current session, and then another comment by the fake github account just so we can see the difference between my comments and someone else's comments.
[0:53] First, let's add style. We'll get rid of those list style is none. Then, we'll add padding, 10px and 20px. Next, let's add a background color. Background, we want to change the background color based on whether or not the current user made the comment or not. We can find that out by going comment.viewerDidAuthor.
[1:35] If the viewer did author, we will use this color. If the viewer didn't author, we will use this color. Next, let's add margin bottom, about four pixels. Then we'll add a border radius of 40 pixels. Next, we'll add a width of 60 percent.
[2:16] Now, we should show who is actually commenting. We'll use an H3, we'll add commentnode.author.log, and we'll wrap this one in a paragraph tag. Next, we want our comments to be on the right and their comments to be on the left.
[2:42] We'll go up to this UL. We'll add style and we'll add a display of flex in a flex direction of column. That won't change anything, but now we can go align self comment node.viewer. If the viewer is the author then we'll do flex end. If the viewer isn't the author, we will use flex start.
[3:17] Now it's looking pretty good. I'll add a little more margin. Let's add six, and let's bring style margin zero.