All language subtitles for 7. Custom Software Development Page - Middle Icons

The first thing that I want to do now is to shape up this paragraph and make sure that it's not going

to extend all the way across the full width of the screen like that.

So on our grid item container with a direction of column let's add a class name of classes dot heading.

And now we can go up to our style object and add the heading class here.

Let's say a max width of 40 M we can save that and we'll see the page refresh.

And now we've gotten a much better looking paragraph structure we do still have a problem with the arrows

though because if you notice they're actually sitting a bit above the title here.

And I'd really like them to be aligned in the center more with that.

So on each of our grid items wrapping the icon buttons let's add a class name here of classes dot arrow

container and we'll go ahead and copy this class name and we'll paste that only grid item wrapping our

other arrow as well.

Now we can come up to the top and we'll add the arrow container style with a margin top top of just

zero point five m we can save that page will refresh and it moved those arrows down just enough to look

very nicely centered now you may have noticed the when I'm hovering over this button.

It's given us a little background right there and I really just don't care for that.

I don't really think we need those so on the icon button itself.

Let's add a style of background color transparent and then let's go ahead.

We'll copy that and put it on the icon button down here as well.

So once that refreshes you can see that when we hover over them that background is no longer appearing

man.

I just realized the your text is not actually going to look like this because you do not have the body

one variant even set up yet.

And I really apologize for that.

That is completely my fault because I forgot to remove that variant from my theme after I went through

and done testing.

So now let's go over and come to the theme.

J.S. file and down here you can see I've got my body one.

I'll get rid of that.

We'll save it.

And this should be what you guys have been seeing in this whole time.

So again I'm really sorry about that.

Hopefully that wasn't too confusing.

But let's go ahead now and we'll add that body one style and make sure you get the karma underneath

and then we'll set that to a font size of one point to five REM a color of ARC Gray and a full weight

of 300.

So we'll save that.

And the text will refresh.

Now to I had had before but let's flip back over out of the theme and here what I'd like to do is go

ahead and add some actual padding to this whole page.

So you see how we're pressed all the way up against the left side and all the way up against the top.

Let's go ahead and we'll add some padding to the entire page so that we have consistent borders going

all the way around keeping our contents off the edges.

So we'll come in on the container direction of column for our entire page.

Let's add a class name here of.

Classes dot main container.

And then we can come up to our styles objects to add the main container style with a padding left of

5 m a padding right of 5 m a padding top of 2 m padding bottom 10 m will get us nice spacing along the

bottom there nice border along the top and then our consistent borders on the sides now with those borders

you'll notice that the border it's going to start here on the left edge of this arrow so that's going

to continue all the way down here and any of the text that's now down below here will be aligned actually

with the edge of this arrow when I'd really like it to be aligned with the edge of this actual text

here.

So we're going to go in on the arrow container item for the back arrow.

Let's add a style here where we'll set a margin right of 1 M and then a margin left of negative three

point five m and if we save that that's going to pull our arrow back into the border and push it a little

bit farther away from our text and that should now align aren't text down where the border purchase

on the page and we'll be aligning the rest of the content section make everything look really clean

and nicely aligned.

Now let's set up these icon buttons to actually work before I forget that.

And so we'll add the component prop of link onto the icon button we can go ahead and copy that and paste

it on the second icon button as well.

And now we also need the two property where the path of for this forward arrow will take us to slash

mobile apps.

And here with the icon button for back arrow it will take us to the slash services page so we can save

that the page will refresh.

And now you can see we'll hover over our arrow.

We can click it and then it takes us back to these services page.

We can come back to the custom software.

We can go forward to the mobile apps page and you can see that the navigation is working.

One thing that isn't doing however though is that it isn't updating our menu.

You can see that even though we're on the mobile apps page in the U.R.L. and the content being rendered

the custom software development page is still being marked as active within our menu.

And that's because we need to come and take the props as an input for our custom software props since

we are rendering it with the set value and set selected index props.

And so now we can come in on these icon buttons.

We can also add in on click.

We'll set this equal to our arrow function.

And this is going to call set selected index and set the selected index to zero for the services page

and make sure we have that as props set selected index.

And then we can copy that.

And on the other arrow we'll set these selected index to two for the IRS and Android app development

page so we can save that.

And when the page refreshes.

So now go home we can come to our software development page.

Let's go over to mobile apps and we'll open up the menu to see Iaw and Android app development.

Now being selected let's go back to the custom software development page and we'll start working on

that row of icons that we hadn't seen in the design.

So let's come over and we'll find the row that contains our entire heading.

And underneath this row let's add another grid item container with a direction of row.

We'll open this up and here will add a grid item container with a direction of column column.

This time this item container will be for our first icon with its title.

And so let's add a grid item here and this will wrap a typography variant of H 4 and this will simply

say save energy and now we'll add a grid item underneath that one grid item.

And this is simply wrapping in image that a source of light bulb and an old of light bulb as well we

can close that off and obviously we need to come and import the light bulb image.

So we'll scroll to the top underneath our arrows.

Let's import the light bulb from assets bulb.

And then let's also import cash from assets cash and in import the stopwatch from assets stopwatch.

So now we can scroll back down and let's copy this whole grid item container the direction of column.

So the grid item container wrapping those two grid items.

Let's copy that in adjacent to it.

Let's paste that two more times let's then change this middle one to save time.

And the last one to save money and then change the source of light bulb for save time to stop watch

change the ult to stop watch and then change the source to cash and the old to cache as well let's save

that the page is going to refresh and you can see we now have our icons on the page but they're sitting

on top of each other now this may be interesting to you because we had even explicitly said this is

a container with a direction of Roe.

So how come each of these items are not sitting next to each other from left to right.

But they're instead sitting on top of each other almost as if we were in a direction of column instead

of the direction of Roe.

Well the reason for this we can actually find out if we go and inspect the page and we can scroll down

to where we find the div for these middle icons.

Let's open this up and here's the div for our first icon.

And you can already see that the box is showing that it is spanning the entire width of that page.

So let's click on this and we can see if we scroll here.

It's getting a flex direction of column but the container because it is being set to a grid item container.

This container prop is giving it a width of a 100 percent.

You can see that right here the width of a 100 percent.

And so since it has the container prop and is taking up 100 percent of the width available to it it

is forcing all of the other items down below it giving us this column looking layout but they're actually

all just set to a width of 100 percent because of that container prop.

So the way that we can get around this is if we add on to each of these grid item container direction

columns let's add the medium property to this and this will tell all of these containers the item containers

explicitly that they need to share that space available so don't set the width to 100 percent but share

that space until the medium breakpoint and then after that it's OK for them to take up the full width

and stack on top of each other like this.

So let's save that.

See the page refresh.

And now our icons are sharing that space available to them.

Now if I go ahead and then cancel out of that inspector and I open this up you can see the each of these

begins to take up a pretty large amount of space.

And so what they're doing is they're sharing all of this space available to them.

So this is a third.

This is a third.

And this is a third.

And then there's that border over here.

But they're definitely taking up way more space available than they need.

So instead of taking up all of that space we really we only need that much space.

So we'll come to the code editor and on the same grid item direction column that we just added the medium

property to let's add a style here of Max with 40 m just like we had done for the heading.

But what's copy that and paste that next to the medium property that we added for each of those containers

and we'll save that to see the page jump and you can't really tell a difference there but now they actually

are not taking up quite as much space.

So we'll come back down and let's start fixing some of these alignment issues because these icons are

not aligned with their title and all of these should actually be centered on the page.

So to do that we can go and on the grid item container direction of row there's actually wrapping all

of these items.

Let's set a justify to censor.

And since this is a direction of row that's going to move everything to the center of our horizontal

direction.

So we'll save that and you can see that they did indeed jump over they definitely are not still perfectly

aligned though.

So let's shrink this down.

And on the same grid item container direction column where we added the medium prop and the style with

a max width of 40 m.

Let's go ahead and we'll also add in on line items property of center.

We can go ahead and copy that onto all of these.

Make sure you get that.

And when the page refreshes you'll see that now our icons and their titles are all actually centered.

The last thing I'd like to do really quick before we take a break is let's get this set of icons off

of the paragraph here.

See how it's pressed up right up against it.

Well let's give us some space and make this just a little more open.

And so where we added the justify of center to our container direction of row.

Let's also add a style here of a margin top 15 m and a margin bottom of 20 m.

If we go ahead and save that page or refresh.

And now this entire row has a bit of a spacing around it.

And that is giving a very nice and open clean feel to it.

So this looks really good.

But let's take a break and I'll see you in the next one to keep working.