fix accordion

apps/vyper/src/app/app.tsx

@@ -38,6 +38,7 @@ const App = () => {
     environment: 'remote',
     localUrl: 'http://localhost:8000/',
   })
+  const [toggleAccordion, setToggleAccordion] = useState(false)
 
   useEffect(() => {
     async function start() {
@@ -99,6 +100,9 @@ const App = () => {
   function resetCompilerResultState() {
     setOutput(remixClient.compilerOutput)
   }
+  const toggleAccordionHandler = () => {
+    setToggleAccordion(!toggleAccordion)
+  }
 
   return (
     <main id="vyper-plugin">
@@ -110,11 +114,11 @@ const App = () => {
             </Button>
           </CustomTooltip>
         </div>
-        <Accordion>
-          <Card>
-            <Card.Header>
-              <Accordion.Toggle as={Button} variant="link" eventKey="0">
-                <span className="text-primary">Advanced Compiler Settings</span>
+        <Accordion className="border-0 w-100">
+          <Card className="border-0">
+            <Accordion.Toggle as={Card.Header} variant="link" eventKey="0" >
+              <span className="">Advanced Compiler Settings</span>
+              <i className={toggleAccordion ? 'fas fa-angle-right' : 'fas fa-angle-down'}></i>
             </Accordion.Toggle>
             <Accordion.Collapse eventKey="0">
               <Card.Body>
@@ -128,7 +132,6 @@ const App = () => {
                 </Form>
               </Card.Body>
             </Accordion.Collapse>
-            </Card.Header>
           </Card>
         </Accordion>
         <span className="px-3 mt-1 mb-1 small text-warning">Specify the compiler version & EVM version in the .vy file</span>

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

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react'
+import { AccordionContext } from 'react-bootstrap'
+import { useAccordionToggle } from 'react-bootstrap/AccordionToggle'
+
+function ContextAwareToggle({ children, eventKey, callback }) {
+  const currentEventKey = useContext(AccordionContext)
+
+  const decoratedOnClick = useAccordionToggle(
+    eventKey,
+    () => callback && callback(eventKey),
+  );
+
+  const isCurrentEventKey = currentEventKey === eventKey;
+
+  return (
+    <button
+      type="button"
+      style={{ backgroundColor: isCurrentEventKey ? 'fas fa-angle-right' : 'fas fa-angle-down' }}
+      onClick={decoratedOnClick}
+    >
+      {children}
+    </button>
+  );
+}