Home: aesthetic improvements

[breville]

without sections:

with sections:

[Bjvanminnen]

I always prefer ternaries to use the positive when possible:

 const buttonStyle = type === "course" ? [styles.button, styles.courseButton] : styles.button;

[Bjvanminnen]

Also I think we could/should use NotificationType.course instead of course here and elsewhere in this file.

[Bjvanminnen]

21 seems pretty specific. Worth a comment on how we got to this number?

[Bjvanminnen]

NotificationType.course

[tanyaparker]

• Can we also change the string to lowercase "Join a section"
• Can we make the text in the wide course card the same size as the smaller course cards?
• What do you think about making the description text of Classroom Sections also the same smaller text? I think it clutters the hierarchy a little bit. I like keeping most of the text on the page the same and only giving more weight to the column headers in the sections table and the headings like "My Courses" and "Find a course." And for consistency I think that making this description text style smaller should apply to all similar components like the Hour of Code component you made on the Courses page (which we can do later if it doesn't fit in the context of this PR).