fixed recorder card

libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx

@@ -1,27 +1,9 @@
 // eslint-disable-next-line no-use-before-define
-import React from 'react'
+import React, {useState} from 'react'
-import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
 import { RecorderProps } from '../types'
 
 export function RecorderUI (props: RecorderProps) {
-  const card = (title: string, recorderCount: number) => {
+  const [toggleExpander, setToggleExpander] = useState<boolean>(true)
-    return (
-      <div className="d-flex justify-content-between align-items-center" onClick={() => {}}>
-        <div className="pr-1 d-flex flex-row">
-          <div>{title}</div>
-          <div>
-            <div className="d-flex flex-column">
-              <div className="ml-2 badge badge-pill badge-primary" title="The number of recorded transactions">{recorderCount}</div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <div><i className="udapp_arrow fas fa-angle-down" data-id="udapp_arrow"></i></div>
-        </div>
-      </div>
-    )
-  }
-
   const triggerRecordButton = () => {
     props.storeScenario(props.scenarioPrompt)
   }
@@ -30,24 +12,35 @@ export function RecorderUI (props: RecorderProps) {
     props.runCurrentScenario(props.gasEstimationPrompt, props.passphrasePrompt, props.mainnetPrompt, props.logBuilder)
   }
 
+  const toggleClass = () => {
+    setToggleExpander(!toggleExpander)
+  }
+
   return (
     <div className="udapp_cardContainer list-group-item border-0">
-      <TreeView>
+      <div className="d-flex justify-content-between" onClick={toggleClass}>
-        <TreeViewItem label={card('Transactions recorded', props.count)} showIcon={false} labelClass="ml-n1">
+        <div className="d-flex">
-          <div className="d-flex flex-column">
+          <label>Transactions recorded</label>
-            <div className="udapp_recorderDescription mt-2">
+          <div className="ml-2 mb-2 badge badge-pill badge-primary" title="The number of recorded transactions">{props.count}</div>
-              All transactions (deployed contracts and function executions) in this environment can be saved and replayed in
+        </div>
-              another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
+        <div>
-            </div>
+          <span data-id='UdaooRecorderTitleExpander' onClick={toggleClass}>
-            <div className="udapp_transactionActions">
+            <i className={!toggleExpander ? 'fas fa-angle-right' : 'fas fa-angle-down'} aria-hidden="true"></i>
-              <i className="fas fa-save savetransaction udapp_recorder udapp_icon"
+          </span>
-                onClick={triggerRecordButton} title="Save Transactions" aria-hidden="true">
+        </div>
-              </i>
+      </div>
-              <i className="fas fa-play runtransaction udapp_runTxs udapp_icon" title="Run Transactions" data-id="runtransaction" aria-hidden="true" onClick={handleClickRunButton}></i>
+      <div className={`flex-column ${toggleExpander ? "d-flex" : "d-none"}`}>
-            </div>
+        <div className="udapp_recorderDescription mt-2">
-          </div>
+          All transactions (deployed contracts and function executions) can be saved and replayed in
-        </TreeViewItem>
+          another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
-      </TreeView>
+        </div>
+        <div className="udapp_transactionActions">
+          <i className="fas fa-save savetransaction udapp_recorder udapp_icon"
+            onClick={triggerRecordButton} title="Save Transactions" aria-hidden="true">
+          </i>
+          <i className="fas fa-play runtransaction udapp_runTxs udapp_icon" title="Run Transactions" data-id="runtransaction" aria-hidden="true" onClick={handleClickRunButton}></i>
+        </div>
+      </div>
     </div>
   )
 }

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -228,9 +228,9 @@ export function Workspace () {
             </div>
           </header>
         </div>
-        <div className='remixui_fileExplorerTree'>
+        <div className='h-100 remixui_fileExplorerTree'>
-          <div>
+          <div className='h-100'>
-            <div className='pl-2 remixui_treeview' data-id='filePanelFileExplorerTree'>
+            <div className='pl-2 h-100 remixui_treeview' data-id='filePanelFileExplorerTree'>
               { (global.fs.mode === 'browser') && (currentWorkspace !== NO_WORKSPACE) &&
                   <FileExplorer
                     name={currentWorkspace}