Merge pull request #4954 from ethereum/themesn

status bar fixes

Author: LianaHus

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -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,

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,

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

@@ -178,46 +178,48 @@ 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 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 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>
+                <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>

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 {

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>