From 676837b3d99f6f259ff045d4095cb830be6fe402 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 17 Jun 2021 14:40:48 +0200
Subject: [PATCH] use monospace for memory and stack

---
 .../debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx      | 6 +++---
 .../debugger-ui/src/lib/vm-debugger/memory-panel.tsx        | 2 +-
 .../debugger-ui/src/lib/vm-debugger/stack-panel.tsx         | 2 +-
 libs/remix-ui/debugger-ui/src/types/index.ts                | 4 +++-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
index 0ce016fda4..3abd08fcbb 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx
@@ -7,7 +7,7 @@ import './styles/dropdown-panel.css'
 
 export const DropdownPanel = (props: DropdownPanelProps) => {
   const [calldataObj, dispatch] = useReducer(reducer, initialState)
-  const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent } = props
+  const { dropdownName, dropdownMessage, calldata, header, loading, extractFunc, formatSelfFunc, registerEvent, triggerEvent, loadMoreEvent, loadMoreCompletedEvent, headStyle, bodyStyle } = props
   const extractDataDefault: ExtractFunc = (item, parent?) => {
     const ret: ExtractData = {}
 
@@ -193,14 +193,14 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
 
   return (
     <div className="border rounded px-1 mt-1 bg-light">
-      <div className="py-0 px-1 title">
+      <div className="py-0 px-1 title" style={headStyle}>
         <div className={state.toggleDropdown ? 'icon fas fa-caret-down' : 'icon fas fa-caret-right'} onClick={handleToggle}></div>
         <div className="name" data-id={`dropdownPanel${uniquePanelName}`} onClick={handleToggle}>{dropdownName}</div><span className="nameDetail" onClick={handleToggle}>{header}</span>
         <CopyToClipboard content={state.copiableContent} data-id={`dropdownPanelCopyToClipboard${uniquePanelName}`} />
       </div>
       <div className='dropdownpanel' style={{ display: state.toggleDropdown ? 'block' : 'none' }}>
         <i className="refresh fas fa-sync" style={{ display: state.updating ? 'inline-block' : 'none' }} aria-hidden="true"></i>
-        <div className='dropdowncontent' style={{ display: state.dropdownContent.display }}>
+        <div className='dropdowncontent' style={{ display: state.dropdownContent.display, ...bodyStyle }}>
           {
             state.data &&
             <TreeView id="treeView">
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx
index b772369ec6..75358e9c07 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/memory-panel.tsx
@@ -3,7 +3,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 
 export const MemoryPanel = ({ calldata }) => {
   return (
-    <DropdownPanel dropdownName='Memory' calldata={calldata || {}} />
+    <DropdownPanel bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Memory' calldata={calldata || {}} />
   )
 }
 
diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx
index fcb86b2699..1824a55477 100644
--- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/stack-panel.tsx
@@ -4,7 +4,7 @@ import DropdownPanel from './dropdown-panel' // eslint-disable-line
 export const StackPanel = ({ calldata }) => {
   return (
     <div id='stackpanel'>
-      <DropdownPanel dropdownName='Stack' calldata={calldata || {}} />
+      <DropdownPanel bodyStyle={{ fontFamily: 'monospace' }} dropdownName='Stack' calldata={calldata || {}} />
     </div>
   )
 }
diff --git a/libs/remix-ui/debugger-ui/src/types/index.ts b/libs/remix-ui/debugger-ui/src/types/index.ts
index 45a26384dc..b968815242 100644
--- a/libs/remix-ui/debugger-ui/src/types/index.ts
+++ b/libs/remix-ui/debugger-ui/src/types/index.ts
@@ -27,7 +27,9 @@ export interface DropdownPanelProps {
     registerEvent?: Function,
     triggerEvent?: Function,
     loadMoreEvent?: string,
-    loadMoreCompletedEvent?: string
+    loadMoreCompletedEvent?: string,
+    bodyStyle?: React.CSSProperties
+    headStyle?: React.CSSProperties
 }
 
 export type FormatSelfFunc = (key: string | number, data: ExtractData) => JSX.Element