UI improvements

apps/remix-ide-e2e/src/tests/pinned_contracts.test.ts

@@ -24,13 +24,11 @@ module.exports = {
       .clickLaunchIcon('udapp')
       .click('*[data-id="Deploy - transact (not payable)"]')
       .assert.elementPresent('*[data-id="unpinnedInstance0xd9145CCE52D386f254917e481eB44e9943F39138"]')
-      .assert.not.hasClass('*[data-id="universalDappUiUdappPin"]', 'text-success')
       .click('*[data-id="universalDappUiUdappPin"]')
       .assert.elementPresent('*[data-id="deployAndRunNoInstanceText"]')
       .assert.textContains('*[data-id="deployAndRunNoInstanceText"]', 'Currently you have no unpinned contracts to interact with.')
       .assert.not.elementPresent('*[data-id="NoPinnedInstanceText"]')
       .assert.elementPresent('*[data-id="pinnedInstance0xd9145CCE52D386f254917e481eB44e9943F39138"]')
-      .assert.hasClass('*[data-id="universalDappUiUdappUnpin"]', 'text-success')
     },
   'Interact with pinned contract #group1': function (browser: NightwatchBrowser) {
     browser

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

@@ -96,7 +96,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
           })}
         </div>
       ) : (
-        <span className="mx-2 mt-2 text-dark" data-id="NoPinnedInstanceText">
+        <span className="mx-2 mt-3 alert alert-secondary" data-id="NoPinnedInstanceText">
           <FormattedMessage id="udapp.NoPinnedInstanceText" />
         </span>
       )}
@@ -114,7 +114,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
             tooltipId="deployAndRunClearInstancesTooltip"
             tooltipText={<FormattedMessage id="udapp.deployAndRunClearInstances" />}
           >
-            <i className="mr-1 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance} aria-hidden="true"></i>
+            <i className="mr-1 p-2 udapp_icon far fa-trash-alt" data-id="deployAndRunClearInstances" onClick={clearInstance} aria-hidden="true"></i>
           </CustomTooltip>
         ) : null}
       </div>
@@ -144,7 +144,7 @@ export function InstanceContainerUI(props: InstanceContainerProps) {
           })}
         </div>
       ) : (
-        <span className="mx-2 mt-3 alert alert-warning" data-id="deployAndRunNoInstanceText" role="alert">
+        <span className="mx-2 mt-3 alert alert-secondary" data-id="deployAndRunNoInstanceText" role="alert">
           <FormattedMessage id="udapp.deployAndRunNoInstanceText" />
         </span>
       )}

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

@@ -282,7 +282,7 @@ export function UniversalDappUI(props: UdappProps) {
           </div>
           { props.isPinnedContract ? ( <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="fas fa-thumbtack p-2 text-success" aria-hidden="true" data-id="universalDappUiUdappUnpin" onClick={remove}></i>
+              <i className="fas fa-thumbtack p-2" aria-hidden="true" data-id="universalDappUiUdappUnpin" onClick={remove}></i>
             </CustomTooltip> 
           </div> ) : ( <div className="btn" style={{padding: '0.15rem', marginLeft: '-0.5rem'}}>
             <CustomTooltip placement="top" tooltipClasses="text-nowrap" tooltipId="udapp_udappPinTooltip" tooltipText={<FormattedMessage id="udapp.tooltipTextPin" />}>