Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,560 --> 00:00:06,890
So let's open this back up and let's start getting some styles onto our drawers so that it's not this
2
00:00:06,890 --> 00:00:13,340
just blank white and black text because we obviously want this to fit the look and feel of the rest
3
00:00:13,340 --> 00:00:21,900
of our application as well as match the styling for the tabs that we had previously so on our draw on
4
00:00:21,900 --> 00:00:24,260
our swipe label draw component.
5
00:00:24,360 --> 00:00:30,540
Let's come down and we're gonna add another prop onto it and we're going to give a class's prop.
6
00:00:30,780 --> 00:00:37,070
And remember this is how we can overwrite some of the base material UI components styles.
7
00:00:37,260 --> 00:00:44,700
And for these swipe a ball draw we actually want to target the paper components that is used underneath
8
00:00:44,730 --> 00:00:52,070
the draw and apply our styling to that so let's create a class of draw.
9
00:00:52,120 --> 00:01:01,810
And now let's come up to our styles object and we will create the draw styles let's open this up and
10
00:01:01,810 --> 00:01:12,760
we'll start by setting the background color to our theme dot powered dot Coleman dot blue let's save
11
00:01:12,760 --> 00:01:13,420
this.
12
00:01:13,480 --> 00:01:20,150
And when the page refreshes we can come and open it up to find our nice blue draw.
13
00:01:20,160 --> 00:01:27,930
Now let's get some of the actual items themselves looking like the tabs by coming down to each of our
14
00:01:27,930 --> 00:01:30,650
list item texts.
15
00:01:30,900 --> 00:01:36,630
We're going to add a class name set to oh woops.
16
00:01:37,050 --> 00:01:40,150
Looks like I accidently overrode open.
17
00:01:40,200 --> 00:01:43,620
I'm jumping around because my code editor wants me.
18
00:01:44,050 --> 00:01:45,600
Okay here we go.
19
00:01:45,600 --> 00:01:55,900
So that list item text will add a prop the class name set to classes classes dot draw.
20
00:01:56,040 --> 00:02:02,870
Item so let's come up and now create that style in our object underneath the draw.
21
00:02:02,880 --> 00:02:05,040
We'll set a draw.
22
00:02:05,040 --> 00:02:14,970
Item class and we'll set the style to actually extend the theme dot typography dot tab styles because
23
00:02:14,970 --> 00:02:21,210
we've already set up how we wore our tabs to look and we want our draw to be as consistent with that
24
00:02:21,240 --> 00:02:22,880
as possible.
25
00:02:22,950 --> 00:02:31,480
So we're just going to extend those styles and then set the text color to white let's go ahead and save
26
00:02:31,480 --> 00:02:35,580
that and make sure that our styles have updated in the new draw.
27
00:02:35,620 --> 00:02:40,450
And now you can see that on the Home tab the style has changed.
28
00:02:40,450 --> 00:02:46,100
We actually forgot to add that class name to all the rest of the list items.
29
00:02:46,150 --> 00:02:53,440
And so now let's go ahead and take our class name right here of the draw item and let's go ahead and
30
00:02:53,440 --> 00:02:57,460
add that to the rest of our list item texts as well
31
00:03:03,110 --> 00:03:03,580
OK.
32
00:03:03,580 --> 00:03:06,010
And having done that we can save.
33
00:03:06,010 --> 00:03:13,070
And now when the page refreshes you will see all of our tabs looking nice and newly styled.
34
00:03:13,090 --> 00:03:18,450
Now I actually want to change the styling here on the estimate tab a little bit.
35
00:03:18,580 --> 00:03:26,520
Just so there is stands out kind of like the estimate button does in the tabs so down here on our free
36
00:03:26,610 --> 00:03:30,810
estimate list item text in the class name.
37
00:03:30,810 --> 00:03:38,400
Let's go ahead and wrap that classes dot draw item within array and then we can go ahead and pass in
38
00:03:38,470 --> 00:03:47,200
another style of classes dot draw draw item estimate.
39
00:03:47,590 --> 00:03:53,010
And that is going to apply both of these stylings to our text.
40
00:03:53,020 --> 00:04:03,100
So now if we come back up to these styles object again and we create our draw item estimate now we can
41
00:04:03,100 --> 00:04:10,540
set this style to a background color of theme dot palette dog common dot orange.
42
00:04:11,440 --> 00:04:18,430
So now if we save this we'll see the page refresh and we can open up to see oh well it looks like we
43
00:04:18,430 --> 00:04:20,570
got that in the wrong place.
44
00:04:20,650 --> 00:04:28,270
And so let's scroll back down to our estimate component and instead of putting that draw item estimate
45
00:04:28,270 --> 00:04:32,820
class here on the list item text let's actually get rid of that.
46
00:04:32,830 --> 00:04:42,550
And so we can get rid of the array here and let's add a class name to the wrapping list item and then
47
00:04:42,550 --> 00:04:48,020
we'll set this to our classes dot draw item estimates.
48
00:04:48,760 --> 00:04:55,840
So now if we go ahead and we save this the page will refresh and we can check to now see a completely
49
00:04:55,840 --> 00:04:57,730
styled tab.
50
00:04:57,940 --> 00:05:02,220
You see we still get the nice hover effect so we can see when we're hovering over it.
51
00:05:02,380 --> 00:05:07,240
But then otherwise the tab is going to stand out and just draw a little more attention.
5562
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.