replace newProject error with component

Author: Laurie T. Malau

components/dashboard/src/components/ErrorMessage.tsx

@@ -8,7 +8,7 @@ function ErrorMessage(props: { imgSrc: string; imgAlt?: string; message: string
     return (
         <div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
             <div className="pr-3 self-center w-6">
-                <img src={props.imgSrc} alt={props.imgAlt} />
+                <img src={props.imgSrc} alt={props.imgAlt || "An error message"} />
             </div>
             <div className="flex-1 flex flex-col">
                 <p className="text-gitpod-red text-sm">{props.message}</p>

components/dashboard/src/projects/NewProject.tsx

@@ -19,6 +19,7 @@ import moment from "moment";
 import { UserContext } from "../user-context";
 import { trackEvent } from "../Analytics";
 import exclamation from "../images/exclamation.svg";
+import ErrorMessage from "../components/ErrorMessage";
 
 export default function NewProject() {
     const location = useLocation();
@@ -744,16 +745,7 @@ function GitProviders(props: {
                     })}
                 </div>
 
-                {errorMessage && (
-                    <div className="mt-16 flex space-x-2 py-6 px-6 w-96 justify-between bg-gitpod-kumquat-light rounded-xl">
-                        <div className="pr-3 self-center w-6">
-                            <img src={exclamation} />
-                        </div>
-                        <div className="flex-1 flex flex-col">
-                            <p className="text-gitpod-red text-sm">{errorMessage}</p>
-                        </div>
-                    </div>
-                )}
+                {errorMessage && <ErrorMessage imgSrc={exclamation} message={errorMessage} />}
             </div>
         </div>
     );