We're done with the threaded replies and in this lesson we're going to tackle the reply form to allow users to reply to a Post. All right, let's take a look at the design. One of these Posts here has a reply form. Here it is. So it does look a lot like the post prompt and I'm pretty sure we're going to be able to reuse the post prompt as a starting point. The main differences I'd say is there is a background color and the post button is the secondary.

The main differences I'd say is there is a background color and the post button is the secondary or the dark version of the button. So lemme scroll up to show you the actual post prompt. And as you can see there are a lot of similarities between the two. So what I'll do is I'll copy this block of HTML that we've built already as a starting point and we'll tweak from there. And if I scroll back down to the reply one more time,

and we'll tweak from there. And if I scroll back down to the reply one more time, a little detail to notice here is this that border-top actually because there is some separation. I think it's an HR separator, but uh, you know what, I'll implement it as a border-top. I think really it's not going to be a big deal. Uh, it's going to look practically the same. So let's go and start building that. So you can see here the border-bottom which is equivalent

So let's go and start building that. So you can see here the border bottom which is equivalent to that separator. So basically we want to put our postReply inside the container that has the metaInfo, the post and the actionButtons. It's going to come before the closing border bottom. And so just before the replies that we've implemented in the previous lesson. Okay, so the first thing I'll do in the contents main

that we've implemented in the previous lesson. Okay, so the first thing I'll do in the contents main section is copy the entire post prompt that we've already built. We're gonna go in the feed and we are going to find the flex child container that has the flex child container. This is this one I'm interested in that contains the user meta post content and action buttons. And remember we've created the threaded replies outside.

that contains the user meta post content and action buttons. And remember we've created the threaded replies outside of it because we needed to have the border bottom of that container above the replies. But this time we are going to inside of it have the reply form. So I'll add a Comment reply form, and below this I will paste the entire post prompt that I've copied in my clipboard. So let's take a look at what it looks like.

that I've copied in my clipboard. So let's take a look at what it looks like. Below the post I have my post prompt and it's definitely a pretty good start. So couple of issues. We have this double border bottom and we have deposed prompt placeholder text that is different, but this is definitely a good start. Okay, so we'll start by removing this extraness border bottom.

Okay, so we'll start by removing this extraness border bottom. And while we are there, let's take a look at the background color so we can set that up. So yeah, like I said, it might be a bit hard to see. I think you can see it. There is a subtle background color here and there is no border bottom to it, but there is a border top. If I inspect this, it looks that it's actually a pixel light color at 3% opacity.

If I inspect this, it looks that it's actually a pixel light color at 3% opacity. So very subtle. Okay, so let's try that. I am in the reply form container here. And so we have this border pixel light that is set to the border-bottom, but we wanna change that to border-top. And then we want to have a background color of pixel light at, it's not going to exist by default, but I can go arbitrary value here.

light at, it's not going to exist by default, but I can go arbitrary value here and put 3% for the opacity. And as you can see, this is going to set the opacity to 3% down here. And yeah, definitely a good start. The next thing we want to do is add some padding around the whole reply form. Uh, but as you can see the border bottom is gone and so it's getting pretty nice already.

Uh, but as you can see the border bottom is gone and so it's getting pretty nice already. Okay, so we already have some padding-bottom here and I think we can just change that to p-4 to have it all around. And look at this, this is pretty good. I am quite happy with that. The next thing I want to do is change the placeholder text here. And also I think this is way too big, the font-size.

placeholder text here. And also I think this is way too big, the font size. So what have we got here? Yeah, it's 14 pixels. So text-sm and it says reply to Adele's post. Here we are going to reply to Michael's post. So in the form textarea here, well first of all, let's change the name of the field from post to reply. And the sr-only label can be reply body. And so the placeholder text is going to say reply to Michael's post.

And so the placeholder text is going to say reply to Michael's post. And I imagine the usernames going to be dynamic eventually here. Okay? And I want you to change the font size to text-sm and at this point this should start to be really, really good. Alright, I really like this. I think we're almost there. The last thing we might change is the button type. I think in the design it's using the other button style,

The last thing we might change is the button type. I think in the design it's using the other button style, which is this one sort of. So yeah, actually it's a bit different. I don't know if it's intentional, but we have a background of the pixel color at 10% opacity. Okay, so let's go edit the button directly in the reply form. So it's not these two that are for the image and video, but it's this submit button here.

So it's not these two that are for the image and video, but it's this submit button here. So we want the background color to be pixel, yes, but at 10% opacity only. And then we want the text to be text pixel. We keep the transparent border and everything else. And I think on hover we can go pixel 20% opacity and on active, I don't know, I'm just messing around. Let's go 30. So this is our main post prompt with this button style.

Let's go 30. So this is our main post prompt with this button style. And now our reply form looks like this. And on hover and active it kind of looks nice. Maybe the hover style was a bit too prominent. So let's go 15% on hover and then 20 on active. Alright, and let's try it one more time. Great drawing skills and then try to submit the post. Let's check the hover.

Great drawing skills and then try to submit the post. Let's check the hover. And when I click on active, it's going to submit the post. And as you can see, we've submitted the reply fields with the value that we've typed in. Maybe the very last thing I can do looking at the design is add a few more rows to the textarea. You can see there's quite a bit of height in the box where our implementation is not very tall here. So by adding a few rows to the textarea,

where our implementation is not very tall here. So by adding a few rows to the text area, we should be in a better place. So the text area is here, set rows, and let's try five rows and yep, there you go. This is much nicer like this. Alright, well that was surprisingly quick, but it's probably a good thing because the previous videos were quite lengthy so it's nice to have one short and sweet implementation.

because the previous videos were quite lengthy so it's nice to have one short and sweet implementation. Uh, pretty happy with that. And we are pretty much done with the implementation of the feed here. We have simple Posts, we have Posts with replies, we have a reply form and it looks like we have, oops, everything except this footer here that we can go and add. And also I've noticed in the sidebar there is this mini user

except this footer here that we can go and add. And also I've noticed in the sidebar there is this mini user panel here at the bottom, uh, I imagine of the viewport. So in the next lesson we are going to add these two things and then because the profile page has a very similar layout, I want to do some responsive adjustments to the page because they are both going to share the same sort of application shell. So stay tuned. In the next lesson, we are going

So stay tuned. In the next lesson, we are going to do this little responsive adjustment before we duplicate the app shell for the profile page. And I just wanna add the two missing bits. See you in the next lesson. Take it easy.