From f8771b8afa9373cc99d862b2825bb20a7198ad72 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Thu, 15 Feb 2024 16:12:52 +0100
Subject: [PATCH] fix radio buttons

---
 apps/vyper/src/app/app.css | 8 ++++++++
 apps/vyper/src/app/app.tsx | 6 ++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/vyper/src/app/app.css b/apps/vyper/src/app/app.css
index f299c4d37a..57b85f6dba 100644
--- a/apps/vyper/src/app/app.css
+++ b/apps/vyper/src/app/app.css
@@ -222,3 +222,11 @@ html, body, #root, main {
   margin: 15px;
   padding: 15px;
 }
+
+.cursor-status {
+
+}
+
+.cursor-status :hover {
+  cursor: pointer;
+}
diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index 98c5a37b78..d7973309ee 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -110,8 +110,10 @@ const App = () => {
         </div>
         <Form>
           <div className="d-flex flex-row gap-5 mb-3 mt-2">
-            <Form.Check inline id="remote-compiler" data-id="remote-compiler" type="radio" name="remote" 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 id="remote-compiler" data-id="remote-compiler" type="radio" name="remote" value={state.environment} checked={state.environment === 'remote'} onChange={() => setEnvironment('remote')} label="Remote Compiler" className={`${state.environment === 'remote' ? `d-flex mr-4 cursor-status` : '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"
+              className={`${state.environment === 'local' ? `cursor-status` : ''}`}/>
           </div>
         </Form>
         <span className="px-3 mt-1 mb-1 small text-warning">Specify the compiler version & EVM version in the .vy file</span>