Improve paragraph accessibility in limits reached modals

[gtsiolis]

Problem to solve

Text accessibility in limits reached modals fails to pass WCAG AA for normal text which is the WCAG 2.0 level we're aiming for.

gitpod/components/dashboard/src/start/CreateWorkspace.tsx

Line 224 in c715b35

<p className="mt-1 mb-2 text-base">You have reached the limit of parallel running workspaces for your account. Please, upgrade or stop one of the running workspaces.</p>

gitpod/components/dashboard/src/start/CreateWorkspace.tsx

Line 230 in c715b35

<p className="mt-1 mb-2 text-base">You have reached the limit of monthly workspace hours for your account. Please upgrade to get more hours for your workspaces.</p>

While the current text-base colors for the dark theme in most case passes WCAG AA for normal text when used with the default dark background, it fails when used inside a modal which is using a different background color (dark:bg-gray-900).

gitpod/components/dashboard/src/components/Modal.tsx

Line 53 in 0e03969

<div className={"relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-6 max-w-lg mx-auto text-left text-gray-600 " + (props.className || '')} onClick={e => e.stopPropagation()}>

Proposal

Change the paragraph text color inside modals for the dark theme. 🌔

BEFORE	AFTER

The following fix could suffice:

diff --git a/components/dashboard/src/start/CreateWorkspace.tsx b/components/dashboard/src/start/CreateWorkspace.tsx
index b2274168..7b870ba5 100644
--- a/components/dashboard/src/start/CreateWorkspace.tsx
+++ b/components/dashboard/src/start/CreateWorkspace.tsx
@@ -221,13 +221,13 @@ function LimitReachedModal(p: { children: React.ReactNode }) {
 
 function LimitReachedParallelWorkspacesModal() {
   return <LimitReachedModal>
-    <p className="mt-1 mb-2 text-base">You have reached the limit of parallel running workspaces for your account. Please, upgrade or stop one of the running workspaces.</p>
+    <p className="mt-1 mb-2 text-base dark:text-gray-400">You have reached the limit of parallel running workspaces for your account. Please, upgrade or stop one of the running workspaces.</p>
   </LimitReachedModal>;
 }
 
 function LimitReachedOutOfHours() {
   return <LimitReachedModal>
-    <p className="mt-1 mb-2 text-base">You have reached the limit of monthly workspace hours for your account. Please upgrade to get more hours for your workspaces.</p>
+    <p className="mt-1 mb-2 text-base dark:text-gray-400">You have reached the limit of monthly workspace hours for your account. Please upgrade to get more hours for your workspaces.</p>
   </LimitReachedModal>;
 }
 

[championshuttler]

ping