Skip to content

Commit 8b77b5c

Browse files
naheel0naheel0
authored
Merge pull request #154 from selina616/fix-login-button-layout
Fix login button layout
2 parents 1515580 + 9d39928 commit 8b77b5c

2 files changed

Lines changed: 32 additions & 30 deletions

File tree

‎src/components/GitHubLoginButton.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,13 @@ import { Github, LogIn, LogOut } from "lucide-react";
55
type GitHubLoginButtonProps = {
66
onBeforeSignIn?: () => void;
77
showScopeNote?: boolean;
8+
compact?: boolean;
89
};
910

1011
export default function GitHubLoginButton({
1112
onBeforeSignIn,
1213
showScopeNote = false,
14+
compact = false,
1315
}: GitHubLoginButtonProps) {
1416
const { data: session, status } = useSession();
1517
const displayName =
@@ -19,37 +21,37 @@ export default function GitHubLoginButton({
1921

2022
if (session) {
2123
return (
22-
<div className="flex flex-wrap items-center gap-2">
23-
<div className="hidden sm:flex items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-2 text-xs font-medium text-emerald-200">
24-
<Github size={14} />
24+
<div className="flex min-w-0 flex-wrap items-center justify-end gap-2">
25+
<div className="hidden min-h-10 items-center gap-2 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-3 py-2 text-xs font-medium text-emerald-200 sm:inline-flex">
26+
<Github size={14} className="shrink-0" />
2527
<span className="max-w-[150px] truncate">{displayName}</span>
2628
</div>
2729
<button
2830
onClick={() => signOut()}
29-
className="inline-flex items-center justify-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:border-white/25 hover:bg-white/10"
31+
className="inline-flex min-h-10 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-sm font-medium leading-none text-white transition-all hover:border-white/25 hover:bg-white/10 sm:px-4 sm:py-2"
3032
>
31-
<LogOut size={14} />
32-
Sign out
33+
<LogOut size={14} className="shrink-0" />
34+
<span>{compact ? "Out" : "Sign out"}</span>
3335
</button>
3436
</div>
3537
);
3638
}
3739

3840
return (
39-
<div className="flex flex-col gap-2">
41+
<div className="flex min-w-0 flex-col items-end gap-2 sm:items-center">
4042
<button
4143
onClick={() => {
4244
onBeforeSignIn?.();
4345
signIn("github");
4446
}}
45-
className="inline-flex items-center justify-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 text-sm font-semibold text-white transition-colors hover:border-white/15 hover:bg-white/[0.07]"
47+
className="inline-flex min-h-10 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full border border-white/10 bg-white/[0.04] px-3 py-1.5 text-sm font-semibold leading-none text-white transition-colors hover:border-white/15 hover:bg-white/[0.07] sm:px-4 sm:py-2"
4648
>
47-
<Github size={15} />
48-
<LogIn size={14} />
49-
Login with GitHub
49+
<Github size={15} className="shrink-0" />
50+
{!compact && <LogIn size={14} className="shrink-0" />}
51+
<span>{compact ? "Login" : "Login with GitHub"}</span>
5052
</button>
5153
{showScopeNote && (
52-
<p className="text-xs text-neutral-400">
54+
<p className="max-w-[220px] text-right text-xs leading-snug text-neutral-400 sm:max-w-xs sm:text-left">
5355
We request GitHub’s “repo” scope to read private repo contents for
5456
README generation.
5557
</p>

‎src/components/layout/Navbar.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,62 +21,62 @@ export const Navbar = ({
2121

2222
return (
2323
<nav
24-
className={`fixed top-0 w-full z-50 transition-all duration-300 ${
24+
className={`fixed top-0 z-50 w-full transition-all duration-300 ${
2525
scrolled
26-
? "bg-black/80 backdrop-blur-md border-b border-white/10 py-3"
26+
? "border-b border-white/10 bg-black/80 py-3 backdrop-blur-md"
2727
: "bg-transparent py-5"
2828
}`}
2929
>
30-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
31-
<div className="flex items-center">
32-
<div className="flex flex-1 items-center">
30+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
31+
<div className="flex min-w-0 items-center">
32+
<div className="flex min-w-0 flex-1 items-center">
3333
{/* Brand Logo */}
3434
<Link
3535
href="/"
36-
className="flex items-center gap-3 group cursor-pointer"
36+
className="group flex min-w-0 cursor-pointer items-center gap-3"
3737
aria-label="ReadmeGenAI Home"
3838
>
39-
<div className="relative w-9 h-9 bg-white rounded-lg flex items-center justify-center overflow-hidden transition-transform group-hover:rotate-3">
40-
<span className="text-black font-black text-xl">R</span>
39+
<div className="relative flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-white transition-transform group-hover:rotate-3">
40+
<span className="text-xl font-black text-black">R</span>
4141
</div>
42-
<span className="font-bold text-xl tracking-tighter">
42+
<span className="truncate text-lg font-bold tracking-tighter sm:text-xl">
4343
ReadmeGenAI
4444
</span>
4545
</Link>
4646
</div>
4747

4848
{/* Desktop Menu */}
49-
<div className="hidden md:flex items-center justify-center space-x-1">
49+
<div className="hidden items-center justify-center space-x-1 md:flex">
5050
{links.map((link) => (
5151
<a
5252
key={link.name}
5353
href={link.href}
54-
className="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors"
54+
className="px-4 py-2 text-sm font-medium text-gray-400 transition-colors hover:text-white"
5555
>
5656
{link.name}
5757
</a>
5858
))}
5959
</div>
6060

6161
{/* Action Buttons */}
62-
<div className="flex flex-1 items-center justify-end gap-3">
63-
<GitHubLoginButton />
62+
<div className="flex min-w-0 flex-1 items-center justify-end gap-2 sm:gap-3">
63+
<GitHubLoginButton compact />
6464

6565
{/* Using an anchor tag with button styling for the GitHub Link */}
6666
<a
6767
href="https://github.com/BeyteFlow/ReadmeGenAI"
6868
target="_blank"
6969
rel="noopener noreferrer"
70-
className="hidden sm:flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 hover:border-white/30 hover:bg-white/10 transition-all text-xs font-medium"
70+
className="hidden min-h-10 shrink-0 items-center gap-2 whitespace-nowrap rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-xs font-medium transition-all hover:border-white/30 hover:bg-white/10 sm:flex"
7171
>
72-
<Github size={14} />
72+
<Github size={14} className="shrink-0" />
7373
<span>Star on GitHub</span>
7474
</a>
7575

7676
{/* Mobile Menu Toggle using your custom Button component (Ghost variant) */}
7777
<Button
7878
variant="ghost"
79-
className="md:hidden p-2 px-2"
79+
className="min-h-10 shrink-0 p-2 px-2 md:hidden"
8080
onClick={() => setIsMenuOpen(!isMenuOpen)}
8181
aria-label="Toggle Menu"
8282
>
@@ -88,7 +88,7 @@ export const Navbar = ({
8888

8989
{/* Mobile Menu Drawer */}
9090
{isMenuOpen && (
91-
<div className="md:hidden bg-black border-b border-white/10 px-4 py-6 space-y-4 animate-in slide-in-from-top duration-300">
91+
<div className="space-y-4 border-b border-white/10 bg-black px-4 py-6 animate-in slide-in-from-top duration-300 md:hidden">
9292
{links.map((link) => (
9393
<a
9494
key={link.name}
@@ -106,7 +106,7 @@ export const Navbar = ({
106106
rel="noopener noreferrer"
107107
className="w-full"
108108
>
109-
<Button variant="primary" className="w-full justify-center mt-4">
109+
<Button variant="primary" className="mt-4 w-full justify-center">
110110
<Github size={18} /> Star our Repo
111111
</Button>
112112
</a>

0 commit comments

Comments
 (0)