From faab4146aaf7eff0f2ce8f3fcd01b908596d695e Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 30 Aug 2022 11:25:07 +0200
Subject: [PATCH 1/7] vyper UI improvements

---
 apps/vyper/src/app/app.css                    |  1 -
 apps/vyper/src/app/app.tsx                    |  4 ++--
 .../src/app/components/CompilerButton.tsx     |  5 ++--
 apps/vyper/src/app/components/LocalUrl.tsx    | 23 ++++++++++---------
 apps/vyper/src/app/components/VyperResult.tsx |  8 +++----
 5 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css
index 978406926a..d2f1a92b7d 100644
--- a/apps/vyper/src/app/app.css
+++ b/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;
diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 52de571be8..46f5fd6e01 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/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>
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index c7fe318f0d..ede7d46271 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/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">
-      Compile {contract}
+    <Button data-id="compile" onClick={compileContract} variant="primary" title={contract} className="d-flex flex-column">
+      <span>Compile</span>
+      <span className="overflow-hidden text-truncate text-nowrap" >{contract}</span>
     </Button>
   )
 }
diff --git a/apps/vyper/src/app/components/LocalUrl.tsx b/apps/vyper/src/app/components/LocalUrl.tsx
index 5e2dcbacf1..c3ff806305 100644
--- a/apps/vyper/src/app/components/LocalUrl.tsx
+++ b/apps/vyper/src/app/components/LocalUrl.tsx
@@ -18,17 +18,18 @@ function LocalUrlInput({ url, setUrl, environment }: Props) {
   }
 
   return (
-  <Form id="local-url">
-    <Form.Group controlId="localUrl">
-      <Form.Label>Local Compiler Url</Form.Label>
-      <Form.Control onBlur={updateUrl}
-        defaultValue={url}
-        type="email"
-        placeholder="eg http://localhost:8000/compile" />
-      <Form.Text className="text-muted">
-      </Form.Text>
-    </Form.Group>
-  </Form>
+    <Form id="local-url">
+      <Form.Group controlId="localUrl">
+        <label className="text-warning pb-4">Currently we support vyper version > 0.2.16</label>
+        <Form.Label>Local Compiler Url</Form.Label>
+        <Form.Control onBlur={updateUrl}
+          defaultValue={url}
+          type="email"
+          placeholder="eg http://localhost:8000/compile" />
+        <Form.Text className="text-muted">
+        </Form.Text>
+      </Form.Group>
+    </Form>
   )
 }
 
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index e58f901fea..ccf2141f7a 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/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>
-      <Button data-id="add-repository" variant="info" onClick={() => remixClient.cloneVyperRepo()}>
-          Clone Vyper repository and play with the contract examples
+      <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 +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>)
   }
 

From 35e611faeca658604fe2068e3bfc35c714108eb6 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 30 Aug 2022 11:37:02 +0200
Subject: [PATCH 2/7] adding version msg

---
 apps/vyper/src/app/app.tsx                 | 2 +-
 apps/vyper/src/app/components/LocalUrl.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 46f5fd6e01..4d2bcee29a 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -89,7 +89,7 @@ const App: React.FC = () => {
           value={state.environment}
         >
           <ToggleButton data-id="remote-compiler" variant="secondary" name="remote" value="remote">
-            Remote Compiler
+            Remote Compiler v0.2.16
           </ToggleButton>
           <ToggleButton data-id="local-compiler" variant="secondary" name="local" value="local">
             Local Compiler
diff --git a/apps/vyper/src/app/components/LocalUrl.tsx b/apps/vyper/src/app/components/LocalUrl.tsx
index c3ff806305..69bbb138e0 100644
--- a/apps/vyper/src/app/components/LocalUrl.tsx
+++ b/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">
-        <label className="text-warning pb-4">Currently we support vyper version > 0.2.16</label>
+        <Form.Label className="text-warning pb-4">Currently we support vyper version > 0.2.16</Form.Label>
         <Form.Label>Local Compiler Url</Form.Label>
         <Form.Control onBlur={updateUrl}
           defaultValue={url}

From 89df3d476f6b8eadb99a85ea639ab9efba5fa808 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 30 Aug 2022 13:31:54 +0200
Subject: [PATCH 3/7] moved clone btn and did some style changes

---
 apps/vyper/src/app/app.tsx                       |  6 ++++++
 apps/vyper/src/app/components/CompilerButton.tsx |  3 ++-
 apps/vyper/src/app/components/LocalUrl.tsx       |  2 +-
 apps/vyper/src/app/components/VyperResult.tsx    | 11 ++++++-----
 apps/vyper/src/app/components/WarnRemote.tsx     |  2 +-
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 4d2bcee29a..a02d89f00a 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/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}
diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index ede7d46271..56cdc23d8a 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/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)
               }
             })
diff --git a/apps/vyper/src/app/components/LocalUrl.tsx b/apps/vyper/src/app/components/LocalUrl.tsx
index 69bbb138e0..47acde9dad 100644
--- a/apps/vyper/src/app/components/LocalUrl.tsx
+++ b/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}
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index ccf2141f7a..a3ed6b1956 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/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>)
   }
 
diff --git a/apps/vyper/src/app/components/WarnRemote.tsx b/apps/vyper/src/app/components/WarnRemote.tsx
index 1235eebde7..107ab13335 100644
--- a/apps/vyper/src/app/components/WarnRemote.tsx
+++ b/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>
   )
 }
 

From f460b84d6f4671424f5e826100053b1c0d6ef61f Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 30 Aug 2022 13:37:22 +0200
Subject: [PATCH 4/7] rm console

---
 apps/vyper/src/app/components/CompilerButton.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/vyper/src/app/components/CompilerButton.tsx b/apps/vyper/src/app/components/CompilerButton.tsx
index 56cdc23d8a..fba082575b 100644
--- a/apps/vyper/src/app/components/CompilerButton.tsx
+++ b/apps/vyper/src/app/components/CompilerButton.tsx
@@ -77,7 +77,6 @@ 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)
               }
             })

From 6656b4ab23b87c6be9ee73b843ccdeb204068d68 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 30 Aug 2022 13:38:58 +0200
Subject: [PATCH 5/7] added title to results

---
 apps/vyper/src/app/components/VyperResult.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index a3ed6b1956..68aa26ee44 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -34,7 +34,7 @@ function VyperResult({ output }: VyperResultProps) {
   if (isCompilationError(output)) {
     return (
     <div id="result" className="error">
-      <i className="fas fa-exclamation-circle text-danger"></i>
+      <i className="fas fa-exclamation-circle text-danger" title={output.message}></i>
       <pre data-id="error-message" className="px-2 w-100 alert alert-danger" style={{
         fontSize: "0.5rem",
         overflowX: "hidden",

From b459bf369ef3e8a52333183d953ca2fcec64ebc4 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 30 Aug 2022 13:41:49 +0200
Subject: [PATCH 6/7] fixed title

---
 apps/vyper/src/app/components/VyperResult.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 68aa26ee44..9f9ee1c7e5 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -33,8 +33,8 @@ function VyperResult({ output }: VyperResultProps) {
 
   if (isCompilationError(output)) {
     return (
-    <div id="result" className="error">
-      <i className="fas fa-exclamation-circle text-danger" title={output.message}></i>
+    <div id="result" className="error" title={output.message}>
+      <i className="fas fa-exclamation-circle text-danger"></i>
       <pre data-id="error-message" className="px-2 w-100 alert alert-danger" style={{
         fontSize: "0.5rem",
         overflowX: "hidden",

From ca09e9eb722e39449c3d5ebf0683f72a2be4bf54 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Tue, 30 Aug 2022 15:07:42 +0200
Subject: [PATCH 7/7] width of item is fixed`

---
 apps/vyper/src/app/app.css                    |  2 +-
 apps/vyper/src/app/app.tsx                    |  4 ++--
 apps/vyper/src/app/components/VyperResult.tsx | 19 +++++++++----------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css
index d2f1a92b7d..db9ee76b63 100644
--- a/apps/vyper/src/app/app.css
+++ b/apps/vyper/src/app/app.css
@@ -49,7 +49,7 @@ html, body, #root, main {
 }
 
 #compile-btn {
-  width: 90%;
+  width: 100%;
 }
 
 #compile-btn * {
diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index a02d89f00a..ad91f29c3f 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -83,7 +83,7 @@ const App: React.FC = () => {
         </a>
       </header>
       <section>
-        <div className="px-3 w-100">
+        <div className="px-4 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>
@@ -107,7 +107,7 @@ const App: React.FC = () => {
           environment={state.environment}
         />
         <WarnRemote environment={state.environment} />
-        <div id="compile-btn">
+        <div className="px-4" id="compile-btn">
           <CompilerButton
             compilerUrl={compilerUrl()}
             contract={contract}
diff --git a/apps/vyper/src/app/components/VyperResult.tsx b/apps/vyper/src/app/components/VyperResult.tsx
index 9f9ee1c7e5..44ccba7b7f 100644
--- a/apps/vyper/src/app/components/VyperResult.tsx
+++ b/apps/vyper/src/app/components/VyperResult.tsx
@@ -10,7 +10,6 @@ import Button from 'react-bootstrap/Button';
 import JSONTree from 'react-json-view'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 
-
 interface VyperResultProps {
   output?: VyperCompilationOutput;
 }
@@ -27,20 +26,20 @@ function VyperResult({ output }: VyperResultProps) {
 
     <div id="result">
       <p className="my-3">No contract compiled yet.</p>
-      
     </div>
   )
 
   if (isCompilationError(output)) {
     return (
-    <div id="result" className="error" title={output.message}>
-      <i className="fas fa-exclamation-circle text-danger"></i>
-      <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>)
+      <div id="result" className="error" title={output.message}>
+        <i className="fas fa-exclamation-circle text-danger"></i>
+        <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>
+    )
   }
 
   return (