[dashboard] fix toast contrast

Tool: gitpod/catfood.gitpod.cloud

Author: filiptronicek

components/dashboard/src/components/toasts/Toast.tsx

@@ -71,25 +71,24 @@ export const Toast: FC<Props> = ({ id, message, duration = 5000, autoHide = true
                 "relative flex justify-between items-start",
                 "w-full md:w-112 max-w-full",
                 "p-4 md:rounded-md",
-                "bg-gray-800 dark:bg-gray-50",
-                "text-white dark:text-gray-800",
+                "text-pk-content-invert-primary bg-pk-surface-invert",
                 "transition-transform animate-toast-in-right",
             )}
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
             role="alert"
             aria-labelledby={elId}
         >
-            <div className="flex-grow text-white dark:text-gray-800" id={elId}>
-                {typeof message === "string" ? <p>{message}</p> : message}
+            <div className="flex-grow" id={elId}>
+                {typeof message === "string" ? <span>{message}</span> : message}
             </div>
             <div>
                 <Button
                     variant="ghost"
                     // TODO: Determine if we can lift this button style into a variant
                     className={cn(
                         "p-2 ml-2 -mt-1",
-                        "text-white hover:text-gray-300 dark:text-gray-800 dark:hover:text-gray-600",
+                        "text-pk-content-invert-primary hover:text-pk-content-invert-secondary",
                     )}
                     onClick={handleRemove}
                 >