finished ui updates

apps/vyper/src/app/app.tsx

@@ -13,9 +13,9 @@ import ToggleButton from 'react-bootstrap/ToggleButton'
 import Button from 'react-bootstrap/Button'
 
 import './app.css'
-import { CustomTooltip } from '@remix-ui/helper'
-import { Form } from 'react-bootstrap'
-import { CompileErrorCard } from './components/CompileErrorCard'
+import {CustomTooltip} from '@remix-ui/helper'
+import {Form} from 'react-bootstrap'
+import {CompileErrorCard} from './components/CompileErrorCard'
 
 interface AppState {
   status: 'idle' | 'inProgress'
@@ -34,10 +34,9 @@ const App = () => {
   const [state, setState] = useState<AppState>({
     status: 'idle',
     environment: 'remote',
-    localUrl: 'http://localhost:8000/'
+    localUrl: 'http://localhost:8000/',
   })
 
-
   useEffect(() => {
     async function start() {
       try {
@@ -104,8 +103,8 @@ const App = () => {
     <main id="vyper-plugin">
       <header>
         <div className="title">
-          <img src={'assets/logo.svg'} alt="Vyper logo" />
-          <h4>yper Compiler</h4>
+          <img src={'assets/vyperLogo_v2.webp'} alt="Vyper logo" />
+          <h4 className="pl-1">yper Compiler</h4>
         </div>
         <a rel="noopener noreferrer" href="https://github.com/ethereum/remix-project/tree/master/apps/vyper" target="_blank">
           <i className="fab fa-github"></i>
@@ -113,61 +112,32 @@ const App = () => {
       </header>
       <section>
         <div className="px-3 pt-3 mb-3 w-100">
-          <CustomTooltip
-            placement="bottom"
-            tooltipText="Clone Vyper examples. Switch to the File Explorer to see the examples."
-          >
+          <CustomTooltip placement="bottom" tooltipText="Clone Vyper examples. Switch to the File Explorer to see the examples.">
             <Button data-id="add-repository" className="w-100 btn btn-secondary" onClick={() => remixClient.cloneVyperRepo()}>
-            Clone Vyper examples repository
+              Clone Vyper examples repository
             </Button>
           </CustomTooltip>
         </div>
         <Form>
           <div className="d-flex flex-row gap-5 mb-3 mt-2">
-            <Form.Check
-              inline
-              data-id="remote-compiler"
-              type="radio"
-              value={state.environment}
-              checked={state.environment === 'remote'}
-              onChange={() => setEnvironment('remote')}
-              label="Remote Compiler"
-              style={{ cursor: state.environment === 'remote' ? 'default' : 'pointer' }}
-              className="d-flex mr-4"
-            />
-            <Form.Check
-              inline
-              id="local-compiler"
-              data-id="local-compiler"
-              checked={state.environment === 'local'}
-              type="radio"
-              name="local"
-              value={state.environment}
-              onChange={() => setEnvironment('local')}
-              label="Local Compiler"
-              style={{ cursor: state.environment === 'local' ? 'default' : 'pointer' }}
-            />
+            <Form.Check inline data-id="remote-compiler" type="radio" value={state.environment} checked={state.environment === 'remote'} onChange={() => setEnvironment('remote')} label="Remote Compiler" style={{cursor: state.environment === 'remote' ? 'default' : 'pointer'}} className="d-flex mr-4" />
+            <Form.Check inline id="local-compiler" data-id="local-compiler" checked={state.environment === 'local'} type="radio" name="local" value={state.environment} onChange={() => setEnvironment('local')} label="Local Compiler" style={{cursor: state.environment === 'local' ? 'default' : 'pointer'}} />
           </div>
         </Form>
         <span className="px-3 mt-1 mb-1 small text-warning">Specify the compiler version & EVM version in the .vy file</span>
         <LocalUrlInput url={state.localUrl} setUrl={setLocalUrl} environment={state.environment} />
         <div className="px-3 w-100 mb-3 mt-1" id="compile-btn">
-          <CompilerButton
-            compilerUrl={compilerUrl()}
-            contract={contract}
-            setOutput={(name, update) => setOutput({...output, [name]: update})}
-            resetCompilerState={resetCompilerResultState}
-          />
+          <CompilerButton compilerUrl={compilerUrl()} contract={contract} setOutput={(name, update) => setOutput({...output, [name]: update})} resetCompilerState={resetCompilerResultState} />
         </div>
 
         <article id="result" className="px-2 mx-2 border-top mt-3">
-          {
-            output && Object.keys(output).length > 0 && output.status !== 'failed' ? (
-              <>
-                <VyperResult output={output} plugin={remixClient} />
-              </>
-            ) : output.status === 'failed' ? <CompileErrorCard output={output} /> : null
-          }
+          {output && Object.keys(output).length > 0 && output.status !== 'failed' ? (
+            <>
+              <VyperResult output={output} plugin={remixClient} />
+            </>
+          ) : output.status === 'failed' ? (
+            <CompileErrorCard output={output} />
+          ) : null}
         </article>
       </section>
     </main>

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

@@ -6,10 +6,10 @@ export function CompileErrorCard(props: any) {
       <i className="fas fa-exclamation-circle text-danger"></i>
       <span
         data-id="error-message"
-        className=""
+        className="text-center"
         style={{
           overflowX: 'hidden',
-          textOverflow: 'ellipsis'
+          textOverflow: 'ellipsis',
         }}
       >
         {props.output.message.trim()}