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

@@ -16,82 +16,82 @@ element.style {
   flex-direction    : column;
   font-size         : 12px;
   min-height        : 3em;
-  }
+}
-  .remix_ui_terminal_bar {
+.remix_ui_terminal_bar {
   z-index           : 2;
-  }
+}
-  .remix_ui_terminal_menu {
+.remix_ui_terminal_menu {
   max-height           : 35px;
   min-height           : 35px;
-  }
+}
-  .remix_ui_terminal_toggleTerminal {
+.remix_ui_terminal_toggleTerminal {
   cursor            : pointer;
-  }
+}
-  .remix_ui_terminal_toggleTerminal:hover {
+.remix_ui_terminal_toggleTerminal:hover {
   color             : var(--secondary);
-  }
+}
-  .remix_ui_terminal_container {
+.remix_ui_terminal_container {
   overflow-y          : auto;
   font-family         : monospace;
   background-repeat   : no-repeat;
   background-position : center 15%;
   background-size     : auto calc(75% -  1.7em);
-  }
+}
 
-  .remix_ui_terminal_journal {
+.remix_ui_terminal_journal {
   margin-top        : auto;
   font-family       : monospace;
   overflow-y        : scroll;
-  }
+}
-  .remix_ui_terminal_block {
+.remix_ui_terminal_block {
   white-space       : pre-wrap;
   font-family       : monospace;
   line-height       : 2ch;
-  }
+}
-  .remix_ui_terminal_block > pre {
+.remix_ui_terminal_block > pre {
   max-height        : 200px;
-  }
+}
-  .remix_ui_terminal_cli                {
+.remix_ui_terminal_cli                {
   line-height       : 1.7em;
   font-family       : monospace;
   padding           : .4em;
   color             : var(--primary);
-  }
+}
-  .remix_ui_terminal_prompt             {
+.remix_ui_terminal_prompt             {
   font-family       : monospace;
-  }
+}
-  .remix_ui_terminal_input {
+.remix_ui_terminal_input {
   outline           : none;
   font-family       : monospace;
-  }
+}
-  .remix_ui_terminal_search {
+.remix_ui_terminal_search {
   width             : 330px;
   padding-left      : 20px;
   padding-top       : 1px;
   padding-bottom    : 1px;
-  }
+}
-  .remix_ui_terminal_filter {
+.remix_ui_terminal_filter {
   height                      : 80%;
   white-space                 : nowrap;
   overflow                    : hidden;
   text-overflow               : ellipsis;
-  }
+}
-  .remix_ui_terminal_searchIcon {
+.remix_ui_terminal_searchIcon {
   width                       : 25px;
   border-top-left-radius      : 3px;
   border-bottom-left-radius   : 3px;
   margin-right                : 5px;
-  }
+}
 
-  .remix_ui_terminal_console {
+.remix_ui_terminal_console {
   cursor           : pointer;
-  }
+}
 
-  .remix_ui_terminal_listenOnNetwork {
+.remix_ui_terminal_listenOnNetwork {
   min-height: auto;
-  }
+}
 
-  .remix_ui_terminal_popup {
+.remix_ui_terminal_popup {
   width            : 95%;
   font-family      : monospace;
   background-color : var(--secondary);
@@ -102,18 +102,18 @@ element.style {
   border-width     : 4px;
   left             : 2em;
   overflow-y       : scroll;
-  }
+}
 
-  .remix_ui_terminal_autoCompleteItem {
+.remix_ui_terminal_autoCompleteItem {
   padding          : 4px;
   border-radius    : 2px;
-  }
+}
 
-  .remix_ui_terminal_popup a {
+.remix_ui_terminal_popup a {
   cursor           : pointer;
-  }
+}
 
-  .call {
+.call {
   font-size: 7px;
   border-radius: 50%;
   min-width: 20px;
@@ -124,54 +124,55 @@ element.style {
   color: var(--text-info);
   text-transform: uppercase;
   font-weight: bold;
-  }
+}
 
-  .remix_ui_terminal_txItem {
+.remix_ui_terminal_txItem {
   color: var(--text-info);
   margin-right: 5px;
   float: left;
-  }
+}
 
-  .remix_ui_terminal_txItemTitle {
+.remix_ui_terminal_txItemTitle {
   font-weight: bold;
-  }
+}
 
-  /* tx logger css*/
+/* tx logger css*/
 
-  .remix_ui_terminal_log {
+.remix_ui_terminal_log {
   display: flex;
   cursor: pointer;
   align-items: center;
   cursor: pointer;
-  }
+  padding-top: 0.5rem;
-  .remix_ui_terminal_log:hover {
+}
+.remix_ui_terminal_log:hover {
   opacity: 0.8;
-  }
+}
 
-  .remix_ui_terminal_txStatus {
+.remix_ui_terminal_txStatus {
   display: flex;
   font-size: 20px;
   margin-right: 20px;
   float: left;
-  }
+}
-  .remix_ui_terminal_succeeded {
+.remix_ui_terminal_succeeded {
   color: var(--success);
-  }
+}
-  .remix_ui_terminal_failed {
+.remix_ui_terminal_failed {
   color: var(--danger);
-  }
+}
 
-  .remix_ui_terminal_arrow {
+.remix_ui_terminal_arrow {
   color: var(--text-info);
   font-size: 20px;
   cursor: pointer;
   display: flex;
   margin-left: 10px;
-  }
+}
-  .remix_ui_terminal_arrow:hover {
+.remix_ui_terminal_arrow:hover {
   color: var(--secondary);
-  }
+}
-  .remix_ui_terminal_call {
+.remix_ui_terminal_call {
   font-size: 7px;
   border-radius: 50%;
   min-width: 20px;
@@ -182,111 +183,46 @@ element.style {
   color: var(--text-info);
   text-transform: uppercase;
   font-weight: bold;
-  }
+}
 
-  .remix_ui_terminal_tx {
+.remix_ui_terminal_tx {
   color: var(--text-info);
   font-weight: bold;
   float: left;
   margin-right: 10px;
-  }
+}
 
-  .remix_ui_terminal_tr,
+.remix_ui_terminal_tr,
-  .remix_ui_terminal_td {
+.remix_ui_terminal_td {
   border-collapse: collapse;
   font-size: 10px;
   color: var(--text-info);
   border: 1px solid var(--text-info);
   transition: max-height 0.3s, padding 0.3s;
-  }
+}
-  table .active {
+table .active {
   transition: max-height 0.6s, padding 0.6s;
-  }
+}
-  #txTable {
+.remix_ui_terminal_tr, .remix_ui_terminal_td {
-    margin-top: 1%;
-    margin-bottom: 5%;
-    align-self: center;
-    width: 85%;
-  }
-  .remix_ui_terminal_tr, .remix_ui_terminal_td {
   padding: 4px;
   vertical-align: baseline;
-  }
+}
-  .remix_ui_terminal_td:first-child {
+.remix_ui_terminal_td:first-child {
   min-width: 30%;
   width: 30%;
   align-items: baseline;
   font-weight: bold;
-  }
+}
-  .remix_ui_terminal_tableTitle {
+.remix_ui_terminal_tableTitle {
   width: 25%;
-  }
-  .remix_ui_terminal_buttons {
-    display: flex;
-    margin-left: auto;
-  }
-  .remix_ui_terminal_debug {
-    white-space: nowrap;
-  }
-  .remix_ui_terminal_debug:hover {
-    opacity: 0.8;
-  }
-
-
-  /* Style the accordion section */
-.accordion__section {
-  display: flex;
-  flex-direction: column;
 }
-
+.remix_ui_terminal_buttons {
-/* 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);
 }
-
+.remix_ui_terminal_debug {
-/* Style the accordion content panel. Note: hidden by default */
+  white-space: nowrap;
-.accordion__content {
-  background-color: white;
-  overflow: hidden;
-  transition: max-height 0.6s ease;
 }
-
+.remix_ui_terminal_debug:hover {
-/* Style the accordion content text */
+  opacity: 0.8;
-.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}/>}