1
00:00:02,260 --> 00:00:08,000
Now we have the card look, now as a next thing let's fix the buttons and that's something I already showed

2
00:00:08,000 --> 00:00:08,270
you,

3
00:00:08,300 --> 00:00:11,860
so definitely your chance to pause the video and do it on your own.

4
00:00:11,870 --> 00:00:16,430
I want to make sure that the buttons have the equal size, they shouldn't take the full available width

5
00:00:16,760 --> 00:00:22,070
but they should have an equal size which makes sure that the text fits in there and that they're

6
00:00:22,280 --> 00:00:22,990
equally sized.

7
00:00:23,000 --> 00:00:30,020
So your chance to pause the video, thereafter we'll do this together. Were you successful?

8
00:00:30,020 --> 00:00:35,480
Let's make sure the buttons have the same size and for this in the start game screen where I have the

9
00:00:35,480 --> 00:00:43,070
buttons, you learned that the solution is to wrap the buttons in a view. So you have to add your own view

10
00:00:43,220 --> 00:00:45,200
component around the buttons

11
00:00:45,200 --> 00:00:52,670
and now you can assign a style to these buttons, so to both buttons here and I'll use a button object

12
00:00:52,670 --> 00:00:55,190
in my styles object down there,

13
00:00:55,370 --> 00:01:02,730
so let's add a button here and simply give that a width and here, a width I'll choose is let's say 80.

14
00:01:02,750 --> 00:01:09,050
Let's see what this looks like, if I save this, a bit too small as it seems since there is a line break

15
00:01:09,260 --> 00:01:10,370
in this button.

16
00:01:10,370 --> 00:01:16,890
So let's go with 120, now that's certainly too much,

17
00:01:16,920 --> 00:01:22,510
so how about 100 and that looks pretty neat to me.

18
00:01:22,530 --> 00:01:26,790
Now in addition and that was not a task for a user, no worries if you didn't do that,

19
00:01:26,910 --> 00:01:31,840
I want to change their colors and one of the colors should be our main color

20
00:01:31,950 --> 00:01:37,590
and I also want to set up some accent, some secondary colors so to say which we can use.

21
00:01:40,450 --> 00:01:46,810
So for that back in the start game screen component, on the button itself, there is a color prop which

22
00:01:46,810 --> 00:01:48,530
you can set to control the color

23
00:01:48,550 --> 00:01:54,460
and for Android, that's the background color, for iOS that will be the text color and now the reset button,

24
00:01:54,780 --> 00:01:55,110
there

25
00:01:55,120 --> 00:02:00,250
I want to set up a color of #717fc,

26
00:02:00,340 --> 00:02:02,170
that's a nice color I think

27
00:02:02,170 --> 00:02:08,170
and for the main button, the confirm button, I'll use my main theme and I want to use the same color I

28
00:02:08,170 --> 00:02:09,370
use in the header.

29
00:02:09,370 --> 00:02:12,960
So there I have this hex code used as a background color,

30
00:02:13,030 --> 00:02:19,090
I'll use the same color here for this second button now. With that we can save this and now we got

31
00:02:19,210 --> 00:02:24,050
these two button colors here which looks quite nice in my opinion.

32
00:02:24,070 --> 00:02:30,660
Now one downside of this approach or one thing we can improve is that I'm using this hex code here, I'm

33
00:02:30,670 --> 00:02:34,080
using it in the header and chances are that later in the app

34
00:02:34,090 --> 00:02:37,330
we want to use the same color in other places too.

35
00:02:37,330 --> 00:02:41,380
So it would be nice if we could set this up as kind of a theme

36
00:02:41,380 --> 00:02:48,340
you could say, that we could easily use these colors without copying hex codes across our app and that

37
00:02:48,340 --> 00:02:53,350
we can also change the color in one place if we ever want to use a different color and we don't have

38
00:02:53,350 --> 00:02:55,980
to do that in dozens of components.

39
00:02:56,080 --> 00:03:01,830
And for that I'll use an approach where I'll add a new folder on the root level and I'll name it constants

40
00:03:01,840 --> 00:03:05,440
and as always, you can name these folders whatever you want

41
00:03:05,440 --> 00:03:11,640
and in there I want to have a colors.js file. Again this name can also be named whatever you want

42
00:03:11,670 --> 00:03:19,020
because what this file will do is it will export a default Javascript object, it will export a Javascript

43
00:03:19,050 --> 00:03:26,760
object and in there, you can have any key-value pairs you want and I'll set up a primary color,

44
00:03:26,820 --> 00:03:32,790
so just primary as a key name and this should be this hex code which I just copied, so this header color

45
00:03:32,790 --> 00:03:37,230
also accent or secondary, whatever you want to name it,

46
00:03:37,230 --> 00:03:42,330
I'll go with accent color and that should be this other color which I used on the first button,

47
00:03:42,330 --> 00:03:47,070
so this hex code here, I'll use that in here.

48
00:03:47,070 --> 00:03:52,920
Now these colors are defined here and we can now simply import them from this file and whenever we change

49
00:03:52,920 --> 00:03:58,700
them here, they're changing everywhere in this application and we can therefore easily swap this during development.

50
00:03:58,740 --> 00:04:07,800
So now in the start game screen, we can just go ahead and import colors from constants/Colors like this

51
00:04:08,050 --> 00:04:15,720
and I gave this a capital C here to kind of indicate that this is a collection of values,

52
00:04:15,730 --> 00:04:16,900
you can name this whatever you want,

53
00:04:16,900 --> 00:04:20,530
you can also use a lowercase c, that naming doesn't matter

54
00:04:20,590 --> 00:04:23,980
and now you can use colors here to assign your colors.

55
00:04:24,010 --> 00:04:31,570
So for this reset button, we'll now use a dynamic value so that we can reach out to colors.accent

56
00:04:32,050 --> 00:04:39,080
and here for the main button, for the confirm button, I'll go with Colors.primary and the same in the

57
00:04:39,080 --> 00:04:44,630
header. There of course, we now also want to use that color and not hardcode it in here,

58
00:04:45,020 --> 00:04:52,180
instead import colors from constants/Colors

59
00:04:52,370 --> 00:04:57,680
and with that imported, you can also use that in a stylesheet, not just in jsx, you can use it anywhere

60
00:04:57,680 --> 00:04:59,420
in that file after all,

61
00:04:59,420 --> 00:05:05,680
so now here, I'll refer to Colors.primary. And if you save that, again we have the same look as before

62
00:05:05,720 --> 00:05:13,460
but yet again in another more elegant way where if you ever decide that your accent color should not

63
00:05:13,460 --> 00:05:19,790
be this color but should be blue, you just swap it here, your app is rebuilt and you have a blue button.

64
00:05:19,910 --> 00:05:26,630
So that is the huge advantage of managing your colors or other core constants in such files, you could

65
00:05:26,630 --> 00:05:34,910
have another file named text for example where you have some core font sizes or another file spacing

66
00:05:34,940 --> 00:05:41,000
where you store default values for margins or padding so that you don't manually have to use the same

67
00:05:41,000 --> 00:05:42,550
values over and over again,

68
00:05:42,620 --> 00:05:47,690
these are all approaches you can use to make your life as a developer easier and to have code where

69
00:05:47,690 --> 00:05:50,900
you can quickly swap values if you need to.

70
00:05:50,990 --> 00:05:56,360
For now, I'll just manage my colors in there because that's one of the things that is most annoying to

71
00:05:56,360 --> 00:06:01,490
copy around and it's a really great approach therefore to manage it in such a file.