tooltips fixes

pull/5370/head
lianahus 2 years ago committed by Aniket
parent 282191a216
commit 99b1722bea
  1. 2
      apps/etherscan/src/app/components/HeaderWithSettings.tsx
  2. 2
      apps/etherscan/src/app/views/VerifyView.tsx
  3. 7
      apps/remix-ide/src/app/panels/tab-proxy.js
  4. 4
      apps/remix-ide/src/app/tabs/locales/en/udapp.json
  5. 8
      apps/remix-ide/src/assets/css/themes/bootstrap-cerulean.min.css
  6. 8
      apps/remix-ide/src/assets/css/themes/bootstrap-cyborg.min.css
  7. 8
      apps/remix-ide/src/assets/css/themes/bootstrap-flatly.min.css
  8. 9
      apps/remix-ide/src/assets/css/themes/bootstrap-spacelab.min.css
  9. 8
      apps/remix-ide/src/assets/css/themes/remix-black_undtds.css
  10. 8
      apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css
  11. 8
      apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css
  12. 8
      apps/remix-ide/src/assets/css/themes/remix-hacker_owl.css
  13. 8
      apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css
  14. 10
      apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css
  15. 35
      libs/remix-ui/debugger-ui/src/lib/debugger-ui.tsx
  16. 10
      libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
  17. 2
      libs/remix-ui/home-tab/src/lib/components/pluginButton.tsx
  18. 2
      libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx
  19. 9
      libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
  20. 70
      libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx
  21. 66
      libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx
  22. 12
      libs/remix-ui/run-tab/src/lib/components/recorderCardUI.tsx
  23. 41
      libs/remix-ui/settings/src/lib/remix-ui-settings.tsx
  24. 12
      libs/remix-ui/solidity-compiler/src/lib/api/compiler-api.ts
  25. 28
      libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
  26. 73
      libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
  27. 143
      libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
  28. 22
      libs/remix-ui/vertical-icons-panel/src/lib/components/Badge.tsx
  29. 12
      libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css

@ -148,9 +148,7 @@ export const HeaderWithSettings: React.FC<Props> = ({
<h6>{title}</h6>
<div style={{ float: "right" }}>
<HomeIcon from={from} themeType={themeType} />
<ReceiptsIcon from={from} themeType={themeType} />
<SettingsIcon from={from} themeType={themeType} />
</div>
</div>

@ -23,8 +23,6 @@ interface FormValues {
contractAddress: string
}
export const VerifyView: React.FC<Props> = ({
apiKey,
client,

@ -244,7 +244,7 @@ export class TabProxy extends Plugin {
name,
title,
icon,
tooltip: name,
tooltip: title || name,
iconClass: getPathIcon(name)
})
formatPath.shift()
@ -252,6 +252,7 @@ export class TabProxy extends Plugin {
const index = this.loadedTabs.findIndex(({ title }) => title === formatPath.join('/'))
if (index > -1) {
const duplicateTabName = this.loadedTabs[index].name
const duplicateTabTooltip = this.loadedTabs[index].tooltip
const duplicateTabPath = duplicateTabName.split('/')
const duplicateTabFormatPath = [...duplicateTabPath].reverse()
const duplicateTabTitle = duplicateTabFormatPath.slice(0, titleLength).reverse().join('/')
@ -260,7 +261,7 @@ export class TabProxy extends Plugin {
name: duplicateTabName,
title: duplicateTabTitle,
icon,
tooltip: duplicateTabName,
tooltip: duplicateTabTooltip,
iconClass: getPathIcon(duplicateTabName)
}
}
@ -274,7 +275,7 @@ export class TabProxy extends Plugin {
name,
title,
icon,
tooltip: name,
tooltip: title || name,
iconClass: getPathIcon(name)
})
}

@ -40,8 +40,8 @@
"udapp.transactionSaveTooltip1": "No transactions to save",
"udapp.transactionSaveTooltip2": "Save {count} transaction as scenario file",
"udapp.transactionSaveTooltip3": "Save {count} transactions as scenario file",
"udapp.infoRecorderTooltip": "Save transactions (deployed contracts and function executions) {br}and replay them in another environment e.g Transactions created {br}in Remix VM can be replayed in the Injected Provider.",
"udapp.livemodeRecorderTooltip": "If contracts are updated after recording transactions,{br} checking this box will run recorded transactions {br}with the latest copy of the compiled contracts",
"udapp.infoRecorderTooltip": "Save transactions (deployed contracts and function executions) and replay them in another environment e.g Transactions created in Remix VM can be replayed in the Injected Provider.",
"udapp.livemodeRecorderTooltip": "If contracts are updated after recording transactions, checking this box will run recorded transactions with the latest copy of the compiled contracts",
"udapp.livemodeRecorderLabel": "Run transactions using the latest compilation result",
"udapp.runRecorderTooltip": "Run transaction(s) from the current scenario file",
"udapp.save": "Save",

@ -5250,7 +5250,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after {
bottom:1px;
border-width:.5rem .5rem 0;
border-top-color:#fff
border-top-color: var(--secondary)
}
.bs-popover-auto[x-placement^=right],.bs-popover-right {
margin-left:.5rem
@ -5269,7 +5269,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after {
left:1px;
border-width:.5rem .5rem .5rem 0;
border-right-color:#fff
border-right-color: var(--secondary)
}
.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
margin-top:.5rem
@ -5285,7 +5285,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after {
top:1px;
border-width:0 .5rem .5rem .5rem;
border-bottom-color:#fff
border-bottom-color: var(--secondary)
}
.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
position:absolute;
@ -5314,7 +5314,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after {
right:1px;
border-width:.5rem 0 .5rem .5rem;
border-left-color:#fff
border-left-color: var(--secondary)
}
.popover-header {
padding:.5rem .75rem;

@ -5252,7 +5252,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after {
bottom:1px;
border-width:.5rem .5rem 0;
border-top-color:#282828
border-top-color: var(--secondary);
}
.bs-popover-auto[x-placement^=right],.bs-popover-right {
margin-left:.5rem
@ -5271,7 +5271,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after {
left:1px;
border-width:.5rem .5rem .5rem 0;
border-right-color:#282828
border-right-color: var(--secondary);
}
.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
margin-top:.5rem
@ -5287,7 +5287,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after {
top:1px;
border-width:0 .5rem .5rem .5rem;
border-bottom-color:#282828
border-bottom-color: var(--secondary);
}
.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
position:absolute;
@ -5316,7 +5316,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after {
right:1px;
border-width:.5rem 0 .5rem .5rem;
border-left-color:#282828
border-left-color: var(--secondary);
}
.popover-header {
padding:.5rem .75rem;

@ -4253,7 +4253,7 @@ a.close.disabled {
bottom:0; border-width:.5rem .5rem 0; border-top-color:rgba(0,0,0,.25)
}
.bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after {
bottom:1px; border-width:.5rem .5rem 0; border-top-color:#fff
bottom:1px; border-width:.5rem .5rem 0; border-top-color: var(--secondary)
}
.bs-popover-auto[x-placement^=right],.bs-popover-right {
margin-left:.5rem
@ -4265,7 +4265,7 @@ a.close.disabled {
left:0; border-width:.5rem .5rem .5rem 0; border-right-color:rgba(0,0,0,.25)
}
.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after {
left:1px; border-width:.5rem .5rem .5rem 0; border-right-color:#fff
left:1px; border-width:.5rem .5rem .5rem 0; border-right-color: var(--secondary)
}
.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
margin-top:.5rem
@ -4277,7 +4277,7 @@ a.close.disabled {
top:0; border-width:0 .5rem .5rem .5rem; border-bottom-color:rgba(0,0,0,.25)
}
.bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after {
top:1px; border-width:0 .5rem .5rem .5rem; border-bottom-color:#fff
top:1px; border-width:0 .5rem .5rem .5rem; border-bottom-color: var(--secondary)
}
.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
position:absolute; top:0; left:50%; display:block; width:1rem; margin-left:-.5rem; content:""; border-bottom:1px solid #f7f7f7
@ -4292,7 +4292,7 @@ a.close.disabled {
right:0; border-width:.5rem 0 .5rem .5rem; border-left-color:rgba(0,0,0,.25)
}
.bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after {
right:1px; border-width:.5rem 0 .5rem .5rem; border-left-color:#fff
right:1px; border-width:.5rem 0 .5rem .5rem; border-left-color: var(--secondary)
}
.popover-header {
padding:.5rem .75rem; margin-bottom:0; font-size:.9375rem; background-color:#f7f7f7; border-bottom:1px solid #ebebeb; border-top-left-radius:calc(.3rem - 1px); border-top-right-radius:calc(.3rem - 1px)

@ -5253,7 +5253,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=top]>.arrow::after,.bs-popover-top>.arrow::after {
bottom:1px;
border-width:.5rem .5rem 0;
border-top-color:#fff
border-top-color: var(--secondary)
}
.bs-popover-auto[x-placement^=right],.bs-popover-right {
margin-left:.5rem
@ -5272,7 +5272,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=right]>.arrow::after,.bs-popover-right>.arrow::after {
left:1px;
border-width:.5rem .5rem .5rem 0;
border-right-color:#fff
border-right-color: var(--secondary)
}
.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom {
margin-top:.5rem
@ -5288,7 +5288,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=bottom]>.arrow::after,.bs-popover-bottom>.arrow::after {
top:1px;
border-width:0 .5rem .5rem .5rem;
border-bottom-color:#fff
border-bottom-color: var(--secondary)
}
.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
position:absolute;
@ -5317,7 +5317,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^=left]>.arrow::after,.bs-popover-left>.arrow::after {
right:1px;
border-width:.5rem 0 .5rem .5rem;
border-left-color:#fff
border-left-color: var(--secondary)
}
.popover-header {
padding:.5rem .75rem;
@ -5486,7 +5486,6 @@ a.close.disabled {
.carousel-indicators li {
transition:none
}
}
.carousel-indicators .active {
opacity:1

@ -5310,7 +5310,7 @@ a.close.disabled {
.bs-popover-top > .arrow::after {
bottom: 1px;
border-width: 5px 5px 0;
border-top-color: #000;
border-top-color: var(--secondary);
}
.bs-popover-auto[x-placement^="right"],
.bs-popover-right {
@ -5333,7 +5333,7 @@ a.close.disabled {
.bs-popover-right > .arrow::after {
left: 1px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
border-right-color: var(--secondary);
}
.bs-popover-auto[x-placement^="bottom"],
.bs-popover-bottom {
@ -5353,7 +5353,7 @@ a.close.disabled {
.bs-popover-bottom > .arrow::after {
top: 1px;
border-width: 0 5px 5px 5px;
border-bottom-color: #000;
border-bottom-color: var(--secondary);
}
.bs-popover-auto[x-placement^="bottom"] .popover-header::before,
.bs-popover-bottom .popover-header::before {
@ -5387,7 +5387,7 @@ a.close.disabled {
.bs-popover-left > .arrow::after {
right: 1px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
border-left-color: var(--secondary);
}
.popover-header {
padding: 8px 14px;

@ -5773,7 +5773,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="top"] > .arrow::after {
bottom: 1px;
border-width: 0.5rem 0.5rem 0;
border-top-color: #fff;
border-top-color: var(--secondary);
}
.bs-popover-right,
@ -5797,7 +5797,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="right"] > .arrow::after {
left: 1px;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: #fff;
border-right-color: var(--secondary);
}
.bs-popover-bottom,
@ -5818,7 +5818,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: #fff;
border-bottom-color: var(--secondary);
}
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@ -5853,7 +5853,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="left"] > .arrow::after {
right: 1px;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: #fff;
border-left-color: var(--secondary);
}
.popover-header {

@ -5312,7 +5312,7 @@ a.close.disabled {
.bs-popover-top > .arrow::after {
bottom: 1px;
border-width: 5px 5px 0;
border-top-color: #000;
border-top-color: var(--secondary);
}
.bs-popover-auto[x-placement^="right"],
.bs-popover-right {
@ -5335,7 +5335,7 @@ a.close.disabled {
.bs-popover-right > .arrow::after {
left: 1px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
border-right-color: var(--secondary);
}
.bs-popover-auto[x-placement^="bottom"],
.bs-popover-bottom {
@ -5355,7 +5355,7 @@ a.close.disabled {
.bs-popover-bottom > .arrow::after {
top: 1px;
border-width: 0 5px 5px 5px;
border-bottom-color: #000;
border-bottom-color: var(--secondary);
}
.bs-popover-auto[x-placement^="bottom"] .popover-header::before,
.bs-popover-bottom .popover-header::before {
@ -5389,7 +5389,7 @@ a.close.disabled {
.bs-popover-left > .arrow::after {
right: 1px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
border-left-color: var(--secondary);
}
.popover-header {
padding: 8px 14px;

@ -5323,7 +5323,7 @@ a.close.disabled {
.bs-popover-top > .arrow::after {
bottom: 1px;
border-width: 5px 5px 0;
border-top-color: #000;
border-top-color: var(--secondary);
}
.bs-popover-auto[x-placement^="right"],
.bs-popover-right {
@ -5346,7 +5346,7 @@ a.close.disabled {
.bs-popover-right > .arrow::after {
left: 1px;
border-width: 5px 5px 5px 0;
border-right-color: #000;
border-right-color: var(--secondary);
}
.bs-popover-auto[x-placement^="bottom"],
.bs-popover-bottom {
@ -5366,7 +5366,7 @@ a.close.disabled {
.bs-popover-bottom > .arrow::after {
top: 1px;
border-width: 0 5px 5px 5px;
border-bottom-color: #000;
border-bottom-color: var(--secondary);
}
.bs-popover-auto[x-placement^="bottom"] .popover-header::before,
.bs-popover-bottom .popover-header::before {
@ -5400,7 +5400,7 @@ a.close.disabled {
.bs-popover-left > .arrow::after {
right: 1px;
border-width: 5px 0 5px 5px;
border-left-color: #000;
border-left-color: var(--secondary);
}
.popover-header {
padding: 8px 14px;

@ -5769,7 +5769,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="top"] > .arrow::after {
bottom: 1px;
border-width: 0.5rem 0.5rem 0;
border-top-color: #fff;
border-top-color: var(--secondary);
}
.bs-popover-right,
@ -5793,7 +5793,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="right"] > .arrow::after {
left: 1px;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: #fff;
border-right-color: var(--secondary);
}
.bs-popover-bottom,
@ -5814,7 +5814,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: #fff;
border-bottom-color: var(--secondary);
}
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@ -5849,7 +5849,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="left"] > .arrow::after {
right: 1px;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: #fff;
border-left-color: var(--secondary);
}
.popover-header {

@ -5775,7 +5775,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="top"] > .arrow::after {
bottom: 1px;
border-width: 0.5rem 0.5rem 0;
border-top-color: #eeede9;
border-top-color: var(--secondary);
}
.bs-popover-right,
@ -5799,7 +5799,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="right"] > .arrow::after {
left: 1px;
border-width: 0.5rem 0.5rem 0.5rem 0;
border-right-color: #eeede9;
border-right-color: var(--secondary);
}
.bs-popover-bottom,
@ -5820,7 +5820,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
top: 1px;
border-width: 0 0.5rem 0.5rem 0.5rem;
border-bottom-color: #eeede9;
border-bottom-color: var(--secondary);
}
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@ -5855,7 +5855,7 @@ a.close.disabled {
.bs-popover-auto[x-placement^="left"] > .arrow::after {
right: 1px;
border-width: 0.5rem 0 0.5rem 0.5rem;
border-left-color: #eeede9;
border-left-color: var(--secondary);
}
.popover-header {
@ -6141,7 +6141,7 @@ button.bg-primary:focus {
}
.bg-secondary {
background-color: #EDC2A1 !important;
background-color: #f1f1f100 !important;
}
a.bg-secondary:hover,

@ -384,20 +384,31 @@ export const DebuggerUI = (props: DebuggerUIProps) => {
<div className="px-2" ref={debuggerTopRef}>
<div>
<div className="mt-2 mb-2 debuggerConfig custom-control custom-checkbox">
<CustomTooltip
tooltipId="debuggerGenSourceCheckbox"
tooltipText={<FormattedMessage id='debugger.debugWithGeneratedSources' />}
placement="top-start"
>
{customJSX}
</CustomTooltip>
<CustomTooltip
tooltipId="debuggerGenSourceCheckbox"
tooltipText={<FormattedMessage id='debugger.debugWithGeneratedSources' />}
placement="top-start"
>
{customJSX}
</CustomTooltip>
</div>
{ state.isLocalNodeUsed && <div className="mb-2 debuggerConfig custom-control custom-checkbox">
<input className="custom-control-input" id="debugWithLocalNodeInput" onChange={({ target: { checked } }) => {
setState(prevState => {
return { ...prevState, opt: { ...prevState.opt, debugWithLocalNode: checked } }
})
}} type="checkbox" title="Force the debugger to use the current local node" />
<CustomTooltip
tooltipId="debuggerGenSourceInput"
tooltipText="Force the debugger to use the current local node"
placement='right'
>
<input
className="custom-control-input"
id="debugWithLocalNodeInput"
onChange={({ target: { checked } }) => {
setState(prevState => {
return { ...prevState, opt: { ...prevState.opt, debugWithLocalNode: checked } }
})
}}
type="checkbox"
/>
</CustomTooltip>
<label data-id="debugLocaNodeLabel" className="form-check-label custom-control-label" htmlFor="debugWithLocalNodeInput"><FormattedMessage id='debugger.debugLocaNodeLabel' /></label>
</div>
}

@ -2,13 +2,12 @@ import React from 'react';
import { Fragment } from 'react';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { CustomTooltipType } from '../../types/customtooltip'
import './custom-tooltip.css'
export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay }: CustomTooltipType) {
if (typeof tooltipText !== 'string') {
const newTooltipText = React.cloneElement(tooltipText, {
className: " bg-secondary text-wrap p-1 "
className: " bg-secondary text-wrap p-1 px-2 "
})
tooltipText = newTooltipText
}
@ -19,12 +18,13 @@ export function CustomTooltip({ children, placement, tooltipId, tooltipClasses,
placement={placement}
overlay={
<Popover id={`popover-positioned-${placement}`}>
<Popover.Content id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} style={{minWidth: "fit-content"}} className={"text-wrap p-1 bg-secondary w-100" + tooltipClasses}>
{typeof tooltipText === 'string' ? (<span className={"text-wrap p-1 bg-secondary " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
<Popover.Content id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} style={{minWidth: "fit-content"}} className={"text-wrap p-1 px-2 bg-secondary w-100" + tooltipClasses}>
{typeof tooltipText === 'string' ? (<span className={"text-wrap p-1 px-2 bg-secondary " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
</Popover.Content>
</Popover>
}
delay={delay}
show={true}
>
{children}
</OverlayTrigger>

@ -32,7 +32,7 @@ function PluginButton ({ imgPath, envID, envText, callback, l2, description, rem
{ remixMaintained &&
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-run-script"
tooltipId="overlay-tooltip-by-remix"
tooltipText={'Maintained by Remix'}
>
<i className="bg-light text-success mx-1 px-1 mb-0 mx-2 position-absolute remixui_home_maintainedLabel fas fa-check"></i>

@ -87,7 +87,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
</h6>
{!props.showCancelIcon &&
<span className="modal-close" onClick={() => handleHide()}>
<i title="Close" className="fas fa-times" aria-hidden="true"></i>
<i className="fas fa-times" aria-hidden="true"></i>
</span>
}
</div>

@ -72,7 +72,14 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
{plugin?.profile?.documentation && <span className="d-flex flex-row align-items-center">
<label className="mb-0 pr-2"><FormattedMessage id='panel.documentation' />:</label>
<span>
<a href={plugin?.profile?.documentation} className="titleInfo p-0 mb-2" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
<CustomTooltip
placement="right-end"
tooltipId="linkToDocsTooltip"
tooltipClasses=" text-nowrap "
tooltipText="Link to documentation"
>
<a href={plugin?.profile?.documentation} className="titleInfo p-0 mb-2" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>
</CustomTooltip>
</span>
</span>}
{plugin?.profile?.description && <span className="d-flex flex-row align-items-baseline">

@ -1,6 +1,7 @@
// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-use-before-define
import React from 'react'
import '../remix-ui-plugin-manager.css'
import { CustomTooltip } from '@remix-ui/helper'
interface PluginCardProps {
profile: any
buttonText: string
@ -14,35 +15,72 @@ function ActivePluginCard ({
}: PluginCardProps) {
return (
<div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
<article className="list-group-item py-1 mb-1 plugins-list-group-item" title={profile.displayName || profile.name}>
<article className="list-group-item py-1 mb-1 plugins-list-group-item">
<div className="remixui_row justify-content-between align-items-center mb-2">
<h6 className="remixui_displayName plugin-name">
<div>
{ profile.displayName || profile.name }
{ profile?.maintainedBy?.toLowerCase() == "remix" &&
<i aria-hidden="true" className="px-1 text-success fas fa-check" title="Maintained by Remix"></i>
<CustomTooltip
placement="right-end"
tooltipId="pluginManagerActiveTitleByRemix"
tooltipClasses="text-nowrap"
tooltipText="Maintained by Remix"
>
<i aria-hidden="true" className="px-1 text-success fas fa-check"></i>
</CustomTooltip>
}
{ profile.documentation &&
<a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
<i aria-hidden="true" className="fas fa-book"/>
</a>
<CustomTooltip
placement="right-end"
tooltipId="pluginManagerActiveLinkToDoc"
tooltipClasses="text-nowrap"
tooltipText="Link to documentation"
>
<a href={profile.documentation} className="px-1" target="_blank" rel="noreferrer">
<i aria-hidden="true" className="fas fa-book"/>
</a>
</CustomTooltip>
}
{ profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)
? <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
? <CustomTooltip
placement="right-end"
tooltipId="pluginManagerActiveVersionAlpha"
tooltipClasses="text-nowrap"
tooltipText="Version Alpha"
>
<small className="remixui_versionWarning plugin-version">alpha</small>
</CustomTooltip>
: profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)
? <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
? <CustomTooltip
placement="right-end"
tooltipId="pluginManagerActiveVersionBeta"
tooltipClasses="text-nowrap"
tooltipText="Version Beta"
>
<small className="remixui_versionWarning plugin-version">beta</small>
</CustomTooltip>
: null
}
</div>
{<button
onClick={() => {
deactivatePlugin(profile.name)
} }
className="btn btn-secondary btn-sm"
data-id={`pluginManagerComponentDeactivateButton${profile.name}`}
>
{buttonText}
</button>}
{
<CustomTooltip
placement="right-end"
tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
tooltipClasses="text-nowrap"
tooltipText={`Dectivate ${profile.displayName || profile.name}`}
>
<button
onClick={() => {
deactivatePlugin(profile.name)
} }
className="btn btn-secondary btn-sm"
data-id={`pluginManagerComponentDeactivateButton${profile.name}`}
>
{buttonText}
</button>
</CustomTooltip>
}
</h6>
</div>
<div className="remixui_description d-flex text-body plugin-text mb-2">

@ -2,6 +2,7 @@ import { Profile } from '@remixproject/plugin-utils'
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-use-before-define
import React from 'react'
import '../remix-ui-plugin-manager.css'
import { CustomTooltip } from '@remix-ui/helper'
interface PluginCardProps {
profile: Profile & {
icon?: string
@ -17,36 +18,71 @@ function InactivePluginCard ({
}: PluginCardProps) {
return (
<div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
<article className="list-group-item py-1 mb-1 plugins-list-group-item" title={profile.displayName || profile.name}>
<article className="list-group-item py-1 mb-1 plugins-list-group-item">
<div className="remixui_row justify-content-between align-items-center mb-2">
<h6 className="remixui_displayName plugin-name">
<div>
{ profile.displayName || profile.name }
{ profile?.maintainedBy?.toLowerCase() == "remix" &&
<i aria-hidden="true" className="px-1 text-success fas fa-check" title="Verified by Remix"></i>
<CustomTooltip
placement="right-end"
tooltipId="pluginManagerInactiveTitleByRemix"
tooltipClasses="text-nowrap"
tooltipText="Maintained by Remix"
>
<i aria-hidden="true" className="px-1 text-success fas fa-check"></i>
</CustomTooltip>
}
{ profile.documentation &&
<a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
<i aria-hidden="true" className="fas fa-book"/>
</a>
<CustomTooltip
placement="right-end"
tooltipId="pluginManagerInactiveTitleLinkToDoc"
tooltipClasses="text-nowrap"
tooltipText="Link to documentation"
>
<a href={profile.documentation} className="px-1" target="_blank" rel="noreferrer">
<i aria-hidden="true" className="fas fa-book"/>
</a>
</CustomTooltip>
}
{ profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)
? <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
? <CustomTooltip
placement="right-end"
tooltipId="pluginManagerActiveVersionAlpha"
tooltipClasses="text-nowrap"
tooltipText="Version Alpha"
>
<small className="remixui_versionWarning plugin-version">alpha</small>
</CustomTooltip>
: profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)
? <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
? <CustomTooltip
placement="right-end"
tooltipId="pluginManagerActiveVersionBeta"
tooltipClasses="text-nowrap"
tooltipText="Version Beta"
>
<small className="remixui_versionWarning plugin-version">beta</small>
</CustomTooltip>
: null
}
</div>
{
<button
onClick={() => {
activatePlugin(profile.name)
}}
className="btn btn-success btn-sm"
data-id={`pluginManagerComponentActivateButton${profile.name}`}
<CustomTooltip
placement="right-end"
tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
tooltipClasses="text-nowrap"
tooltipText={`Activate ${profile.displayName || profile.name}`}
>
{buttonText}
</button>
<button
onClick={() => {
activatePlugin(profile.name)
}}
className="btn btn-success btn-sm"
data-id={`pluginManagerComponentActivateButton${profile.name}`}
>
{buttonText}
</button>
</CustomTooltip>
}
</h6>
</div>

@ -43,12 +43,12 @@ export function RecorderUI (props: RecorderProps) {
tooltipText={<FormattedMessage id='udapp.transactionsCountTooltip' />}
>
<div className="ml-2 badge badge-pill badge-primary text-center" data-title="The number of recorded transactions">{props.count}</div>
</CustomTooltip>
<CustomTooltip
placement={'right'}
tooltipClasses="text-wrap"
tooltipId="info-recorder"
tooltipText={<span><FormattedMessage id='udapp.infoRecorderTooltip' values={{ br: <br /> }} /></span>}
</CustomTooltip>
<CustomTooltip
placement={'right'}
tooltipClasses="text-wrap"
tooltipId="info-recorder"
tooltipText={<span><FormattedMessage id='udapp.infoRecorderTooltip' values={{ br: <br /> }} /></span>}
>
<i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true"></i>
</CustomTooltip>

@ -150,32 +150,25 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
const displayErrorsChecked = props.config.get('settings/display-errors') || false
return (
<div className="$border-top">
<CustomTooltip
tooltipText="Reset to Default settings"
tooltipId="resetDefaultTooltip"
tooltipClasses="text-nowrap"
placement="top-start"
>
<div className='d-flex justify-content-end pr-4'>
<button className="btn btn-sm btn-secondary ml-2" onClick={() => {
try {
if ((window as any).remixFileSystem.name === 'indexedDB') {
props.config.clear()
try {
localStorage.clear() // remove the whole storage
} catch (e) {
console.log(e)
}
} else {
props.config.clear() // remove only the remix settings
<div className='d-flex justify-content-end pr-4'>
<button className="btn btn-sm btn-secondary ml-2" onClick={() => {
try {
if ((window as any).remixFileSystem.name === 'indexedDB') {
props.config.clear()
try {
localStorage.clear() // remove the whole storage
} catch (e) {
console.log(e)
}
refresh(resetState + 1)
} catch (e) {
console.log(e)
} else {
props.config.clear() // remove only the remix settings
}
}}><FormattedMessage id='settings.reset' /></button>
</div>
</CustomTooltip>
refresh(resetState + 1)
} catch (e) {
console.log(e)
}
}}><FormattedMessage id='settings.reset' /></button>
</div>
<div className="card-body pt-3 pb-2">
<h6 className="card-title"><FormattedMessage id='settings.general' /></h6>
<div className="mt-2 custom-control custom-checkbox mb-1">

@ -212,14 +212,14 @@ export const CompilerApiMixin = (Base) => class extends Base {
listenToEvents () {
this.on('editor', 'contentChanged', () => {
this.statusChanged({ key: 'edited', title: 'the content has changed, needs recompilation', type: 'info' })
this.statusChanged({ key: 'edited', title: 'The content has changed, needs recompilation', type: 'info' })
if (this.onContentChanged) this.onContentChanged()
})
this.data.eventHandlers.onLoadingCompiler = (url) => {
this.data.loading = true
this.data.loadingUrl = url
this.statusChanged({ key: 'loading', title: 'loading compiler...', type: 'info' })
this.statusChanged({ key: 'loading', title: 'Loading compiler...', type: 'info' })
this.emit('loadingCompiler', url)
}
this.compiler.event.register('loadingCompiler', this.data.eventHandlers.onLoadingCompiler)
@ -232,7 +232,7 @@ export const CompilerApiMixin = (Base) => class extends Base {
this.compiler.event.register('compilerLoaded', this.data.eventHandlers.onCompilerLoaded)
this.data.eventHandlers.onStartingCompilation = () => {
this.statusChanged({ key: 'loading', title: 'compiling...', type: 'info' })
this.statusChanged({ key: 'loading', title: 'Compiling...', type: 'info' })
}
this.data.eventHandlers.onRemoveAnnotations = () => {
@ -288,13 +288,13 @@ export const CompilerApiMixin = (Base) => class extends Base {
const warningsCount = data.errors.length
this.statusChanged({
key: warningsCount,
title: `compilation successful with ${warningsCount} warning${warningsCount > 1 ? 's' : ''}`,
title: `Compilation successful with ${warningsCount} warning${warningsCount > 1 ? 's' : ''}`,
type: 'warning'
})
} else this.statusChanged({ key: 'succeed', title: 'compilation successful', type: 'success' })
} else this.statusChanged({ key: 'succeed', title: 'Compilation successful', type: 'success' })
} else {
const count = (data.errors ? data.errors.filter(error => error.severity === 'error').length : 0 + (data.error ? 1 : 0))
this.statusChanged({ key: count, title: `compilation failed with ${count} error${count > 1 ? 's' : ''}`, type: 'error' })
this.statusChanged({ key: count, title: `Compilation failed with ${count} error${count > 1 ? 's' : ''}`, type: 'error' })
}
// Store the contracts and Update contract Selection
if (success) {

@ -991,20 +991,20 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
placement="right"
tooltipId="overlay-tooltip-compile-run-doc"
tooltipText={<div className="text-left p-2">
<div>Choose the script to execute right after compilation
by adding the `dev-run-script` natspec tag, as in:</div>
<pre>
<code>
/**<br />
* @title ContractName<br />
* @dev ContractDescription<br />
* @custom:dev-run-script file_path<br />
*/<br />
contract ContractName {'{}'}<br />
</code>
</pre>
Click the i icon to learn more
</div>}
<div>Choose the script to execute right after compilation
by adding the `dev-run-script` natspec tag, as in:</div>
<pre>
<code>
/**<br />
* @title ContractName<br />
* @dev ContractDescription<br />
* @custom:dev-run-script file_path<br />
*/<br />
contract ContractName {'{}'}<br />
</code>
</pre>
Click the "i" icon to learn more
</div>}
>
<a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="pl-2 ml-2 mt-3 mb-1 fas fa-info text-dark"></i></a>
</CustomTooltip>

@ -1,58 +1,65 @@
.remix-ui-tabs {
display: -webkit-box;
max-height: 2.15rem;
display: -webkit-box;
max-height: 2.15rem;
}
.remix-ui-tabs_end {
height: 2.15rem;
background-image: linear-gradient(to right, var(--body-bg) , var(--secondary));
width: 3rem;
right: -10px;
filter: opacity(0.5);
}
.remix-ui-tabs li {
display: inline-block;
display: inline-block;
}
.title-tabs {
padding: inherit;
align-items: center;
padding-right: 8px;
padding-left: 2px;
cursor: default;
/*to make it unselectable*/
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by any browser but < IE9 */
vertical-align: middle;
padding: inherit;
align-items: center;
padding-right: 8px;
padding-left: 2px;
cursor: default;
/*to make it unselectable*/
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by any browser but < IE9 */
vertical-align: middle;
}
.tab:hover .close-tabs{
visibility: visible
visibility: visible
}
.active .close-tabs {
visibility: visible
visibility: visible
}
.close-tabs {
visibility: hidden;
font-size: medium;
visibility: hidden;
font-size: medium;
}
.iconImage {
width: 1rem;
height: 1rem;
align-self: start;
width: 1rem;
height: 1rem;
align-self: start;
}
.active {
border: 1px solid transparent;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border: 1px solid transparent;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.tab-scroll {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.tab-scroll::-webkit-scrollbar {
display: none;
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
/* Hide scrollbar for IE, Edge and Firefox */
.tab-scroll {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

@ -7,6 +7,7 @@ import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
import './remix-ui-tabs.css'
const _paq = window._paq = window._paq || []
/* eslint-disable-next-line */
export interface TabsUIProps {
tabs: Array<any>
@ -89,14 +90,24 @@ export const TabsUI = (props: TabsUIProps) => {
const invert = props.themeQuality === 'dark' ? 'invert(1)' : 'invert(0)'
return (
<div ref={el => { tabsRef.current[index] = el }} className={classNameTab} data-id={index === currentIndexRef.current ? 'tab-active' : ''} title={tab.tooltip}>
{tab.icon ? (<img className="my-1 mr-1 iconImage" style={{ filter: invert }} src={tab.icon} />) : (<i className={classNameImg}></i>)}
<span className={`title-tabs ${getFileDecorationClasses(tab)}`}>{tab.title}</span>
{getFileDecorationIcons(tab)}
<span className="close-tabs" onClick={(event) => { props.onClose(index); event.stopPropagation() }}>
<i className="text-dark fas fa-times"></i>
</span>
</div>
<CustomTooltip
tooltipId="tabsActive"
tooltipText={tab.tooltip}
placement="bottom"
>
<div
ref={el => { tabsRef.current[index] = el }}
className={classNameTab}
data-id={index === currentIndexRef.current ? 'tab-active' : ''}
>
{tab.icon ? (<img className="my-1 mr-1 iconImage" style={{ filter: invert }} src={tab.icon} />) : (<i className={classNameImg}></i>)}
<span className={`title-tabs ${getFileDecorationClasses(tab)}`}>{tab.title}</span>
{getFileDecorationIcons(tab)}
<span className="close-tabs" onClick={(event) => { props.onClose(index); event.stopPropagation() }}>
<i className="text-dark fas fa-times"></i>
</span>
</div>
</CustomTooltip>
)
}
@ -142,60 +153,80 @@ export const TabsUI = (props: TabsUIProps) => {
}
return (
<div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs" data-id="tabs-component">
<div className="d-flex flex-row" style={{ maxWidth: 'fit-content', width: '97%' }}>
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-1">
<button
data-id='play-editor'
className="btn text-success py-0"
disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol')}
onClick={async () => {
const path = active().substr(active().indexOf('/') + 1, active().length)
const content = await props.plugin.call('fileManager', "readFile", path)
if (tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') {
await props.plugin.call('scriptRunner', 'execute', content, path)
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
} else if (tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul') {
await props.plugin.call('solidity', 'compile', path)
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
}
}}
>
<div className='d-flex'>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-all-tabs"
tooltipText="Scroll to see all tabs"
>
<div className='remix-ui-tabs_end position-relative position-fixed'></div>
</CustomTooltip>
<div className="remix-ui-tabs d-flex justify-content-between border-0 header nav-tabs" data-id="tabs-component">
<div className="d-flex flex-row" style={{ maxWidth: 'fit-content', width: '97%' }}>
<div className="d-flex flex-row justify-content-center align-items-center m-1 mt-1">
<button
data-id='play-editor'
className="btn text-success py-0"
disabled={!(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts' || tabsState.currentExt === 'sol')}
onClick={async () => {
const path = active().substr(active().indexOf('/') + 1, active().length)
const content = await props.plugin.call('fileManager', "readFile", path)
if (tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') {
await props.plugin.call('scriptRunner', 'execute', content, path)
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
} else if (tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul') {
await props.plugin.call('solidity', 'compile', path)
_paq.push(['trackEvent', 'editor', 'clickRunFromEditor', tabsState.currentExt])
}
}}
>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-run-script"
tooltipText={<span>
{(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') ? "Run script (CTRL + SHIFT + S)" :
tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul'? "Compile CTRL + S" : "Select .sol or .yul file to compile or a .ts or .js file and run it"}
</span>}
>
<i className="fad fa-play"></i>
</CustomTooltip>
</button>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-run-script"
tooltipText={<span>
{(tabsState.currentExt === 'js' || tabsState.currentExt === 'ts') ? "Run script (CTRL + SHIFT + S)" :
tabsState.currentExt === 'sol' || tabsState.currentExt === 'yul'? "Compile CTRL + S" : "Select .sol or .yul file to compile or a .ts or .js file and run it"}
</span>}
tooltipId="overlay-tooltip-zoom-out"
tooltipText="Zoom out"
>
<i className="fad fa-play"></i>
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" onClick={() => props.onZoomOut()}></span>
</CustomTooltip>
</button>
<span data-id="tabProxyZoomOut" className="btn btn-sm px-2 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
<CustomTooltip
placement="bottom"
tooltipId="overlay-tooltip-run-zoom-in"
tooltipText="Zoom in"
>
<span data-id="tabProxyZoomIn" className="btn btn-sm px-2 fas fa-search-plus text-dark" onClick={() => props.onZoomIn()}></span>
</CustomTooltip>
</div>
<Tabs
className="tab-scroll"
selectedIndex={tabsState.selectedIndex}
domRef={(domEl) => {
if (tabsElement.current) return
tabsElement.current = domEl
tabsElement.current.addEventListener('wheel', transformScroll)
}}
onSelect={(index) => {
props.onSelect(index)
currentIndexRef.current = index
dispatch({ type: 'SELECT_INDEX', payload: index, ext: getExt(props.tabs[currentIndexRef.current].name)})
}}
>
<TabList className="d-flex flex-row align-items-center">
{props.tabs.map((tab, i) => <Tab className="" key={tab.name}>{renderTab(tab, i)}</Tab>)}
</TabList>
{props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
</Tabs>
</div>
<Tabs
className="tab-scroll"
selectedIndex={tabsState.selectedIndex}
domRef={(domEl) => {
if (tabsElement.current) return
tabsElement.current = domEl
tabsElement.current.addEventListener('wheel', transformScroll)
}}
onSelect={(index) => {
props.onSelect(index)
currentIndexRef.current = index
dispatch({ type: 'SELECT_INDEX', payload: index, ext: getExt(props.tabs[currentIndexRef.current].name)})
}}
>
<TabList className="d-flex flex-row align-items-center">
{props.tabs.map((tab, i) => <Tab className="" key={tab.name}>{renderTab(tab, i)}</Tab>)}
</TabList>
{props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
</Tabs>
</div>
<i className="mt-2 mr-2 fas fa-arrows-alt-h" title="Scroll to see all tabs"></i>
</div>
)
}

@ -1,6 +1,7 @@
import React from 'react'
import { BadgeStatus } from './Icon'
import { CustomTooltip } from '@remix-ui/helper'
import { FormattedMessage } from 'react-intl'
interface BadgeProps {
badgeStatus?: BadgeStatus
}
@ -47,13 +48,20 @@ function Badge ({ badgeStatus }: BadgeProps) {
<>
{
badgeStatus && checkStatusKeyValue(badgeStatus.key, badgeStatus.type) ? (
<i
title={badgeStatus.title}
className={resolveClasses(badgeStatus.key, badgeStatus.type!)}
aria-hidden="true"
<CustomTooltip
placement={'right'}
tooltipClasses="text-nowrap"
tooltipId="recordedTransactionsCounttooltip"
tooltipText={<FormattedMessage id='udapp.transactionsCountTooltip' />}
>
{badgeStatus.text}
</i>
<i
title={badgeStatus.title}
className={resolveClasses(badgeStatus.key, badgeStatus.type!)}
aria-hidden="true"
>
{badgeStatus.text}
</i>
</CustomTooltip>
) : null
}
</>

@ -71,14 +71,6 @@
padding: .25rem;
}
.remixui_menuicon .bs-popover-auto[x-placement^="bottom"] .popover-header::before, .bs-popover-bottom .popover-header::before {
border-bottom-color: var(--dark) !important
}
.remixui_menuicon .bs-popover-auto[x-placement^="bottom"] > .arrow::after, .bs-popover-bottom > .arrow::after {
border-bottom-color: var(--dark) !important
}
.custom-dropdown-items {
padding: 0.25rem 0.25rem;
border-radius: .25rem;
@ -107,10 +99,6 @@
padding-bottom: 0.1rem;
}
.remixui_menuwidth {
/* width: 8rem; */
}
#workspacesMenuDropdown > div.custom-dropdown-items {
min-width: 8rem;
}

Loading…
Cancel
Save