fixed bg for light theme

fixed some styles

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

@@ -53,7 +53,7 @@ module.exports = {
       .assert.elementPresent('div[data-id="terminalCli"]')
       .assert.elementPresent('div[data-id="terminalContainer"]')
       .click('i[data-id="terminalToggleIcon"]')
-      .assert.elementNotPresent('div[data-id="terminalContainer"]')
+      .assert.not.elementPresent('div[data-id="terminalContainer"]')
       .checkElementStyle('div[data-id="terminalToggleMenu"]', 'height', '35px')
       .click('i[data-id="terminalToggleIcon"]')
       .assert.elementPresent('div[data-id="terminalCli"]')

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

@@ -3,7 +3,7 @@ element.style {
  height: 323px !important;
 }
 #terminalCliInput{
-  width: 95%;
+  width: 97%;
   background: transparent;
 }
 #terminalCliInput:focus {
@@ -96,12 +96,11 @@ element.style {
   font-family      : monospace;
   background-color : var(--secondary);
   overflow         : auto;
-  padding-bottom   : 13px;
   z-index          : 80;
-  bottom           : 1em;
+  bottom           : 2.2em;
   border-width     : 4px;
-  left             : 2em;
   overflow-y       : scroll;
+  box-shadow       : 0px 0px 13px -8px;
 }
 
 .remix_ui_terminal_autoCompleteItem {

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

@@ -386,7 +386,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
 
   const handleAutoComplete = () => (
     <div
-      className='remix_ui_terminal_popup position-absolute text-left alert alert-secondary'
+      className='remix_ui_terminal_popup bg-light ml-4 p-2 position-absolute text-left '
       style={{ display: (autoCompletState.showSuggestions && autoCompletState.userInput !== '' && (autoCompletState.userInput.length > 2)) && autoCompletState.data._options.length > 0 ? 'block' : 'none' }}
     >
       <div>
@@ -395,7 +395,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
             <div
               key={index}
               data-id="autoCompletePopUpAutoCompleteItem"
-              className={`remix_ui_terminal_autoCompleteItem d-none item ${autoCompletState.data._options[autoCompletState.activeSuggestion] === item ? 'border border-primary ' : ''}`}
+              className={`remix_ui_terminal_autoCompleteItem item ${autoCompletState.data._options[autoCompletState.activeSuggestion] === item ? 'border border-primary ' : ''}`}
               onKeyDown={ handleSelect }
               onClick={() => handleClickSelect(item)}
             >
@@ -471,7 +471,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
           handleAutoComplete()
         }
         <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'>
+          <div id='journal' className='remix_ui_terminal_journal d-flex flex-column pt-3 pb-4 px-2 m-2 mr-0' data-id='terminalJournal'>
             {!clearConsole && <TerminalWelcomeMessage packageJson={version}/>}
             {newstate.journalBlocks && newstate.journalBlocks.map((x, index) => {
               if (x.name === EMPTY_BLOCK) {
@@ -554,7 +554,7 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
           <div id="terminalCli" data-id="terminalCli" className="remix_ui_terminal_cli position-absolute w-100" onClick={focusinput}>
             <span className="remix_ui_terminal_prompt blink mx-1 font-weight-bold text-dark">{'>'}</span>
             <input
-              className="remix_ui_terminal_input bg-dark ml-3 text-dark text-break border-0"
+              className="remix_ui_terminal_input bg-light ml-1 text-dark text-break border-0"
               ref={inputEl}
               spellCheck="false"
               contentEditable="true"