[dashboard] Unify and standardize InfoBox and AlertBox components

[jankeromnes]

Fixes #3996

TODO:

• InfoBox component
• AlertBox component (but not all alerts were unified, see [dashboard] Unify and standardize InfoBox and AlertBox components #4020 (comment))

[jankeromnes]

IO preview

https://jx-cancel-downgrade.staging.gitpod-io-dev.com/workspaces

Unified InfoBoxes

Also unified (no screenshots):

https://github.com/gitpod-io/gitpod/blob/169b7e10b8099bbec9eb42d1e75825156dcfebdd/components/dashboard/src/prebuilds/InstallGitHubApp.tsx#L70

https://github.com/gitpod-io/gitpod/blob/169b7e10b8099bbec9eb42d1e75825156dcfebdd/components/dashboard/src/prebuilds/InstallGitHubApp.tsx#L86

https://github.com/gitpod-io/gitpod/blob/169b7e10b8099bbec9eb42d1e75825156dcfebdd/components/dashboard/src/settings/SelectAccountModal.tsx#L48-L50

[jankeromnes]

Unified AlertBoxes

Also unified (no screenshot):

https://github.com/gitpod-io/gitpod/blob/169b7e10b8099bbec9eb42d1e75825156dcfebdd/components/dashboard/src/settings/Integrations.tsx#L588

Not yet unified "AlertBoxes"

Should we unify these too?

Also not unified (no screenshots):

https://github.com/gitpod-io/gitpod/blob/169b7e10b8099bbec9eb42d1e75825156dcfebdd/components/dashboard/src/Login.tsx#L139-L148

https://github.com/gitpod-io/gitpod/blob/169b7e10b8099bbec9eb42d1e75825156dcfebdd/components/dashboard/src/settings/Teams.tsx#L855-L860

[jankeromnes]

@gtsiolis Could you please take a look when you have time?

Priority: 🔅 Low.

[gtsiolis]

/werft run

👍 started the job as gitpod-build-jx-info-alert-box.6

[gtsiolis]

Thanks for componetizing this element @jankeromnes! 💯

Added a few more unrelated comments to colors. Feel free to leave these out of the scope of changes here. We're still missing some color correction in modals but I think we can tackle these separately once we componetize the modals.

[gtsiolis]

issue: We're going to need dark:text-gray-500 for all paragraph text within modals. 🌙

[jankeromnes]

Good catch! Many other modals already have text-gray-500 for both light and dark. Will align here, but leave additional componentization of Modals as follow-up.

[gtsiolis]

Also, thank you for adding all these screenshots! These are really helpful during reviewing visual changes.

Tip: I usually find the table element in markdown extremely useful to represent such information. For example, using for BEFORE / AFTER screenshots or adding some structure to unrelated screenshots. Feel free to try this or keep adding your awesome contributions without any table!💡

# EXAMPLE A

| BEFORE | AFTER |
|-|-|
| ![image](...) | ![image](...) | 

# EXAMPLE B

| Screenshot A | Screenshot B | Screenshot C |
|-|-|-|
| ![image](...) | ![image](...) | ![image](...) | 

[jankeromnes]

Many thanks for the great review! 💯

Also, thank you for adding all these screenshots! These are really helpful during reviewing visual changes.

Sure! Glad they're helpful. ✨

Tip: I usually find the table element in markdown extremely useful to represent such information. For example, using for BEFORE / AFTER screenshots or adding some structure to unrelated screenshots. Feel free to try this or keep adding your awesome contributions without any table!💡

Haha, great tip! I agree, although I typically go old-school with a bunch of:

<table><tr><td>
<img/>
</td><td>
<img/>
</td></tr></table>

(😅)

[jankeromnes]

Also, what should we do about the "Not yet unified AlertBoxes" in #4020 (comment) ?

They currently have a different visual style, which is why I haven't unified them yet. Should they stay different for now?

[gtsiolis]

Go <table>!

They currently have a different visual style ...

Yes, the ones within the modals should eventually use the same visual style. The garbage collection alert could use a larger component variant.