From a7cf236817cb2d579fc347c62ec7b3d4051f2713 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 21 Feb 2024 20:03:56 +0100
Subject: [PATCH] fixed ui issues

---
 apps/remix-ide-e2e/src/commands/openFile.ts    |  2 +-
 libs/remix-ui/panel/src/lib/plugins/panel.css  |  2 --
 .../remix-ui-terminal-menu-buttons.css         |  3 +++
 .../remix-ui-terminal-menu-buttons.tsx         |  6 ++++--
 .../terminal/src/lib/remix-ui-terminal.tsx     |  5 -----
 .../src/lib/components/remix-ui-xterm.tsx      |  2 --
 .../src/lib/components/remix-ui-xterminals.tsx | 18 +++++++++++++-----
 .../xterm/src/lib/components/xterm-wrap.tsx    |  2 +-
 libs/remix-ui/xterm/src/lib/css/index.css      |  3 ++-
 9 files changed, 24 insertions(+), 19 deletions(-)
 create mode 100644 libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.css

diff --git a/apps/remix-ide-e2e/src/commands/openFile.ts b/apps/remix-ide-e2e/src/commands/openFile.ts
index 7f7e7b2026..f214100eee 100644
--- a/apps/remix-ide-e2e/src/commands/openFile.ts
+++ b/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()
           })
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel.css b/libs/remix-ui/panel/src/lib/plugins/panel.css
index f0cc402b55..437471fabb 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel.css
+++ b/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;
 }
diff --git a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.css b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.css
new file mode 100644
index 0000000000..f4f8c73e76
--- /dev/null
+++ b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.css
@@ -0,0 +1,3 @@
+.xtermButton {
+  width: 4rem;;
+}
\ No newline at end of file
diff --git a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.tsx b/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.tsx
index 1ae7a63f1f..7856a67e5d 100644
--- a/libs/remix-ui/terminal/src/lib/components/remix-ui-terminal-menu-buttons.tsx
+++ b/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>
diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
index f3c6c983e8..e30f263e94 100644
--- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
+++ b/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'))
diff --git a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx
index 703b335f7f..7aa71d962b 100644
--- a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterm.tsx
+++ b/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]}
diff --git a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx b/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx
index 54ab6630a6..98f6b21421 100644
--- a/libs/remix-ui/xterm/src/lib/components/remix-ui-xterminals.tsx
+++ b/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>}
   </>)
 }
 
diff --git a/libs/remix-ui/xterm/src/lib/components/xterm-wrap.tsx b/libs/remix-ui/xterm/src/lib/components/xterm-wrap.tsx
index 03b54ccf6f..4998c3e750 100644
--- a/libs/remix-ui/xterm/src/lib/components/xterm-wrap.tsx
+++ b/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} />
   }
 }
\ No newline at end of file
diff --git a/libs/remix-ui/xterm/src/lib/css/index.css b/libs/remix-ui/xterm/src/lib/css/index.css
index 23098fd6ba..5912949212 100644
--- a/libs/remix-ui/xterm/src/lib/css/index.css
+++ b/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;
 }