vyper compilation detais tab fixes. Doc gen tab fixes

Author: LianaHus

apps/doc-viewer/src/app/App.tsx

@@ -15,11 +15,12 @@ export default function App() {
   const edit = () => {
     if (!client.mdFile) return
     client.call('fileManager', 'open' as any, client.mdFile)
+    client.call('fileManager', 'switchFile' as any, client.mdFile) //@TODO check why this doesn't work
   }
   return (
     <>
-      <div className="m-5 p-2">
-        <button className="btn btn-secondary mb-2" onClick={edit}>EDIT</button>
+      <div className="bg-light p-5">
+        <button className="btn btn-sm border mb-2" onClick={edit}>EDIT</button>
         <ReactMarkdown children={contents} remarkPlugins={[remarkGfm]} />
       </div>
     </>

apps/remix-ide/src/app/components/panel.ts

@@ -29,7 +29,7 @@ export class AbstractPanel extends HostPlugin {
       view: view,
       active: false,
       pinned: false,
-      class: 'plugItIn active pb-2'
+      class: 'plugItIn active ' + (profile.location === "sidePanel" ? 'pb-2' : ''),
     }
   }
 

apps/remix-ide/src/app/plugins/vyper-compilation-details.tsx

@@ -142,7 +142,7 @@ export class VyperCompilationDetailsPlugin extends ViewPlugin {
   }
   render() {
     return (
-      <div id="compileDetails">
+      <div className="d-flex h-100 w-100 m-0 p-5 bg-light" id="compileDetails">
         <PluginViewWrapper plugin={this} />
       </div>
     )

apps/remix-ide/src/remixAppManager.js

@@ -86,7 +86,10 @@ let requiredModules = [
   'environmentExplorer',
   'templateSelection',
   'matomo',
-  'walletconnect'
+  'walletconnect',
+  'popupPanel',
+  'remixAI',
+  'remixAID'
 ]
 
 // dependentModules shouldn't be manually activated (e.g hardhat is activated by remixd)
@@ -415,10 +418,12 @@ class PluginLoader {
       'environmentExplorer',
       'templateSelection',
       'compilationDetails',
+      'vyperCompilationDetails',
       'walletconnect',
       'dapp-draft',
       'solidityumlgen',
-      'remixGuide'
+      'remixGuide',
+      'doc-viewer'
     ]
     this.loaders = {}
     this.loaders.localStorage = {

apps/vyper/src/app/app.css

@@ -73,7 +73,6 @@ html, body, #root, main {
   justify-content: space-evenly;
 }
 
-
 #result nav a {
   padding: 0.5rem 1rem;
   font-size: 0.8rem;
@@ -84,13 +83,15 @@ html, body, #root, main {
   width: 100%;
   padding: 15px;
   overflow: auto;
+  height: 100%;
 }
 
 #result .tab-pane.active {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  background-color: var(--body-bg);
 }
 
 #result .copy {
@@ -114,8 +115,6 @@ html, body, #root, main {
   width: 100%;
 }
 
-
-
 .remixui_copyButton {
   padding: 6px;
   font-weight: bold;
@@ -222,8 +221,6 @@ html, body, #root, main {
 }
 
 #compileDetails {
-  margin: 15px;
-  padding: 15px;
 }
 
 .cursor-status {

apps/vyper/src/app/app.tsx

@@ -122,26 +122,26 @@ const App = () => {
       <section>
         <div className="px-3 pt-3 mb-3 w-100">
           <CustomTooltip placement="bottom" tooltipText="Clone a repo of Vyper examples. Switch to the File Explorer to see the examples.">
-            <Button data-id="add-repository" className="w-100 btn btn-secondary" onClick={() => {
+            <button data-id="add-repository" className="w-100 btn border" onClick={() => {
               {cloneCount === 0 ? remixClient.cloneVyperRepo() : remixClient.cloneVyperRepo(cloneCount)}
               setCloneCount((prev) => {
                 return ++prev
               })
             }}>
               Clone a repo of Vyper examples
-            </Button>
+            </button>
           </CustomTooltip>
         </div>
 
         <Accordion className="border-0 w-100 accordion-background">
           <div className="border-0">
             <div className="">
               <CustomAccordionToggle eventKey="0">
-                <label className="h6">Advanced Configurations</label>
+                <label className="h6">Configurations</label>
               </CustomAccordionToggle>
             </div>
             <Accordion.Collapse eventKey="0">
-              <div className="pt-2">
+              <div className="pb-2 border-bottom">
                 <Form>
                   <div className="d-flex flex-row justify-content-around mb-1 mt-2">
                     <div className={`custom-control custom-radio ${state.environment === 'remote' ? 'd-flex' : 'd-flex cursor-status'}`}>
@@ -185,7 +185,7 @@ const App = () => {
             </Accordion.Collapse>
           </div>
         </Accordion>
-        <span className="w-100 px-3 mt-3 mb-3 small text-warning">
+        <span className="w-100 px-3 mt-3 mb-1 small text-warning">
           Specify the{' '}
           <a className="text-warning" target="_blank" href="https://remix-ide.readthedocs.io/en/latest/vyper.html#specify-vyper-version">
             compiler version

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

@@ -59,7 +59,7 @@ function VyperResult({ output, plugin }: VyperResultProps) {
   return (
     <>
       <div className="d-flex justify-content-center w-100 mb-3 mt-1 vyper-panel-width flex-column">
-        <button data-id="compilation-details" className="remixui_resultsBtn border btn-block d-block btn-block" onClick={async () => {
+        <button data-id="compilation-details" className="remixui_resultsBtn border btn d-block btn-block" onClick={async () => {
           await plugin?.call('vyperCompilationDetails', 'showDetails', output)
         }}>
           <span>

libs/remix-ui/vyper-compile-details/src/lib/vyperCompile.tsx

@@ -65,15 +65,14 @@ export default function VyperCompile({ result, theme, themeStyle }: VyperCompile
   ]
 
   return (
-    <>
-      <Tabs id="result" activeKey={active} onSelect={(key: any) => setActive(key)} justify>
+    <div className='w-100 h-100 d-flex flex-row'>
+      <Tabs className="flex-column" style={{height: "fit-content", backgroundColor: 'var(--body-bg)'}} id="result" activeKey={active} onSelect={(key: any) => setActive(key)}>
         {tabContent.map((content, index) => (
-          <Tab eventKey={content.eventKey} title={content.tabHeadingText} as={'span'} key={`${index}-${content.eventKey}`}>
-            <div className="d-flex flex-column w-75 justify-content-center mx-auto rounded-2">
+          <Tab className="border-top border-left p-4 bg-light" style={{width: '50rem', height: 'fit-content', minHeight: '25rem'}} eventKey={content.eventKey} title={content.tabHeadingText} as={'span'} key={`${index}-${content.eventKey}`}>
+            <div className="d-flex flex-column w-90 justify-content-center mx-auto rounded-2">
               <CopyToClipboard getContent={() => (content.eventKey !== 'abi' ? content.tabPayload : JSON.stringify(result['abi']))}>
                 <Button
-                  variant="info"
-                  className="copy mt-3 ml-2"
+                  className="copy ml-2 btn btn-sm btn-secondary"
                   data-id={content.eventKey === 'abi' ? 'copy-abi' : ''}
                 >
                   <span className="far fa-copy mr-2"></span>
@@ -97,6 +96,6 @@ export default function VyperCompile({ result, theme, themeStyle }: VyperCompile
           </Tab>
         ))}
       </Tabs>
-    </>
+    </div>
   )
 }