personal mode

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

@@ -10,8 +10,8 @@
   "settings.useShowGasInEditorText": "Display gas estimates in editor.",
   "settings.displayErrorsText": "Display errors in editor while typing.",
   "settings.matomoAnalytics": "Enable Matomo Analytics. We do not collect personally identifiable information (PII). The info is used to improve the site’s UX & UI. See more about ",
-  "settings.enablePersonalModeText": " Enable Personal Mode for web3 provider. Transaction sent over Web3 will use the web3.personal API.\n",
-  "settings.warnText": "Be sure the endpoint is opened before enabling it.  This mode allows a user to provide a passphrase in the Remix interface without having to unlock the account. Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...). Remix never persists any passphrase",
+  "settings.enablePersonalModeText": " Enable Personal Mode for web3 provider",
+  "settings.enablePersonalModeTooltip": "Transaction sent over Web3 will use the web3.personal API. Be sure the endpoint is opened before enabling it.  This mode allows a user to provide a passphrase in the Remix interface without having to unlock the account. Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...). Remix never persists any passphrase",
   "settings.gitAccessTokenTitle": "Github Credentials",
   "settings.gitAccessTokenText": "The access token is used to publish a Gist and retrieve GitHub contents. You may need to input username/email.",
   "settings.gitAccessTokenText2":"Go to github token page (link below) to create a new token and save it in Remix. Make sure this token has only 'create gist' permission",

libs/remix-ui/settings/src/lib/remix-ui-settings.tsx

@@ -251,12 +251,11 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
               <FormattedMessage id="settings.generateContractMetadataText" />
               <CustomTooltip
                 placement="auto"
-                tooltipId="overlay-tooltip-compile"
+                tooltipId="settings-tooltip-metadata"
                 tooltipText={intl.formatMessage({ id: 'settings.generateContractMetadataTooltip' })}
               >
                 <i className="ml-2 fas fa-info-circle"></i>
               </CustomTooltip>
-              
             </label>
           </div>
           <div className="mt-2 custom-control custom-checkbox mb-1">
@@ -304,11 +303,16 @@ export const RemixUiSettings = (props: RemixUiSettingsProps) => {
           <div className="custom-control custom-checkbox mb-1">
             <input onChange={onchangePersonal} id="personal" type="checkbox" className="custom-control-input" checked={isPersonalChecked} />
             <label className={`form-check-label custom-control-label align-middle ${getTextClass('settings/personal-mode')}`} htmlFor="personal">
-              <i className="fas fa-exclamation-triangle text-warning" aria-hidden="true"></i> <span> </span>
-              <span> </span>
+              <i className="fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>
               <FormattedMessage id="settings.enablePersonalModeText" />
-              &nbsp;
-              <FormattedMessage id="settings.warnText" />
+              <i className="ml-1 fas fa-exclamation-triangle text-warning" aria-hidden="true"></i> 
+              <CustomTooltip
+                placement="auto"
+                tooltipId="settings-tooltip-personalMode"
+                tooltipText={intl.formatMessage({ id: 'settings.enablePersonalModeTooltip' })}
+              >
+                <i className="ml-2 fas fa-info-circle"></i>
+              </CustomTooltip>
             </label>
           </div>
           <div className="custom-control custom-checkbox mb-1">