Modernize create community form with card-based layout and visual elements#5
Modernize create community form with card-based layout and visual elements#5
Conversation
✅ Deploy Preview for confhub ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Co-authored-by: Balastrong <7253929+Balastrong@users.noreply.github.com>
Co-authored-by: Balastrong <7253929+Balastrong@users.noreply.github.com>
Co-authored-by: Balastrong <7253929+Balastrong@users.noreply.github.com>
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the Create Community form with a modern, polished UI design. The changes transform a simple form into a visually appealing, card-based layout with icons, better spacing, and helpful descriptions.
Key changes:
- Replaced basic form layout with a card-based design featuring icons and visual hierarchy
- Moved the page heading from the route component into the form component itself
- Enhanced form fields with placeholder text, help text, and iconography
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/routes/communities/create.tsx | Removed heading and layout classes, delegating presentation to the form component |
| src/components/community/create-community-form.tsx | Complete UI redesign with card-based layout, icons, enhanced spacing, and descriptive help text |
| /> | ||
| <p className="text-xs text-muted-foreground"> |
There was a problem hiding this comment.
The help text for the description field should be associated with the textarea using aria-describedby for screen reader accessibility. Add an id to this paragraph (e.g., 'description-help') and reference it with aria-describedby='description-help' on the Textarea component at line 84.
| /> | |
| <p className="text-xs text-muted-foreground"> | |
| aria-describedby="description-help" | |
| /> | |
| <p id="description-help" className="text-xs text-muted-foreground"> |
| /> | ||
| <p className="text-xs text-muted-foreground"> |
There was a problem hiding this comment.
The help text for the logoUrl field should be associated with the input using aria-describedby for screen reader accessibility. Add an id to this paragraph (e.g., 'logoUrl-help') and reference it with aria-describedby='logoUrl-help' on the Input component at line 110.
| /> | |
| <p className="text-xs text-muted-foreground"> | |
| aria-describedby="logoUrl-help" | |
| /> | |
| <p id="logoUrl-help" className="text-xs text-muted-foreground"> |
| /> | ||
| <p className="text-xs text-muted-foreground"> |
There was a problem hiding this comment.
The help text for the homeUrl field should be associated with the input using aria-describedby for screen reader accessibility. Add an id to this paragraph (e.g., 'homeUrl-help') and reference it with aria-describedby='homeUrl-help' on the Input component at line 127.
| /> | |
| <p className="text-xs text-muted-foreground"> | |
| aria-describedby="homeUrl-help" | |
| /> | |
| <p id="homeUrl-help" className="text-xs text-muted-foreground"> |
| <Card className="shadow-lg"> | ||
| <CardHeader> | ||
| <CardTitle className="flex items-center gap-2"> | ||
| <Image className="h-5 w-5" /> |
There was a problem hiding this comment.
[nitpick] The Image icon from lucide-react is used for both the card title (line 100) and the Logo URL label (line 107). Consider using a different icon for one of these contexts to improve visual distinction. For example, use 'Palette' or 'Paintbrush' for the card title to represent branding more broadly.
| {createCommunityMutation.isPending ? ( | ||
| <> | ||
| <Sparkles className="mr-2 h-4 w-4 animate-spin" /> | ||
| <Loader2 className="mr-2 h-4 w-4 animate-spin" /> |
The create community form had a basic, plain appearance that didn't match the visual quality of other forms in the application.
Changes
UI Structure
Form Improvements
InputtoTextareafor multi-line contentLayout
Screenshots
Empty state:
Filled state:
Form now matches the design patterns established in
/events/submit.Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
dl.deno.landnode /home/REDACTED/work/confhub/confhub/node_modules/.bin/../vite/bin/vite.js dev(dns block)netlifind.netlify.appnode /home/REDACTED/work/confhub/confhub/node_modules/.bin/../vite/bin/vite.js dev(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
Created from VS Code via the GitHub Pull Request extension.
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.