From dd6393c1b2ec5aa5816fadd251dbd233728672d5 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Wed, 31 Dec 2025 13:03:40 +0200
Subject: [PATCH 1/3] adjust ui

---
 .../[emailAccountId]/briefs/Onboarding.tsx    | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx b/apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx
index c28cf5817b..f698dedb50 100644
--- a/apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx
@@ -6,6 +6,7 @@ import {
   CardFooter,
   CardTitle,
   CardDescription,
+  Card,
 } from "@/components/ui/card";
 import { MessageText } from "@/components/Typography";
 import { ConnectCalendar } from "@/app/(app)/[emailAccountId]/calendars/ConnectCalendar";
@@ -32,7 +33,7 @@ export function BriefsOnboarding({
   isEnabling?: boolean;
 }) {
   return (
-    <div className="mx-4 mt-10 max-w-2xl md:mx-auto">
+    <Card className="mx-4 mt-10 max-w-2xl md:mx-auto">
       <CardHeader>
         <CardTitle>Meeting Briefs</CardTitle>
         <CardDescription>
@@ -43,8 +44,11 @@ export function BriefsOnboarding({
       <CardContent>
         <ItemGroup className="grid gap-2">
           <Item variant="outline">
-            <ItemMedia variant="icon" className="bg-blue-50">
-              <UserIcon className="text-blue-600" />
+            <ItemMedia
+              variant="icon"
+              className="bg-gradient-to-b from-blue-50 to-blue-100 border-blue-50"
+            >
+              <UserIcon className="text-blue-500" />
             </ItemMedia>
             <ItemContent>
               <ItemTitle>Attendee research</ItemTitle>
@@ -54,8 +58,11 @@ export function BriefsOnboarding({
             </ItemContent>
           </Item>
           <Item variant="outline">
-            <ItemMedia variant="icon" className="bg-blue-50">
-              <MailIcon className="text-blue-600" />
+            <ItemMedia
+              variant="icon"
+              className="bg-gradient-to-b from-blue-50 to-blue-100 border-blue-50"
+            >
+              <MailIcon className="text-blue-500" />
             </ItemMedia>
             <ItemContent>
               <ItemTitle>Email history</ItemTitle>
@@ -65,8 +72,11 @@ export function BriefsOnboarding({
             </ItemContent>
           </Item>
           <Item variant="outline">
-            <ItemMedia variant="icon" className="bg-blue-50">
-              <LightbulbIcon className="text-blue-600" />
+            <ItemMedia
+              variant="icon"
+              className="bg-gradient-to-b from-blue-50 to-blue-100 border-blue-50"
+            >
+              <LightbulbIcon className="text-blue-500" />
             </ItemMedia>
             <ItemContent>
               <ItemTitle>Key context</ItemTitle>
@@ -97,6 +107,6 @@ export function BriefsOnboarding({
           </>
         )}
       </CardFooter>
-    </div>
+    </Card>
   );
 }

From 11da0ed975c8f31be02fd3709502b6a91272bc51 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Wed, 31 Dec 2025 13:14:25 +0200
Subject: [PATCH 2/3] adjust ui

---
 README.md                                     |   1 +
 .../[emailAccountId]/briefs/Onboarding.tsx    | 113 ++++++++----------
 2 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/README.md b/README.md
index c1edde231c..9d80512c37 100644
--- a/README.md
+++ b/README.md
@@ -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
 
diff --git a/apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx b/apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx
index f698dedb50..6c214d3053 100644
--- a/apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx
@@ -1,14 +1,11 @@
 "use client";
 
+import { CardFooter, Card } from "@/components/ui/card";
 import {
-  CardContent,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  Card,
-} 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";
@@ -17,9 +14,9 @@ import {
   ItemContent,
   ItemDescription,
   ItemGroup,
-  ItemMedia,
   ItemTitle,
 } from "@/components/ui/item";
+import Image from "next/image";
 
 export function BriefsOnboarding({
   emailAccountId,
@@ -33,62 +30,54 @@ export function BriefsOnboarding({
   isEnabling?: boolean;
 }) {
   return (
-    <Card 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-gradient-to-b from-blue-50 to-blue-100 border-blue-50"
-            >
-              <UserIcon className="text-blue-500" />
-            </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-gradient-to-b from-blue-50 to-blue-100 border-blue-50"
-            >
-              <MailIcon className="text-blue-500" />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>Email history</ItemTitle>
-              <ItemDescription>
-                Recent conversations with this person
-              </ItemDescription>
-            </ItemContent>
-          </Item>
-          <Item variant="outline">
-            <ItemMedia
-              variant="icon"
-              className="bg-gradient-to-b from-blue-50 to-blue-100 border-blue-50"
-            >
-              <LightbulbIcon className="text-blue-500" />
-            </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>
+              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>

From cd7e5b620c9c06c93d13dfb6be5799bb4c7fe094 Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Wed, 31 Dec 2025 13:19:11 +0200
Subject: [PATCH 3/3] close dialog on save

---
 .../assistant/settings/WritingStyleSetting.tsx               | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx b/apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
index ae885a9dbb..32e66884e3 100644
--- a/apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/assistant/settings/WritingStyleSetting.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useAction } from "next-safe-action/hooks";
 import { Button } from "@/components/ui/button";
@@ -58,6 +59,7 @@ function WritingStyleDialog({
   children: React.ReactNode;
   currentWritingStyle: string;
 }) {
+  const [open, setOpen] = useState(false);
   const { emailAccountId } = useAccount();
   const { mutate } = useEmailAccountFull();
 
@@ -77,6 +79,7 @@ function WritingStyleDialog({
         toastSuccess({
           description: "Writing style saved!",
         });
+        setOpen(false);
       },
       onError: (error) => {
         toastError({
@@ -92,7 +95,7 @@ function WritingStyleDialog({
   );
 
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>{children}</DialogTrigger>
       <DialogContent className="max-w-2xl">
         <DialogHeader>