vyper UI improvements

apps/vyper/src/app/app.css

@@ -60,7 +60,6 @@ html, body, #root, main {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   width: 100%;
   padding-top: 10px;

apps/vyper/src/app/app.tsx

@@ -68,7 +68,7 @@ const App: React.FC = () => {
 
   return (
     <main id="vyper-plugin">
-      <header className="bg-light">
+      <header>
         <div className="title">
           <img src={vyperLogo} alt="Vyper logo" />
           <h4>yper Compiler</h4>
@@ -110,7 +110,7 @@ const App: React.FC = () => {
             }
           />
         </div>
-        <article id="result">
+        <article id="result" className="px-2">
           <VyperResult output={contract ? output[contract] : undefined} />
         </article>
       </section>

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

@@ -103,8 +103,9 @@ function CompilerButton({ contract, setOutput, compilerUrl }: Props) {
   }
 
   return (
-    <Button data-id="compile" onClick={compileContract} variant="primary">
+    <Button data-id="compile" onClick={compileContract} variant="primary" title={contract} className="d-flex flex-column">
-      Compile {contract}
+      <span>Compile</span>
+      <span className="overflow-hidden text-truncate text-nowrap" >{contract}</span>
     </Button>
   )
 }

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

@@ -18,17 +18,18 @@ function LocalUrlInput({ url, setUrl, environment }: Props) {
   }
 
   return (
-  <Form id="local-url">
+    <Form id="local-url">
-    <Form.Group controlId="localUrl">
+      <Form.Group controlId="localUrl">
-      <Form.Label>Local Compiler Url</Form.Label>
+        <label className="text-warning pb-4">Currently we support vyper version > 0.2.16</label>
-      <Form.Control onBlur={updateUrl}
+        <Form.Label>Local Compiler Url</Form.Label>
-        defaultValue={url}
+        <Form.Control onBlur={updateUrl}
-        type="email"
+          defaultValue={url}
-        placeholder="eg http://localhost:8000/compile" />
+          type="email"
-      <Form.Text className="text-muted">
+          placeholder="eg http://localhost:8000/compile" />
-      </Form.Text>
+        <Form.Text className="text-muted">
-    </Form.Group>
+        </Form.Text>
-  </Form>
+      </Form.Group>
+    </Form>
   )
 }
 

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

@@ -27,9 +27,9 @@ function VyperResult({ output }: VyperResultProps) {
   if (!output) return (
 
     <div id="result">
-      <p>No contract compiled yet.</p>
+      <p className="my-3">No contract compiled yet.</p>
-      <Button data-id="add-repository" variant="info" onClick={() => remixClient.cloneVyperRepo()}>
+      <Button data-id="add-repository" variant="secondary" className="w-100" onClick={() => remixClient.cloneVyperRepo()}>
-          Clone Vyper repository and play with the contract examples
+          Clone Vyper examples repository
       </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>
-      <pre data-id="error-message" className="alert alert-danger">{output.message}</pre>
+      <pre data-id="error-message" className="w-100 alert alert-danger">{output.message}</pre>
     </div>)
   }