Countdown Timer UI

[00:00:00]
>> Kadi Kraman: Let's start by rendering this text. So we want thing doing or thing overdue by. So let's go, we want above our button. So let's say, if status is overdue, then we'll render a text saying, thing overdue by, and otherwise, we'll render some text, same thing to n.

[00:00:50]
>> Kadi Kraman: Okay, you can see that every time we reload, because we're not storing the data in any storage yet, every time I reload, it will get reset, but this is fine. It's actually good for testing. All right, and let's do our timer segments as well before we add style.

[00:01:06]
So we'll do a view, and we'll use this timer segment file that we created. So, timer segment.
>> Kadi Kraman: And we'll have, unit is days, the number will be status, distance, days, and this might be empty, this might be undefined. So let's also default it to 0. And, yeah, last thing we need is some text there, but we'll do that later.

[00:01:52]
>> Kadi Kraman: And let's do three more of these. So we need hours, there'll be distance in hours,
>> Kadi Kraman: Minutes, and we show the distance minutes,
>> Kadi Kraman: And seconds.
>> Kadi Kraman: Okay, so again, by default, I'm rendering underneath each other, but we would probably want them to render next to each other in a row.

[00:02:23]
So we will do a styles row and give it a flex-direction row.
>> Kadi Kraman: Lovely.
>> Kadi Kraman: So let's see what is different here. Again, gonna give this text some styles, so we need a heading style. So style=styles.heading.
>> Kadi Kraman: And the heading,
>> Kadi Kraman: So, fontsize 24, fontweight, bold.
>> Kadi Kraman: MarginBottom, 24.

[00:03:31]
>> Kadi Kraman: Well, I guess we don't need the color, I don't know why I did a color hit, but there we go.
>> Kadi Kraman: Okay, so now we want to change the container so that if you are late, it will be very red. So we can use our, as you can recall, you can pass in an array of styles here instead of just an object.

[00:03:56]
So let's make this into an array. And we can say, if it is overdue,
>> Kadi Kraman: Then do styles.containerLate, otherwise undefined. And we'll create this containerLate style, which will give a background color of red. To make it very annoying so you want to do the thing to not have this red background.

[00:04:34]
>> Kadi Kraman: All right, so now the problem is that I think we'd like the text to be white here if the thing is overdue. So, if you recall, in the time of segment, we have an optional prop for the text style that gets passed to both of these styles.

[00:04:54]
So we can add another style to just say white text.
>> Kadi Kraman: Which is here. Style, text style, there we go, text style, which is styles.whiteText.
>> Kadi Kraman: We text, and this will be white.
>> Kadi Kraman: Theme, colorWhite.
>> Kadi Kraman: Okay, we want this to, well, now if this appears in our white background because we want this to only be color white if the thing is overdue.

[00:05:47]
So let's do if status is overdue, then we'll use the whiteText, otherwise undefined.
>> Kadi Kraman: Lovely, and we can copy this style to the other timer segment components as well.
>> Kadi Kraman: And actually, we can use this for our heading as well. So if it is overdue,
>> Kadi Kraman: We can do your styles, whiteText.

[00:06:34]
>> Kadi Kraman: Make sure it works.
>> Kadi Kraman: Lovely, so this now, it looks like the UI. And let's update this button as well, to say, I've done the thing.
>> Kadi Kraman: I think we need a little bit of padding between these two.
>> Kadi Kraman: I'm just gonna add it to the row.

[00:07:02]
So, let's do a marginBottom of 24, so just to add some space between these two, okay? I think that looks all right.