improve debug struct UI

[carletex]

First iteration on #725

1. Fix padding

This odd padding won't let me sleep haha (also making sure the inner structs padding looks good too)

Now:

As Shiv mentioned, maybe it's a good idea to have a label on the value input too.

Fix accordion style

In the current version, the text felt a bit "lost"

Made a couple of tweaks:

1. add some background
   
2. Add a border. If not, the inner struct will have the same problem (its background is the same as the parent bg). A border fixed it
   

---

We can add more stuff here, or keep iterating in another PR.

[rin-st]

looks much better!

[Pabl0cks]

Small changes but big visual improvement! 🙌🔥

Left a couple of nitpick comments to save some future sleep problems haha. Feel free to ignore 👌

[technophile-04]

Tysm !! Love this, it looks soo much better now!!

Agree with all the review comments from Pablo 🙌

As Shiv mentioned, maybe it's a good idea to have a label on the value input too.

Maybe something like this :

Its just so that people can easily review while sending final transaction and don't loose what that last input is

We can update :

scaffold-eth-2/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx

Line 102 in a5eedbd

{abiFunction.stateMutability === "payable" ? (

With this :

 {abiFunction.stateMutability === "payable" ? (
<div className="flex flex-col gap-1 w-full">
  <div className="flex items-center">
    <span className="text-xs font-medium mr-2 leading-none">value to send</span>
    <span className="block text-xs font-extralight leading-none">wei</span>
  </div>
  <IntegerInput
    value={txValue}
    onChange={updatedTxValue => {
      setDisplayedTxResult(undefined);
      setTxValue(updatedTxValue);
    }}
    placeholder="value (wei)"
  />
</div>
) : null}

[carletex]

Thanks all for the review! Appreciate the nitpicking @Pabl0cks

Since we are at it, fixed a few little things:

• More subtle color for the struct title
• Align internal padding with inputs
• Spacing between label / input or struct (1 => 1.5)
• Increase left padding of label (if not, because of the input/struct border radius, felt that was non-aligned)
• The difference of the radius (between inputs and structs) still bugs me, but cant have full radius on accordions.

• Added the label to value fields (thanks for the snippet @technophile-04 !!)
• I used "payable value". Not sure if the best option, but I wanted the "payable" word to be there.

[carletex]

Oh, forgot:

Better formatting for the tuple index indicator & buttons (+ / -) colors

[technophile-04]

Since we are at it, fixed a few little things:

It just get better and better, love it !!

---

Really sorry, just pushed a very small nitpick 7c766d0, doesn't change any thing on light just affects the badge color in dark mode :

Before	After

Didn't change + / - btn color to bg-base-300 since because of shadow they looks good 🙌

But incase if we don't like we can always update / iterate in future PR, Tysm !!

[Pabl0cks]

Good job! We got a GREAT debug struct UI now 🚀🚀