WEBVTT

00:00:00.240 --> 00:00:02.700
Welcome back to our
social media app project.

00:00:02.730 --> 00:00:06.610
Now, I'm really excited to introduce
you to how to create the icons.

00:00:06.640 --> 00:00:10.840
Icons are very crucial for conveying
information quickly and intuitively,

00:00:10.870 --> 00:00:14.900
and they help to create consistent
visual language across the app.

00:00:14.920 --> 00:00:16.040
Now, we're going to take a look

00:00:16.060 --> 00:00:22.820
at the Figma design and see what icons we
might need for our project.

00:00:22.850 --> 00:00:25.080
The icons that are given in our designs

00:00:25.100 --> 00:00:29.140
may look great, but they may not
scale well for different devices.

00:00:29.170 --> 00:00:33.780
This can result in loss of quality
and make our app look less professional.

00:00:33.810 --> 00:00:35.740
We need a solution that can offer us

00:00:35.770 --> 00:00:38.500
high-quality icons that look
great on any device.

00:00:38.530 --> 00:00:40.780
That's where Fund Awesome comes in.

00:00:40.810 --> 00:00:43.160
Font Awesome is a comprehensive library

00:00:43.180 --> 00:00:47.380
of icons that are scalable,
customizable, and easy to use.

00:00:47.410 --> 00:00:49.280
It offers a wide range of icons

00:00:49.310 --> 00:00:54.940
in different categories,
and we really would use its advantages.

00:00:54.970 --> 00:01:00.080
Firstly, it's a tried and tested solution
that many developers already use and love.

00:01:00.110 --> 00:01:03.860
Secondly, it's easy to customize
and add new icons to the library.

00:01:03.890 --> 00:01:06.400
Thirdly, it's cross-platform compatible

00:01:06.430 --> 00:01:07.949
and works on both iOS

00:01:08.149 --> 00:01:09.540
and Android platforms.

00:01:09.570 --> 00:01:11.160
Now that we've introduced you

00:01:11.190 --> 00:01:13.249
to Found Awesome, we're going to install

00:01:13.449 --> 00:01:15.360
it in our project and show you how to use

00:01:15.390 --> 00:01:17.361
it to create beautiful and professional

00:01:17.561 --> 00:01:19.180
icons that look great on any device.

00:01:19.210 --> 00:01:21.160
Let's get started.

00:01:21.200 --> 00:01:24.180
Let's go to fontawesome.com

00:01:24.210 --> 00:01:29.380
and find an icon similar to this.

00:01:29.410 --> 00:01:32.140
We're going to navigate to icons.

00:01:32.170 --> 00:01:36.280
We're going to search message.

00:01:36.560 --> 00:01:40.380
Here are all of the icons available to us.

00:01:40.410 --> 00:01:44.400
I think we could use this icon here.

00:01:44.430 --> 00:01:49.080
For the message purpose or we could
use the envelope if we really want to.

00:01:49.110 --> 00:01:51.780
We can search envelope.

00:01:51.810 --> 00:01:56.660
Let's use the envelope.

00:01:56.680 --> 00:01:59.740
If we want to use the Font Awesome icons,
we're going to have to install it.

00:01:59.770 --> 00:02:02.700
That's what we're going to do right now.

00:02:02.720 --> 00:02:04.200
For that, we're going to need this page

00:02:04.230 --> 00:02:08.660
which tells us how to install
Font Awesome in our application.

00:02:08.690 --> 00:02:12.080
The link to this page is
inside the resources folder.

00:02:12.110 --> 00:02:16.890
You can just click on that and you're
going to come exactly on this page.

00:02:16.920 --> 00:02:20.040
Then we're going to have to just
follow the instructions given here.

00:02:20.070 --> 00:02:22.780
We have the how to install
instructions here.

00:02:22.810 --> 00:02:24.780
Just open up your terminal.

00:02:24.800 --> 00:02:26.040
Actually, we're not going to need

00:02:26.040 --> 00:02:28.520
the Metro Bundler, and that's
what opened up right now.

00:02:28.550 --> 00:02:30.940
Make sure to close your Metro Bundler.

00:02:30.960 --> 00:02:32.640
We're going to need to do this anyways

00:02:32.670 --> 00:02:35.980
later, so just close it right
now if you have it open.

00:02:36.010 --> 00:02:42.540
I'm going to create a new terminal
and I'm going to go to our project.

00:02:42.570 --> 00:02:45.140
What I'm going to do is

00:02:45.170 --> 00:02:50.540
copy this command and paste it here
and wait for this to complete.

00:02:50.570 --> 00:02:53.460
Now, the next step is installing the pods,

00:02:53.490 --> 00:02:58.900
which is something that Windows users
don't do because you cannot install pods.

00:02:58.930 --> 00:03:03.440
If in any of these videos you see me going
to iOS folder and installing the pods

00:03:03.470 --> 00:03:07.780
and you have Windows operating
system, just don't do this.

00:03:07.810 --> 00:03:09.380
Otherwise, if you're on macOS,

00:03:09.410 --> 00:03:14.420
copy this comment, paste it here,
click on Enter, and run this.

00:03:14.450 --> 00:03:17.100
It's going to install one pod.

00:03:17.120 --> 00:03:20.800
It might not be visible in my terminal
right now because it is already installed.

00:03:20.830 --> 00:03:22.760
That's totally fine.

00:03:23.360 --> 00:03:28.140
Right now, what we're going to do
is install some additional styles.

00:03:28.170 --> 00:03:30.300
We're going to go with the free branding.

00:03:30.330 --> 00:03:33.700
Just copy this command
again, paste it here.

00:03:33.720 --> 00:03:37.420
This is something that any user should
do whether you're on Windows or not.

00:03:37.450 --> 00:03:40.660
Just do this and click on Enter.

00:03:40.690 --> 00:03:41.960
It's going to install.

00:03:41.990 --> 00:03:45.560
Right now, we are able to launch our

00:03:45.590 --> 00:03:48.460
application and start using
the font awesome icon.

00:03:48.490 --> 00:03:49.900
Great, let's do that.

00:03:49.930 --> 00:03:51.150
I'm going to use

00:03:51.350 --> 00:03:52.980
npx react-native run-ios

00:03:54.690 --> 00:03:57.380
windows users just going to use Android.

00:03:57.410 --> 00:03:59.380
That's totally fine.

00:03:59.410 --> 00:04:03.580
It will work the same way
on both of the emulators.

00:04:03.610 --> 00:04:05.740
That's totally okay.

00:04:05.770 --> 00:04:07.800
Now let's wait for this to build.

00:04:07.830 --> 00:04:11.720
Once your build is completed,
just come back to the video so that we can

00:04:11.750 --> 00:04:14.980
continue building our
social media application.

00:04:15.000 --> 00:04:17.200
Great.
My Metro Bundler is running already

00:04:17.220 --> 00:04:23.260
and everything's ready for us to continue
down our path of creating the icon.

00:04:23.280 --> 00:04:24.900
We have the design here.

00:04:24.920 --> 00:04:27.380
I have my editor right here.

00:04:27.410 --> 00:04:35.900
I do want the simulator to be visible, so
I'm going to have to take care of that.

00:04:35.920 --> 00:04:37.660
Let's do it like this.

00:04:37.690 --> 00:04:42.320
Now we are going to have
to use the envelope icon.

00:04:42.340 --> 00:04:44.640
But we do see here that there are some

00:04:44.660 --> 00:04:48.740
more things to be taken care of, such as,
let's explore is

00:04:48.770 --> 00:04:53.540
at a very left most side here,
which is something that we don't need.

00:04:53.570 --> 00:04:57.780
We actually need some
margins around these items.

00:04:57.800 --> 00:05:02.100
On the left side, we need
26 as it is visible here.

00:05:02.130 --> 00:05:05.820
On the right side,
we are going to need 17.

00:05:05.840 --> 00:05:10.740
Actually, there is a top margin
here as well, which is 30.

00:05:10.770 --> 00:05:12.380
Let's make sure to do that.

00:05:12.410 --> 00:05:13.840
Now, let's think about this.

00:05:13.860 --> 00:05:15.720
How do we want to approach this?

00:05:15.750 --> 00:05:19.380
We see that these items are in a row,

00:05:19.410 --> 00:05:24.580
which means that we have to place both
of these items in the same container.

00:05:24.600 --> 00:05:29.540
We have the title and we're
going to add the icon right now.

00:05:29.570 --> 00:05:33.760
But there's a bunch more things coming
here and we don't want the container

00:05:33.790 --> 00:05:37.420
to just be the safe area view
because that defines the whole page.

00:05:37.450 --> 00:05:40.260
Here we're going to need a view container.

00:05:40.290 --> 00:05:44.540
Let's use the view container
and wrap this title inside here.

00:05:44.570 --> 00:05:48.300
Let's make sure that we import
the view container and save this.

00:05:48.330 --> 00:05:51.840
Then what we're going to do
is style this view container.

00:05:51.860 --> 00:05:53.620
Let's give it a style.

00:05:53.650 --> 00:06:04.180
Let's say that we want the margin
left to be 27 and margin right to be...

00:06:04.210 --> 00:06:05.620
How much was it?

00:06:05.650 --> 00:06:07.300
It was 17.

00:06:07.330 --> 00:06:09.700
Okay, so it should be 17 here.

00:06:09.730 --> 00:06:12.300
We don't see the margin right here because

00:06:12.330 --> 00:06:16.260
there's so much space, but we're going
to see it later once we add the icon.

00:06:16.290 --> 00:06:19.340
I missed out on adding margin top.

00:06:19.360 --> 00:06:21.980
Let's make sure it's right here as well.

00:06:22.010 --> 00:06:27.860
I'm going to align this in a way where
you see how I style the components.

00:06:27.890 --> 00:06:28.900
Great.

00:06:28.920 --> 00:06:35.060
Then what we need to do is make
sure that we add the icon.

00:06:35.090 --> 00:06:37.400
Let's add the icon.

00:06:39.280 --> 00:06:41.400
It would be Font Awesome icon.

00:06:41.420 --> 00:06:46.320
Once I click, you're going to see
the Font Awesome icon imported here.

00:06:46.350 --> 00:06:48.360
This is the path.

00:06:48.390 --> 00:06:51.740
Then we're going to need
the envelope icon.

00:06:51.770 --> 00:06:57.440
My editor has auto suggestions on, so I
think yours is going to have as well.

00:06:57.470 --> 00:07:01.580
If I type in envelope here,
you're going to see the string envelope.

00:07:01.600 --> 00:07:06.740
I don't want to use the string, actually,
I'm going to use the variable name here.

00:07:06.770 --> 00:07:13.300
If I click here, I can choose the free
solid SVG icon to be imported.

00:07:13.330 --> 00:07:18.380
It's going to be added here for you
as well if you want, just copy this.

00:07:18.410 --> 00:07:21.040
Let's use the FA envelope right here.

00:07:21.070 --> 00:07:24.620
Let's close this component
so that we have no errors.

00:07:24.650 --> 00:07:25.900
Save this.

00:07:25.920 --> 00:07:29.100
Here you see the envelope icon pop up.

00:07:29.130 --> 00:07:31.340
But what's the problem here?

00:07:31.360 --> 00:07:33.580
This is in a column.

00:07:33.600 --> 00:07:37.620
We see these two items in a column,
but we want it to be in the row.

00:07:37.650 --> 00:07:40.600
What do you use when
you see this behavior?

00:07:40.630 --> 00:07:46.860
You can use flex direction and just say
that you want these items to be in a row.

00:07:46.880 --> 00:07:47.300
Great.

00:07:47.330 --> 00:07:52.100
Now we see that we need some
centering, vertical centering.

00:07:52.130 --> 00:07:53.880
Let's think about this.

00:07:53.910 --> 00:07:59.520
We have a flex direction row, meaning
that our main axis lies horizontally.

00:07:59.540 --> 00:08:03.260
It goes like this, it's horizontal.

00:08:03.290 --> 00:08:08.060
What we need is something that will
help us center it vertically.

00:08:08.090 --> 00:08:12.160
Anytime you are referencing a cross axis

00:08:12.190 --> 00:08:17.340
and not the main axis,
you're going to use align items.

00:08:17.360 --> 00:08:22.000
We're going to say that we want these
items to be centered vertically and we see

00:08:22.030 --> 00:08:25.120
that envelope was centered
vertically, great.

00:08:25.150 --> 00:08:30.860
Now we want to make sure that there's some
space in between these items horizontally.

00:08:30.890 --> 00:08:34.980
We're going to reference the main axis
and therefore we're going to use

00:08:35.010 --> 00:08:39.980
Justify Content and say that we want
some space in between these items.

00:08:40.000 --> 00:08:40.780
Great.

00:08:40.810 --> 00:08:44.860
Now, something weird might
happen here where your.

00:08:44.890 --> 00:08:47.600
We can see that this icon is too close

00:08:47.630 --> 00:08:50.860
to the right side compared
to our given design.

00:08:50.890 --> 00:08:52.460
No worries about this.

00:08:52.490 --> 00:08:57.100
The thing is that this
icon actually has padding.

00:08:57.130 --> 00:09:00.580
It has a padding inside the component,

00:09:00.610 --> 00:09:04.380
meaning that it gives the space
inside the component itself.

00:09:04.400 --> 00:09:06.400
What we're going to have to do to achieve

00:09:06.430 --> 00:09:10.720
the same result is make sure that we
wrap this component into something.

00:09:10.750 --> 00:09:14.200
The message icon is most
probably going to be pressable.

00:09:14.230 --> 00:09:17.640
We can use either pressable component here

00:09:17.670 --> 00:09:24.620
or I could introduce something new and fun
and introduce you to touchable opacity.

00:09:24.650 --> 00:09:31.640
This is also a component that is something
that allows you to set up on press events.

00:09:31.670 --> 00:09:33.420
It's practically a button.

00:09:33.440 --> 00:09:34.920
It was imported right here.

00:09:34.940 --> 00:09:37.680
It is a component offered by React Native.

00:09:37.700 --> 00:09:41.460
Let's make this fun and introduce
this a new component.

00:09:41.490 --> 00:09:42.900
If you press on it,

00:09:42.930 --> 00:09:47.500
it's going to have opacity, and that's
why it's called touchable opacity.

00:09:47.520 --> 00:09:49.520
A button that you can touch and it's going

00:09:49.550 --> 00:09:53.500
to turn into a little
transparent button, on press.

00:09:53.530 --> 00:09:58.600
Now I'm pressing down on this icon
and that's why it has the opacity.

00:09:58.630 --> 00:10:01.520
If I release, it's going to turn
into its original color.

00:10:01.550 --> 00:10:06.020
I think it's something cool
and already good user experience.

00:10:06.040 --> 00:10:08.580
It's ready-made, so let's just use that.
Why not?

00:10:08.610 --> 00:10:11.420
Here we're also going to need some styles.

00:10:11.440 --> 00:10:13.500
Mainly, what we're going to be concerned

00:10:13.530 --> 00:10:18.260
here about is that we assign
some padding to this.

00:10:18.290 --> 00:10:23.940
The padding around this
icon is around 14 or 12.

00:10:23.960 --> 00:10:27.900
There's a bunch of different numbers, but
let's choose just one and stick with it.

00:10:27.930 --> 00:10:32.380
I'm just going to say that padding is
14, let's say here.

00:10:32.410 --> 00:10:35.160
Here you're going to see that this icon

00:10:35.190 --> 00:10:38.980
was moved a little bit to the left,
which is what we wanted.

00:10:39.010 --> 00:10:42.680
Now we're going to make sure that it
has the same color as given here.

00:10:42.700 --> 00:10:47.020
Because you see here
that it is very light gray.

00:10:47.050 --> 00:10:49.700
Let's just grab this color right

00:10:49.730 --> 00:10:56.140
directly from here and we're going to say
that background color is equal to this.

00:10:56.170 --> 00:10:59.540
We need the hash sign here.

00:10:59.570 --> 00:11:05.580
In right now you see that
it has this rectangular shape.

00:11:05.600 --> 00:11:07.800
Therefore, we need
the border radius as well.

00:11:07.830 --> 00:11:10.640
Border radius is also given right here.

00:11:10.670 --> 00:11:11.900
It's 100.

00:11:11.930 --> 00:11:15.300
We can just set border radius to 100.

00:11:15.320 --> 00:11:17.380
I think it's a little bit too much and too

00:11:17.410 --> 00:11:21.160
excess because you can achieve
the same result without 100.

00:11:21.190 --> 00:11:22.920
But it doesn't really matter.

00:11:22.950 --> 00:11:27.140
Even if I turn this to thousand,
it will still be circular.

00:11:27.170 --> 00:11:29.060
That's great.

00:11:29.080 --> 00:11:31.880
Now we want to change
the color of this icon itself.

00:11:31.910 --> 00:11:33.700
I'm just going to click here.

00:11:33.730 --> 00:11:35.360
Here's the color of the icon.

00:11:35.390 --> 00:11:39.760
I just copied this and I'm going to say,
Hey, I want to pass a color to this

00:11:39.790 --> 00:11:42.760
Fantasom icon
and I'm going to just pass it to it.

00:11:42.790 --> 00:11:47.980
That's why Fantasom icons are so cool
because you can modify them so easily.

00:11:48.000 --> 00:11:50.140
Great.
Now we have this icon.

00:11:50.170 --> 00:11:53.740
It's similar to this icon given here.

00:11:53.770 --> 00:11:58.340
It's not totally exactly like that icon,
but it will do so far.

00:11:58.370 --> 00:12:00.240
Now what we want to do is make sure

00:12:00.270 --> 00:12:05.160
that we clean up this file and not leave
these inline styles right inside this app.js

00:12:05.550 --> 00:12:09.660
file because we're not striving
to become a mediocre developer.

00:12:09.690 --> 00:12:12.100
We want to be developers who are excellent

00:12:12.130 --> 00:12:15.200
and make sure that code is
formatted the right way.

00:12:15.230 --> 00:12:17.300
This is something very important

00:12:17.330 --> 00:12:21.740
that a lot of companies pay
significant attention to.

00:12:21.770 --> 00:12:24.240
Just let's do the same and make sure

00:12:24.270 --> 00:12:28.080
that right from the start,
we adhere to the best practices.

00:12:28.110 --> 00:12:31.500
For
this, what we're going to need to do is

00:12:31.530 --> 00:12:36.860
create a new folder inside our assets
folder, and let's call it styles.

00:12:36.890 --> 00:12:43.000
Let's create a new JavaScript file,
and let's just call it Globalstyle.js

00:12:43.040 --> 00:12:46.500
great.

00:12:46.530 --> 00:12:50.300
Here I'm going to import the style sheet,

00:12:50.330 --> 00:12:54.940
and then I am going to define
global style.

00:12:54.970 --> 00:12:58.460
I'm going to use this style
sheet to create a new style.

00:12:58.490 --> 00:13:01.620
I am going to make sure that this is

00:13:01.650 --> 00:13:06.220
exportable as well so
that we can use it here.

00:13:06.250 --> 00:13:11.420
Let's import global style here and let's

00:13:11.450 --> 00:13:16.480
cut this out and say that we're
going to use Global style.header.

00:13:16.640 --> 00:13:19.720
Now, we need to make sure that this
is defined inside the global style.

00:13:19.750 --> 00:13:23.020
Let's move in here, create the header,

00:13:23.050 --> 00:13:26.900
paste this code inside of here,
and click on Save.

00:13:26.930 --> 00:13:32.260
We're going to see that our setup looks
exactly the same way as it looked before

00:13:32.290 --> 00:13:35.380
and that's exactly what
we were striving for.

00:13:35.410 --> 00:13:41.480
Now we're going to do the same with this
and let's just call this message icon.

00:13:42.800 --> 00:13:45.620
Let's save this.

00:13:45.650 --> 00:13:47.100
Go here,

00:13:47.130 --> 00:13:54.060
create message icon, paste this here,
and great, everything is looking awesome.

00:13:54.080 --> 00:13:55.620
Now, I don't want to make this video too

00:13:55.650 --> 00:13:58.960
big, but I do want to make sure
that this looks exactly like that.

00:13:58.990 --> 00:14:01.600
I do see here that there's a number given

00:14:01.630 --> 00:14:05.780
here about how many messages
are inside our inbox.

00:14:05.810 --> 00:14:08.900
Let's just design that very quickly here.

00:14:08.920 --> 00:14:11.880
For this, we're going to have
to create a new view component.

00:14:11.910 --> 00:14:13.000
Let's just do this.

00:14:13.030 --> 00:14:17.980
Inside this view component,
we're going to place a text.

00:14:18.010 --> 00:14:22.520
Now let's make sure that the text
component is imported right here.

00:14:22.550 --> 00:14:25.340
Let's just write two inside of here.

00:14:25.370 --> 00:14:28.980
We see this two appear
here in such a weird way.

00:14:29.010 --> 00:14:34.180
We want this to be next
to the envelope correctly.

00:14:34.210 --> 00:14:38.000
First of all,
what we need to make sure of is that we

00:14:38.030 --> 00:14:43.740
have the envelope size correctly set,
and it seems like its height is 20.

00:14:43.770 --> 00:14:50.440
Let's just set one more property
here and say that the size is 20.

00:14:51.320 --> 00:14:54.940
This became a little bit larger,
which is totally fine.

00:14:54.970 --> 00:14:56.960
Now what we want to do is make sure

00:14:56.990 --> 00:15:01.620
that this two has the appropriate
background color.

00:15:01.650 --> 00:15:06.480
Let's grab this background color from here
and say that we're creating a new style

00:15:06.510 --> 00:15:12.620
and it's going to be called global
style message number container.

00:15:12.650 --> 00:15:17.620
Let's go here, create message
number container,

00:15:17.650 --> 00:15:24.240
and let's create a background color
that is going to be of this color.

00:15:24.270 --> 00:15:29.460
Here we see a square,
and inside the square we see two.

00:15:29.490 --> 00:15:34.020
First of all, we want to make
sure that this is centered.

00:15:34.050 --> 00:15:38.780
Let's do Justify Content Center,

00:15:38.810 --> 00:15:43.200
and then let's make sure that flex
direction is set to row.

00:15:43.520 --> 00:15:44.780
Now this is center,

00:15:44.810 --> 00:15:51.180
and we also want to make sure that
the color here is of the white color.

00:15:51.210 --> 00:15:56.480
Let's create another style here
and call this message number.

00:15:56.880 --> 00:16:00.605
Go to globalstyles, create message number

00:16:00.805 --> 00:16:04.240
and make sure the color is set to white.

00:16:04.360 --> 00:16:08.980
Now that we have that,
let's make sure the font size is correct.

00:16:09.010 --> 00:16:12.020
Here the font size is given at six.

00:16:12.050 --> 00:16:16.840
Let's make sure that font size is six.

00:16:16.880 --> 00:16:20.020
It became so much smaller here.

00:16:20.050 --> 00:16:22.280
Then what we also want to do is set

00:16:22.310 --> 00:16:26.460
the font weight to 600 and make
sure that font family is inter.

00:16:26.490 --> 00:16:27.760
What do we do for that?

00:16:27.790 --> 00:16:29.960
We say that we want to set font family

00:16:29.990 --> 00:16:34.860
and we're going to get the font family
from our previously set up function.

00:16:34.890 --> 00:16:41.860
We're going to say that our base font
is inter and our font weight is 600.

00:16:41.880 --> 00:16:44.120
Great.
Now this became a little bolder.

00:16:44.150 --> 00:16:46.460
I don't know if you saw that or not.

00:16:46.490 --> 00:16:48.420
I hope that you did.

00:16:48.450 --> 00:16:52.800
Then we want to make this a circular item.

00:16:52.830 --> 00:16:58.420
We have to make sure that the width
and the height is the same.

00:16:58.450 --> 00:16:59.320
Let's do that.

00:16:59.350 --> 00:17:04.770
We're going to set width
to 10 and height to 10.

00:17:04.800 --> 00:17:07.240
Then we're going to make sure

00:17:07.270 --> 00:17:12.440
that the border radius is also 10
so that this becomes circular.

00:17:12.470 --> 00:17:14.840
Now, I don't know if you can see or not,

00:17:14.870 --> 00:17:20.050
but this is obviously not
really centered vertically.

00:17:20.080 --> 00:17:25.620
Let's do Align Items Center here as well,
and this will be fixed.

00:17:25.650 --> 00:17:27.600
Now our biggest problem, guys,

00:17:27.630 --> 00:17:32.330
we have a problem that this
container is not correctly aligned.

00:17:32.360 --> 00:17:34.660
What do we do in this case?

00:17:34.690 --> 00:17:36.800
This is a very specific alignment.

00:17:36.830 --> 00:17:39.290
Therefore, we're going to have to use

00:17:39.320 --> 00:17:45.010
position absolute to totally govern
exactly where this is going to be visible.

00:17:45.040 --> 00:17:47.280
For that, we're going to say that message

00:17:47.310 --> 00:17:51.770
number container itself
is position absolute.

00:17:51.800 --> 00:17:54.330
This is where it goes.

00:17:54.360 --> 00:17:58.330
It goes to the top left-most corner.

00:17:58.360 --> 00:18:03.500
We want to make sure that this
can be on the right side.

00:18:03.530 --> 00:18:06.900
Let's say that on the right side, we want

00:18:06.930 --> 00:18:10.700
zero at first, and we're going
to see this appear here.

00:18:10.730 --> 00:18:14.880
Now we do see that heading
for the message icon is 14.

00:18:14.910 --> 00:18:17.810
Let's try setting the right side to 14.

00:18:17.840 --> 00:18:24.180
We're going to say that we want this
14 points away from the right side.

00:18:24.210 --> 00:18:25.880
This is a bit too much.

00:18:25.910 --> 00:18:28.090
Why don't we try 12?

00:18:28.120 --> 00:18:29.720
It seems a little more correct.

00:18:29.750 --> 00:18:34.860
Now we want to align this a little bit
with some margin from the top.

00:18:34.890 --> 00:18:39.280
We're going to say that
top is going to be around 14.

00:18:39.310 --> 00:18:42.000
Again, let's say that this
is again too much.

00:18:42.030 --> 00:18:43.530
What about 12?

00:18:43.560 --> 00:18:45.500
This looks way better.

00:18:45.530 --> 00:18:50.080
I think we need a little bit less
on the right side, so what if we do 10?

00:18:50.110 --> 00:18:53.720
I think that that is perfect actually.

00:18:53.750 --> 00:18:56.380
Let's leave it like this.

00:18:56.410 --> 00:18:58.380
Now it seems like

00:18:58.410 --> 00:19:03.400
we're done with our header
of the application and we can move

00:19:03.430 --> 00:19:07.980
on to so much more interesting
things in the next video.

00:19:08.010 --> 00:19:10.000
Stay tuned and I'll see you there.