Improve user page header

[roberto-morado]

fixes #468

CC @iuioiua

[iuioiua]

I think this whole component could be greatly simplified using w-full, text-center and space-y-2 classes and a couple of <p> elements. Flex is likely not needed. WDYT?

[roberto-morado]

What do you think?

[iuioiua]

Suggestions:

1. Make username text larger, maybe text-xl and remove <strong />
2. Maybe put username and GitHub logo on the same line

I'm not certain about these. WDYT?

[iuioiua]

This can still be a little simpler:

    <div class="w-full text-center space-y-2 py-8 px-4">
      <GitHubAvatarImg login={props.login} size={72} />
      <p>
        <strong>{props.login}</strong>
        {props.isSubscribed && (
          <span title="Deno Hunt premium user">{" "}🦕</span>
        )}
      </p>
      <p class="inline-block">
        <a
          href={`https://github.com/${props.login}`}
          aria-label={`${props.login}'s GitHub profile`}
          class={LINK_STYLES}
          target="_blank"
        >
          <IconBrandGithub class="text-sm w-6" />
        </a>
      </p>
    </div>

[roberto-morado]

Let me create a few alternatives from which you can choose and we work from there 👍