From 67bc2204215a7c11a915dd9beb6fdf8a80784ec1 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Wed, 19 Oct 2022 18:51:12 +0100
Subject: [PATCH] fix dubugging navigation buttons

---
 .../lib/button-navigator/button-navigator.css |  2 ++
 .../lib/button-navigator/button-navigator.tsx | 33 ++++++++++---------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css
index 835b54615b..43a03bd433 100644
--- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css
+++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.css
@@ -6,6 +6,7 @@
     width: 100%;
     display: flex;
     justify-content: center;
+    align-items: center;
 }
 .stepButton {
 }
@@ -13,6 +14,7 @@
     width: 100%;
     display: flex;
     justify-content: center;
+    align-items: center;
 }
 .jumpButton {
 }
diff --git a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
index d2cc277411..47d177602f 100644
--- a/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/button-navigator/button-navigator.tsx
@@ -62,8 +62,10 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
             </Tooltip>
           }
         >
-          <div onClick={() => { stepOverBack && stepOverBack() }}>
-            <button id='overback' className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none' }}>
+          <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepOverBack && stepOverBack() }}
+            style={{ backgroundColor: state.overBackDisabled ? '#005e80' : '#007aa6', borderColor: state.overBackDisabled ? '#005e80' : '#007aa6', opacity: state.overBackDisabled && 0.65 }}
+          >
+            <button id='overback' className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepOverBack && stepOverBack() }} disabled={state.overBackDisabled} style={{ pointerEvents: 'none' }}>
                 <span className="fas fa-reply"></span>
             </button>
           </div>
@@ -76,8 +78,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
             </Tooltip>
           }
         >
-          <div onClick={() => { stepIntoBack && stepIntoBack() }} data-id="buttonNavigatorIntoBack" id="buttonNavigatorIntoBackContainer">
-            <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none' }}>
+          <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepIntoBack && stepIntoBack() }} data-id="buttonNavigatorIntoBack" id="buttonNavigatorIntoBackContainer" style={{ backgroundColor: state.intoBackDisabled ? '#005e80' : '#007aa6', borderColor: state.intoBackDisabled ? '#005e80' : '#007aa6', opacity: state.intoBackDisabled && 0.65 }}>
+            <button id='intoback' data-id="buttonNavigatorIntoBack" className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepIntoBack && stepIntoBack() }} disabled={state.intoBackDisabled} style={{ pointerEvents: 'none' }}>
                 <span className="fas fa-level-up-alt"></span>
             </button>
           </div>
@@ -86,12 +88,12 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
           placement="top-start"
           overlay={
             <Tooltip className="text-nowrap" id="intoforwardTooltip">
-              <span>Step into</span>
+              <span>Step over forward</span>
             </Tooltip>
           }
         >
-          <div onClick={() => { stepIntoForward && stepIntoForward() }} data-id="buttonNavigatorIntoForward" id="buttonNavigatorIntoFowardContainer">
-            <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}
+          <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepIntoForward && stepIntoForward() }} data-id="buttonNavigatorIntoForward" id="buttonNavigatorIntoFowardContainer" style={{ backgroundColor: state.intoForwardDisabled ? '#005e80' : '#007aa6', borderColor: state.intoForwardDisabled ? '#005e80' : '#007aa6', opacity: state.intoForwardDisabled && 0.65}}>
+            <button id='intoforward' data-id="buttonNavigatorIntoForward" className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepIntoForward && stepIntoForward() }} disabled={state.intoForwardDisabled}
             style={{ pointerEvents: 'none' }}
             >
                 <span className="fas fa-level-down-alt"></span>
@@ -106,8 +108,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
             </Tooltip>
           }
         >
-          <div onClick={() => { stepOverForward && stepOverForward() }} data-id="buttonNavigatorOverForward" id="buttonNavigatorOverForwardContainer">
-            <button id='overforward' className='btn btn-primary btn-sm navigator stepButton' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none' }}>
+          <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1" onClick={() => { stepOverForward && stepOverForward() }} data-id="buttonNavigatorOverForward" id="buttonNavigatorOverForwardContainer" style={{ backgroundColor: state.overForwardDisabled ? '#005e80' : '#007aa6', borderColor: state.overForwardDisabled ? '#005e80' : '#007aa6', opacity: state.overForwardDisabled && 0.65}}>
+            <button id='overforward' className='btn btn-primary btn-sm stepButton m-0 p-0' onClick={() => { stepOverForward && stepOverForward() }} disabled={state.overForwardDisabled} style={{ pointerEvents: 'none' }}>
                 <span className="fas fa-share"></span>
             </button>
           </div>
@@ -123,8 +125,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
               </Tooltip>
             }
           >
-            <div id="buttonNavigatorJumpPreviousBreakpointContainer" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} data-id="buttonNavigatorJumpPreviousBreakpoint">
-              <button className='btn btn-primary btn-sm navigator jumpButton' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none' }}>
+            <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" id="buttonNavigatorJumpPreviousBreakpointContainer" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} data-id="buttonNavigatorJumpPreviousBreakpoint" style={{ backgroundColor: state.jumpPreviousBreakpointDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpPreviousBreakpointDisabled ? '#005e80' : '#007aa6', opacity: state.jumpPreviousBreakpointDisabled && 0.65}}>
+              <button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumppreviousbreakpoint' data-id="buttonNavigatorJumpPreviousBreakpoint" onClick={() => { jumpPreviousBreakpoint && jumpPreviousBreakpoint() }} disabled={state.jumpPreviousBreakpointDisabled} style={{ pointerEvents: 'none' }}>
                   <span className="fas fa-step-backward"></span>
               </button>
             </div>
@@ -137,8 +139,9 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
               </Tooltip>
             }
           >
-            <div onClick={() => { jumpOut && jumpOut() }} data-id="buttonNavigatorJumpOut" id="buttonNavigatorJumpOutContainer">
-              <button className='btn btn-primary btn-sm navigator jumpButton' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none' }} data-id="buttonNavigatorJumpOut">
+            <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" onClick={() => { jumpOut && jumpOut() }} data-id="buttonNavigatorJumpOut" id="buttonNavigatorJumpOutContainer" style={{ backgroundColor: state.jumpOutDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpOutDisabled ? '#005e80' : '#007aa6', opacity: state.jumpOutDisabled && 0.65
+            }}>
+              <button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumpout' onClick={() => { jumpOut && jumpOut() }} disabled={state.jumpOutDisabled} style={{ pointerEvents: 'none' }} data-id="buttonNavigatorJumpOut">
                   <span className="fas fa-eject"></span>
               </button>
             </div>
@@ -151,8 +154,8 @@ export const ButtonNavigation = ({ stepOverBack, stepIntoBack, stepIntoForward,
               </Tooltip>
             }
           >
-            <div onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} data-id="buttonNavigatorJumpNextBreakpoint" id="buttonNavigatorJumpNextBreakpointContainer">
-              <button className='btn btn-primary btn-sm navigator jumpButton' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none' }}>
+            <div className="d-flex align-items-center justify-content-center btn btn-primary btn-sm jumpButton h-75 m-0 p-1" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} data-id="buttonNavigatorJumpNextBreakpoint" id="buttonNavigatorJumpNextBreakpointContainer" style={{ backgroundColor: state.jumpNextBreakpointDisabled ? '#005e80' : '#007aa6', borderColor: state.jumpNextBreakpointDisabled ? '#005e80' : '#007aa6', opacity: state.jumpNextBreakpointDisabled && 0.65}}>
+              <button className='btn btn-primary btn-sm jumpButton m-0 p-0' id='jumpnextbreakpoint' data-id="buttonNavigatorJumpNextBreakpoint" onClick={() => { jumpNextBreakpoint && jumpNextBreakpoint() }} disabled={state.jumpNextBreakpointDisabled} style={{ pointerEvents: 'none' }}>
                   <span className="fas fa-step-forward"></span>
               </button>
             </div>