Make settings view prettier

apps/contract-verification/src/app/components/ConfigInput.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { CustomTooltip } from '@remix-ui/helper'
 
 interface ConfigInputProps {
   label: string
@@ -28,17 +29,40 @@ export const ConfigInput: React.FC<ConfigInputProps> = ({ label, id, secret, ini
     saveResult(value)
   }
 
+  const handleCancel = () => {
+    setEnabled(false)
+    setValue(initialValue)
+  }
+
   return (
-    <div className="form-group">
+    <div className="form-group small mb-0">
-      <label htmlFor={id}>{label}</label>
+      <label className='mt-3' htmlFor={id}>{label}</label>
-      <input type={secret ? 'password' : 'text'} className="form-control mb-2" id={id} placeholder={`Add ${label}`} value={value} onChange={(e) => setValue(e.target.value)} disabled={!enabled} />
       <div className="d-flex flex-row justify-content-start">
-        <button type="button" className="btn btn-secondary mr-3" disabled={enabled} onClick={handleChange}>
+        <input
-          Change
+          type={secret ? 'password' : 'text'}
-        </button>
+          className={`form-control small w-100 ${!enabled ? 'bg-transparent pl-0 border-0' : ''}`}
-        <button type="button" className="btn btn-secondary" disabled={!enabled} onClick={handleSave}>
+          id={id}
-          Save
+          placeholder={`Add ${label}`}
-        </button>
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          disabled={!enabled}
+        />
+
+        { enabled ? (
+          <>
+            <button type="button" className="btn btn-primary btn-sm ml-2" onClick={handleSave}>
+              Save
+            </button>
+            <button type="button" className="btn btn-secondary btn-sm ml-2" onClick={handleCancel}>
+              Cancel
+            </button>
+          </>
+        ) : (
+          <CustomTooltip tooltipText={`Edit ${label}`}>
+            <button type="button" className="btn btn-sm fas fa-pen my-1" style={{ height: '100%' }} disabled={enabled} onClick={handleChange}>
+            </button>
+          </CustomTooltip>
+        )}
       </div>
     </div>
   )

apps/contract-verification/src/app/layouts/Default.tsx

@@ -14,7 +14,6 @@ export const DefaultLayout = ({ children, title, description }: PropsWithChildre
       <NavMenu />
       <div className="my-4 px-3">
         <div>
-          <h2 className="text-center text-uppercase font-weight-bold">{title}</h2>
           <p className="text-center" style={{ fontSize: '0.8rem' }}>
             {description}
           </p>

apps/contract-verification/src/app/views/SettingsView.tsx

@@ -32,19 +32,19 @@ export const SettingsView = () => {
 
       {selectedChain && (
         <div>
-          <div className="pt-2">
+          <div className="p-2 my-2 border">
-            <span className="font-weight-bold">Sourcify</span>
+            <span className="font-weight-bold">Sourcify - {selectedChain.name}</span>
             <ConfigInput label="API URL" id="sourcify-api-url" secret={false} initialValue={chainSettings.verifiers['Sourcify']?.apiUrl ?? ''} saveResult={(result) => handleChange('Sourcify', 'apiUrl', result)} />
             <ConfigInput label="Repo URL" id="sourcify-explorer-url" secret={false} initialValue={chainSettings.verifiers['Sourcify']?.explorerUrl ?? ''} saveResult={(result) => handleChange('Sourcify', 'explorerUrl', result)} />
           </div>
-          <div className="pt-2">
+          <div className="p-2 my-2 border">
-            <span className="font-weight-bold">Etherscan</span>
+            <span className="font-weight-bold">Etherscan - {selectedChain.name}</span>
             <ConfigInput label="API Key" id="etherscan-api-key" secret={true} initialValue={chainSettings.verifiers['Etherscan']?.apiKey ?? ''} saveResult={(result) => handleChange('Etherscan', 'apiKey', result)} />
             <ConfigInput label="API URL" id="etherscan-api-url" secret={false} initialValue={chainSettings.verifiers['Etherscan']?.apiUrl ?? ''} saveResult={(result) => handleChange('Etherscan', 'apiUrl', result)} />
             <ConfigInput label="Explorer URL" id="etherscan-explorer-url" secret={false} initialValue={chainSettings.verifiers['Etherscan']?.explorerUrl ?? ''} saveResult={(result) => handleChange('Etherscan', 'explorerUrl', result)} />
           </div>
-          <div className="pt-2">
+          <div className="p-2 my-2 border">
-            <span className="font-weight-bold">Blockscout</span>
+            <span className="font-weight-bold">Blockscout - {selectedChain.name}</span>
             <ConfigInput label="Instance URL" id="blockscout-api-url" secret={false} initialValue={chainSettings.verifiers['Blockscout']?.apiUrl ?? ''} saveResult={(result) => handleChange('Blockscout', 'apiUrl', result)} />
           </div>
         </div>

apps/remix-ide/src/assets/list.json

@@ -1022,9 +1022,21 @@
       "urls": [
         "dweb:/ipfs/QmS5JdeXtYhGBvdgNTLWuBNHupyP623X4sf43fRbrgiTaA"
       ]
+    },
+    {
+      "path": "soljson-v0.8.27+commit.40a35a09.js",
+      "version": "0.8.27",
+      "build": "commit.40a35a09",
+      "longVersion": "0.8.27+commit.40a35a09",
+      "keccak256": "0x68c7a06651a847fc9a60886a6ba590a2b20d87f2d4f9570bf70fbb2b901e7713",
+      "sha256": "0xd91c08277f801321af4e80958015aea18b41c01d2c6a38310a23014485b0e51c",
+      "urls": [
+        "dweb:/ipfs/QmVTALD1WUQwRvEL19jgwrEFyBJMQmy9z32zvT6TAtYPY1"
+      ]
     }
   ],
   "releases": {
+    "0.8.27": "soljson-v0.8.27+commit.40a35a09.js",
     "0.8.26": "soljson-v0.8.26+commit.8a97fa7a.js",
     "0.8.25": "soljson-v0.8.25+commit.b61c2a91.js",
     "0.8.24": "soljson-v0.8.24+commit.e11b9ed9.js",
@@ -1119,5 +1131,5 @@
     "0.4.0": "soljson-v0.4.0+commit.acd334c9.js",
     "0.3.6": "soljson-v0.3.6+commit.3fc68da5.js"
   },
-  "latestRelease": "0.8.26"
+  "latestRelease": "0.8.27"
 }