Merge branch 'ozbackwards' of https://github.com/ethereum/remix-project into ozbackwards

1 year ago · 54113e68fe
parent 0ba850d8cd 98ccc1ee4c
commit 54113e68fe
23 changed files with 89 additions and 98 deletions
--- a/apps/remix-ide/src/app/tabs/debugger-tab.js
+++ b/apps/remix-ide/src/app/tabs/debugger-tab.js
@ -5,7 +5,7 @@ import { ViewPlugin } from '@remixproject/engine-web'
 import * as packageJson from '../../../../../package.json'
 import React from 'react' // eslint-disable-line
 import { bleach } from '@remix-ui/helper'
-import { compilationFinishedToastMsg, compilingToastMsg, localCompilationToastMsg, notFoundToastMsg, sourceVerificationNotAvailableToastMsg } from '@remix-ui/helper'
+import { compilationFinishedToastMsg, compilingToastMsg, notFoundToastMsg, sourceVerificationNotAvailableToastMsg } from '@remix-ui/helper'
 const css = require('./styles/debugger-tab-styles')

 const profile = {
--- a/apps/remix-ide/src/app/tabs/locales/en/debugger.json
+++ b/apps/remix-ide/src/app/tabs/locales/en/debugger.json
@ -2,6 +2,7 @@
  "debugger.displayName": "Debugger",
  "debugger.debuggerConfiguration": "Debugger Configuration",
  "debugger.stopDebugging": "Stop debugging",
+  "debugger.provideTxNumber": "Please provide a valid transaction hash",
  "debugger.startDebugging": "Start debugging",
  "debugger.placeholder": "Transaction hash, should start with 0x",
  "debugger.debugLocaNodeLabel": "Force using local node",
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
+++ b/apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
@ -2118,6 +2118,7 @@ textarea.form-control {

 }
 .btn {
+    cursor: pointer;
    display:inline-block;
    font-weight:400;
    color:#495057;
@ -2150,7 +2151,8 @@ textarea.form-control {
    box-shadow:0 0 0 .2rem rgba(47,164,231,.25)
 }
 .btn.disabled,.btn:disabled {
-    opacity:.65
+    opacity:.65;
+    cursor: not-allowed
 }
 .btn:not(:disabled):not(.disabled) {
    cursor:pointer
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
+++ b/apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
@ -2119,6 +2119,7 @@ textarea.form-control {

 }
 .btn {
+    cursor: pointer;;
    display:inline-block;
    font-weight:400;
    color:#adafae;
@ -2151,7 +2152,8 @@ textarea.form-control {
    box-shadow:0 0 0 .2rem rgba(42,159,214,.25)
 }
 .btn.disabled,.btn:disabled {
-    opacity:.65
+    opacity:.65;
+    cursor: not-allowed;
 }
 .btn:not(:disabled):not(.disabled) {
    cursor:pointer
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
+++ b/apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
@ -2121,6 +2121,7 @@ textarea.form-control {

 }
 .btn {
+  cursor: pointer;
 	display:inline-block;
 	font-weight:400;
 	color:#212529;
@ -2152,7 +2153,8 @@ textarea.form-control {
 	box-shadow:0 0 0 .2rem rgba(44,62,80,.25)
 }
 .btn.disabled,.btn:disabled {
-	opacity:.65
+	opacity:.65;
+  cursor: not-allowed;
 }
 .btn:not(:disabled):not(.disabled) {
 	cursor:pointer
--- a/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
+++ b/apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
@ -2121,6 +2121,7 @@ textarea.form-control {

 }
 .btn {
+    cursor: pointer;
    display:inline-block;
    font-weight:400;
    color:#777;
@ -2153,7 +2154,8 @@ textarea.form-control {
    box-shadow:0 0 0 .2rem rgba(68,110,155,.25)
 }
 .btn.disabled,.btn:disabled {
-    opacity:.65
+    opacity:.65;
+    cursor: not-allowed
 }
 .btn:not(:disabled):not(.disabled) {
    cursor:pointer
--- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
@ -2096,6 +2096,7 @@ textarea.form-control.is-invalid {
  }
 }
 .btn {
+  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #d5d5d5;
@ -2127,6 +2128,7 @@ textarea.form-control.is-invalid {
 .btn.disabled,
 .btn:disabled {
  opacity: 0.65;
+  cursor: not-allowed
 }
 a.btn.disabled,
 fieldset:disabled a.btn {
--- a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
@ -2314,6 +2314,7 @@ textarea.form-control.is-invalid {
 }

 .btn {
+  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #0f7292;
@ -2346,6 +2347,7 @@ textarea.form-control.is-invalid {
 .btn.disabled,
 .btn:disabled {
  opacity: 0.7;
+  cursor: not-allowed
 }

 a.btn.disabled,
--- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
@ -2097,6 +2097,7 @@ textarea.form-control.is-invalid {
  }
 }
 .btn {
+  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #fff;
@ -2128,6 +2129,7 @@ textarea.form-control.is-invalid {
 .btn.disabled,
 .btn:disabled {
  opacity: 0.65;
+  cursor: not-allowed
 }
 a.btn.disabled,
 fieldset:disabled a.btn {
--- a/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
@ -2111,6 +2111,7 @@ textarea.form-control.is-invalid {
  }
 }
 .btn {
+  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #fff;
@ -2142,6 +2143,7 @@ textarea.form-control.is-invalid {
 .btn.disabled,
 .btn:disabled {
  opacity: 0.65;
+  cursor: not-allowed;
 }
 a.btn.disabled,
 fieldset:disabled a.btn {
--- a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
@ -2310,6 +2310,7 @@ textarea.form-control.is-invalid {
 }

 .btn {
+  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #2e3145;
@ -2342,6 +2343,7 @@ textarea.form-control.is-invalid {
 .btn.disabled,
 .btn:disabled {
  opacity: 0.7;
+  cursor: not-allowed;
 }

 a.btn.disabled,
--- a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
@ -2315,6 +2315,7 @@ textarea.form-control.is-invalid {
 }

 .btn {
+  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #062809;
@ -2347,6 +2348,7 @@ textarea.form-control.is-invalid {
 .btn.disabled,
 .btn:disabled {
  opacity: 0.7;
+  cursor: not-allowed;
 }

 a.btn.disabled,
--- a/apps/remix-ide/src/assets/css/themes/remix-unicorn.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-unicorn.css
@ -2313,6 +2313,7 @@ textarea.form-control.is-invalid {
 }

 .btn {
+  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #2e3145;
@ -2346,6 +2347,7 @@ textarea.form-control.is-invalid {
 .btn.disabled,
 .btn:disabled {
  opacity: 0.7;
+  cursor: not-allowed;
 }

 a.btn.disabled,
--- a/apps/remix-ide/src/assets/css/themes/remix-violet.css
+++ b/apps/remix-ide/src/assets/css/themes/remix-violet.css
@ -2310,6 +2310,7 @@ textarea.form-control.is-invalid {
 }

 .btn {
+  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  color: #2e3145;
@ -2342,6 +2343,7 @@ textarea.form-control.is-invalid {
 .btn.disabled,
 .btn:disabled {
  opacity: 0.7;
+  cursor: not-allowed;
 }

 a.btn.disabled,
--- a/libs/remix-core-plugin/src/lib/openzeppelin-proxy.ts
+++ b/libs/remix-core-plugin/src/lib/openzeppelin-proxy.ts
@ -46,28 +46,36 @@ export class OpenZeppelinProxy extends Plugin {
  async getUUPSContractOptions(contracts, ast, file) {
    const options = {}

-    await Promise.all(Object.keys(contracts).map(async (name) => {
-      if (ast) {
-        const UUPSSymbol = ast.exportedSymbols[UUPS] ? ast.exportedSymbols[UUPS][0] : null
-
-        await Promise.all(ast.absolutePath === file && ast.nodes.map(async (node) => {
-          if (node.name === name && node.linearizedBaseContracts.includes(UUPSSymbol)) {
-            const abi = contracts[name].abi
-            const initializeInput = abi.find(node => node.name === 'initialize')
-            const isDeployWithProxyEnabled: boolean = await this.call('config', 'getAppParameter', EnableProxyURLParam) || false
-            const isDeployWithUpgradeEnabled: boolean = await this.call('config', 'getAppParameter', EnableUpgradeURLParam) || false
-
-            options[name] = {
-              options: [{ title: 'Deploy with Proxy', active: isDeployWithProxyEnabled }, { title: 'Upgrade with Proxy', active: isDeployWithUpgradeEnabled }],
-              initializeOptions: {
-                inputs: initializeInput,
-                initializeInputs: initializeInput ? this.blockchain.getInputs(initializeInput) : null
-              }
-            }
-          }
-        }))
-      }
-    }))
+    await Promise.all(
+      Object.keys(contracts).map(async (name) => {
+        if (ast) {
+          const UUPSSymbol = ast.exportedSymbols[UUPS] ? ast.exportedSymbols[UUPS][0] : null
+
+          await Promise.all(
+            ast.absolutePath === file &&
+              ast.nodes.map(async (node) => {
+                if (node.name === name && node.linearizedBaseContracts.includes(UUPSSymbol)) {
+                  const abi = contracts[name].abi
+                  const initializeInput = abi.find((node) => node.name === 'initialize')
+                  const isDeployWithProxyEnabled: boolean = (await this.call('config', 'getAppParameter', EnableProxyURLParam)) || false
+                  const isDeployWithUpgradeEnabled: boolean = (await this.call('config', 'getAppParameter', EnableUpgradeURLParam)) || false
+
+                  options[name] = {
+                    options: [
+                      { title: 'Deploy with Proxy', active: isDeployWithProxyEnabled },
+                      { title: 'Upgrade with Proxy', active: isDeployWithUpgradeEnabled },
+                    ],
+                    initializeOptions: {
+                      inputs: initializeInput,
+                      initializeInputs: initializeInput ? this.blockchain.getInputs(initializeInput) : null,
+                    },
+                  }
+                }
+              })
+          )
+        }
+      })
+    )
    return options
  }

--- a/libs/remix-ui/debugger-ui/src/lib/api/debugger-api.ts
+++ b/libs/remix-ui/debugger-ui/src/lib/api/debugger-api.ts
@ -163,7 +163,7 @@ export const DebuggerApiMixin = (Base) => class extends Base {
    else this._web3 = this.initialWeb3
    init.extendWeb3(this._web3)
    if (this.onDebugRequestedListener) {
-      this.onDebugRequestedListener(hash, web3).then((debuggerBackend) => {
+      this.onDebugRequestedListener(hash, this._web3).then((debuggerBackend) => {
        this.debuggerBackend = debuggerBackend
      })
    }
--- 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
@ -2,26 +2,7 @@
    display: flex;
    flex-wrap: wrap;
 }
-.stepButtons {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-}
-.stepButton {
-}

-.stepButtonDisabled {
-    background-color: #005573;
-    border-color: #005573;
-}
-
-.stepButton:hover {
-    color: #fff;
-    background-color: var(--primary);
-    border-color: #005573;
-}
 .jumpButtons {
    width: 100%;
    display: flex;
@ -29,23 +10,6 @@
    align-items: center;
    color: #fff;
 }
-.jumpButton {
-}
-
-.jumpButtonDisabled {
-    background-color: var(--grey);
-    border-color: #005573;
-}
-
-.jumButton:hover {
-    color: #fff;
-    background-color: #005573;
-    border-color: #005573;
-}
-.navigator {
-}
-.navigator:hover {
-}

 .cursorPointerRemixDebugger {
    cursor: pointer;
--- 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
@ -66,13 +66,11 @@ export const ButtonNavigation = ({
  }

  const stepBtnStyle = 'd-flex align-items-center justify-content-center btn btn-primary btn-sm stepButton h-75 m-0 p-1'
-  const disableStepBtnStyle = 'stepButtonDisabled'
-  const disableJumpBtnStyle = 'jumpButtonDisabled'
  const stepMarkupStructure = {
    stepOverBackJSX: {
      markup: (
        <div
-          className={state.overBackDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}` : `${stepBtnStyle}`}
+          className={`${state.overBackDisabled ? 'disabled ' : ''} ${stepBtnStyle}`}
          onClick={() => {
            stepOverBack && stepOverBack()
          }}
@ -97,7 +95,7 @@ export const ButtonNavigation = ({
    stepBackJSX: {
      markup: (
        <div
-          className={state.intoBackDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}` : `${stepBtnStyle}`}
+          className={`${state.intoBackDisabled ? 'disabled ' : ''} ${stepBtnStyle}`}
          onClick={() => {
            stepIntoBack && stepIntoBack()
          }}
@ -126,7 +124,7 @@ export const ButtonNavigation = ({
    stepIntoJSX: {
      markup: (
        <div
-          className={state.intoForwardDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}` : `${stepBtnStyle}`}
+          className={`${state.intoForwardDisabled ? 'disabled ' : ''} ${stepBtnStyle}`}
          onClick={() => {
            stepIntoForward && stepIntoForward()
          }}
@ -154,7 +152,7 @@ export const ButtonNavigation = ({
    stepOverForwardJSX: {
      markup: (
        <div
-          className={state.overForwardDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}` : `${stepBtnStyle}`}
+          className={`${state.overForwardDisabled ? 'disabled ' : ''} ${stepBtnStyle}`}
          onClick={() => {
            stepOverForward && stepOverForward()
          }}
@ -183,7 +181,7 @@ export const ButtonNavigation = ({
    jumpPreviousBreakpointJSX: {
      markup: (
        <div
-          className={state.jumpPreviousBreakpointDisabled ? `${stepBtnStyle} ${disableJumpBtnStyle}` : `${stepBtnStyle}`}
+          className={`${state.jumpPreviousBreakpointDisabled ? 'disabled ' : ''} ${stepBtnStyle}`}
          id="buttonNavigatorJumpPreviousBreakpointContainer"
          onClick={() => {
            jumpPreviousBreakpoint && jumpPreviousBreakpoint()
@ -191,7 +189,7 @@ export const ButtonNavigation = ({
          data-id="buttonNavigatorJumpPreviousBreakpoint"
        >
          <button
-            className="btn btn-link btn-sm jumpButton m-0 p-0"
+            className="btn btn-link btn-sm m-0 p-0"
            id="jumppreviousbreakpoint"
            data-id="buttonNavigatorJumpPreviousBreakpoint"
            onClick={() => {
@ -215,7 +213,7 @@ export const ButtonNavigation = ({
    jumpOutJSX: {
      markup: (
        <div
-          className={state.jumpOutDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}` : `${stepBtnStyle}`}
+          className={`${state.jumpOutDisabled ? 'disabled ' : ''} ${stepBtnStyle}`}
          onClick={() => {
            jumpOut && jumpOut()
          }}
@ -223,7 +221,7 @@ export const ButtonNavigation = ({
          id="buttonNavigatorJumpOutContainer"
        >
          <button
-            className="btn btn-link btn-sm jumpButton m-0 p-0"
+            className="btn btn-link btn-sm m-0 p-0"
            id="jumpout"
            onClick={() => {
              jumpOut && jumpOut()
@ -247,7 +245,7 @@ export const ButtonNavigation = ({
    jumpNextBreakpointJSX: {
      markup: (
        <div
-          className={state.jumpNextBreakpointDisabled ? `${stepBtnStyle} ${disableStepBtnStyle}` : `${stepBtnStyle}`}
+          className={`${state.jumpNextBreakpointDisabled ? 'disabled ' : ''} ${stepBtnStyle}`}
          onClick={() => {
            jumpNextBreakpoint && jumpNextBreakpoint()
          }}
@ -255,7 +253,7 @@ export const ButtonNavigation = ({
          id="buttonNavigatorJumpNextBreakpointContainer"
        >
          <button
-            className="btn btn-link btn-sm jumpButton m-0 p-0"
+            className={`${state.jumpNextBreakpointDisabled ? 'disabled' : ''} btn btn-link btn-sm m-0 p-0`}
            id="jumpnextbreakpoint"
            data-id="buttonNavigatorJumpNextBreakpoint"
            onClick={() => {
@ -276,7 +274,7 @@ export const ButtonNavigation = ({

  return (
    <div className="buttons">
-      <div className="stepButtons btn-group py-1">
+      <div className="w-100 btn-group py-1">
        {Object.keys(stepMarkupStructure).map((x) => (
          <CustomTooltip
            placement={stepMarkupStructure[x].placement}
@ -289,7 +287,7 @@ export const ButtonNavigation = ({
        ))}
      </div>

-      <div className="jumpButtons btn-group py-1">
+      <div className="w-100 btn-group py-1">
        {Object.keys(jumpMarkupStructure).map((x) => (
          <CustomTooltip
            placement={jumpMarkupStructure[x].placement}
--- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
@ -391,7 +391,7 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
        }}
        type="checkbox"
      />
-      <label data-id="debugGeneratedSourcesLabel" className="form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">
+      <label data-id="debugGeneratedSourcesLabel" className="pt-1 form-check-label custom-control-label" htmlFor="debugGeneratedSourcesInput">
        <FormattedMessage id="debugger.useGeneratedSources" />
        (Solidity {'>='} v0.7.2)
      </label>
--- a/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
+++ b/libs/remix-ui/debugger-ui/src/lib/tx-browser/tx-browser.tsx
@ -1,11 +1,12 @@
-import {CustomTooltip} from '@remix-ui/helper'
+import {CustomTooltip, isValidHash} from '@remix-ui/helper'
 import React, {useState, useEffect, useRef} from 'react' //eslint-disable-line
 import {useIntl, FormattedMessage} from 'react-intl'
 import './tx-browser.css'

 export const TxBrowser = ({requestDebug, updateTxNumberFlag, unloadRequested, transactionNumber, debugging}) => {
  const [state, setState] = useState({
-    txNumber: ''
+    txNumber: '',
+    isTxNumberValid: false
  })

  const inputValue = useRef(null)
@ -16,12 +17,14 @@ export const TxBrowser = ({requestDebug, updateTxNumberFlag, unloadRequested, tr
    setState((prevState) => {
      return {
        ...prevState,
-        txNumber: transactionNumber
+        txNumber: transactionNumber,
+        isTxNumberValid: isValidHash(transactionNumber),
      }
    })
-  }, [transactionNumber])
+  }, [transactionNumber, debugging])

  const handleSubmit = () => {
+    if (!state.txNumber || !state.isTxNumberValid) return
    if (debugging) {
      unload()
    } else {
@ -34,14 +37,10 @@ export const TxBrowser = ({requestDebug, updateTxNumberFlag, unloadRequested, tr
  }

  const txInputChanged = (value) => {
-    // todo check validation of txnumber in the input element, use
-    // required
-    // oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')"
-    // pattern="^0[x,X]+[0-9a-fA-F]{22}"
-    // this.state.txNumberInput.setCustomValidity('')
    setState((prevState) => {
      return {
        ...prevState,
+        isTxNumberValid: isValidHash(value),
        txNumber: value
      }
    })
@ -50,19 +49,20 @@ export const TxBrowser = ({requestDebug, updateTxNumberFlag, unloadRequested, tr
  const txInputOnInput = () => {
    updateTxNumberFlag(!inputValue.current.value)
  }
+
  const customJSX = (
    <div
      id="debuggerTransactionStartButtonContainer"
      data-id="debuggerTransactionStartButton"
      onClick={handleSubmit}
-      className="btn btn-primary btn-sm btn-block text-decoration-none"
+      className={`${!state.isTxNumberValid ? 'disabled ' : ''} btn btn-primary btn-sm btn-block text-decoration-none`}
    >
      <button
-        className="btn btn-link btn-sm btn-block h-75 p-0 m-0 text-decoration-none"
+        className={`${!state.isTxNumberValid ? 'disabled ' : ''} btn btn-link btn-sm btn-block h-75 p-0 m-0 text-decoration-none`}
        id="load"
        onClick={handleSubmit}
        data-id="debuggerTransactionStartButton"
-        disabled={!state.txNumber}
+        disabled={!state.txNumber || !state.isTxNumberValid}
        style={{pointerEvents: 'none', color: 'white'}}
      >
        <span>
@ -91,7 +91,7 @@ export const TxBrowser = ({requestDebug, updateTxNumberFlag, unloadRequested, tr
        <div className="d-flex justify-content-center w-100 btn-group py-1">
          <CustomTooltip
            placement="bottom"
-            tooltipText={<FormattedMessage id={`debugger.${debugging ? 'stopDebugging' : 'startDebugging'}`} />}
+            tooltipText={<FormattedMessage id={`debugger.${!state.isTxNumberValid ? 'provideTxNumber' : debugging ? 'stopDebugging' : 'startDebugging'}`} />}
            tooltipId={'debuggingButtontooltip'}
            tooltipClasses="text-nowrap"
          >
--- a/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
+++ b/libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx
@ -296,7 +296,7 @@ export function ContractGUI(props: ContractGUIProps) {
                : buttonOptions.title
          }
        >
-          <div className="d-flex wrapperElement" onClick={handleActionClick} data-id={buttonOptions.dataId} data-title={buttonOptions.title}>
+          <div className="d-flex btn p-0 wrapperElement" onClick={handleActionClick} data-id={buttonOptions.dataId} data-title={buttonOptions.title}>
            <button
              className={`udapp_instanceButton text-nowrap overflow-hidden text-truncate ${props.widthClass} btn btn-sm ${buttonOptions.classList}`}
              data-id={buttonOptions.dataId}
--- a/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
+++ b/libs/remix-ui/vertical-icons-panel/src/lib/reducers/iconBadgeReducer.ts
@ -1,7 +1,5 @@
-import { checkSpecialChars } from '@remix-ui/helper'
+import { checkSpecialChars, bleach } from '@remix-ui/helper'
 import { BadgeStatus, IconStatus } from '../components/Icon'
-import { bleach } from '@remix-ui/helper'
-

 export type IconBadgeReducerAction = {
  readonly type: string
--- a/libs/remix-ui/workspace/src/lib/css/file-explorer-context-menu.css
+++ b/libs/remix-ui/workspace/src/lib/css/file-explorer-context-menu.css
@ -11,8 +11,6 @@
 }
 .remixui_liitem
 {
-  padding: 2px;
-  padding-left: 6px;
  cursor: pointer;
  color: var(--text-dark);
  background-color: var(--light);