Use Smoot Design lib in MIT Learn

[ChristopherChudzicki]

What are the relevant tickets?

https://github.com/mitodl/hq/issues/6279

Description (What does it do?)

This PR begins using components from https://github.com/mitodl/smoot-design, in particular:

• ThemeProvider, Button, ActionButton, ButtonLink, ActionButtonLink

now all come from @mitodl/smoot-design.

Review alongside mitodl/smoot-design#40

Screenshots (if appropriate):

There should be no visible changes, with a small exception mentioned below in a comment.

How can this be tested?

1. Check the site. Buttons should work and should look the same.
2. Also check some ButtonLink instances. These should be using NextJS's Link component via the theme's LinkAdapter.
   • An example is the "My Dashboard" link in "Personalize" section of homepage. If you click it with the JS console open, it should go to your dashboard AND you'll know it's a NextJS link b/c the JS console isn't cleared upon navigation.

Additional Context

There are a few more components that we could use directly from smoot-design, but this PR is big enough already so those can be handled separately.

Checklist

• replace git-installed version of smoot-design

[ChristopherChudzicki]

The two (small) visible changes that are expected in this PR are

In both cases, the changed version matches figma. Some extra button variants had been accidentally introduced and reused.

[gumaerc]

Just a few questions, but an overall smoke test of the site and the code is looking good:

[gumaerc]

Should we add this color to the theme?

[ChristopherChudzicki]

For now at least, I don't think so. It's very one-off.

It's the hover color of secondary buttons, specified in figma as

background: linear-gradient(0deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.94) 100%), #D02E44;

I.e., #D02E44 (brightRed) overlaid with a white, slightly transparent background.

As mentioned in the comment, the background caused trouble with CSS transitions (color fading over course of 250ms), so I had to use an actual color rather than overlaid backgrounds.

---

Why is this here in the first place? MIT Learn and smoot-design repo both implement our variant="secondary" buttons as transparent background plus a slightly red transparent effect on hover.

• According to figma, it should actually be a white background with a similar hover effect.
• We should fix smoot-design to align with figma, but I'd like to handle that separately.

[gumaerc]

Is there a reason this dependency is pulled directly from Github? Are we not publishing this library to NPM?

[ChristopherChudzicki]

It's in the checklist ! Once mitodl/smoot-design#40 is approved /released.

[gumaerc]

Looks good to merge based on the comments above. Remember to point the dependency at the new commit of smoot-design before merging.