Use sx theme color functions

[imnasnainaec]

This change is 

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 73.33333% with 4 lines in your changes missing coverage. Please review.

Project coverage is 75.13%. Comparing base (30509ca) to head (18da217).

Files	Patch %	Lines
src/components/ProjectExport/DownloadButton.tsx	0.00%	3 Missing :warning:
...mponents/AnnouncementBanner/AnnouncementBanner.tsx	0.00%	1 Missing :warning:

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #3161 +/- ## ========================================== + Coverage 75.08% 75.13% +0.05% ========================================== Files 275 275 Lines 10413 10422 +9 Branches 1231 1232 +1 ========================================== + Hits 7819 7831 +12 + Misses 2235 2233 -2 + Partials 359 358 -1 ``` | [Flag](https://app.codecov.io/gh/sillsdev/TheCombine/pull/3161/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sillsdev) | Coverage Δ | | |---|---|---| | [backend](https://app.codecov.io/gh/sillsdev/TheCombine/pull/3161/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sillsdev) | `84.24% <ø> (+0.10%)` | :arrow_up: | | [frontend](https://app.codecov.io/gh/sillsdev/TheCombine/pull/3161/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sillsdev) | `66.98% <73.33%> (+0.01%)` | :arrow_up: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=sillsdev#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[jasonleenaylor]

src/components/AnnouncementBanner/AnnouncementBanner.tsx line 56 at r2 (raw file):

        <Cancel />
      </IconButton>
      <Box sx={{ width: theme.spacing(2) }} />

This might be able to use the same method.

Code quote:

theme.spacing(2)

[imnasnainaec]

_src/components/AnnouncementBanner/AnnouncementBanner.tsx line 56 at r2 (raw file):_

        <Cancel />
      </IconButton>
      <Box sx={{ width: theme.spacing(2) }} />

This might be able to use the same method.

Code quote:

theme.spacing(2)

True. In fact, the MUI documentation indicates I should be able to just use width: 2 in sx and the theme.spacing will be understood. However, when I try it, it's treating it like "2px" as if it were a style. So for now (and since there are so many more of these theme.spacing(#) uses), I'm leaving that for a later refactor.