Light theme fixes

apps/remix-dapp/src/locales/en/udapp.json

@@ -58,7 +58,7 @@
   "udapp.resetVmStateDesc1": "Resetting the state of this VM will delete the associated transaction details in this Workspace.",
   "udapp.resetVmStateDesc2": "It will also delete the data of contracts deployed and pinned in this Workspace.",
   "udapp.resetVmStateDesc3": "Do you want to continue?",
-  "udapp.reset": "Yes reset",
+  "udapp.reset": "Yes, Reset",
   "udapp.delete": "Delete",
   "udapp.injectedTitle": "Unfortunately it's not possible to create an account using injected provider. Please create the account directly from your provider (i.e metamask or other of the same type).",
   "udapp.createSmartAccount": "Create a Safe Smart Account",

apps/remix-ide/src/app/tabs/locales/en/udapp.json

@@ -5,6 +5,9 @@
   "udapp.gasLimit": "Gas limit",
   "udapp.gasLimitAuto": "Estimated Gas",
   "udapp.gasLimitManual": "Custom",
+  "udapp.gasLimitAutoTooltip": "Currently using auto estimated gas. Click on auto to set custom gas limit",
+  "udapp.gasLimitBadgeAutoTooltip": "Click to set custom gas limit",
+  "udapp.gasLimitBadgeCustomTooltip": "Click to use auto estimated gas",
   "udapp.tooltipText4": "Enter custom Gas Limit.",
 
   "udapp._comment_value.tsx": "libs/remix-ui/run-tab/src/lib/components/value.tsx",
@@ -59,8 +62,8 @@
   "udapp.resetVmStateDesc2": "It will also delete the data of contracts deployed and pinned in this Workspace.",
   "udapp.resetVmStateDesc3": "Do you want to continue?",
   "udapp.reset": "Reset",
-  "udapp.yesReset": "Yes reset",
-  "udapp.cancelReset": "Cancel reset",
+  "udapp.yesReset": "Yes, Reset",
+  "udapp.cancelReset": "Cancel",
   "udapp.delete": "Delete",
   "udapp.injectedTitle": "Unfortunately it's not possible to create an account using injected provider. Please create the account directly from your provider (i.e metamask or other of the same type).",
   "udapp.createSmartAccount": "Create a Safe Smart Account",
@@ -200,8 +203,8 @@
   "udapp.noABIAvailable": "No ABI available",
   "udapp.noBytecodeAvailable": "No bytecode available",
   "udapp.transactionRecorderTitle": "Transactions recorder",
-  "udapp.yesClearAll": "Yes clear all",
-  "udapp.yesClearAllTransactions": "Yes clear all",
+  "udapp.yesClearAll": "Yes, Clear All",
+  "udapp.yesClearAllTransactions": "Yes, Clear All",
   "udapp.viewSourceCode": "View Source Code",
   "udapp.themes": "Themes",
   "udapp.verifyContract": "Verify Contract on Explorers",

libs/remix-ui/login/src/lib/user-menu-compact.css

@@ -134,8 +134,10 @@
   transition: background-color 0.2s;
 }
 
-.user-menu-item:hover {
-  background-color: var(--bs-body-bg, #222336);
+.user-menu-items-container .dropdown-item.user-menu-item:hover,
+.user-menu-items-container .dropdown-item.user-menu-item:focus {
+  background-color: var(--bs-dropdown-link-hover-bg);
+  color: var(--bs-dropdown-link-hover-color);
 }
 
 .user-menu-item-icon {
@@ -155,8 +157,10 @@
   transition: background-color 0.2s;
 }
 
-.user-menu-credits-item:hover {
-  background-color: var(--bs-body-bg, #222336);
+.user-menu-items-container .dropdown-item.user-menu-credits-item:hover,
+.user-menu-items-container .dropdown-item.user-menu-credits-item:focus {
+  background-color: var(--bs-dropdown-link-hover-bg);
+  color: var(--bs-dropdown-link-hover-color);
 }
 
 .user-menu-credits-icon {
@@ -189,8 +193,10 @@
   font-weight: 500;
 }
 
-.user-menu-item-danger:hover {
-  background-color: var(--bs-body-bg, #222336);
+.user-menu-items-container .dropdown-item.user-menu-item-danger:hover,
+.user-menu-items-container .dropdown-item.user-menu-item-danger:focus {
+  background-color: var(--bs-dropdown-link-hover-bg);
+  color: var(--bs-dropdown-link-hover-color);
 }
 
 .user-menu-theme-toggle {

libs/remix-ui/run-tab-deploy/src/lib/css/index.css

@@ -4,9 +4,13 @@
 .deploy-address-toggle:hover {
     background-color: var(--custom-onsurface-layer-3) !important;
 }
-.contract-dropdown-item-hover:hover, .unit-dropdown-item:hover, .unit-dropdown-item-hover:hover {
+.contract-dropdown-item-hover:hover {
     background-color: var(--custom-onsurface-layer-3) !important;
     border: 1px solid var(--bs-border-color) !important;
     border-radius: 0 !important;
     color: var(--theme-text-color, white) !important;
+}
+.unit-dropdown-item:hover, .unit-dropdown-item-hover:hover {
+    background-color: var(--bs-dropdown-link-hover-bg) !important;
+    color: var(--bs-dropdown-link-hover-color) !important;
 }

libs/remix-ui/run-tab-deploy/src/lib/widgets/deployPortraitView.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Dropdown } from 'react-bootstrap'
-import { AddressToggle, CustomMenu, CustomToggle, extractNameFromKey, getMultiValsString, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress } from '@remix-ui/helper'
+import { AddressToggle, CustomMenu, CustomToggle, CustomTooltip, extractNameFromKey, getMultiValsString, ProxyAddressToggle, ProxyDropdownMenu, shortenDate, shortenProxyAddress } from '@remix-ui/helper'
 import { CopyToClipboard } from '@remix-ui/clipboard'
 import { DeployAppContext } from '../contexts'
 import { Provider } from '@remix-ui/run-tab-environment'
@@ -771,51 +771,85 @@ function DeployPortraitView() {
                   <FormattedMessage id="udapp.gasLimit" defaultMessage="Gas limit" />
                 </label>
                 <div className="position-relative flex-fill">
-                  <span
-                    className="p-1 pt-0 rounded"
-                    style={{
-                      position: 'absolute',
-                      left: '0.5rem',
-                      top: '50%',
-                      transform: 'translateY(-50%)',
-                      backgroundColor: 'var(--custom-onsurface-layer-2)',
-                      color: 'var(--bs-primary)',
-                      cursor: 'pointer',
-                      zIndex: 1
-                    }}
-                    onClick={() => {
-                      const newMode = widgetState.gasLimit === 0 ? 'custom' : 'auto'
-                      trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitToggle', name: newMode, isClick: true })
-                      if (widgetState.gasLimit === 0) {
-                        // Switch from auto to custom - set a default value
-                        dispatch({ type: 'SET_GAS_LIMIT', payload: 3000000 })
-                      } else {
-                        // Switch from custom to auto - set to 0
-                        dispatch({ type: 'SET_GAS_LIMIT', payload: 0 })
-                      }
-                    }}
+                  <CustomTooltip
+                    placement="top"
+                    tooltipId="gasLimitBadgeTooltip"
+                    tooltipText={widgetState.gasLimit === 0 ? intl.formatMessage({ id: 'udapp.gasLimitBadgeAutoTooltip', defaultMessage: 'Click to set custom gas limit' }) : intl.formatMessage({ id: 'udapp.gasLimitBadgeCustomTooltip', defaultMessage: 'Click to use auto estimated gas' })}
                   >
-                    {widgetState.gasLimit === 0 ? 'auto' : 'custom'}
-                  </span>
-                  <input
-                    type="number"
-                    className="form-control form-control-sm border-0"
-                    placeholder="0000000"
-                    value={widgetState.gasLimit}
-                    onChange={(e) => {
-                      trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitInput', name: e.target.value })
-                      dispatch({ type: 'SET_GAS_LIMIT', payload: parseInt(e.target.value) })
-                    }}
-                    disabled={widgetState.gasLimit === 0}
-                    style={{
-                      backgroundColor: 'var(--bs-body-bg)',
-                      color: themeQuality === 'dark' ? 'white' : 'black',
-                      flex: 1,
-                      paddingLeft: '4rem',
-                      opacity: widgetState.gasLimit === 0 ? 0.6 : 1,
-                      cursor: widgetState.gasLimit === 0 ? 'not-allowed' : 'text'
-                    }}
-                  />
+                    <span
+                      className="p-1 rounded"
+                      style={{
+                        position: 'absolute',
+                        left: '0.5rem',
+                        top: '50%',
+                        transform: 'translateY(-50%)',
+                        backgroundColor: 'var(--custom-onsurface-layer-2)',
+                        color: 'var(--bs-primary)',
+                        cursor: 'pointer',
+                        zIndex: 1
+                      }}
+                      onClick={() => {
+                        const newMode = widgetState.gasLimit === 0 ? 'custom' : 'auto'
+                        trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitToggle', name: newMode, isClick: true })
+                        if (widgetState.gasLimit === 0) {
+                          // Switch from auto to custom - set a default value
+                          dispatch({ type: 'SET_GAS_LIMIT', payload: 3000000 })
+                        } else {
+                          // Switch from custom to auto - set to 0
+                          dispatch({ type: 'SET_GAS_LIMIT', payload: 0 })
+                        }
+                      }}
+                    >
+                      {widgetState.gasLimit === 0 ? 'auto' : 'custom'}
+                    </span>
+                  </CustomTooltip>
+                  {widgetState.gasLimit === 0 ? (
+                    <CustomTooltip
+                      placement="top"
+                      tooltipId="gasLimitInputTooltip"
+                      tooltipText={intl.formatMessage({ id: 'udapp.gasLimitAutoTooltip', defaultMessage: 'Currently using auto estimated gas. Click on auto to set custom gas limit' })}
+                    >
+                      <input
+                        type="number"
+                        className="form-control form-control-sm border-0"
+                        placeholder="0000000"
+                        value={widgetState.gasLimit}
+                        onChange={(e) => {
+                          trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitInput', name: e.target.value })
+                          dispatch({ type: 'SET_GAS_LIMIT', payload: parseInt(e.target.value) })
+                        }}
+                        disabled={widgetState.gasLimit === 0}
+                        style={{
+                          backgroundColor: 'var(--bs-body-bg)',
+                          color: themeQuality === 'dark' ? 'white' : 'black',
+                          flex: 1,
+                          paddingLeft: '4rem',
+                          opacity: widgetState.gasLimit === 0 ? 0.6 : 1,
+                          cursor: widgetState.gasLimit === 0 ? 'not-allowed' : 'text'
+                        }}
+                      />
+                    </CustomTooltip>
+                  ) : (
+                    <input
+                      type="number"
+                      className="form-control form-control-sm border-0"
+                      placeholder="0000000"
+                      value={widgetState.gasLimit}
+                      onChange={(e) => {
+                        trackMatomoEvent?.({ category: 'udapp', action: 'gasLimitInput', name: e.target.value })
+                        dispatch({ type: 'SET_GAS_LIMIT', payload: parseInt(e.target.value) })
+                      }}
+                      disabled={widgetState.gasLimit === 0}
+                      style={{
+                        backgroundColor: 'var(--bs-body-bg)',
+                        color: themeQuality === 'dark' ? 'white' : 'black',
+                        flex: 1,
+                        paddingLeft: '4rem',
+                        opacity: widgetState.gasLimit === 0 ? 0.6 : 1,
+                        cursor: widgetState.gasLimit === 0 ? 'not-allowed' : 'text'
+                      }}
+                    />
+                  )}
                 </div>
               </div>