changing compile buttons

apps/vyper/src/app/app.tsx

@@ -14,6 +14,7 @@ import Button from 'react-bootstrap/Button'
 
 import './app.css'
 import { CustomTooltip } from '@remix-ui/helper'
+import { Form } from 'react-bootstrap'
 
 interface AppState {
   status: 'idle' | 'inProgress'
@@ -107,8 +108,8 @@ const App = () => {
             </Button>
           </CustomTooltip>
         </div>
-        <ToggleButtonGroup name="remote" className="mb-3" onChange={setEnvironment} type="radio" value={state.environment}>
-          <ToggleButton
+        {/* <ToggleButtonGroup name="remote" className="mb-3" onChange={setEnvironment} type="radio" value={state.environment}> */}
+        {/* <ToggleButton
             data-id="remote-compiler"
             variant="secondary"
             name="remote"
@@ -116,18 +117,43 @@ const App = () => {
             style={{ cursor: state.environment === 'remote' ? 'default' : 'pointer' }}
           >
             Remote Compiler
-          </ToggleButton>
-          <ToggleButton
-            id="local-compiler"
-            data-id="local-compiler"
-            variant="secondary"
-            name="local"
-            value="local"
-            style={{ cursor: state.environment === 'local' ? 'default' : 'pointer' }}
-          >
+          </ToggleButton> */}
+        <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'}
+              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}
+              label="Local Compiler"
+              style={{ cursor: state.environment === 'local' ? 'default' : 'pointer' }}
+            />
+          </div>
+        </Form>
+        {/* <ToggleButton
+          id="local-compiler"
+          data-id="local-compiler"
+          variant="secondary"
+          name="local"
+          value="local"
+          style={{ cursor: state.environment === 'local' ? 'default' : 'pointer' }}
+        >
             Local Compiler
-          </ToggleButton>
-        </ToggleButtonGroup>
+        </ToggleButton> */}
+        {/* </ToggleButtonGroup> */}
         <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">