From 9255affd5e77b0933af039a6e09cfb076b0563cd Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 3 Jul 2024 10:22:48 +0200
Subject: [PATCH 1/4] updated the colors of black theme to fix the status bar
 colors

---
 apps/remix-ide/src/assets/css/themes/remix-black_undtds.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
index 75d64e2ed1..990598205f 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
@@ -11,10 +11,10 @@
   --green: #1ea171;
   --teal: #20c997;
   --cyan: #053c64;
-  --white: #d5d5d5;
+  --white: #ececec;
   --gray: #868e96;
   --gray-dark: #343a40;
-  --primary: #b5b4bc;
+  --primary: #717171;
   --secondary: #3d3e44;
   --success: #6bceaa;
   --info: #086CB5;
@@ -241,7 +241,7 @@ textarea {
   font-size: inherit;
   line-height: inherit;
   background-color: #2b2b2b;
-  color: #d5d5d5d5d5d5;
+  color: #d5d5d5;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(79, 86, 89, 0.25);
 }
 button,

From 9880b261dc84d44326f288ffab5afcb579549f67 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 3 Jul 2024 10:35:13 +0200
Subject: [PATCH 2/4] color fixes in status bar

---
 apps/remix-ide/src/assets/css/themes/remix-black_undtds.css | 4 ++--
 libs/remix-ui/statusbar/src/css/statusbar.css               | 2 +-
 libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
index 990598205f..a55010caa0 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
@@ -11,10 +11,10 @@
   --green: #1ea171;
   --teal: #20c997;
   --cyan: #053c64;
-  --white: #ececec;
+  --white: #d5d5d5;
   --gray: #868e96;
   --gray-dark: #343a40;
-  --primary: #717171;
+  --primary: #b5b4bc;
   --secondary: #3d3e44;
   --success: #6bceaa;
   --info: #086CB5;
diff --git a/libs/remix-ui/statusbar/src/css/statusbar.css b/libs/remix-ui/statusbar/src/css/statusbar.css
index 5d2f461026..a66bd945e1 100644
--- a/libs/remix-ui/statusbar/src/css/statusbar.css
+++ b/libs/remix-ui/statusbar/src/css/statusbar.css
@@ -18,7 +18,7 @@
  * approximately same height with vscode statusbar
  **/
 .remixui_statusbar_height {
-  height: 21px;
+  height: 1.6rem;
 }
 
 .remixui_statusbar_activelink {
diff --git a/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx b/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx
index 77e8f3cc50..679a5e0b65 100644
--- a/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx
+++ b/libs/remix-ui/statusbar/src/lib/remixui-statusbar-panel.tsx
@@ -71,7 +71,7 @@ export function RemixUIStatusBar({ statusBarPlugin }: RemixUIStatusBarProps) {
           <ScamDetails refs={refs} floatStyle={{ ...floatingStyles, minHeight: 'auto', alignContent: 'center', paddingRight: '0.5rem' }} getFloatingProps={getFloatingProps} scamAlerts={scamAlerts} />
         </FloatingFocusManager>
       )}
-      <div className="d-flex remixui_statusbar_height flex-row bg-primary justify-content-between align-items-center">
+      <div className="d-flex remixui_statusbar_height flex-row bg-info justify-content-between align-items-center">
         <div className="remixui_statusbar remixui_statusbar_gitstatus">
           <GitStatus plugin={statusBarPlugin} gitBranchName={gitBranchName} setGitBranchName={setGitBranchName} />
         </div>

From 8f62442ecd964f576a78c3075b900e6154f08dfb Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 3 Jul 2024 10:45:34 +0200
Subject: [PATCH 3/4] status bar hierarchy change

---
 .../assets/css/themes/remix-dark_tvx1s2.css   |  2 +-
 .../app/src/lib/remix-app/remix-app.tsx       | 76 ++++++++++---------
 2 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
index 84f61e9658..8db3e60b5e 100644
--- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
@@ -5663,7 +5663,7 @@ button.bg-success:hover {
   background-color: #27926b !important;
 }
 .bg-info {
-  background-color: #274458 !important;
+  background-color: #35576e !important;
 }
 a.bg-info:focus,
 a.bg-info:hover,
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index aa1cc69fc6..192f8411b7 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -179,45 +179,47 @@ const RemixApp = (props: IRemixAppUi) => {
             <MatomoDialog hide={!appReady} okFn={() => setShowEnterDialog(true)}></MatomoDialog>
             {showEnterDialog && <EnterDialog handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>}
             <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
-              <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
-                {props.app.menuicons.render()}
-              </div>
-              <div
-                ref={sidePanelRef}
-                id="side-panel"
-                data-id="remixIdeSidePanel"
-                className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}
-              >
-                {props.app.sidePanel.render()}
-              </div>
-              <DragBar
-                resetTrigger={resetLeftTrigger}
-                maximiseTrigger={maximiseLeftTrigger}
-                minWidth={285}
-                refObject={sidePanelRef}
-                hidden={hideSidePanel}
-                setHideStatus={setHideSidePanel}
-                layoutPosition='left'
-              ></DragBar>
-              <div id="main-panel" data-id="remixIdeMainPanel" className="mainpanel d-flex">
-                <RemixUIMainPanel layout={props.app.layout}></RemixUIMainPanel>
-              </div>
-              <div id="pinned-panel" ref={pinnedPanelRef} data-id="remixIdePinnedPanel" className={`flex-row-reverse pinnedpanel border-right border-left ${hidePinnedPanel ? 'd-none' : 'd-flex'}`}>
-                {props.app.pinnedPanel.render()}
-              </div>
-              {
-                !hidePinnedPanel &&
+              <div className='d-flex'>
+                <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
+                  {props.app.menuicons.render()}
+                </div>
+                <div
+                  ref={sidePanelRef}
+                  id="side-panel"
+                  data-id="remixIdeSidePanel"
+                  className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}
+                >
+                  {props.app.sidePanel.render()}
+                </div>
                 <DragBar
-                  resetTrigger={resetRightTrigger}
-                  maximiseTrigger={maximiseRightTrigger}
-                  minWidth={331}
-                  refObject={pinnedPanelRef}
-                  hidden={hidePinnedPanel}
-                  setHideStatus={setHidePinnedPanel}
-                  layoutPosition='right'
+                  resetTrigger={resetLeftTrigger}
+                  maximiseTrigger={maximiseLeftTrigger}
+                  minWidth={285}
+                  refObject={sidePanelRef}
+                  hidden={hideSidePanel}
+                  setHideStatus={setHideSidePanel}
+                  layoutPosition='left'
                 ></DragBar>
-              }
-              <div>{props.app.hiddenPanel.render()}</div>
+                <div id="main-panel" data-id="remixIdeMainPanel" className="mainpanel d-flex">
+                  <RemixUIMainPanel layout={props.app.layout}></RemixUIMainPanel>
+                </div>
+                <div id="pinned-panel" ref={pinnedPanelRef} data-id="remixIdePinnedPanel" className={`flex-row-reverse pinnedpanel border-right border-left ${hidePinnedPanel ? 'd-none' : 'd-flex'}`}>
+                  {props.app.pinnedPanel.render()}
+                </div>
+                {
+                  !hidePinnedPanel &&
+                  <DragBar
+                    resetTrigger={resetRightTrigger}
+                    maximiseTrigger={maximiseRightTrigger}
+                    minWidth={331}
+                    refObject={pinnedPanelRef}
+                    hidden={hidePinnedPanel}
+                    setHideStatus={setHidePinnedPanel}
+                    layoutPosition='right'
+                  ></DragBar>
+                }
+                <div>{props.app.hiddenPanel.render()}</div>
+              </div>
               <div className="statusBar fixed-bottom">
                 {props.app.statusBar.render()}
               </div>

From fadca7e4a410923a48a202af544fd8eede5ac884 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Wed, 3 Jul 2024 11:01:24 +0200
Subject: [PATCH 4/4] fixing e2e

---
 libs/remix-ui/app/src/lib/remix-app/remix-app.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index 192f8411b7..ab0d2b951c 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -178,8 +178,8 @@ const RemixApp = (props: IRemixAppUi) => {
             <OriginWarning></OriginWarning>
             <MatomoDialog hide={!appReady} okFn={() => setShowEnterDialog(true)}></MatomoDialog>
             {showEnterDialog && <EnterDialog handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>}
-            <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
-              <div className='d-flex'>
+            <div className='d-flex flex-column'>
+              <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
                 <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
                   {props.app.menuicons.render()}
                 </div>