Cloud/UI tokens page

[artemruts]

Description

Fixes #16325 Modified tokens page as per new designs in Figma.
User only changes, side admins still have previous UI.

Demo

[codecov]

Codecov Report

Merging #16746 (19adc18) into main (44261af) will decrease coverage by 0.07%.
The diff coverage is 2.85%.

@@            Coverage Diff             @@
##             main   #16746      +/-   ##
==========================================
- Coverage   52.29%   52.21%   -0.08%     
==========================================
  Files        1699     1705       +6     
  Lines       84005    84139     +134     
  Branches     7788     7657     -131     
==========================================
+ Hits        43931    43935       +4     
- Misses      36201    36332     +131     
+ Partials     3873     3872       -1     

Flag	Coverage Δ
go	51.40% <ø> (+<0.01%)	⬆️
integration	29.69% <66.66%> (+<0.01%)	⬆️
storybook	28.74% <ø> (ø)
typescript	54.12% <2.85%> (-0.29%)	⬇️
unit	34.85% <0.00%> (-0.19%)	⬇️

Impacted Files	Coverage Δ
...ent/web/src/components/externalServices/backend.ts	6.25% <ø> (ø)
...c/components/externalServices/externalServices.tsx	16.25% <ø> (ø)
...rc/user/settings/UserAddCodeHostsPageContainer.tsx	0.00% <0.00%> (ø)
.../settings/codeHosts/AddCodeHostConnectionModal.tsx	0.00% <0.00%> (ø)
...t/web/src/user/settings/codeHosts/CodeHostItem.tsx	0.00% <0.00%> (ø)
...ttings/codeHosts/RemoveCodeHostConnectionModal.tsx	0.00% <0.00%> (ø)
...ttings/codeHosts/UpdateCodeHostConnectionModal.tsx	0.00% <0.00%> (ø)
...c/user/settings/codeHosts/UserAddCodeHostsPage.tsx	0.00% <0.00%> (ø)
...ent/web/src/user/settings/codeHosts/modalHints.tsx	0.00% <0.00%> (ø)
client/web/src/user/settings/sidebaritems.ts	100.00% <ø> (ø)
... and 9 more

[artemruts]

@quinnkeast I couldn't find the dashed circle in mdi-react. Do you want me to make a custom svg?

[quinnkeast]

Yes, please do! The dashes are an important visual element for making certain it isn't interpreted as a radio button. We'll also use it in other locations as well.

[artemruts]

I'll make a ticket to do this, I played around but wasn't happy with the TS types for the icon component.

[artemruts]

@tjkandala Was only able to change initial icon color with .mdi-icon class, also found this comment on levrik/mdi-react

Seems like fill can be changed dynamically with :hover { fill } but for default fill we have to use .mdi-icon class 🤷.
There are also ways to override default fill and color with props but I think we want CSS.

[felixfbecker]

LGTM besides my comments

[felixfbecker]

@artemruts the icon should use the current text color for the fill using the currentColor keyword, this is in both MDI React and in the icon-inline class. So you should be able to just change the CSS color property of the icon or of the parent, using either CSS or even better just the text-danger etc helper classes.

[artemruts]

@artemruts the icon should use the current text color for the fill using the currentColor keyword, this is in both MDI React and in the icon-inline class. So you should be able to just change the CSS color property of the icon or of the parent, using either CSS or even better just the text-danger etc helper classes.

@felixfbecker Thank you, Felix! text helper classes work, great solution!