feat(acout page): refine (#966)

- add GH icon
- give space between account info and link. because in future if there
are more link it's will be interesting to have such as small section
- change ring color of avatar to fit with the ring in header

<img width="217" alt="Capture d’écran 2025-02-19 à 22 06 17"
src="https://github.com/user-attachments/assets/2b030049-29b1-40d5-8225-1200a8e48a14"
/>
<img width="337" alt="Capture d’écran 2025-02-19 à 22 06 32"
src="https://github.com/user-attachments/assets/c1a7dcb2-2418-4d74-83f4-a3ae40d90287"
/>

Author: AugustinMauroy

frontend/islands/GithubUserLink.tsx

@@ -1,5 +1,6 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
 import { useSignal } from "@preact/signals";
+import TbBrandGithub from "@preact-icons/tb/TbBrandGithub";
 import { useEffect } from "preact/hooks";
 import { User } from "../utils/api_types.ts";
 import { cachedGitHubLogin } from "../utils/github.ts";
@@ -29,6 +30,14 @@ export function GitHubUserLink({ user }: { user?: User }) {
   }
 
   return login.value == ""
-    ? <span>loading...</span>
-    : <a class="link" href={"https://github.com/" + login.value}>GitHub</a>;
+    ? <span className="text-gray-600">loading...</span>
+    : (
+      <a
+        class="link inline-flex justify-center items-center gap-1"
+        href={"https://github.com/" + login.value}
+      >
+        <TbBrandGithub class="size-4" aria-hidden />
+        GitHub
+      </a>
+    );
 }

frontend/routes/account/(_components)/AccountLayout.tsx

@@ -1,8 +1,8 @@
 // Copyright 2024 the JSR authors. All rights reserved. MIT license.
-import { FullUser, User } from "../../../utils/api_types.ts";
-import { AccountNav, AccountNavTab } from "./AccountNav.tsx";
-import twas from "twas";
 import { ComponentChildren } from "preact";
+import twas from "twas";
+import { AccountNav, AccountNavTab } from "./AccountNav.tsx";
+import { FullUser, User } from "../../../utils/api_types.ts";
 import { GitHubUserLink } from "../../../islands/GithubUserLink.tsx";
 
 interface AccountLayoutProps {
@@ -16,7 +16,7 @@ export function AccountLayout({ user, active, children }: AccountLayoutProps) {
     <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
       <div class="gap-4 flex flex-row md:flex-col items-center pr-4 md:pb-8 md:pt-4">
         <img
-          class="rounded-full w-16 h-16 md:h-32 md:w-32 lg:h-40 lg:w-40 ring-2 ring-offset-1 ring-jsr-gray-300"
+          class="rounded-full size-16 md:size-32 lg:size-40 ring-2 ring-offset-1 ring-jsr-cyan-700"
           src={user.avatarUrl}
           alt="user icon"
         />
@@ -27,7 +27,7 @@ export function AccountLayout({ user, active, children }: AccountLayoutProps) {
           <p class="text-xs text-jsr-gray-600">
             Created account {twas(new Date(user.createdAt).getTime())}
           </p>
-          <p class="text-xs text-jsr-gray-600">
+          <p class="text-base mt-2">
             <GitHubUserLink user={user} />
           </p>
         </div>