fixed ui issues

apps/remix-ide-e2e/src/commands/openFile.ts

@@ -21,7 +21,7 @@ function openFile (browser: NightwatchBrowser, name: string, done: VoidFunction)
         // if side panel is shown, check this is the file panel
         browser.element('css selector', '[data-id="verticalIconsKindfilePanel"] img[data-id="selected"]', (result) => {
           if (result.status === 0) {
-              done()
+            done()
           } else browser.clickLaunchIcon('filePanel').perform(() => {
             done()
           })

libs/remix-ui/panel/src/lib/plugins/panel.css

@@ -104,7 +104,5 @@ iframe {
     height: 2rem !important;
 }
 
-
 .terminal-wrap.minimized.desktop {
-    height: 4.5rem !important;
 }

libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.css

@@ -0,0 +1,3 @@
+.xtermButton {
+  width: 4rem;;
+}

libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.tsx

@@ -1,6 +1,8 @@
 import React, { useContext, useEffect } from 'react' // eslint-disable-line
 import { TerminalContext } from '../context'
 import { RemixUiTerminalProps, SET_OPEN } from '../types/terminalTypes'
+import './remix-ui-terminal-menu-buttons.css'
+
 export const RemixUITerminalMenuButtons = (props: RemixUiTerminalProps) => {
   const { xtermState, dispatchXterm, terminalState, dispatch } = useContext(TerminalContext)
 
@@ -18,10 +20,10 @@ export const RemixUITerminalMenuButtons = (props: RemixUiTerminalProps) => {
 
   return (
     <div className='d-flex flex-row align-items-center'>
-      <button id="tabOutput" className={`btn btn-sm border-secondary mr-2 border ${!xtermState.showOutput ? 'd-none' : ' btn-secondary'}`} onClick={selectOutput}>
+      <button id="tabOutput" className={`xtermButton btn btn-sm border-secondary mr-2 border ${!xtermState.showOutput ? '' : 'd-flex btn-secondary'}`} onClick={selectOutput}>
         Output
       </button>
-      <button id="tabXTerm" className={`btn btn-sm border-secondary ${xtermState.terminalsEnabled ? 'btn-secondary' : 'd-none'}`} onClick={showTerminal}>
+      <button id="tabXTerm" className={`xtermButton btn btn-sm border-secondary ${xtermState.terminalsEnabled ? 'd-block' : 'd-none'}  ${xtermState.showOutput ? 'd-none' : 'btn-secondary'}`} onClick={showTerminal}>
         <span className="far fa-terminal border-0 ml-1"></span>
       </button>
     </div>

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

@@ -556,11 +556,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     }))
   }
 
-  const handleToggleTerminal = () => {
-    setIsOpen(!isOpen)
-    props.plugin.call('layout', 'minimize', props.plugin.profile.name, isOpen)
-  }
-
   useEffect(() => {
     ;(async () => {
       const storage = await props.plugin.call('storage', 'formatString', await props.plugin.call('storage', 'getStorage'))

libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx

@@ -54,8 +54,6 @@ const RemixUiXterm = (props: RemixUiXtermProps) => {
     resize(event, pid)
   }
 
- 
-
   return (
     <Xterm
       addons={[fitAddon]}

libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx

@@ -141,13 +141,21 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
   }, [xtermState.showOutput])
 
   return (<>
-    <div style={{ flexGrow: 1 }} className='d-flex flex-row h-100'>
+    { !xtermState.showOutput && <div style={{ flexGrow: 1 }} className='d-flex flex-row h-100'>
       <>
-        { xtermState.showOutput && <div className={`flex-row w-100 h-100 d-flex`}>
+        { !xtermState.showOutput && <div className={`flex-row w-100 h-100 d-flex`}>
           {terminals.map((xtermState) => {
             return (
               <div className={`h-100 w-100 ${xtermState.hidden ? 'd-none' : 'd-block'}`} key={xtermState.pid} data-id={`remixUIXT${xtermState.pid}`}>
-                <RemixUiXterm theme={theme} setTerminalRef={setTerminalRef} timeStamp={xtermState.timeStamp} send={send} resize={resize} pid={xtermState.pid} plugin={plugin}></RemixUiXterm>
+                <RemixUiXterm
+                  theme={theme}
+                  setTerminalRef={setTerminalRef}
+                  timeStamp={xtermState.timeStamp}
+                  send={send}
+                  resize={resize}
+                  pid={xtermState.pid}
+                  plugin={plugin}
+                ></RemixUiXterm>
               </div>
             )
           })}
@@ -156,7 +164,7 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
               return (<button
                 key={index}
                 onClick={async () => selectTerminal(xtermState)}
-                className={`btn btn-sm mt-2 ${xtermState.hidden ? 'border border-secondary' : 'btn-secondary'}`}
+                className={`btn btn-sm m-1 p-1 px-2 ${xtermState.hidden ? 'border border-secondary' : 'btn-secondary'}`}
               >
                 <span className="fa fa-terminal border-0 p-0 m-0"></span>
               </button>)
@@ -165,7 +173,7 @@ export const RemixUiXterminals = (props: RemixUiXterminalsProps) => {
         </div>
         }
       </>
-    </div>
+    </div>}
   </>)
 }
 

libs/remix-ui/xterm/src/lib/components/xterm-wrap.tsx

@@ -232,6 +232,6 @@ export class Xterm extends React.Component<IProps> {
   }
 
   render() {
-    return <div className={this.props.className} ref={this.terminalRef} />
+    return <div className={`${this.props.className} mt-2 ml-2`} ref={this.terminalRef} />
   }
 }

libs/remix-ui/xterm/src/lib/css/index.css

@@ -1,3 +1,4 @@
 .xterm-panel-left {
-  overflow: scroll;
+  overflow-y: scroll;
+  margin-bottom: 2.1rem;
 }