WEBVTT

1
00:00:00.160 --> 00:00:02.340
Hi, and welcome back to our tutorial.

2
00:00:02.360 --> 00:00:04.420
Today we're gonna be making sure that our

3
00:00:04.450 --> 00:00:07.180
single donation item
looks exactly like this.

4
00:00:07.210 --> 00:00:09.300
And the first thing we're gonna do is

5
00:00:09.330 --> 00:00:13.100
we're gonna put this badge
on top of our image.

6
00:00:13.130 --> 00:00:16.100
So currently, our badge is actually

7
00:00:16.130 --> 00:00:21.300
displayed like this,
and we don't want to be doing that.

8
00:00:21.330 --> 00:00:29.260
So let's create a view container for our
badge so that we can apply styles to it.

9
00:00:29.290 --> 00:00:31.500
And let's say that style's name.

10
00:00:31.530 --> 00:00:33.060
Is going to be badge.

11
00:00:33.090 --> 00:00:35.700
And let's go to our style file,

12
00:00:35.730 --> 00:00:40.340
create a badge and let's say
that we need position absolute.

13
00:00:40.370 --> 00:00:46.180
And after we set it to position absolute,
we don't see this anymore.

14
00:00:46.210 --> 00:00:48.540
And it might be because we need the index.

15
00:00:48.570 --> 00:00:50.340
So let's set it to one and great.

16
00:00:50.370 --> 00:00:52.700
Now we are able to see it.

17
00:00:52.730 --> 00:00:57.180
Let's see that this has
from top and left borders.

18
00:00:57.210 --> 00:01:00.420
So from top it should be

19
00:01:00.450 --> 00:01:07.130
vertical scale 13 and from left it
should be horizontal scale ten.

20
00:01:07.160 --> 00:01:08.770
Let's save this.
And great.

21
00:01:08.800 --> 00:01:12.540
Now we see the badge appear here.

22
00:01:12.570 --> 00:01:18.410
Now let's go to single donation file
and let's see what's the distance between

23
00:01:18.440 --> 00:01:24.020
this container for the title
and price and it is 16.

24
00:01:24.050 --> 00:01:28.200
So let's wrap this in a view container.

25
00:01:29.240 --> 00:01:37.060
And let's say that this is
a style for donation information.

26
00:01:37.090 --> 00:01:39.570
Let's copy this name and paste it here.

27
00:01:39.600 --> 00:01:43.140
And let's say that it needs margin.
Top of

28
00:01:43.170 --> 00:01:46.900
vertical scale 16 and there is some

29
00:01:46.930 --> 00:01:51.420
distance between these items as well,
which is Margin top five.

30
00:01:51.450 --> 00:01:55.440
So let's wrap this

31
00:01:56.000 --> 00:02:02.400
as well in a view container let's call the

32
00:02:03.440 --> 00:02:07.620
price style that we're going to define here

33
00:02:07.650 --> 00:02:13.600
and we're going to say that this has
margin top of vertical scale five.

34
00:02:13.760 --> 00:02:14.940
Great.

35
00:02:14.970 --> 00:02:16.780
So now this is looking good.

36
00:02:16.810 --> 00:02:21.300
And we want to make sure
that our image is fully visible.

37
00:02:21.330 --> 00:02:30.730
And for that, we're going to have to go
to image and apply a resize mode contain.

38
00:02:30.760 --> 00:02:33.780
Great.
Now we're able to see full image.

39
00:02:33.810 --> 00:02:37.400
So now that we have all of these ready,

40
00:02:38.040 --> 00:02:41.300
we might want to try out
how we would lay out.

41
00:02:41.330 --> 00:02:42.780
For example, two

42
00:02:42.810 --> 00:02:45.300
such components next to each other.

43
00:02:45.330 --> 00:02:47.340
So for that we found just have to create

44
00:02:47.370 --> 00:02:54.610
a view container on our home page
and we're going to put two items such as

45
00:02:54.640 --> 00:03:01.100
these and we're just going to apply
a style.

46
00:03:01.130 --> 00:03:08.020
Of flex, direction row and justify

47
00:03:08.050 --> 00:03:14.500
content space between this looks great.

48
00:03:14.530 --> 00:03:19.500
And we could also apply some kind
of padding, which is 24 horizontally.

49
00:03:19.530 --> 00:03:26.340
So let's do padding horizontal
horizontal scale 24.

50
00:03:26.370 --> 00:03:29.700
And if we do that, this is
how it's going to be visible.

51
00:03:29.730 --> 00:03:32.140
So that's all for this component.

52
00:03:32.170 --> 00:03:38.260
I think we are fully ready
to create this page ourselves.

53
00:03:38.290 --> 00:03:44.940
And all we need to do really is
define a styling for paragraph text.

54
00:03:44.970 --> 00:03:50.100
But I think we're just going to take care
of that in the screen component itself.

55
00:03:50.130 --> 00:03:53.580
So we're ready to start
building this application.

56
00:03:53.610 --> 00:03:54.780
From now on,

57
00:03:54.810 --> 00:03:59.060
we're going to work on the payment page
separately because this is going to be

58
00:03:59.090 --> 00:04:03.060
a part of a module where we're
going to set up an actual payment.

59
00:04:03.090 --> 00:04:06.780
Let's keep this for another module.

60
00:04:06.800 --> 00:04:08.100
Thanks so much for watching.

61
00:04:08.120 --> 00:04:09.560
And I'm very excited that we're going

62
00:04:09.560 --> 00:04:12.610
to be moving to our new module,
where you're going to be learning how

63
00:04:12.640 --> 00:04:17.780
to set up a Redux store and manage data
with it because it's truly amazing.

64
00:04:17.800 --> 00:04:20.500
And the whole reason why we only built

65
00:04:20.530 --> 00:04:26.660
the components here and never manage
the data or created the actual pages is

66
00:04:26.690 --> 00:04:31.300
because I want you to learn how
to do all of that using Redux.

67
00:04:31.330 --> 00:04:34.000
So I'll see you in the next section.
Have a great day.