moved clone btn and did some style changes

apps/vyper/src/app/app.tsx

@@ -10,6 +10,7 @@ import VyperResult from './components/VyperResult'
 import LocalUrlInput from './components/LocalUrl'
 import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'
 import ToggleButton from 'react-bootstrap/ToggleButton'
+import Button from 'react-bootstrap/Button'
 
 import vyperLogo from './logo.svg'
 import './app.css'
@@ -82,6 +83,11 @@ const App: React.FC = () => {
         </a>
       </header>
       <section>
+        <div className="px-3 w-100">
+          <Button data-id="add-repository" className="w-100 text-dark w-100 bg-light btn-outline-primary " onClick={() => remixClient.cloneVyperRepo()}>
+            Clone Vyper examples repository
+          </Button>
+        </div>
         <ToggleButtonGroup
           name="remote"
           onChange={setEnvironment}

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

@@ -69,7 +69,7 @@ function CompilerButton({ contract, setOutput, compilerUrl }: Props) {
               errorIndex = errorIndex + 4
               if (message && message.split('\n\n').length > 0) {
                 try {
-                  message = message.split('\n\n')[1]
+                  message = message.split('\n\n')[message.split('\n\n').length - 1]
                 } catch (e) {}                
               }
               if (location.length > 0) {
@@ -77,6 +77,7 @@ function CompilerButton({ contract, setOutput, compilerUrl }: Props) {
                   start: { line: parseInt(location[0]) - 1, column: 10 },
                   end: { line: parseInt(location[0]) - 1, column: 10 }
                 }
+                console.log("msg = ", message)
                 remixClient.highlight(lineColumnPos as any, _contract.name, message)
               }
             })

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

@@ -20,7 +20,7 @@ function LocalUrlInput({ url, setUrl, environment }: Props) {
   return (
     <Form id="local-url">
       <Form.Group controlId="localUrl">
-        <Form.Label className="text-warning pb-4">Currently we support vyper version > 0.2.16</Form.Label>
+        <Form.Text className="text-warning pb-2">Currently we support vyper version > 0.2.16</Form.Text>
         <Form.Label>Local Compiler Url</Form.Label>
         <Form.Control onBlur={updateUrl}
           defaultValue={url}

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

@@ -3,7 +3,6 @@ import {
   VyperCompilationResult,
   VyperCompilationOutput,
   isCompilationError,
-  remixClient
 } from '../utils';
 import Tabs from 'react-bootstrap/Tabs'
 import Tab from 'react-bootstrap/Tab'
@@ -28,9 +27,7 @@ function VyperResult({ output }: VyperResultProps) {
 
     <div id="result">
       <p className="my-3">No contract compiled yet.</p>
-      <Button data-id="add-repository" variant="secondary" className="w-100" onClick={() => remixClient.cloneVyperRepo()}>
-          Clone Vyper examples repository
-      </Button>
+      
     </div>
   )
 
@@ -38,7 +35,11 @@ function VyperResult({ output }: VyperResultProps) {
     return (
     <div id="result" className="error">
       <i className="fas fa-exclamation-circle text-danger"></i>
-      <pre data-id="error-message" className="w-100 alert alert-danger">{output.message}</pre>
+      <pre data-id="error-message" className="px-2 w-100 alert alert-danger" style={{
+        fontSize: "0.5rem",
+        overflowX: "hidden",
+        textOverflow: "ellipsis"
+      }}>{output.message}</pre>
     </div>)
   }
 

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

@@ -11,7 +11,7 @@ function WarnRemoteLabel({ environment }: Props) {
   }
 
   return (
-    <div className="alert alert-warning">The remote compiler should only be used for testing NOT for production environments. For production, use a local compiler.</div>
+    <small className="mx-4 text-warning pb-4">The remote compiler should only be used for testing NOT for production environments. For production, use a local compiler.</small>
   )
 }