Skip to content

Commit 616ef6a

Browse files
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" />
1 parent 614417d commit 616ef6a

File tree

2 files changed

+16
-7
lines changed

2 files changed

+16
-7
lines changed

frontend/islands/GithubUserLink.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// Copyright 2024 the JSR authors. All rights reserved. MIT license.
22
import { useSignal } from "@preact/signals";
3+
import TbBrandGithub from "@preact-icons/tb/TbBrandGithub";
34
import { useEffect } from "preact/hooks";
45
import { User } from "../utils/api_types.ts";
56
import { cachedGitHubLogin } from "../utils/github.ts";
@@ -29,6 +30,14 @@ export function GitHubUserLink({ user }: { user?: User }) {
2930
}
3031

3132
return login.value == ""
32-
? <span>loading...</span>
33-
: <a class="link" href={"https://github.com/" + login.value}>GitHub</a>;
33+
? <span className="text-gray-600">loading...</span>
34+
: (
35+
<a
36+
class="link inline-flex justify-center items-center gap-1"
37+
href={"https://github.com/" + login.value}
38+
>
39+
<TbBrandGithub class="size-4" aria-hidden />
40+
GitHub
41+
</a>
42+
);
3443
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// Copyright 2024 the JSR authors. All rights reserved. MIT license.
2-
import { FullUser, User } from "../../../utils/api_types.ts";
3-
import { AccountNav, AccountNavTab } from "./AccountNav.tsx";
4-
import twas from "twas";
52
import { ComponentChildren } from "preact";
3+
import twas from "twas";
4+
import { AccountNav, AccountNavTab } from "./AccountNav.tsx";
5+
import { FullUser, User } from "../../../utils/api_types.ts";
66
import { GitHubUserLink } from "../../../islands/GithubUserLink.tsx";
77

88
interface AccountLayoutProps {
@@ -16,7 +16,7 @@ export function AccountLayout({ user, active, children }: AccountLayoutProps) {
1616
<div class="grid grid-cols-1 md:grid-cols-5 gap-4">
1717
<div class="gap-4 flex flex-row md:flex-col items-center pr-4 md:pb-8 md:pt-4">
1818
<img
19-
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"
19+
class="rounded-full size-16 md:size-32 lg:size-40 ring-2 ring-offset-1 ring-jsr-cyan-700"
2020
src={user.avatarUrl}
2121
alt="user icon"
2222
/>
@@ -27,7 +27,7 @@ export function AccountLayout({ user, active, children }: AccountLayoutProps) {
2727
<p class="text-xs text-jsr-gray-600">
2828
Created account {twas(new Date(user.createdAt).getTime())}
2929
</p>
30-
<p class="text-xs text-jsr-gray-600">
30+
<p class="text-base mt-2">
3131
<GitHubUserLink user={user} />
3232
</p>
3333
</div>

0 commit comments

Comments
 (0)