update UI

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

@@ -73,6 +73,7 @@
   "udapp.savedContracts": "Pinned Contracts",
   "udapp.NoSavedInstanceText": "No pinned contracts found.",
   "udapp.tooltipTextDelete": "Delete contract",
+  "udapp.tooltipTextUnpin": "Unpin contract",
   "udapp.savedOn": "Pinned On",
   "udapp.filePath": "File Path",
 

libs/remix-ui/run-tab/src/lib/components/universalDappUI.tsx

@@ -257,9 +257,11 @@ export function UniversalDappUI(props: UdappProps) {
         </span>
         <div className="input-group udapp_nameNbuts">
           <div className="udapp_titleText input-group-prepend">
-            <span className="input-group-text udapp_spanTitleText">
-              {props.instance.name} at {shortenAddress(address)} ({props.context})
-            </span>
+            <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappUnpinTooltip" tooltipText={props.isSavedContract ? `Contract: ${props.instance.name},  Address: ${address}, Pin date:  ${new Date(props.instance.savedOn).toUTCString()}` : ''}>
+              <span className="input-group-text udapp_spanTitleText">
+              {props.instance.name} at {shortenAddress(address)} {!props.isSavedContract ? `(${props.context})` : ''}
+              </span>
+            </CustomTooltip>
           </div>
           <div className="btn" style={{padding: '0.15rem'}}>
             <CopyToClipboard tip={intl.formatMessage({id: 'udapp.copy'})} content={address} direction={'top'} />
@@ -268,13 +270,17 @@ export function UniversalDappUI(props: UdappProps) {
             <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappSaveTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText14" />}>
               <i className="far fa-thumbtack p-2" aria-hidden="true" data-id="universalDappUiUdappSave" onClick={saveContract}></i>
             </CustomTooltip>
-          </div> ) : null }
+          </div> ) : ( <div className="btn" style={{padding: '0.15rem', marginLeft: '-0.5rem'}}>
+            <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappUnpinTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextUnpin" />}>
+            <i className="far fa-thumbtack p-2 text-success" aria-hidden="true" data-id="universalDappUiUdappSave" onClick={remove}></i>
+          </CustomTooltip> 
+          </div> ) }
         </div>
-        { !props.isSavedContract ? (<CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappCloseTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText7" />}>
+        { !props.isSavedContract ? ( <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappCloseTooltip" tooltipText={<FormattedMessage id="udapp.tooltipText7" />}>
           <i className="udapp_closeIcon m-1 fas fa-times align-self-center" aria-hidden="true" data-id="universalDappUiUdappClose" onClick={remove}></i>
-        </CustomTooltip>) :
+        </CustomTooltip> ) :
         ( <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappDeleteTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextDelete" />}>
-          <i className="udapp_closeIcon m-1 far fa-trash align-self-center" aria-hidden="true" data-id="universalDappUiUdappDelete" onClick={remove}></i>
+          <i className="udapp_closeIcon m-1 far fa-trash align-self-center text-danger" aria-hidden="true" data-id="universalDappUiUdappDelete" onClick={remove}></i>
         </CustomTooltip> )
         }
       </div>