From b38871608f1fecab07c917b46bf385f114dac335 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Tue, 20 Feb 2024 16:03:23 +0100
Subject: [PATCH] fix and add chevron for advanced config

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

diff --git a/apps/vyper/src/app/app.tsx b/apps/vyper/src/app/app.tsx
index adfb54d021..4b7a69c2e0 100644
--- a/apps/vyper/src/app/app.tsx
+++ b/apps/vyper/src/app/app.tsx
@@ -114,14 +114,14 @@ const App = () => {
             </Button>
           </CustomTooltip>
         </div>
+
         <Accordion className="border-0 w-100 mb-3 accordion-background">
           <div className="border-0">
-            <div className="pl-3">
+            <div className="pl-3 d-flex flex-row justify-content-between">
               <CustomAccordionToggle eventKey="0">
                 <span className="">Advanced Compiler Settings</span>
               </CustomAccordionToggle>
-              {/* <i className={toggleAccordion ? 'fas fa-angle-right' : 'fas fa-angle-down'}></i> */}
-              <span className="fas fa-angle-right"></span>
+              {/* <i className={toggleAccordion ? 'far fa-angle-right' : 'far fa-angle-down'}></i> */}
             </div>
             <Accordion.Collapse eventKey="0">
               <div className="pl-3 pt-3 border-top-0">
@@ -137,7 +137,7 @@ const App = () => {
             </Accordion.Collapse>
           </div>
         </Accordion>
-        <span className="px-3 mt-1 mb-1 small text-warning">Specify the compiler version & EVM version in the .vy file</span>
+        <span className="px-3 mt-1 mb-1 small text-warning">Specify the <a className="text-warning" target="_blank" href="https://">compiler version</a> & <a className="text-warning" href="http://docs.vyperlang.org/en/stable/compiling-a-contract.html#setting-the-target-evm-version" target="_blank" rel="noopener noreferrer">EVM version</a> 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} />
diff --git a/apps/vyper/src/app/components/CustomAccordionToggle.tsx b/apps/vyper/src/app/components/CustomAccordionToggle.tsx
index c4a5ce98b5..edaf6a16de 100644
--- a/apps/vyper/src/app/components/CustomAccordionToggle.tsx
+++ b/apps/vyper/src/app/components/CustomAccordionToggle.tsx
@@ -1,5 +1,4 @@
-import React, { useContext, useState } from 'react'
-import { AccordionContext } from 'react-bootstrap'
+import React, { useState } from 'react'
 import { useAccordionToggle } from 'react-bootstrap/AccordionToggle'
 
 export type CustomAccordionToggleProps = {
@@ -10,18 +9,17 @@ export type CustomAccordionToggleProps = {
 
 export default function CustomAccordionToggle({ children, eventKey }: CustomAccordionToggleProps) {
   const [toggleAccordion, setToggleAccordion] = useState(false)
-  // <i className={toggleAccordion ? 'fas fa-angle-right' : 'fas fa-angle-down'}></i>
 
   const decoratedOnClick = useAccordionToggle(eventKey, () =>
     setToggleAccordion(!toggleAccordion)
   )
 
-
   return (
     <div
       onClick={decoratedOnClick}
     >
       {children}
+      <i className={toggleAccordion ? 'far fa-angle-right' : 'far fa-angle-down'}></i>
     </div>
   )
 }