Skip to content

Adjust ui for brief onboarding #1144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
elie222 merged 2 commits into from
Dec 31, 2025
Merged

Adjust ui for brief onboarding #1144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd6393c
adjust ui
elie222 Dec 31, 2025
11da0ed
adjust ui
elie222 Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ Learn more in our [docs](https://docs.getinboxzero.com).
- [Prisma](https://www.prisma.io/)
- [Upstash](https://upstash.com/)
- [Turborepo](https://turbo.build/)
- [Popsy Illustrations](https://popsy.co/)

## Star History

Expand Down
105 changes: 52 additions & 53 deletions apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
"use client";

import { CardFooter, Card } from "@/components/ui/card";
import {
CardContent,
CardHeader,
CardFooter,
CardTitle,
CardDescription,
} from "@/components/ui/card";
import { MessageText } from "@/components/Typography";
MessageText,
SectionDescription,
TypographyH3,
} from "@/components/Typography";
import { ConnectCalendar } from "@/app/(app)/[emailAccountId]/calendars/ConnectCalendar";
import { UserIcon, MailIcon, LightbulbIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
Expand All @@ -16,9 +14,9 @@ import {
ItemContent,
ItemDescription,
ItemGroup,
ItemMedia,
ItemTitle,
} from "@/components/ui/item";
import Image from "next/image";

export function BriefsOnboarding({
emailAccountId,
Expand All @@ -32,53 +30,54 @@ export function BriefsOnboarding({
isEnabling?: boolean;
}) {
return (
<div className="mx-4 mt-10 max-w-2xl md:mx-auto">
<CardHeader>
<CardTitle>Meeting Briefs</CardTitle>
<CardDescription>
<Card className="mx-4 mt-10 max-w-2xl p-6 md:mx-auto">
<Image
src="/images/illustrations/communication.svg"
alt="Meeting Briefs"
width={200}
height={200}
className="mx-auto dark:brightness-90 dark:invert"
unoptimized
/>

<div className="text-center">
<TypographyH3 className="mt-2">Meeting Briefs</TypographyH3>
<SectionDescription className="mx-auto mt-2 max-w-prose">
Receive email briefings before meetings with external guests.
</CardDescription>
</CardHeader>
</SectionDescription>
</div>

<CardContent>
<ItemGroup className="grid gap-2">
<Item variant="outline">
<ItemMedia variant="icon" className="bg-blue-50">
<UserIcon className="text-blue-600" />
</ItemMedia>
<ItemContent>
<ItemTitle>Attendee research</ItemTitle>
<ItemDescription>
Who they are, their company, and role
</ItemDescription>
</ItemContent>
</Item>
<Item variant="outline">
<ItemMedia variant="icon" className="bg-blue-50">
<MailIcon className="text-blue-600" />
</ItemMedia>
<ItemContent>
<ItemTitle>Email history</ItemTitle>
<ItemDescription>
Recent conversations with this person
</ItemDescription>
</ItemContent>
</Item>
<Item variant="outline">
<ItemMedia variant="icon" className="bg-blue-50">
<LightbulbIcon className="text-blue-600" />
</ItemMedia>
<ItemContent>
<ItemTitle>Key context</ItemTitle>
<ItemDescription>
Important details from past discussions
</ItemDescription>
</ItemContent>
</Item>
</ItemGroup>
</CardContent>
<ItemGroup className="grid mt-6">
<Item>
<UserIcon className="text-blue-500" />
<ItemContent>
<ItemTitle>Attendee research</ItemTitle>
<ItemDescription>
Comment on lines +50 to +55
Copy link
Contributor

@baz-reviewer baz-reviewer bot Dec 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ItemGroup now renders three Items without the previous gap-2/outline styling, so there is no spacing or border between the cards (lines 50‑78). As written, the shadcn Item default variant and the new grid container leave the rows flush together, which loses the visual separation that the UI guidelines require (.cursor/rules/ui-components.mdc calls for responsive spacing using Tailwind utilities). The items need a gap-y and/or a visible variant to keep the rows distinct.

Suggested change
<ItemGroup className="grid mt-6">
<Item>
<UserIcon className="text-blue-500" />
<ItemContent>
<ItemTitle>Attendee research</ItemTitle>
<ItemDescription>
<ItemGroup className="grid mt-6 gap-y-2">
<Item variant="outline">
<UserIcon className="text-blue-500" />
<ItemContent>
<ItemTitle>Attendee research</ItemTitle>
<ItemDescription>

Finding type: AI Coding Guidelines

Who they are, their company, and role
</ItemDescription>
</ItemContent>
</Item>
<Item>
<MailIcon className="text-blue-500" />
<ItemContent>
<ItemTitle>Email history</ItemTitle>
<ItemDescription>
Recent conversations with this person
</ItemDescription>
</ItemContent>
</Item>
<Item>
<LightbulbIcon className="text-blue-500" />
<ItemContent>
<ItemTitle>Key context</ItemTitle>
<ItemDescription>
Important details from past discussions
</ItemDescription>
</ItemContent>
</Item>
</ItemGroup>

<CardFooter className="flex flex-col items-center gap-4">
<CardFooter className="flex flex-col items-center gap-4 mt-6">
{hasCalendarConnected ? (
<>
<MessageText>
Expand All @@ -97,6 +96,6 @@ export function BriefsOnboarding({
</>
)}
</CardFooter>
</div>
</Card>
);
}
Loading