Use sx theme color functions

[imnasnainaec]

This change is 

[codecov]

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 ⚠️
...mponents/AnnouncementBanner/AnnouncementBanner.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            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	Coverage Δ
backend	84.24% <ø> (+0.10%)	⬆️
frontend	66.98% <73.33%> (+0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 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)

[jasonleenaylor]

Reviewed 4 of 7 files at r1, 3 of 3 files at r2, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @imnasnainaec)

[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.