Improve design

This commit is contained in:
Sebastien Castiel
2023-12-14 17:15:28 -05:00
parent 7e279a535d
commit aa95497aab
5 changed files with 7 additions and 7 deletions

View File

@@ -15,7 +15,7 @@ export function GroupTabs({ groupId }: Props) {
return ( return (
<Tabs <Tabs
value={value} value={value}
className="mb-4 [&>*]:border" className="[&>*]:border"
onValueChange={(value) => { onValueChange={(value) => {
router.push(`/groups/${groupId}/${value}`) router.push(`/groups/${groupId}/${value}`)
}} }}

View File

@@ -35,8 +35,8 @@ export default async function GroupLayout({
return ( return (
<> <>
<div className="flex flex-col sm:flex-row justify-between"> <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-3">
<h1 className="font-bold text-2xl mb-4"> <h1 className="font-bold text-2xl">
<Link href={`/groups/${groupId}`}>{group.name}</Link> <Link href={`/groups/${groupId}`}>{group.name}</Link>
</h1> </h1>

View File

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react'
export default function GroupsLayout({ children }: PropsWithChildren<{}>) { export default function GroupsLayout({ children }: PropsWithChildren<{}>) {
return ( return (
<main className="flex-1 max-w-screen-md w-full mx-auto p-4 flex flex-col gap-2"> <main className="flex-1 max-w-screen-md w-full mx-auto px-4 py-6 flex flex-col gap-6">
{children} {children}
</main> </main>
) )

View File

@@ -11,8 +11,8 @@ export const metadata: Metadata = {
export default async function GroupsPage() { export default async function GroupsPage() {
return ( return (
<> <>
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-baseline mb-2"> <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 items-start">
<h1 className="font-bold text-2xl mb-4"> <h1 className="font-bold text-2xl">
<Link href="/groups">Recently visited groups</Link> <Link href="/groups">Recently visited groups</Link>
</h1> </h1>
<Button asChild> <Button asChild>

View File

@@ -65,7 +65,7 @@ export function RecentGroupList() {
} }
return ( return (
<ul className="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3"> <ul className="grid grid-cols-1 gap-2 sm:grid-cols-3">
{state.groups.map((group) => { {state.groups.map((group) => {
const details = const details =
state.status === 'complete' state.status === 'complete'