Finish user onboarding page #12
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Please note that you have based this branch off the not-yet-merged author-viewpoint branch. Doing this may result in merge conflicts as you continue to change the author-viewpoint branch. It is recommended you rebase this branch onto a more stable branch (typically should be main), and do so for all future branches. In this case, however, since main is quite outdated, you may choose to rebase onto dev.
| 歡迎來到 CommonGround | ||
| </h1> | ||
| <form onSubmit={form.onSubmit(setSubmittedValues)}> | ||
| <NicknameInput form={form} inputValueName="nickname" /> |
There was a problem hiding this comment.
I personally don't think NicknameInput and UserNameInput should be their own components. Since they neither contain much logic nor is reusable, I believe you can just merge it into this compoenent.
| import { useState, useEffect } from "react"; | ||
| import NicknameInput from "@/components/Onboarding/NicknameInput"; | ||
| import UserNameInput from "./UserNameInput"; | ||
| import { PaperAirplaneIcon } from "@heroicons/react/24/outline"; |
There was a problem hiding this comment.
The original icon comes from outline/20
There was a problem hiding this comment.
I recently encountered a problem importing 20/outline. I think we can debug that in the weekly meeting.
| <form onSubmit={form.onSubmit(setSubmittedValues)}> | ||
| <NicknameInput form={form} inputValueName="nickname" /> | ||
| <UserNameInput form={form} inputValueName="username" /> | ||
| <Button |
There was a problem hiding this comment.
The original design did not follow Mantine's design system (will fix in Figma ver 0.2), so for now an sm button will suffice
| required | ||
| {...form.getInputProps(inputValueName)} | ||
| key={form.key(inputValueName)} | ||
| classNames={{ |
There was a problem hiding this comment.
The styling follows Mantine's xs size
There was a problem hiding this comment.
I've tried to apply size="sm" to the TextInput, but the text in the label and description appears to be "really" small. I think "md" fits the Figma design more.
| required | ||
| {...form.getInputProps(inputValueName)} | ||
| key={form.key(inputValueName)} | ||
| classNames={{ |
There was a problem hiding this comment.
The styling follows Mantine's xs size
| export const metadata: Metadata = { | ||
| title: "CommonGround - Onboarding", | ||
| keywords: "onboarding, user, registration", | ||
| description: "CommonGround onboarding page for new users", |
There was a problem hiding this comment.
The description should be in Chinese as our users should mostly be based in Taiwan
| import { useForm } from "@mantine/form"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: "CommonGround - Onboarding", |
There was a problem hiding this comment.
The title should be in Chinese as our users should mostly be based in Taiwan
The onboarding page for users who haven't registered before to set up their username and nickname.