add vyper

apps/vyper/src/app/components/VyperResult.tsx

@@ -28,8 +28,8 @@ function VyperResult({ output }: VyperResultProps) {
 
     <div id="result">
       <p>No contract compiled yet.</p>
-      <Button data-id="add-ballot" variant="info" onClick={() => remixClient.loadContract(Ballot)}>
-        Create Ballot.vy example
+      <Button data-id="add-repository" variant="info" onClick={() => remixClient.cloneVyperRepo()}>
+          Clone Vyper repository and play with the contract examples
       </Button>
     </div>
   )
@@ -38,7 +38,7 @@ function VyperResult({ output }: VyperResultProps) {
     return (
     <div id="result" className="error">
       <i className="fas fa-exclamation-circle text-danger"></i>
-      <p data-id="error-message" className="alert alert-danger">{output.message}</p>
+      <pre data-id="error-message" className="alert alert-danger">{output.message}</pre>
     </div>)
   }
 

libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-warning-icon.tsx

@@ -5,7 +5,7 @@ import { fileDecoration } from '../../types'
 const FileDecorationWarningIcon = (props: {
     fileDecoration: fileDecoration
 }) => {
-    return <><span className={`${props.fileDecoration.fileStateIconClass} text-warning pr-2`}>{props.fileDecoration.text}</span></>
+    return <><span data-id={`file-decoration-warning-${props.fileDecoration.path}`} className={`${props.fileDecoration.fileStateIconClass} text-warning pr-2`}>{props.fileDecoration.text}</span></>
 }
 
 export default FileDecorationWarningIcon