API Key Field Enhancement: Replaced Show/Hide button with Eye ReactIcons

[rjwignar]

This fixes #552
As a followup to #530,
I replaced the Show/Hide Button with the IoMdEye/IoMdEyeOff react icons:

I modelled the behaviour based on what I observed on Facebook Messenger (show 'Eye On' when text is obscured, show 'Eye Off' when text is visible:

[Amnish04]

@rjwignar Looks pretty good.

I was wondering maybe we should also set a title to this button saying "Show" or "Hide" based on its state.

If we don't want a visual indication, it should at least have an aria-label

[kliu57]

Just tested this. Works great!

[Amnish04]

And I think we should probably be using an IconButton now

<IconButton
  variant={"ghost"}
  size={buttonSize}
  icon={show ? <IoMdEyeOff /> : <IoMdEye />}
  onClick={() => setShow(!show)}
  aria-label={show ? "Hide" : "Show"} // This is not needed if we are providing a title, but the linter screams if we don't have this on an IconButton
  title={show ? "Hide" : "Show"}
/>

[cloudflare-workers-and-pages]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	848a50c
Status:	✅  Deploy successful!
Preview URL:	https://b734ba37.console-overthinker-dev.pages.dev
Branch Preview URL:	https://issue-552.console-overthinker-dev.pages.dev

View logs

[rjwignar]

And I think we should probably be using an IconButton now

<IconButton
  variant={"ghost"}
  size={buttonSize}
  icon={show ? <IoMdEyeOff /> : <IoMdEye />}
  onClick={() => setShow(!show)}
  aria-label={show ? "Hide" : "Show"} // This is not needed if we are providing a title, but the linter screams if we don't have this on an IconButton
  title={show ? "Hide" : "Show"}
/>

Thanks for your suggestions, @Amnish04. I recently committed them to this PR. I kept the aria-label for accessibility reasons.
Please let me know if additional changes are required

[Amnish04]

@rjwignar Thanks for the changes. Looks good now!

[rjwignar]

Comparison of final changes pre-rebase and post-rebase (and force-push) here for reference.