Skip to content

Commit 3417ebc

Browse files
rootcode-creatorrootcode-creator
committed
fix(ChatForm, MessageTable, TopNav, Home): enhance UI components with improved styling and layout
1 parent 1469a39 commit 3417ebc

4 files changed

Lines changed: 132 additions & 43 deletions

File tree

‎src/app/members/[userId]/chat/ChatForm.tsx‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,18 @@ import {
77
} from "@/lib/schemas/MessageSchema";
88
import { handleFormServerErrors } from "@/lib/util";
99
import { zodResolver } from "@hookform/resolvers/zod";
10-
import { Button, Input } from "@heroui/react";
10+
import { Input } from "@heroui/react";
1111
import {
1212
useParams,
1313
useRouter,
1414
} from "next/navigation";
1515
import React from "react";
1616
import { useForm } from "react-hook-form";
17-
import { HiPaperAirplane } from "react-icons/hi2";
17+
import {
18+
HiOutlineMicrophone,
19+
HiOutlinePlus,
20+
} from "react-icons/hi2";
21+
import { BsEmojiSmile } from "react-icons/bs";
1822

1923
export default function ChatForm() {
2024
const router = useRouter();
@@ -49,29 +53,51 @@ export default function ChatForm() {
4953
onSubmit={handleSubmit(onSubmit)}
5054
className="w-full"
5155
>
52-
<div className="flex items-center gap-2">
56+
<div className="w-full">
5357
<Input
5458
fullWidth
5559
placeholder="Type a message"
56-
variant="faded"
60+
variant="flat"
5761
classNames={{
62+
base: "w-full",
5863
inputWrapper:
59-
"border border-default-300 data-[hover=true]:border-default-400 group-data-[focus=true]:border-primary",
64+
"h-14 rounded-full border border-black/20 bg-default-50 px-2 shadow-none data-[hover=true]:bg-default-100 group-data-[focus=true]:border-black/25",
65+
input:
66+
"text-base text-default-700 placeholder:text-default-500",
67+
innerWrapper: "gap-2",
6068
}}
69+
startContent={
70+
<div className="flex items-center gap-3 text-default-700 pl-1">
71+
<button
72+
type="button"
73+
aria-label="Add"
74+
className="inline-flex items-center justify-center"
75+
>
76+
<HiOutlinePlus size={20} />
77+
</button>
78+
<button
79+
type="button"
80+
aria-label="Emoji"
81+
className="inline-flex items-center justify-center"
82+
>
83+
<BsEmojiSmile size={18} />
84+
</button>
85+
</div>
86+
}
87+
endContent={
88+
<button
89+
type="submit"
90+
aria-label="Send message"
91+
disabled={!isValid || isSubmitting}
92+
className="inline-flex items-center justify-center text-default-700 pr-1 disabled:text-default-400"
93+
>
94+
<HiOutlineMicrophone size={20} />
95+
</button>
96+
}
6197
{...register("text")}
6298
isInvalid={!!errors.text}
6399
errorMessage={errors.text?.message}
64100
/>
65-
<Button
66-
type="submit"
67-
isIconOnly
68-
color="default"
69-
radius="full"
70-
isLoading={isSubmitting}
71-
isDisabled={!isValid || isSubmitting}
72-
>
73-
<HiPaperAirplane size={18} />
74-
</Button>
75101
</div>
76102
<div className="flex flex-col">
77103
{errors.root?.serverError && (

‎src/app/messages/MessageTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export default function MessageTable({ initialMessages,
122122
color="default"
123123
variant="bordered"
124124
radius="md"
125-
className="border-2 border-sky-300 bg-sky-50 text-sky-800 font-semibold min-w-40 hover:bg-sky-100 hover:border-sky-400 focus-visible:ring-2 focus-visible:ring-sky-200 disabled:bg-default-100 disabled:border-default-200 disabled:text-default-400"
125+
className="rounded-xl border border-black/20 bg-default-50 px-6 py-2 text-base font-semibold text-black hover:bg-black/5 min-w-36 disabled:bg-default-100 disabled:border-black/10 disabled:text-default-400"
126126
isLoading={loadingMore}
127127
isDisabled={!hasMore}
128128
onClick={loadMore}

‎src/app/page.tsx‎

Lines changed: 88 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,100 @@
11
import { auth } from "@/auth";
22
import Link from "next/link";
3+
import Image from "next/image";
34

45
export default async function Home() {
56
const session = await auth();
67

78
return (
8-
<div className="flex flex-col justify-center items-center mt-20 gap-6 text-default">
9-
<h1 className="text-4xl font-bold">
10-
Welcome to Match Vault
9+
<div className="mx-auto flex w-full max-w-6xl flex-col items-center px-6 pb-16 pt-14 text-default">
10+
<p className="text-sm font-semibold uppercase tracking-[0.22em] text-default-500">
11+
Find your person
12+
</p>
13+
14+
<h1 className="mt-4 text-center text-5xl font-semibold leading-tight tracking-tight text-default-900 md:text-7xl">
15+
MatchVault
1116
</h1>
12-
{session ? (
13-
<Link
14-
href="/members"
15-
className="inline-flex items-center justify-center rounded-xl border border-black/20 px-6 py-2 text-lg font-medium hover:bg-black/5"
16-
>
17-
Continue
18-
</Link>
19-
) : (
20-
<div className="flex flex-row gap-4">
21-
<Link
22-
href="/login"
23-
className="inline-flex items-center justify-center rounded-xl border border-black/20 px-6 py-2 text-lg font-medium hover:bg-black/5"
24-
>
25-
Login
26-
</Link>
27-
<Link
28-
href="/register"
29-
className="inline-flex items-center justify-center rounded-xl border border-black/20 px-6 py-2 text-lg font-medium hover:bg-black/5"
30-
>
31-
Register
32-
</Link>
17+
18+
<p className="mt-4 max-w-3xl text-center text-2xl text-default-800 md:text-4xl">
19+
Amazing matches. Genuine conversations.
20+
</p>
21+
22+
<p className="mt-5 max-w-3xl text-center text-lg text-default-600">
23+
Meet singles nearby, connect over what matters, and turn great chats into real dates.
24+
</p>
25+
26+
<div className="mt-8 flex flex-wrap items-center justify-center gap-4">
27+
{session ? (
28+
<>
29+
<Link
30+
href="/members"
31+
className="inline-flex min-w-[150px] items-center justify-center rounded-full bg-blue-600 px-8 py-3 text-xl font-medium text-white transition hover:bg-blue-700"
32+
>
33+
Start matching
34+
</Link>
35+
<Link
36+
href="/messages"
37+
className="inline-flex min-w-[130px] items-center justify-center rounded-full border border-blue-600 px-8 py-3 text-xl font-medium text-blue-600 transition hover:bg-blue-50"
38+
>
39+
Messages
40+
</Link>
41+
</>
42+
) : (
43+
<>
44+
<Link
45+
href="/register"
46+
className="inline-flex min-w-[150px] items-center justify-center rounded-full bg-blue-600 px-8 py-3 text-xl font-medium text-white transition hover:bg-blue-700"
47+
>
48+
Join free
49+
</Link>
50+
<Link
51+
href="/login"
52+
className="inline-flex min-w-[130px] items-center justify-center rounded-full border border-blue-600 px-8 py-3 text-xl font-medium text-blue-600 transition hover:bg-blue-50"
53+
>
54+
Sign in
55+
</Link>
56+
</>
57+
)}
58+
</div>
59+
60+
<div className="mt-12 w-full max-w-4xl rounded-[2rem] border border-black/10 bg-white/80 p-6 shadow-sm md:p-8">
61+
<div className="flex flex-col items-center gap-5">
62+
<div className="flex items-center justify-center">
63+
<Image
64+
src="/images/f1.jpg"
65+
alt="Match profile"
66+
width={112}
67+
height={112}
68+
className="h-24 w-24 rounded-full border-4 border-white object-cover shadow-sm md:h-28 md:w-28"
69+
/>
70+
<Image
71+
src="/images/m1.jpg"
72+
alt="Match profile"
73+
width={112}
74+
height={112}
75+
className="-ml-5 h-24 w-24 rounded-full border-4 border-white object-cover shadow-sm md:h-28 md:w-28"
76+
/>
77+
<Image
78+
src="/images/f2.jpg"
79+
alt="Match profile"
80+
width={112}
81+
height={112}
82+
className="-ml-5 h-24 w-24 rounded-full border-4 border-white object-cover shadow-sm md:h-28 md:w-28"
83+
/>
84+
<Image
85+
src="/images/m2.jpg"
86+
alt="Match profile"
87+
width={112}
88+
height={112}
89+
className="-ml-5 h-24 w-24 rounded-full border-4 border-white object-cover shadow-sm md:h-28 md:w-28"
90+
/>
91+
</div>
92+
<p className="max-w-2xl text-center text-base text-default-600 md:text-lg">
93+
Thousands of meaningful introductions start with one hello.
94+
Your next favorite person could be one swipe away.
95+
</p>
3396
</div>
34-
)}
97+
</div>
3598
</div>
3699
);
37100
}

‎src/components/navbar/TopNav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,15 +96,15 @@ export default function TopNav({
9696
as={Link}
9797
href="/login"
9898
variant="bordered"
99-
className="min-w-[96px] h-10 rounded-2xl text-slate-900 font-medium bg-white/95 border border-white/80 shadow-sm hover:bg-white hover:shadow-md active:scale-[0.99] transition"
99+
className="min-w-[96px] h-10 rounded-xl border border-white/80 px-6 text-base font-semibold text-slate-900 bg-white/95 hover:bg-white/90 transition"
100100
>
101101
Login
102102
</Button>
103103
<Button
104104
as={Link}
105105
href="/register"
106106
variant="bordered"
107-
className="min-w-[112px] h-10 rounded-2xl text-slate-900 font-medium bg-white/95 border border-white/80 shadow-sm hover:bg-white hover:shadow-md active:scale-[0.99] transition"
107+
className="min-w-[112px] h-10 rounded-xl border border-white/80 px-6 text-base font-semibold text-slate-900 bg-white/95 hover:bg-white/90 transition"
108108
>
109109
Register
110110
</Button>

0 commit comments

Comments
 (0)