some code quality improvements and coding style fixes

apps/remix-ide-e2e/src/tests/defaultLayout.test.ts

@@ -50,11 +50,14 @@ module.exports = {
 
   'Toggles Terminal': function (browser: NightwatchBrowser) {
     browser.waitForElementVisible('div[data-id="terminalContainer"]')
-      .assert.elementPresent('div[data-id="terminalContainerDisplay"]')
+      .assert.elementPresent('div[data-id="terminalCli"]')
+      .assert.elementPresent('div[data-id="terminalContainer"]')
       .click('i[data-id="terminalToggleIcon"]')
+      .assert.elementNotPresent('div[data-id="terminalContainer"]')
       .checkElementStyle('div[data-id="terminalToggleMenu"]', 'height', '35px')
       .click('i[data-id="terminalToggleIcon"]')
-      .assert.elementPresent('div[data-id="terminalContainerDisplay"]')
+      .assert.elementPresent('div[data-id="terminalCli"]')
+      .assert.elementPresent('div[data-id="terminalContainer"]')
   },
 
   'Switch Tabs using tabs icon': function (browser: NightwatchBrowser) {

libs/remix-ui/terminal/src/lib/components/Table.tsx

@@ -37,7 +37,7 @@ const showTable = (opts, showTableHash) => {
   const val = opts.val != null ? typeConversion.toInt(opts.val) : 0
   return (
     <table
-      className={`remix_ui_terminal_txTable ${showTableHash.includes(opts.hash) ? 'active' : ''}`}
+      className={`mt-1 mb-2 mr-4  align-self-center ${showTableHash.includes(opts.hash) ? 'active' : ''}`}
       id="txTable"
       data-id={`txLoggerTable${opts.hash}`}
     >

libs/remix-ui/terminal/src/lib/remix-ui-terminal.css

@@ -143,6 +143,7 @@ element.style {
   cursor: pointer;
   align-items: center;
   cursor: pointer;
+  padding-top: 0.5rem;
 }
 .remix_ui_terminal_log:hover {
   opacity: 0.8;
@@ -202,12 +203,6 @@ element.style {
 table .active {
   transition: max-height 0.6s, padding 0.6s;
 }
-  #txTable {
-    margin-top: 1%;
-    margin-bottom: 5%;
-    align-self: center;
-    width: 85%;
-  }
 .remix_ui_terminal_tr, .remix_ui_terminal_td {
   padding: 4px;
   vertical-align: baseline;
@@ -231,62 +226,3 @@ element.style {
 .remix_ui_terminal_debug:hover {
   opacity: 0.8;
 }
-
-
-  /* Style the accordion section */
-.accordion__section {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Style the buttons that are used to open and close the accordion panel */
-.accordion {
-  background-color: #eee;
-  color: #444;
-  cursor: pointer;
-  padding: 18px;
-  display: flex;
-  align-items: center;
-  border: none;
-  outline: none;
-  transition: background-color 0.6s ease;
-}
-
-/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
-/* .accordion:hover,
-.active {
-  background-color: #ccc;
-} */
-
-/* Style the accordion content title */
-.accordion__title {
-  font-family: "Open Sans", sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-/* Style the accordion chevron icon */
-.accordion__icon {
-  margin-left: auto;
-  transition: transform 0.6s ease;
-}
-
-/* Style to rotate icon when state is active */
-.rotate {
-  transform: rotate(90deg);
-}
-
-/* Style the accordion content panel. Note: hidden by default */
-.accordion__content {
-  background-color: white;
-  overflow: hidden;
-  transition: max-height 0.6s ease;
-}
-
-/* Style the accordion content text */
-.accordion__text {
-  font-family: "Open Sans", sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  padding: 18px;
-}

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

@@ -381,6 +381,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     } else {
       setShowTableHash((prevState) => ([...prevState, tx.hash]))
     }
+    scrollToBottom()
   }
 
   const handleAutoComplete = () => (
@@ -422,7 +423,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
   }
 
-  const classNameBlock = 'remix_ui_terminal_block px-4 text-break'
+  const classNameBlock = 'remix_ui_terminal_block px-4 py-1 text-break'
 
   return (
     <div style={{ flexGrow: 1 }} className='remix_ui_terminal_panel' ref={panelRef}>
@@ -469,13 +470,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
         {
           handleAutoComplete()
         }
-        <div data-id='terminalContainerDisplay' style = {{
-          position: 'relative',
-          height: '100%',
-          width: '100%',
-          opacity: '0.1',
-          zIndex: -1
-        }}></div>
         <div className="position-relative d-flex flex-column-reverse h-100">
           <div id='journal' className='remix_ui_terminal_journal pt-3 pb-4 px-2 m-2' data-id='terminalJournal'>
             {!clearConsole && <TerminalWelcomeMessage packageJson={version}/>}