Merge pull request #37 from namidapoo/style/header

style: ヘッダーUI調整
namidapoo · Jan 1, 2025 · 258e01b · 258e01b
2 parents 26537c6 + b699581
commit 258e01b
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 18 deletions.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -23,12 +23,8 @@ const RootLayout: FC<Readonly<Props>> = ({ children }) => {
 					enableSystem
 					disableTransitionOnChange
 				>
-					<div className="flex flex-col h-dvh">
-						<Header />
-						<div className="flex-grow p-4 md:px-6 overflow-auto">
-							{children}
-						</div>
-					</div>
+					<Header />
+					<main className="mt-16 p-4 md:px-6">{children}</main>
 				</ThemeProvider>
 			</body>
 		</html>

diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -6,7 +6,7 @@ export const runtime = "edge";
 
 export default function NotFound() {
 	return (
-		<div className="flex h-full flex-col items-center justify-center bg-background text-foreground">
+		<div className="flex min-h-dvh -mt-24 flex-col items-center justify-center bg-background text-foreground">
 			<div className="space-y-4 text-center">
 				<h1 className="font-extrabold text-4xl tracking-tight lg:text-5xl">
 					404

diff --git a/app/page.tsx b/app/page.tsx
@@ -10,7 +10,7 @@ export const runtime = "edge";
 
 export default async function Home() {
 	return (
-		<div className="grid grid-cols-1 md:grid-cols-3 gap-8 h-full pt-24 px-4 text-accent-foreground md:items-center justify-items-center">
+		<div className="grid grid-cols-1 md:grid-cols-3 gap-8 h-full pt-24 px-4 text-accent-foreground md:items-center justify-items-center -mt-16">
 			<div className="col-span-1 w-full max-w-md text-center space-y-2">
 				<div className="space-y-8">
 					<h1 className="font-bold text-2xl text-blue-600 lg:text-5xl">

diff --git a/app/recap/[user]/error.tsx b/app/recap/[user]/error.tsx
@@ -7,7 +7,7 @@ export const runtime = "edge";
 
 export default function ErrorPage() {
 	return (
-		<div className="flex h-full flex-col items-center justify-center bg-background text-foreground">
+		<div className="flex min-h-dvh -mt-24 flex-col items-center justify-center bg-background text-foreground">
 			<div className="space-y-4 text-center">
 				<p className="text-lg">ユーザーの情報を取得できませんでした。</p>
 				<Separator className="mx-auto w-40" />

diff --git a/app/recap/components/header/header.tsx b/app/recap/components/header/header.tsx
@@ -19,14 +19,14 @@ export const Header: FC = () => {
 		<SessionProvider>
 			<header
 				className={cn(
-					"flex h-16 items-center justify-between bg-background border-b dark:shadow-current p-6",
+					"fixed top-0 left-0 right-0 flex h-16 items-center justify-between bg-background border-b dark:shadow-current px-6 py-4 z-50",
 					isOnTop && "hidden",
 				)}
 			>
 				<div className="flex items-center gap-2">
 					<Breadcrumbs />
 				</div>
-				<div className="flex items-center gap-6">
+				<div className="flex items-center gap-4">
 					<Link
 						href="https://github.com/namidapoo/dev-recap"
 						target="_blank"
@@ -35,15 +35,15 @@ export const Header: FC = () => {
 						<Image
 							src={GitHubWhite}
 							alt="GitHub"
-							width={20}
-							height={20}
+							width={30}
+							height={30}
 							className="hidden dark:block"
 						/>
 						<Image
 							src={GitHubBlack}
 							alt="GitHub"
-							width={20}
-							height={20}
+							width={30}
+							height={30}
 							className="dark:hidden"
 						/>
 					</Link>

diff --git a/app/recap/components/user-button.tsx b/app/recap/components/user-button.tsx
@@ -21,9 +21,9 @@ export const UserButton: FC = () => {
 				<DropdownMenuTrigger asChild>
 					<Button
 						variant="ghost"
-						className="relative h-8 w-8 border rounded-full"
+						className="relative h-10 w-10 border rounded-full"
 					>
-						<Avatar className="h-8 w-8">
+						<Avatar className="h-9 w-9">
 							{session.user.image && (
 								<AvatarImage
 									src={session.user.image}

diff --git a/app/recap/loading.tsx b/app/recap/loading.tsx
@@ -3,7 +3,7 @@ export const runtime = "edge";
 export default function Loader() {
 	return (
 		<div
-			className="flex h-full items-center justify-center"
+			className="flex min-h-dvh -mt-24 items-center justify-center"
 			aria-label="読み込み中"
 		>
 			<div className="h-10 w-10 animate-spin rounded-full border-4 border-blue-700 border-t-transparent" />